1.1.2 • Published 10 years ago

postcss-custom-props v1.1.2

Weekly downloads
10
License
ISC
Repository
github
Last release
10 years ago

PostCSS custom props

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

Features

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:

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;
}
1.1.2

10 years ago

1.1.1

10 years ago

1.1.0

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago