posthtml-atomizer
A PostHTML plugin to generate Atomic CSS definitions using Atomizer.
Contents
Install
-
Ensure that
posthtml
is installed already. -
Install the plugin:
$ npm install --save-dev posthtml-atomizer -
Configure the plugin:
const posthtml = ;// ...// ... -
Use Atomizer's Atomic CSS classes in your HTML:
// in index.htmlHello World! -
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.