Neoanthropic Preternatural Murmurings

    postcss-export-custom-variables

    1.0.0 • Public • Published

    PostCSS Export Custom Variables PostCSS Logo

    NPM Version Build Status Windows Build Status Gitter Chat

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

    :root {
      --custom-size: 960px;
      --custom-styles: {
        color: black;
        background-color: white;
      }
    }
     
    @custom-media --custom-viewport (max-width: 30em);
     
    @custom-selector :--custom-selector :hover:focus;

    By default, CSS is transformed into JSON:

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

    With a small adjustment, it may be transformed into JavaScript exports:

    require('postcss-export-custom-variables')({
      exporter: 'js',
      destination: 'css-vars-exports.js'
    });
    export const customSize = "960px";
    export const customStyles = { color: "black", backgroundColor: "white" };
    export const customViewport = "(max-width: 30em)";
    export const 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, { /* postcss options */ }, { /* plugin 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')({ /* plugin options */ })
    ]).process(YOUR_CSS, /* postcss options */);

    Gulp

    Add Gulp PostCSS to your build tool:

    npm install gulp-postcss --save-dev

    Use PostCSS Export Custom Variables in your Gulpfile:

    gulp.task('css', () => gulp.src('./src/*.css').pipe(
      require('gulp-postcss')([
        require('postcss-export-custom-variables')({ /* plugin 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

    These options may be passed directly into the plugin.

    require('postcss-export-custom-variables')({ /* options */ });

    destination

    destination is the path where your JSON or JS Exports will be saved. By default, it is the CSS source with an additional .js or .json extension.

    variables

    variables is the object your CSS variables are assigned to. This might be used to pre-populate some unique set of custom properties. By default, it is a new object.

    exporter

    exporter is the function used to export the whole 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) => {
        // variables: an object of all the variables collected
        // options: options passed into the plugin
        // root: the AST of CSS parsed by PostCSS
     
        // return new 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'
    }

    Custom Assigners

    Use these custom assigners to determine how you would like to organize your custom variables.

    customMediaQueryAssigner

    customMediaQueryAssigner is the function used to create an object from the query and value of custom media queries.

    {
      customMediaQueryAssigner: (name, queries, node) => {
        // name: name of the custom media query
        // queries: queries for the custom media query
        // node: PostCSS atrule for the custom media query
     
        // returns { name: queries }
      }
    }

    customPropertyAssigner

    customPropertyAssigner is the function used to create an object from the property and value of custom properties.

    {
      customPropertyAssigner: (property, value, node) => {
        // property: name of the custom property
        // value: value of the custom property
        // node: PostCSS declaration for the custom property
     
        // returns { property: value };
      }
    }

    customPropertySetAssigner

    customPropertySetAssigner is the function used to create an object from the property and value of custom property sets.

    {
      customPropertySetAssigner: (property, nodes, node) => {
        // property: name of the custom property set
        // nodes: array of all the children of the property set
        // node: PostCSS rule for the custom property set
     
        // returns { property: object_from_nodes };
      }
    }

    customSelectorAssigner

    customSelectorAssigner is the function used to create an object from the property and value of custom selectors.

    {
      customSelectorAssigner: (property, selectors, node) => {
        // property: name of the custom selector
        // selectors: selectors for the custom selector
        // node: PostCSS atrule for the custom selector
     
        // returns { property: selectors };
      }
    }

    Install

    npm i postcss-export-custom-variables

    DownloadsWeekly Downloads

    356

    Version

    1.0.0

    License

    CC0-1.0

    Last publish

    Collaborators

    • jonathantneal