postcss-custom-props

PostCSS custom props

A PostCSS plugin to enable CSS Custom Properties (CSS variables).

Features

• Custom property definitions can use variables.
• Works with postcss-import plugin when this plugin is defined after it in the chain.
• Works with postcss-color-function plugin when this plugin is defined before it in the chain.

Limitations

This will only work as the spec sets out if you define your custom properties on :root. See the following discussions on pre-processing CSS properties from the postcss-custom-properties plugin repository:

• The cascade
• Media queries

Installation

npm install postcss-custom-props

Usage

Webpack

...
import atImport from 'postcss-import';
import colorFunction from 'postcss-color-function';
import customProps from 'postcss-custom-props';

export default {
  ...
  postcss: [
    atImport(),
    customProps(),
    colorFunction(),
  ],
};

Input

/* config.css */
:root {
  --brand-color: #f05;
}

/* component.css */
@import "./config.css";

:root {
  --compoment-bg-color: var( --brand-color );
  --component-font-color: color( var( --brand-color ) lighten( 30% ));
}

.component {
  background-color: var( --compoment-bg-color );
  color: var( --component-font-color );
}

Output

.component {
  background-color: #f05;
  color: #fcd;
}