Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sndrs/postcss-atomised
Atomise standard CSS
https://github.com/sndrs/postcss-atomised
atomic-css css postcss proof-of-concept
Last synced: 5 days ago
JSON representation
Atomise standard CSS
- Host: GitHub
- URL: https://github.com/sndrs/postcss-atomised
- Owner: sndrs
- Created: 2016-05-26T08:07:03.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-10-17T13:20:05.000Z (about 5 years ago)
- Last Synced: 2024-08-01T22:47:03.682Z (3 months ago)
- Topics: atomic-css, css, postcss, proof-of-concept
- Language: JavaScript
- Homepage: https://sndrs.github.io/atomised-css-repl
- Size: 150 KB
- Stars: 86
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# postcss-atomised
[](https://badge.fury.io/js/postcss-atomised) [](https://travis-ci.org/sndrs/postcss-atomised) [](https://coveralls.io/github/sndrs/postcss-atomised?branch=master) [](https://dependencyci.com/github/sndrs/postcss-atomised) [](https://david-dm.org/sndrs/postcss-atomised) [](https://david-dm.org/sndrs/postcss-atomised#info=devDependencies)
_This is probably not stable. It was initially developed for use on [the Guardian website](https://github.com/guardian/frontend), but it feels like it's the wrong solution to the problem of `bloat + complexity`. Leaving it here in case anyone finds it useful or we pick it up again._
---
[PostCSS](http://postcss.org) plugin that [atomises](http://www.creativebloq.com/css3/atomic-css-11619006) a standard set of CSS, and provides a json map from the original classes to the atomised ones.
Enables you to write 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).
## Example
Take your stylesheet…
```css
/* original.css */
.one {
background-color: red;
margin: 1rem;
}
.two {
background-color: red;
margin-top: 1rem;
}
@media (min-width: 100px) {
.two:hover {
background-color: hotpink;
}
}
```
Pass it through the plugin…
```javascript
// load the original CSS file and atomise it
import {readFileSync} from 'fs';
import postcss from 'postcss';
import atomised from 'postcss-atomised';
const css = readFileSync('./original.css', 'utf8');
const options = {};
postcss([atomised(options)]).process(css).then(result => {
// do something with `result`
});
```
`result.css` is a String containing the atomised CSS:
```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; }
}
```
You now also have a file called `atomised-map.json` in `cwd`.
```javascript
// atomised-map.json
{
"one": ["a", "b", "c"," d", "e"],
"two": ["a", "b", "f"]
}
```
This can be used to transform your templates.
```html
```
into…
```html
```
## Options
Type: `Object` | `Null`
No options are required. By default, a file called `atomised-map.json` will be written to `cwd` containing the atomised JSON map.
### `options.mapPath`
Type: (`String` | `Null`) _optional_
Alternative location for the atomised JSON map to be saved. `null` will prevent the output being written to disk.
### `options.mapHandler`
Type: (`Function`) _optional_
Callback function that receives one arguement – the JSON map object.
## Restrictions
- only single class selectors can be atomised (other selectors will pass straight through)
- multiple/duplicate and pseudo selectors/elements are fine
| Selector | Ok |
|---|---|
| `.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: |
| `.a:b { }` | :white_check_mark: |
| `.a, .b { }` | :white_check_mark: |
| `.a { } .a { }` | :white_check_mark: |
| `.a:hover { }` | :white_check_mark: |
## Development
Run `npm start` to run the test runner in watch mode, or `npm test` for a one-off.
Node 6 or greater is needed for development.
## Node.js 0.*
Node 4 or greater is needed to use the plugin.