postcss-register-property

1.0.0 • Public • Published

PostCSS Register Property PostCSS

NPM Version Build Status Support Chat

PostCSS Register Property lets you register properties in CSS.

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

@property --gap-spacing {
  inherits: false;
  initial-value: 1em;
  syntax: "<length-percentage>";
}

These properties are transformed into JSON.

[
  {
    "name": "--highlight-color",
    "inherits": true,
    "initialValue": "red",
    "syntax": "<color>"
  },
  {
    "name": "--gap-spacing",
    "initialValue": "1em",
    "syntax": "<length-percentage>"
  }
]

These properties can be imported and registered in a browser.

import properties from './styles.css.properties.json';

if (window.CSS && CSS.registerProperty) {
  for (const descriptor of properties) {
    CSS.registerProperty(descriptor);
  }
}

Optionally, you can even detect registrations from custom properties:

:root {
  --some-border: 5px solid rebeccapurple;
  --some-image: url("image.webp");
  --some-transform: scale(1.25, 1.25);
}
[
  {
    "name": "--some-border",
    "syntax": "<length> <custom-ident> <color>"
  },
  {
    "name": "--some-image",
    "syntax": "<image>"
  },
  {
    "name": "--some-transform",
    "syntax": "<transform-function>"
  }
]

Usage

Add PostCSS Register Property to your project:

npm install postcss-register-property --save-dev

Use PostCSS Register Property to process your CSS:

const postcssRegisterProperty = require('postcss-register-property');

postcssRegisterProperty.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssRegisterProperty = require('postcss-register-property');

postcss([
  postcssRegisterProperty(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Register Property runs in all Node environments, with special instructions for:

Node PostCSS CLI Webpack Create React App Gulp Grunt

Options

detect

The detect option determines whether registrations will be detected from Custom Properties. By default, they are not detected.

postcssRegisterProperty({ detect: true }) // detect custom property registrations

getJSON

The getJSON option defines the function that handles all of the collected properties from CSS. If not specified, these properties will be written as JSON to a file determined by the to option.

If specified, the getJSON function is passed 3 arguments; the path to the source CSS, an object of all the collected properties, and the path to the destination JSON. Asynchronous functions should return promise-like values.

postcssRegisterProperty({
  getJSON(cssFileName, properties, jsonFileName) {
    /* do something with cssFileName, properties, and jsonFileName */
  }
)

to

The to option determines the destination path where the properties will be written to as JSON. If not specified, the destination will be the input source filename appended with .properties.json.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.0
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.0
    1

Package Sidebar

Install

npm i postcss-register-property

Weekly Downloads

1

Version

1.0.0

License

CC0-1.0

Unpacked Size

56.8 kB

Total Files

8

Last publish

Collaborators

  • romainmenke
  • alaguna
  • jonathantneal