Skip to content
PostCSS plugin that transforms custom property registration in CSS to JS
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENCE
README.md
index.js
package.json
test.js
yarn.lock

README.md

postcss-register-custom-props

Build Status npm version npm

PostCSS plugin that transforms custom property registration in CSS to JS.

According to the current "Custom Properties and Values API Level 1" specification you can register custom property with JavaScript, like:

CSS.registerProperty({
  name: "--highlight-color",
  syntax: "<color>",
  initialValue: "red",
  inherits: false
});

There is a proposal to the "Custom Properties and Values API Level 2" specification to make it possible to do the same in CSS:

@property --highlight-color {
  syntax: '<color>';
  initial-value: red;
  inherits: false;
}

This PostCSS plugin allows you to declare custom property in CSS and generate JavaScript file that contains registrations.

Input:

@property --theme {
  syntax: '<color>+';
  initial-value: #fff;
  inherits: true;
}

Output:

if ("registerProperty" in CSS) {
  CSS.registerProperty({
    name: "--theme",
    syntax: "<color>+",
    initialValue: "#fff",
    inherits: true
  });
}

Installation

  • npm: npm install --save-dev postcss-register-custom-props

  • yarn: yarn add -D postcss-register-custom-propsk

Usage

postcss([ require('postcss-register-custom-props')( /* options */ ) ])

See [PostCSS] docs for examples of your environment.

Options

output

Specifies custom properties JavaScript file path and name. Defaults to ./custom-properties.js.

You can’t perform that action at this time.