postcss-js

    3.0.3 • Public • Published

    PostCSS JS

    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.

    Sponsored by Evil Martians

    Usage

    Processing

    const postcssJs = require('postcss-js')
    const autoprefixer = require('autoprefixer')
     
    const prefixer = postcssJs.sync([ autoprefixer ])
     
    const style = prefixer({
      userSelect: 'none'
    })
     
    style //=> {
          //     WebkitUserSelect: 'none',
          //        MozUserSelect: 'none',
          //         msUserSelect: 'none',
          //           userSelect: 'none'
          //   }

    Compile CSS-in-JS to CSS

    const postcss = require('postcss')
    const postcssJs = require('postcss-js')
     
    const 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

    const postcss = require('postcss')
    const postcssJs = require('postcss-js')
     
    const css  = '--text-color: #DD3A0A; @media screen { z-index: 1; color: var(--text-color) }'
    const root = postcss.parse(css)
     
    postcssJs.objectify(root) //=> {
                              //     '--text-color': '#DD3A0A',
                              //     '@media screen': {
                              //       zIndex: '1',
                              //       color: 'var(--text-color)'
                              //     }
                              //   }

    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

    1,279,654

    Version

    3.0.3

    License

    MIT

    Unpacked Size

    11.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • ai