1 | # ignore-styles
|
2 |
|
3 | [![Version][version-svg]][package-url] [![Build Status][travis-svg]][travis-url] [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url] [![Standard][standard-svg]][standard-url]
|
4 |
|
5 | A `babel/register` style hook to ignore style imports when running in Node. This
|
6 | is for projects that use something like Webpack to enable CSS imports in
|
7 | JavaScript. When you try to run the project in Node (to test in Mocha, for
|
8 | example) you'll see errors like this:
|
9 |
|
10 | SyntaxError: /Users/brandon/code/my-project/src/components/my-component/style.sass: Unexpected token (1:0)
|
11 | > 1 | .title
|
12 | | ^
|
13 | 2 | font-family: serif
|
14 | 3 | font-size: 10em
|
15 | 4 |
|
16 |
|
17 | To resolve this, require `ignore-styles` with your mocha tests:
|
18 |
|
19 | mocha --require ignore-styles
|
20 |
|
21 | See [DEFAULT_EXTENSIONS][default-extensions] for the full list of extensions
|
22 | ignored, and send a pull request if you need more.
|
23 |
|
24 | **Note:** This is not for use *inside* Webpack. If you want to ignore extensions in Webpack you'll want to use a loader like [ignore-loader]. This is for use in Node outside of your normal Webpack build.
|
25 |
|
26 | ## Installation
|
27 |
|
28 | $ npm install --save-dev ignore-styles
|
29 |
|
30 | ## More Examples
|
31 |
|
32 | To use this with multiple Mocha requires:
|
33 |
|
34 | mocha --require babel-register --require ignore-styles
|
35 |
|
36 | You can also use it just like `babel/register`:
|
37 |
|
38 | ```js
|
39 | import 'ignore-styles'
|
40 | ```
|
41 |
|
42 | In ES5:
|
43 |
|
44 | ```js
|
45 | require('ignore-styles')
|
46 | ```
|
47 |
|
48 | To customize the extensions used:
|
49 |
|
50 | ```js
|
51 | import register from 'ignore-styles'
|
52 | register(['.sass', '.scss'])
|
53 | ```
|
54 |
|
55 | To customize the extensions in ES5:
|
56 |
|
57 | ```js
|
58 | require('ignore-styles').default(['.sass', '.scss']);
|
59 | ```
|
60 |
|
61 | ## Custom handler
|
62 |
|
63 | By default, a no-op handler is used that doesn't actually do anything. If you'd
|
64 | like to substitute your own custom handler to do fancy things, pass it as a
|
65 | second argument:
|
66 |
|
67 | ```js
|
68 | import register from 'ignore-styles'
|
69 | register(undefined, () => ({styleName: 'fake_class_name'}))
|
70 | ```
|
71 |
|
72 | The first argument to `register` is the list of extensions to handle. Leaving it
|
73 | undefined, as above, uses the default list. The handler function receives two arguments, `module` and `filename`, directly
|
74 | from Node.
|
75 |
|
76 | Why is this useful? One example is when using something like
|
77 | [react-css-modules][react-css-modules]. You need the style imports to actually
|
78 | return something so that you can test the components, or the wrapper component
|
79 | will throw an error. Use this to provide test class names.
|
80 |
|
81 | Another use case would be to simply return the filename of an image so that it
|
82 | can be verified in unit tests:
|
83 |
|
84 | ```js
|
85 | const _ = require('lodash');
|
86 | const path = require('path');
|
87 |
|
88 | register(undefined, (module, filename) => {
|
89 | if (_.some(['.png', '.jpg'], ext => filename.endsWith(ext))) {
|
90 | module.exports = path.basename(filename);
|
91 | }
|
92 | })
|
93 | ```
|
94 |
|
95 | If the filename ends in '.png' or '.jpg', then the basename of the file is
|
96 | returned as the value of the module on import.
|
97 |
|
98 | ## License
|
99 |
|
100 | The MIT License (MIT)
|
101 |
|
102 | Copyright (c) 2015 Brainspace Corporation
|
103 |
|
104 | [travis-svg]: https://img.shields.io/travis/bkonkle/ignore-styles/master.svg?style=flat-square
|
105 | [travis-url]: https://travis-ci.org/bkonkle/ignore-styles
|
106 | [license-image]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
|
107 | [license-url]: LICENSE
|
108 | [downloads-image]: https://img.shields.io/npm/dm/ignore-styles.svg?style=flat-square
|
109 | [downloads-url]: http://npm-stat.com/charts.html?package=ignore-styles
|
110 | [version-svg]: https://img.shields.io/npm/v/ignore-styles.svg?style=flat-square
|
111 | [package-url]: https://npmjs.org/package/ignore-styles
|
112 | [standard-svg]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
|
113 | [standard-url]: http://standardjs.com/
|
114 | [default-extensions]: https://github.com/bkonkle/ignore-styles/blob/master/ignore-styles.js#L1
|
115 | [react-css-modules]: https://github.com/gajus/react-css-modules
|
116 | [ignore-loader]: https://www.npmjs.com/package/ignore-loader
|