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: about 2 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 6 years ago)
• Default Branch: master
• Last Pushed: 2022-02-11T09:23:33.000Z (over 2 years ago)
• Last Synced: 2024-07-20T16:10:37.470Z (2 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

[![Build Status](https://travis-ci.org/vitaliy-bobrov/postcss-register-custom-props.svg?branch=master)](https://travis-ci.org/vitaliy-bobrov/postcss-register-custom-props)

[![npm version](https://badge.fury.io/js/postcss-register-custom-props.svg)](https://badge.fury.io/js/postcss-register-custom-props)

[![npm](https://img.shields.io/npm/dt/postcss-register-custom-props.svg)](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`.