Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mtojo/rollup-plugin-stylus-css-modules
A Rollup.js plugin to compile Stylus and inject CSS Modules
https://github.com/mtojo/rollup-plugin-stylus-css-modules
css-modules rollup-plugin stylus
Last synced: 2 months ago
JSON representation
A Rollup.js plugin to compile Stylus and inject CSS Modules
- Host: GitHub
- URL: https://github.com/mtojo/rollup-plugin-stylus-css-modules
- Owner: mtojo
- License: mit
- Created: 2016-02-03T14:15:31.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-20T01:12:42.000Z (over 7 years ago)
- Last Synced: 2024-10-04T09:14:37.329Z (2 months ago)
- Topics: css-modules, rollup-plugin, stylus
- Language: JavaScript
- Size: 17.6 KB
- Stars: 14
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - stylus-css-modules
README
# rollup-plugin-stylus-css-modules
[](https://travis-ci.org/mtojo/rollup-plugin-stylus-css-modules)
A Rollup.js plugin to compile Stylus and inject [CSS Modules](https://github.com/css-modules/css-modules).
## Installation
```bash
$ npm install --save-dev rollup-plugin-stylus-css-modules
```
## Usage
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'
})
]
};
```
### in Stylus
```stylus
.container
height 100%
```
### in JS
```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](#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](http://postcss.org/) 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](https://github.com/egoist/rollup-plugin-postcss), [rollup-plugin-css-only](https://github.com/thgh/rollup-plugin-css-only), etc.
```js
export default {
entry: 'index.js',
plugins: [
stylusCssModules(),
postcss()
]
};
```
## License
MIT