PostCSS Export Custom Variables

PostCSS Export Custom Variables lets you export custom media queries, custom properties, custom property sets, and custom selectors from CSS as JavaScript variables.

:root {
    --custom-size: 960px;
    --custom-styles: {
        color: black;
        background-color: white;
    }
}

@custom-media --custom-viewport (max-width: 30em);

@custom-selector :--custom-selector :hover, :focus;

export const customSize = "960px";
export const customStyles = { color: "black", backgroundColor: "white" };
export const customViewport = "(max-width: 30em)";
export const customSelector = ":hover, :focus";

{
  "customSize": "960px",
  "customStyles": {
    "color": "black",
    "backgroundColor": "white"
  },
  "customViewport": "(max-width: 30em)",
  "customSelector": ":hover, :focus"
}

With these variables synchronized to JavaScript, they may be used later by something like window.matchMedia(), document.querySelectorAll(), element.style, or element.animate().

Usage

Add PostCSS Export Custom Variables to your build tool:

npm install postcss-export-custom-variables --save-dev

Node

Use PostCSS Export Custom Variables to process your CSS:

require('postcss-export-custom-variables').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Export Custom Variables as a plugin:

postcss([
    require('postcss-export-custom-variables')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Export Custom Variables in your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
    return gulp.src('./src/*.css').pipe(
        postcss([
            require('postcss-export-custom-variables')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('.')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Export Custom Variables in your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            use: [
                require('postcss-export-custom-variables')({ /* options */ })
            ]
        },
        dist: {
            src: '*.css'
        }
    }
});

Advanced Options

customMediaQueryAssigner

The function used to create an object from the property and value of a custom media query.

{
    customMediaQueryAssigner: (property, value, node) => {
        // returns { property: value }
    }
}

customPropertyAssigner

The function used to create an object from the property and value of a custom property.

{
    customPropertyAssigner: (property, value, node) => {
        // returns { property: value }
    }
}

customPropertySetAssigner

The function used to create an object from the property and value of a custom property set.

{
    customPropertySetAssigner: (property, value, node) => {
        // returns { property: value }
    }
}

customSelectorAssigner

The function used to create an object from the property and value of a custom selector.

{
    customSelectorAssigner: (property, value, node) => {
        // returns { property: value }
    }
}

exporter

The function used to export the object of custom variables. The plugin will return this function, so Promises should be returned if performing an asynchronous operation, such as writing to a file.

{
    exporter: (variables, options, root) => {
        // return Promise
    }
}

• If a js string is passed, the default JavaScript stringifier will be used.
• If a json string is passed, the default JSON stringifier will be used.

{
    exporter: 'json'
}

variables

The object used to append custom variables. This might be used to pre-populate some unique set of custom properties.