https://github.com/vitaliy-bobrov/postcss-register-custom-props
PostCSS plugin that transforms custom property registration in CSS to JS
https://github.com/vitaliy-bobrov/postcss-register-custom-props
postcss postcss-plugin
Last synced: 5 months ago
JSON representation
PostCSS plugin that transforms custom property registration in CSS to JS
- Host: GitHub
- URL: https://github.com/vitaliy-bobrov/postcss-register-custom-props
- Owner: vitaliy-bobrov
- License: mit
- Created: 2018-07-13T13:11:09.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T09:23:33.000Z (over 4 years ago)
- Last Synced: 2025-10-15T18:16:15.403Z (10 months ago)
- Topics: postcss, postcss-plugin
- Language: JavaScript
- Homepage:
- Size: 1.59 MB
- Stars: 20
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# postcss-register-custom-props
[](https://travis-ci.org/vitaliy-bobrov/postcss-register-custom-props)
[](https://badge.fury.io/js/postcss-register-custom-props)
[](https://github.com/vitaliy-bobrov/postcss-register-custom-props)
PostCSS plugin that transforms custom property registration in CSS to JS.
According to the current ["Custom Properties and Values API Level 1"](https://www.w3.org/TR/css-properties-values-api-1/) specification you can register *custom property* with JavaScript, like:
```js
CSS.registerProperty({
name: "--highlight-color",
syntax: "",
initialValue: "red",
inherits: false
});
```
There is a proposal to the ["Custom Properties and Values API Level 2"](https://github.com/w3c/css-houdini-drafts/issues/137) specification to make it possible to do the same in CSS:
```css
@property --highlight-color {
syntax: '';
initial-value: red;
inherits: false;
}
```
This PostCSS plugin allows you to declare custom property in CSS and generate JavaScript file that contains registrations.
**Input:**
```css
@property --theme {
syntax: '+';
initial-value: #fff;
inherits: true;
}
```
**Output:**
```js
if ("registerProperty" in CSS) {
CSS.registerProperty({
name: "--theme",
syntax: "+",
initialValue: "#fff",
inherits: true
});
}
```
## Installation
- npm:
`npm install --save-dev postcss-register-custom-props`
- yarn:
`yarn add -D postcss-register-custom-propsk`
## Usage
```bash
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`.