A Rollup.js plugin to compile Stylus and inject CSS Modules
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
script
test
.babelrc
.eslintignore
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
index.js
package.json

README.md

rollup-plugin-stylus-css-modules

Build Status

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).
  • 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.

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