Repository files navigation

A Rollup.js plugin to compile Stylus and injectCSS Modules.

$ npm install --save-dev rollup-plugin-stylus-css-modules

Add the following code to your project'srollup.config.js:

importstylusCssModulesfrom'rollup-plugin-stylus-css-modules';exportdefault{entry:'index.js',plugins:[stylusCssModules({output:'styles.css'})]};

.containerheight100%

importstylesfrom'./styles.styl';constcontainer=`<divpl-s1">${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).
  • If you specify asstring, it will be the path to write the generated CSS.
  • If you specify asfunction, call it passing the generated CSS as an argument.
  • If you specify thefalse, CSS will not be output.
  • If this option is not specified, the generated CSS will still be imported (SeeUse with other CSS plugins).
• 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).

Combination with external tools, such asPostCSS works perfectly.

stylusCssModules({sourceMap:true,output:(css)=>{returnpostcss([// postcss' plugins...]).process(css,{map:true}).then((result)=>{fs.writeFileSync('styles.css',result.css);});}});

You can also use the Rollup.js plugin, such asrollup-plugin-postcss,rollup-plugin-css-only, etc.

exportdefault{entry:'index.js',plugins:[stylusCssModules(),postcss()]};

MIT