You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*`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`**preprocessCss**— in rare cases you may want to precompile styles, before they will be passed to the postcss pipeline. You should use **synchronous** transformations, since `require` function is synchronous.
36
-
*`function`**processCss**— in rare cases you may want to get compiled styles in runtime, so providing this option helps.
37
-
*`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.
38
-
*`string`**to**— provides `to` option to the [LazyResult instance](https://github.com/postcss/postcss/blob/master/docs/api.md#processorprocesscss-opts).
39
-
*`array`**use**— custom subset of postcss plugins.
40
-
*`array`**extensions**— attach the hook to additional file extensions (for example `['.scss']`).
30
+
## Usage
41
31
42
-
### Examples
32
+
In this section I've tried to cover the common cases of usage.
43
33
44
-
Basically you need to load this module before you start loading css-modules. Otherwise you'll get an exception. For example:
34
+
### Basic example
45
35
46
-
*icon.css*
47
-
```css
48
-
.icon
49
-
{
50
-
composes: fa fa-hand-peace-o from 'font-awesome/css/font-awesome.css';
51
-
}
52
-
```
36
+
Basically to attach the require hook you need to require this module. If you need to adjust it see the tuning section below.
In rare cases you may want to tune the require hook for better experience.
58
+
### Specify custom function to build generic names
70
59
71
60
```javascript
72
61
var hook =require('css-modules-require-hook');
73
-
var path =require('path');
62
+
63
+
// specify your custom function
64
+
functiongenerateScopedName(exportedName, path) {/* your code here */}
74
65
75
66
hook({
76
-
// setting root to the parent directory
77
-
rootDir:path.join(__dirname, '..')
67
+
generateScopedName: generateScopedName,
78
68
});
79
69
```
80
70
81
-
If you want to add any postcss plugins to the pipeline - you should use the `use` option.
71
+
### Using Stylus as a preprocessor
82
72
83
73
```javascript
84
74
var hook =require('css-modules-require-hook');
75
+
var stylus =require('stylus');
85
76
86
77
hook({
87
-
use: [
88
-
// adding CSS Next plugin
89
-
require('cssnext')(),
78
+
extensions: ['.styl'],
79
+
preprocessCss:function (css, filename) {
80
+
returnstylus(css)
81
+
.set('filename', filename)
82
+
.render();
83
+
},
84
+
});
85
+
86
+
// var styles = require('./demo.styl');
87
+
```
90
88
91
-
// adding basic css-modules plugins
92
-
require('postcss-modules-extract-imports'),
93
-
require('postcss-modules-local-by-default'),
94
-
require('postcss-modules-scope')
95
-
]
89
+
## Tuning (options)
90
+
91
+
To adjust the require hook you need to provide params to the exported function.
92
+
93
+
```javascript
94
+
var hook =require('css-modules-require-hook');
95
+
96
+
hook({
97
+
// append: [],
98
+
// generateScopedName: function () {},
99
+
// or any other options
100
+
// see the list below
96
101
});
97
102
```
103
+
104
+
### `append` array
105
+
106
+
Appends custom plugins to the end of the PostCSS pipeline.
107
+
108
+
### `prepend` array
109
+
110
+
Prepends custom plugins to the beginning of the PostCSS pipeline.
111
+
112
+
### `use` array
113
+
114
+
Provides the full list of PostCSS plugins to the pipeline. Providing this cancels `append`, `prepend`, `createImportedName`, `generateScopedName` options.
115
+
116
+
### `preprocessCss` function
117
+
118
+
In rare cases you may want to precompile styles, before they will be passed to the PostCSS pipeline. You should use **synchronous** transformations, since `require` function is synchronous.
119
+
120
+
### `processCss` function
121
+
122
+
In rare cases you may want to get compiled styles in runtime, so providing this option helps.
123
+
124
+
### `extensions` array
125
+
126
+
Attach the require hook to additional file extensions (for example `['.scss']`).
127
+
128
+
### `rootDir` string
129
+
130
+
Provides 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.
131
+
132
+
### `to` string
133
+
134
+
Provides `to` option to the [LazyResult instance](https://github.com/postcss/postcss/blob/master/docs/api.md#processorprocesscss-opts).
135
+
136
+
### `createImportedName` function
137
+
138
+
Short alias for the [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports) plugin's `createImportedName` option.
139
+
140
+
### `generateScopedName` function
141
+
142
+
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.
143
+
144
+
### `mode` string
145
+
146
+
Short alias for the [postcss-modules-local-by-default](https://github.com/css-modules/postcss-modules-local-by-default) plugin's option.
147
+
148
+
## Debugging
149
+
150
+
[debug](https://www.npmjs.com/package/debug) package is used for debugging. So to turn it on simply specify the **DEBUG** environment variable:
151
+
-`DEBUG=css-modules:fetch`— to see resolved paths to the files.
152
+
-`DEBUG=css-modules:setup`— to see the new options list.
0 commit comments