A Rollup.js plugin to compile Stylus and inject CSS Modules
npm install rollup-plugin-stylus-css-modules
A Rollup.js plugin to compile Stylus and inject CSS Modules.
``bash`
$ npm install --save-dev rollup-plugin-stylus-css-modules
Add the following code to your project's rollup.config.js:
`js
import stylusCssModules from 'rollup-plugin-stylus-css-modules';
export default {
entry: 'index.js',
plugins: [
stylusCssModules({
output: 'styles.css'
})
]
};
`
`stylus`
.container
height 100%
`js
import styles from './styles.styl';
const container =
;
`Options
*
include, exclude: A minimatch pattern, or an array of minimatch patterns of including ID, or excluding ID (optional).
* output: Output destination (optional).
* If you specify as string, it will be the path to write the generated CSS.
* If you specify as function, call it passing the generated CSS as an argument.
* If you specify the false, CSS will not be output.
* If this option is not specified, the generated CSS will still be imported (See Use with other CSS plugins).
* sourceMap: If true is specified, source map to be embedded in the output CSS (default is true).
* fn: A function invoked with the Stylus renderer (it will be passed to use() function of the Stylus).Use with external tools
Combination with external tools, such as PostCSS works perfectly.
`js
stylusCssModules({
sourceMap: true,
output: (css) => {
return postcss([
// postcss' plugins...
]).process(css, {
map: true
}).then((result) => {
fs.writeFileSync('styles.css', result.css);
});
}
});
`Use with other CSS plugins
You can also use the Rollup.js plugin, such as rollup-plugin-postcss, rollup-plugin-css-only, etc.
`js
export default {
entry: 'index.js',
plugins: [
stylusCssModules(),
postcss()
]
};
``MIT