liuyuehe92 / postcss-js

PostCSS for React Inline Styles, Free Style and other CSS-in-JS

PostCSS JS

PostCSS for React Inline Styles, Radium, Free Style and other CSS-in-JS.

For example, to use Autoprefixer, RTLCSS or postcss-write-svg plugins in your workflow.

Usage

Processing

let prefixer = postcssJs.sync([ autoprefixer ]);

let style = prefixer({
    display: 'flex'
});

style //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }

Compile CSS-in-JS to CSS

let style = {
    top: 10,
    '&:hover': {
        top: 5
    }
};

postcss().process(style, { parser: postcssJs }).then( (result) => {
    result.css //=> top: 10px;
               //   &:hover { top: 5px; }
})

Compile CSS to CSS-in-JS

let css  = '@media screen { z-index: 1 }'
let root = postcss.parse(css);

postcssJs.objectify(root) //=> { '@media screen': { zIndex: '1' } }

API

sync(plugins): function

Create PostCSS processor with simple API, but with only sync PostCSS plugins support.

Processor is just a function, which takes one style object and return other.

async(plugins): function

Same as sync, but also support async plugins.

Returned processor will return Promise.

parse(obj): Root

Parse CSS-in-JS style object to PostCSS Root instance.

It converts numbers to pixels and parses Free Style like selectors and at-rules:

{
    '@media screen': {
        '&:hover': {
            top: 10
        }
    }
}

This methods use Custom Syntax name convention, so you can use it like this:

postcss().process(obj, { parser: postcssJs })

objectify(root): object

Convert PostCSS Root instance to CSS-in-JS style object.

Troubleshoot

Webpack may need some extra config for some PostCSS plugins.

Module parse failed

Autoprefixer and some other plugins need a json-loader to import data.

So, please install this loader and add to webpack config:

loaders: [
    {
        test: /\.json$/,
        loader: "json-loader"
    }
]

Cannot resolve module 'fs'

By default, webpack resolve system node.js modules to empty file. But node option in webpack config can disable it.

If it is your case, please add to webpack config:

node: {
  fs: "empty"
}