reworker
Simple way to use Rework with a Grunt-like config. It's kind of like middleware for CSS.
- Easily rework your CSS using a CLI
- Use a Grunt-like config to add middleware to Rework
- Built-in support for minifying CSS
- Supports css-whitespace
- Build variants for various browsers (usually just oldIE)
Get it
npm install -g reworker
Usage
Reworker creates a Rework instance for you from stdin, passes this to a config, and then writes to stdout. It also
helps by having built-in support for minifying CSS. It's sort of like a Gruntfile.js
.
Let's say you have a styles.css
file. Add a rework.js
file next to it:
module { return css;};
Then run reworker:
reworker < styles.css > build.css
By default, this config isn't doing much. But now you can load up some Rework
plugins in that config and rework.use
them.
Example: Autoprefixer
var autoprefixer = require('autoprefixer');
module.exports = function(css){
css.use(autoprefixer.rework(["last 2 versions"]));
return css;
};
Example: Rework built-ins
You can use the plugins that come bundled with Rework:
module.exports = function(css, rework){
css.use(rework.inline('./'));
css.use(rework.ease());
css.use(rework.colors());
css.use(rework.references());
return css;
};
Example: Mixins/Custom Properties
You can use the rework.mixin
function to create custom properties:
module{ css;};
Example: Custom Functions
You can use the rework.function
method to define custom CSS functions
module{ css;};
Variants
You can pass a variant to reworker:
reworker -v ie < style.css
This can be accessed via rework.variant
from within the config. This lets
you change the middleware options that are used based on any variant so you
can have multiple builds. This could include mobile versions, retina versions etc.
ifcssvariant === "ie" css;
Options
Run reworker -h
for a list of options
Example Usage
var autoprefixer = vars = inherit = ; module { // Could make this a module and access it with client-side JS too var variables = 'base': 16 'baseline': 21 'baseFontSize': '16px' 'baseLineHeight': '21px' ; // Replace variables in the CSS rework; // Declare mixins // These are simple properties that are replaced // with a bunch of other properties. Just return them // from the function. rework; // Declare functions rework; // Retina background images ifoptionsvariant !== 'ie8' rework; // Auto-prefix properties and values ifoptionsvariant === 'ie8' rework; else rework; // Allow selector extending. This comes at the very // end so that we can extend any of the classes that // have been generated above rework; return rework;};