rollup-plugin-stylus-css-modules
v1.5.0
Published
A Rollup.js plugin to compile Stylus and inject CSS Modules
Downloads
295
Readme
rollup-plugin-stylus-css-modules
A Rollup.js plugin to compile Stylus and inject CSS Modules.
Installation
$ npm install --save-dev rollup-plugin-stylus-css-modules
Usage
Add the following code to your project's rollup.config.js
:
import stylusCssModules from 'rollup-plugin-stylus-css-modules';
export default {
entry: 'index.js',
plugins: [
stylusCssModules({
output: 'styles.css'
})
]
};
in Stylus
.container
height 100%
in JS
import styles from './styles.styl';
const container = `<div class="${styles.container}">...</div>`;
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).
- If you specify as
sourceMap
: Iftrue
is specified, source map to be embedded in the output CSS (default istrue
).fn
: A function invoked with the Stylus renderer (it will be passed touse()
function of the Stylus).
Use with external tools
Combination with external tools, such as PostCSS works perfectly.
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.
export default {
entry: 'index.js',
plugins: [
stylusCssModules(),
postcss()
]
};
License
MIT