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