simplestyle-js-plugin-postcss
v2.0.0
Published
PostCSS integration with simplestyle-js to provide helpful utility and additional features to the zero-dependency simplestyle base
Downloads
18
Maintainers
Readme
simplestyle-js-plugin-postcss ![Build Status](https://travis-ci.org/benduran/simplestyle-plugin-postcss.svg?branch=master)
A simplestyle-js posthook plugin for transforming the CSS generated by simplestyle-js
with PostCSS and PostCSS plugins
Installation
npm install simplestyle-js-plugin-postcss --save
Usage
import { createStyles, registerPostHook } from 'simplestyle-js';
import simplestylePostCSSPlugin from 'simplestyle-js-plugin-postcss';
registerPostHook(simplestylePostCSSPlugin(
[ /* Array of PostCSS plugins, like autoprefixer, cssnano, etc */ ],
{ /* postcss process options (optional) */ },
);
const styles = createStyles({
myButton: {
'&:hover': {
backgroundColor: 'red',
},
'&:active, &:focus': {
borderColor: 'blue',
},
backgroundColor: 'black',
border: '1px solid',
boxSizing: 'border-box',
color: 'white',
},
});
const btn = document.createElement('button');
btn.classList.add(styles.myButton); // button will have styles that were transformed with PostCSS
document.body.appendChild(btn);