posthtml-atomizer

A PostHTML plugin to generate Atomic CSS definitions using Atomizer.

Install

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.

These options are used to configure Atomizer itself.

This option is used for configuring options such as breakpoints, custom suffixes, default classNames, etc.

This option is used for configuring options such as rtl, namespace, ie, etc.

This option is used to configure where the plugin will write the CSS Atomizer generates.

NOTE: If Atomizer does not generate any CSS, a blank file will still be created.

NOTE: If a file already exists at this location then it will be overwritten.