Reworkcss is an easy to extend CSS processor that has some cool features I want to explore. Lets start by installing it:

1
2
3
mkdir ~/rework
cd ~/rework
npm install rework

Rework has a very simple API. It receives a string of CSS code and it outputs a rework object. You can then run plugins on this instance and finally output the result:

1
2
3
4
5
6
var rework = require('rework');
var plugin = require('plugin');

rework({source: 'style.css'})
  .use(plugin)
  .toString();

The interesting part happens on the plugins so lets look at some of the most interesting ones.

at2x

1
npm install rework-plugin-at2x

Create a file called styles.css:

1
2
3
.logo {
  background-image: url('component.png') at-2x;
}

And create a rework.js file:

1
2
3
4
5
6
7
8
9
var rework = require('rework');
var at2x = require('rework-plugin-at2x');
var fs = require('fs');

var file = fs.readFileSync('./style.css', 'utf8');

var out = rework(file).use(at2x()).toString();

console.log(out);

Then run:

1
node rework.js

And you’ll get this result:

1
2
3
4
5
6
7
8
9
10
.logo {
  background-image: url('component.png');
}

@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .logo {
    background-image: url("component@2x.png");
    background-size: contain;
  }
}

colors

1
npm install rework-plugin-colors

Helper for writing colors in the form: rgba(#000, .3)

style.css:

1
2
3
.logo {
  background-color: rgba(#000, .5);
}

rework.js:

1
2
3
4
5
6
7
8
9
var rework = require('rework');
var colors = require('rework-plugin-colors');
var fs = require('fs');

var file = fs.readFileSync('./style.css', 'utf8');

var out = rework(file).use(colors()).toString();

console.log(out);

output:

1
2
3
.logo {
  background-color: rgba(0, 0, 0, .5);
}

clearfix

1
npm install rework-clearfix

Easily add clearfix to a container.

style.css:

1
2
3
.container {
  clear: fix;
}

rework.js:

1
2
3
4
5
6
7
8
9
10
11
var rework = require('rework');
var cf = require('rework-clearfix');
var fs = require('fs');

var file = fs.readFileSync('./style.css', 'utf8');

// Note that this is cf and not cf()
// Plugins don't seem to be standardized
var out = rework(file).use(cf).toString();

console.log(out);

output:

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  *zoom: 1;
}

.container:before,
.container:after {
  content: " ";
  display: table;
}

.container:after {
  clear: both;
}

inherit

1
npm install rework-inherit

Allows for extend functionality similar to that of sass and less.

style.css:

1
2
3
4
5
6
7
.some {
  color: #f00;
}

.other {
  inherit: .some;
}

rework.js:

1
2
3
4
5
6
7
8
9
var rework = require('rework');
var inherit = require('rework-inherit');
var fs = require('fs');

var file = fs.readFileSync('./style.css', 'utf8');

var out = rework(file).use(inherit()).toString();

console.log(out);

output:

1
2
3
4
.some,
.other {
  color: #f00;
}

For more complex examples look at the rework-inherit documentation.

function

1
npm install rework-plugin-function

Allows you to create custom functions that can be used in your css.

style.css:

1
2
3
.thing {
  background-image: myImage(tacos);
}

rework.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var rework = require('rework');
var func = require('rework-plugin-function');
var fs = require('fs');

var file = fs.readFileSync('./style.css', 'utf8');

var out = rework(file).use(func({myImage: myImage}))
    .toString();

function myImage(img) {
  return 'url(/img/path/' + img + '.png)';
}

console.log(out);

output:

1
2
3
.thing {
  background-image: url(/img/path/tacos.png);
}

More

You can find more plugins in npm by searching for the rework keyword.

[ css  productivity  programming  ]
Autotools productivity programming
Database migrations in Beego productivity programming
Golang: Dependency management done wrong productivity programming
Using Webpack with React productivity programming
Quick Vim setup productivity programming