gem-hunter
Language: JavaScript
A Rollup.js plugin to compile Stylus and inject CSS Modules
A Rollup.js plugin to compile Stylus and inject CSS Modules.
$ npm install --save-dev rollup-plugin-stylus-css-modules
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' }) ] };
.container height 100%
import styles from './styles.styl'; const container = `<div class="${styles.container}">...</div>`;
include, exclude: A minimatch pattern, or an array of minimatch patterns of including ID, or excluding ID (optional).output: Output destination (optional).
string, it will be the path to write the generated CSS.function, call it passing the generated CSS as an argument.false, CSS will not be output.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).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); }); } });
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() ] };
MIT