BT
x Your opinion matters! Please fill in the InfoQ Survey about your reading habits!

Simplified CSS Preprocessing with restyle.js

by Andy Earnshaw on Feb 17, 2014 |

Andrea Giammarchi's restyle.js is a new, JavaScript-based, CSS preprocessor that can run on either the server (via Node.js) or in the browser. It touts itself as "a simplified CSS approach", generating all prefixed variations of CSS rules and properties and, if applicable, inserting them into the DOM.

There's no shortage of CSS preprocessors around, but Andrea claims there are none as lightweight that work in both the server and the client:

Before you think about "yet another CSS preprocessor", I'd like to inform you that I've asked around to few common, well known, CSS or general web developers and it looks like this little script was still missing ... once you'll realize what is this about, you'll probably wonder yourself "how come nobody has done this already?" My idea is that somebody probably did but I am not sure in 0.8KB minzipped and compatible with both server and client down to IE6 ... so here I am talking about restyle.

The library exposes a solitary method, restyle() , which accepts two arguments. The first is expected to be a JavaScript object, with a grammar familiar to both CSS and DOM style editing. For example,

 restyle({
    'body > div.my-div': {
        backgroundColor: 'goldenrod',
        backgroundImage: 'url(mybg.png)'
    }
}); 

This will produce the following CSS:

 body > div.my-div {
    background-color: goldenrod;
    background-url: url(mybg.png);
} 

We could also specify the JavaScript object in a different manner to achieve the same output:

 restyle({
    'body > div.my-div': {
        background: {
            color: 'goldenrod',
            image: 'url(mybg.png)'
        }
    }
}); 

Of course, this is nothing special and the reduction in markup so far, if any, is tiny. But restyle.js shines brighter when you're trying something that would be a little more tedious with standard CSS, like vendor prefixes. The second argument allows you to specify the vendor prefixes that will be generated in the output, for example:

 restyle({
    '.my-div': {
        transition: 'background-color 500ms ease';
        backgroundColor: '#00f';
    }
}, ['moz', 'webkit']); 

This results in the following generated CSS:

 .my-div {
    -webkit-transition: background-color 500ms ease;
    -moz-transition: background-color 500ms ease;
    transition: background-color 500ms ease;
    background-color: #00f;
} 

This comes especially in handy when writing animation rules; a few lines of code can be transformed into many lines of vendor prefixed at-rules and CSS properties with so little effort. On the server, omitting the second argument will result in no prefixes, while restyle.js run in the browser would generate all common vendor prefixes regardless of which browser is executing the code.

The restyle() function also returns a different result depending on the environment. In a Node.js script, it returns a string containing the resulting CSS. In the browser, however, the CSS is automatically inserted into the DOM to take immediate effect, and the return value is a handy little object containing the properties node (the resulting style element), css (a string containing the generated CSS), and a single method, remove() , which can be called to immediately remove the inserted styles from the DOM.

A basic example page is available that lets you play around with restyle.js by writing your own code and generating the result. As some comments on Andrea's blog pointed out, restyle.js is based on the same idea as a similar library, the larger and more full-featured AbsurdJS. At barely one tenth of the size, though, restyle is certainly lightweight and interesting enough to be worth a look. Take a look at the readme to get started using it.

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT