rework

rework (GitHub: reworkcss/rework, License: MIT) is a tool for CSS manipulations built on css, allowing you to automate vendor prefixing, create your own properties, inline images, anything you can imagine! Also works in the browser.

1
npm install rework

Originally written by TJ Holowaychuk, rework is a module for working with CSS. Just like esprima (GitHub: ariya/esprima, License: BSD 4-Clause) for JavaScript, rework allows you to change and extend CSS, basically take it to a whole new level.

Example

To get an idea of how to use rework, take a look at one of the many plugins. A good example would be rework-imagesize (GitHub: simme/rework-imagesize, License: MIT) plugin.

1
2
3
4
5
6
var rework = require('rework');
var size   = require('rework-imagesize');
var css = rework(str)
  .use(size('path/to/images/folder'))
  .toString();

Using the above JavaScript. This:

1
2
3
4
5
h1 {
  background: url('myimage.png');
  imgsize: myimage.png;
  text-indent: 100%;
}

Would produce something like:

1
2
3
4
5
6
h1 {
  background: url('myimage.png');
  text-indent: 100%;
  height: 201px;
  width: 300px;
}

Rework Github account has a good number of modules to do various things to your CSS. I also like the idea of using rework as a post processor for your favourite dynamic CSS language, such as LESSStylus or SASS.

Curious what is your favourite dynamic CSS framework?

Image borrowed from horrible logos and isn’t the official logo 🙂

Post navigation

Leave a comment

Leave a Reply

Your email address will not be published.