|
1 | 1 | css-modules-require-hook
|
2 | 2 | ========================
|
3 | 3 |
|
4 |
| -Automatically compiles a CSS Module to a low-level interchange format called ICSS or [Interoperable CSS](https://github.com/css-modules/icss). |
| 4 | +Summary |
5 | 5 |
|
6 |
| -One of the ways you can compile [CSS Modules](https://github.com/css-modules/css-modules) to the ICSS format is through the require hook. The require hook will bind itself to node's require and automatically compile files on the fly. This is similar to Babel's [babel/register](https://babeljs.io/docs/usage/require/). |
| 6 | +## What is CSS Modules |
7 | 7 |
|
8 |
| -## Requirements |
| 8 | +Summary |
9 | 9 |
|
10 |
| -To use this tool we require postcss and few plugins to be installed on your project. See the list below: |
| 10 | +## Features |
11 | 11 |
|
12 |
| -- `"postcss": "4.x"` |
13 |
| -- `"postcss-modules-extract-imports": "0.x"` |
14 |
| -- `"postcss-modules-local-by-default": "0.x"` |
15 |
| -- `"postcss-modules-scope": "0.x"` |
16 |
| - |
17 |
| -## Install |
18 |
| - |
19 |
| -```bash |
20 |
| -$ npm i css-modules-require-hook |
21 |
| -``` |
| 12 | +Compiling in runtime, universal apps |
22 | 13 |
|
23 | 14 | ## Usage
|
24 | 15 |
|
25 |
| -```javascript |
26 |
| -require('css-modules-require-hook'); |
27 |
| -``` |
28 |
| - |
29 |
| -## Available options |
30 |
| - |
31 |
| -Providing additional options allows you to get advanced experience. See the variants below. |
32 |
| - |
33 |
| -```javascript |
34 |
| -var hook = require('css-modules-require-hook'); |
35 |
| -hook({ /* options */ }); |
36 |
| -``` |
37 |
| - |
38 |
| -### `rootDir` option |
39 |
| - |
40 |
| -Aliases are `root`, `d`. |
41 |
| - |
42 |
| -Absolute path to your project's root directory. This is optional but providing it will result in better generated classnames. It can be obligatory, if you run require hook and build tools, like [css-modulesify](https://github.com/css-modules/css-modulesify) from different working directories. |
43 |
| - |
44 |
| -### `use` option |
| 16 | +### Requirements |
45 | 17 |
|
46 |
| -Alias is `u`. |
| 18 | +To use this tool we require [Node.js](https://github.com/nodejs/node) v0.12.x (or higher) and several modules to be installed. |
47 | 19 |
|
48 |
| -Custom list of plugins. This is optional but helps you to extend list of basic [postcss](https://github.com/postcss/postcss) plugins. Also helps to specify options for particular plugins. |
| 20 | +- [postcss](https://github.com/postcss/postcss) version 4 or higher |
| 21 | +- [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports) |
| 22 | +- [postcss-modules-local-by-default](https://github.com/css-modules/postcss-modules-local-by-default) |
| 23 | +- [postcss-modules-scope](https://github.com/css-modules/postcss-modules-scope) |
49 | 24 |
|
50 |
| -### `createImportedName` option |
| 25 | +### Installation |
51 | 26 |
|
52 |
| -Alias for the `createImportedName` option from the [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports) plugin. This is optional. Won't work if you `use` option. |
| 27 | +```bash |
| 28 | +$ npm i css-modules-require-hook |
| 29 | +``` |
53 | 30 |
|
54 |
| -### `generateScopedName` option |
| 31 | +### Tuning (options) |
55 | 32 |
|
56 |
| -Custom function to generate class names. This is optional. Alias for the `generateScopedName` option from the [postcss-modules-scope](https://github.com/css-modules/postcss-modules-scope) plugin. Won't work if you `use` option. |
| 33 | + * `function` **createImportedName** — short alias for the [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports) plugin's `createImportedName` option. |
| 34 | + * `function` **generateScopedName** — short alias for the [postcss-modules-scope](https://github.com/css-modules/postcss-modules-scope) plugin's option. Helps you to specify the custom way to build generic names for the class selectors. |
| 35 | + * `function` **processCss** — in rare cases you may want to get compiled styles in runtime, so providing this option helps. |
| 36 | + * `string` **rootDir** — absolute path to the project directory. Providing this will result in better generated class names. It can be obligatory, if you run require hook and build tools (like [css-modulesify](https://github.com/css-modules/css-modulesify)) from different working directories. |
| 37 | + * `string` **to** — provides `to` option to the [LazyResult instance](https://github.com/postcss/postcss/blob/master/docs/api.md#processorprocesscss-opts). |
| 38 | + * `array` **use** — custom subset of postcss plugins. |
57 | 39 |
|
58 |
| -### `mode` option |
| 40 | +### Examples |
59 | 41 |
|
60 |
| -Alias for the `mode` option from the [postcss-modules-local-by-default](https://github.com/css-modules/postcss-modules-local-by-default) plugin. This is optional. Won't work if you `use` option. |
| 42 | +Basically you need to require this plugin before other requires for your styles will occur. |
61 | 43 |
|
62 |
| -## Examples |
| 44 | +```javascript |
| 45 | +require('css-modules-require-hook'); |
| 46 | +// ... |
| 47 | +``` |
63 | 48 |
|
64 |
| -If you want to add custom functionality, for example [CSS Next](http://cssnext.io/setup/#as-a-postcss-plugin) plugin, you should provide the `use` option. |
| 49 | +In rare cases you may want to tune the require hook for better experience. |
65 | 50 |
|
66 | 51 | ```javascript
|
67 | 52 | var hook = require('css-modules-require-hook');
|
| 53 | +var path = require('path'); |
68 | 54 |
|
69 | 55 | hook({
|
70 |
| - use: [ |
71 |
| - // adding CSS Next plugin |
72 |
| - require('cssnext')(), |
73 |
| - |
74 |
| - // adding basic css-modules plugins |
75 |
| - require('postcss-modules-extract-imports'), |
76 |
| - require('postcss-modules-local-by-default'), |
77 |
| - require('postcss-modules-scope') |
78 |
| - ] |
| 56 | + // setting root to the parent directory |
| 57 | + rootDir: path.join(__dirname, '..') |
79 | 58 | });
|
80 | 59 | ```
|
0 commit comments