rework-modules v0.1.10
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