Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    postcss-jspublic

    PostCSS JS Build Status

    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

    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"
        }
    ]

    install

    npm i postcss-js

    Downloadsweekly downloads

    69,319

    version

    1.0.1

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar