posthtml-atomizer
v1.0.2
Published
posthtml plugin to generate atomic css definitions using atomizer
Downloads
13
Readme
posthtml-atomizer
A PostHTML plugin to generate Atomic CSS definitions using Atomizer.
Contents
Install
Ensure that
posthtmlis installed already.Install the plugin:
$ npm install --save-dev posthtml-atomizerConfigure the plugin:
const posthtml = require('posthtml'); // ... posthtml([ require('posthtml-atomizer')({ path: './atomic.css' }) ]) // ...Use Atomizer's Atomic CSS classes in your HTML:
// 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; }
Options
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.
atomizer
These options are used to configure Atomizer itself.
atomizer.config
- Default:
{}
This option is used for configuring options such as breakpoints, custom suffixes, default classNames, etc.
atomizer.options
- Default:
{}
This option is used for configuring options such as rtl, namespace, ie, etc.
path
- Default:
'./atomic.css'
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.