postcss-register-custom-props

    1.0.3 • Public • Published

    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.

    Install

    npm i postcss-register-custom-props

    DownloadsWeekly Downloads

    7

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    8.12 kB

    Total Files

    7

    Last publish

    Collaborators

    • bobrov1989