Posthtml-atomizer NPM

posthtml-atomizer

A PostHTML plugin to generate Atomic CSS definitions using Atomizer.

Install the plugin:

$ npm install --save-dev posthtml-atomizer

Configure the plugin:

const posthtml = require('posthtml');

// ...

posthtml([
  require('posthtml-atomizer')({ path: './atomic.css' })
])

// ...

// in index.html

<html>
  <body>
    <div class="D(b) Va(t) Fz(20px)">Hello World!</div>
  </body>
</html>

Generate Atomic CSS definitions as a result:

// in generated atomic.css

.D(b) {
    display: block;
}
.Va(t) {
    vertical-align: top;
}
.Fz(20px) {
    font-size: 20px;
}

The options schema is the following:

An object with the following optional keys:
- atomizer - an object with the following optional keys:
  - config - the Atomizer configuration object used when generating CSS.
  - options - the Atomizer options object used when generating CSS
- path - a string file path where the generated CSS is written.