postcss/postcss-js

Name: postcss-js

Owner: PostCSS

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

Created: 2015-10-13 19:44:56.0

Updated: 2018-05-23 22:22:52.0

Pushed: 2018-04-11 04:07:45.0

Homepage: null

Size: 181

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

PostCSS JS

<img align=“right” width=“95” height=“95”

 title="Philosopher?s stone, logo of PostCSS"
 src="http://postcss.github.io/postcss/logo.svg">

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

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

Usage

Processing

prefixer = postcssJs.sync([ autoprefixer ]);

style = prefixer({
display: 'flex'


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

Compile CSS-in-JS to CSS

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


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

Compile CSS to CSS-in-JS

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

cssJs.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:

css().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:

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