PostCSS Extract Variable Scheme

PostCSS Extract Variable Scheme lets you export custom properties, selectors and media queries to one or multiple files based on a prefix you define in your variable name.

Installation

npm install postcss-extract-variable-scheme

Usage

With following setup (incomplete) ..

var postcss = require("postcss")
var extractVariableScheme = require("postcss-extract-variable-scheme")

var output = postcss()
  .use(extractVariableScheme({
    dest: 'build/variables/',
    fileExports: [
      {
        prefixes: ['my-prefix'],
        filename: 'example'
      }
    ]
  }))
  .process(cssFile)
  .css

Processing following CSS:

:root {
  --my-prefix-h1-size: 2rem;
  --my-prefix-box: {
    background-color: #000;
    font-weight: bold;
  }
}

Variables with --{prefix}- (Please note the finishing "-") get extracted to example.json:

{
  "my-prefix-h1-size": "2rem",
  "my-prefix-box": {
    "background-color": "#000",
    "font-weight": "bold"
  }
}

Options

dist

Defines the Directory the file exports get written.

fileExports

Array of objects that specify individual exporters. Prefixes can be used multiple times with different exports.

[
  {
    prefixes: ['my-prefix'],
    filename: 'example'
  }
]

License