Highly customizable Stylus compiler plugin for Component

Component Stylus Plugin

Plugin for component/builder to enable the direct use of stylus with components.

var Builder  = require('component-builder'),
stylusPlugin = require('component-stylus-plugin');

var builder = new Builder('.');
builder.use(stylusPlugin);, res) {
  write('public/app.js', res.require + res.js);
  write('public/app.css', res.css);

Component Stylus Plugin is highly customizable and exhibits a lot of the options that stylus itself has.

Minfies the output of the stylus files that are being compiled

stylusPlugin.compress = false

Adds line numbers as comments to the CSS being output. Very helpful for debugging.

stylusPlugin.linenos = true

Adds support for Firebug's Stylus plugin for Firefox

stylusPlugin.firebug = false

Allows you to import stylus files into your stylus files before compiling. Useful for custom mixins or global variable definitions. You must provide a full path to the files.

stylusPlugin.imports = [__dirname + '/../globals/variableDefinitions.styl',
                        __dirname + '/../globals/customMixins.styl']

If you don't want to have to define imported files in the stylusPlugin.imports option, it is possible to import stylus file from a component using @import "componentName/fileName"

For instance:

  "local": [
@import "base-styles/animation-mixin";
.foo {
  position: relative;

There is an example in the tests.

However, you must be careful to not import files containing CSS properties, otherwise they will be duplicated in the output. Only import files containing variables, placeholder selectors, functions or mixins.

Allow @import statements to load up regular CSS.

stylusPlugin.includeCSS = false

Add additional paths to be searched for @import statements

stylusPlugin.paths = [__dirname + '/../junkDrawer',
                      __dirname + '/../someOtherPlace']

Load up any additional plugins that you want to use.

var nib = require('nib')();