stylus-brunch
Adds Stylus support to Brunch.
The plugin includes nib cross-browser mixins.
Usage
Install the plugin via npm with npm install --save-dev stylus-brunch
.
Options
You don't need to specify any options by default.
Use Plugin Middleware
You can include Stylus plugins with a config directive
config.plugins.stylus.plugins
(array) with paths to require the needed
plugins. You will have to include your plugin dependencies in package.json
.
moduleexports = // ... plugins: stylus: plugins: 'my-stylus-plugin' ;
If the plugin is module based you can import a specific member as a subarray.
modulsexports = // ... plugins: stylus: plugins: 'my-stylus-plugin' 'my-module-plugin' 'member' ;
Alternatively, you can pass a function.
modulsexports = // ... plugins: stylus: plugins: browsers: 'last 3 versions' ;
Options
You can import your modules or Stylus sheets with a config directive
config.plugins.stylus.imports
(array) with paths to your modules.
modulsexports = // ... plugins: stylus: imports: '' ;
Allow stylus files to include plain-css partials:
modulsexports = // ... plugins: stylus: includeCss: true ;
Debugging
Enable line number comments or FireStylus for Firebug debug messages (both are off by default)
modulsexports = // ... plugins: stylus: linenos: true firebug: true ;
CSS Modules
Starting Brunch <unreleased>
, you can use CSS Modules with stylus-brunch. To enable it, change your config to:
moduleexports = // ... plugins: stylus: modules: true ;
Then, author your styles like you normally would:
.title font-size: 32px
And reference CSS class names by requiring the specific style into your javascript:
var style = ; <h1 className=styletitle>Yo</h1>
Note: enabling cssModules
does so for every stylesheet in your project, so it's all-or-nothing. Even the files you don't require will be transformed into CSS modules (aka will have obfuscated class names, like turn .title
into ._title_fdphn_1
).
License
The MIT License (MIT)