benduran / simplestyle-plugin-postcss

PostCSS integration with simplestyle-js to provide helpful utility and additional features to the zero-dependency simplestyle base

simplestyle-js-plugin-postcss

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);

License

MIT