PostCSS JS

PostCSS for CSS-in-JS and styles in JS objects.

For example, to use Stylelint or RTLCSS plugins in your workflow.

PostCSS JS Parser is built by Evil Martians, an American design and engineering consultancy for developer tools, AI, and cybersecurity startups.

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

GeezerVison

Latest commit

History

Folders and files

Repository files navigation

PostCSS JS

Usage

Processing

Compile CSS-in-JS to CSS

Compile CSS to CSS-in-JS

API

`sync(plugins): function`

`async(plugins): function`

`parse(obj): Root`

`objectify(root): object`

Troubleshoot

`Module parse failed`

About

Resources

Stars

Watchers

Forks

Sponsor this project

Used by

Contributors

Languages