postcss-js

What is postcss-js?

The postcss-js package allows you to use PostCSS, a tool for transforming CSS with JavaScript, in a JavaScript environment. This enables the processing of CSS styles with JavaScript objects, facilitating dynamic style generation and manipulation within JavaScript projects.

What are postcss-js's main functionalities?

Parsing CSS to JS Objects

This feature allows the conversion of CSS styles into JavaScript objects, making it easier to manipulate CSS properties and values programmatically.

const postcssJs = require('postcss-js');
const autoprefixer = require('autoprefixer');
const root = postcssJs.parse({ color: 'red' });
console.log(root);

Applying PostCSS Plugins

Enables the use of PostCSS plugins, such as autoprefixer, directly on JavaScript objects representing CSS styles, allowing for advanced CSS processing and manipulation.

const postcssJs = require('postcss-js');
const autoprefixer = require('autoprefixer');
const prefixer = postcssJs.sync([ autoprefixer ]); 
const prefixed = prefixer({ display: 'flex' });
console.log(prefixed);

Other packages similar to postcss-js

styled-components

Styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals to style your components. Unlike postcss-js, which focuses on transforming CSS with JavaScript, styled-components aim to enhance CSS for styling React component systems.

emotion

Emotion is a performant and flexible CSS-in-JS library that allows you to style applications quickly with string or object styles. It supports both the CSS and CSS-in-JS approaches, providing a more integrated styling solution for React applications compared to postcss-js, which is more focused on CSS transformation and manipulation.

tailwindcss

Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Unlike postcss-js, which is a tool for transforming CSS with JavaScript, Tailwind provides a set of utility classes to build custom designs directly in your markup, promoting a different approach to styling web applications.

README

PostCSS JS

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

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

Cannot resolve module 'fs'

By default, webpack resolve system node.js modules to empty file. But node option in webpack config can disable it.

If it is your case, please add to webpack config:

node: {
  fs: "empty"
}