postcss-atomised

“This is under active, initial developement for use on https://github.com/guardian/frontend and is not yet stable. It will get a proper 1.0.0 release when it is.” – :construction_worker:

---

PostCSS plugin that atomises a standard set of CSS, and provides a json map from the original classes to the atomic ones.

It will turn this:

.one {
    background-color: red;
    margin: 1rem;
}
.two {
    background-color: red;
    margin-top: 1rem;
}
@media (min-width: 100px) {
    .two:hover {
        background-color: hotpink;
    }
}

into this atomised css:

.a { background-color: red; }
.b { margin-top: 1rem; }
.c { margin-right: 1rem; }
.d { margin-bottom: 1rem; }
.e { margin-left: 1rem; }
@media (min-width: 100px) {
 .f:hover { background-color: hotpink; }
}

and this json map:

{
  "one": ["a", "b", "c"," d", "e"],
  "two": ["a", "b", "f"]
}

The idea is that in development, you leave your big stylesheet alone, with sourcemaps etc all intact. In production though, you could inline the atomic CSS and then using the json map, transform the following:

<div class="one"></div>
<div class="two"></div>

into:

<div class="a b c d e f"></div>
<div class="a c g h"></div>

This should mean you can the get benefit of writing CSS in an insolated, super-modular fashion without worrying about the bloat of duplication (the only way you could serve a smaller stylesheet would be to use fewer styles).

Restrictions

• only single class selectors can be atomised (other selectors will pass straight through)
• pseudo selectors/elements are fine
• multiple/duplicate selectors are fine

Selector	Ok
.a:b { }	:white_check_mark:
.a, .b { }	:white_check_mark:
.a { }; .a { }	:white_check_mark:
.a .b { }	:x:
.a.b { }	:x:
a { }	:x:
a b { }	:x:
#a { }	:x:
a[b] { }	:x:
a > b { }	:x:
a + b { }	:x:
a ~ b { }	:x:
*	:x:

Usage

import postcss from 'postcss';
import atomised from 'postcss-atomised';

const options = {
    jsonPath: 'path/to/json' // atomic map is written to path/to/json.json
};

postcss([atomised(options)]).process(css).then(result => {
    // result.css => atomised css
});

Development

Run npm start to run the Ava test runner in watch mode, or npm test for a one-off.

Node.js 0.10

As it's a PostCSS plugin, their caveat about v0.10 applies.