drolsen / postcss-export

PostCSS plugin that transpiles :export to :root at bundle

PostCSS :Export

POSTCSS plugin to transpile :export into :root. This is useful when you need to share CSS variables with JS without a middle man JSON file. Please note this plugin requires style-loader and css-loader.

Install

npm install postcss-export --save-dev

import CSSExport from 'postcss-export';

{ 
    'loader': 'postcss-loader', // (see: https://www.npmjs.com/package/postcss-loader)
    'options': {
        'plugins': [
            CSSExport()
        ]
    }
}

Usage

Define variables in a dedicated CSS file.

:export {
    --padding: 10px;
    --color: #fff;
    --align: center;
}

Import CSS into JS using style-loader and css-loader as a object.

import variables from '!!style-loader!css-loader!./variables-file.css';

const padding = variables['--padding'];
const color = variables['--color'];
const align = variables['--align'];

Plugin transpiles :export into :root for further var POSTCSS processing within other CSS files.

.some-selector {
    color: var(--color);
    padding: var(--padding);
    text-align: var(--center);
}