Skip to content

postcss/postcss-js

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

PostCSS JS

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

For example, to use Stylelint or RTLCSS 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"
  }
]

About

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

Resources

License

Stars

Watchers

Forks

Sponsor this project