PostCSS for CSS-in-JS and styles in JS objects.
For example, to use Stylelint or RTLCSS plugins in your workflow.
Sponsored by Evil Martiansconst 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' // }
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; } })
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)' // } // }
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.
Same as sync, but also support async plugins.
Returned processor will return Promise.
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 })
Convert PostCSS Root instance to CSS-in-JS style object.
Webpack may need some extra config for some PostCSS plugins.
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" } ]