README

rework-modules

Rework plugin for modular css.

rework-modules allows you to export and require other css modules and easily share variables and extensions.

See the tests for some examples.

Installation

$ npm install rework-modules

You can also try the rework-modules component plugin for component build integration.

Usage

rework-modules expects an object as an argument that contains functions to load content. It also needs an index to be told where to start loading. For example, let's say we have the following directory structure:

$ tree
.
├── my-app
│   ├── index.styl
│   └── other-styles.styl
├── my-theme
│   ├── index.styl

We would need to pass an object like the following:

var rework = require('rework-modules');
var read = require('fs').readFileSync;

function load(file) {
  return function() {
    return read(file, 'utf8');
  }
}

var modules = {
  'index': 'my-app/index',
  'my-app': 'my-app/index',
  'my-app/index': load('my-app/index.styl'),
  'my-app/other-styles': load('my-app/other-styles.styl'),
  'my-theme': 'my-theme/index',
  'my-theme/index': load('my-theme/index.styl') }
};

var out = rework(modules);

You can also specify the main style as a second parameter:

var out = rework(modules, 'my-app/other-styles');

The value returned is the Rework object and can easily be extended like you're used to:

var out = rework(modules)
  .use(myReworkPlugin())
  .toString();

NOTE The css-whitespace plugin is already included.

Syntax

:locals

:locals {
  my-local-variable: url(http://example.com/image.png);
}

.image {
  background-image: $my-local-variable;
}

:exports

:locals {
  my-local-color: blue;
}

%my-placeholder {
  background-color: red;
}

:exports {
  color: $my-local-color;
  cool-background: %my-placeholder;
  static-value: #ccc;
}

:require

:require {
  other-module: other-module;
}

Once a module is required we can start using the exported variables from it:

.my-class {
  color: $other-module/color;
}

You can also use exported placeholders if you've included the inherit plugin:

.my-class {
  extend: $other-module/placeholder;
}

:content

By default the content of a required module is not included. To include it use :content:

:require {
  other-module: other-module;
}

.my-class {
  color: teal;
}

:content {
  from: $other-module;
}

.my-other-class {
  font-family: ComicSans;
}

Tests

$ npm test

Usage no npm install needed!