Postcss-variables-loader NPM

postcss-variables-loader

Shared variables between CSS and JS
HMR friendly, CSS changes are applied on the fly.

To be more JS friendly loader will:

strip px part from CSS px numbers
convert dashes-case to camelCase
check for runtime config mutations and access of missing keys (only in dev or es6 mode)

Usage

/* variables.config.css */

@custom-media --small-device (max-width: 480px))
:root {
  --primary-color: blue;
  --gutter: 30px;
}

/* component.css  */

@import 'colors.config.css'

.component {
  color: var(--primary-color);
  margin: 0 var(--gutter);
}

@media (--small-device) {
  /* styles for small viewport */
}

// component.js
import variables from 'colors.config.css';

console.log(variables);
/*
  variables = {
    primaryColor: 'blue';
    gutter: 30;
    smallDevice: '(max-width: 480px)'
  }
*/

component.style.color = variables.primaryColor;

function add5ToGutter() {
  return 5 + variables.gutter;
}

Install

yarn add --dev postcss-variables-loader

npm install --save-dev postcss-variables-loader

NB: You need to process CSS somehow (eg postcss) and imports inside css (eg via postcss-import)

Recommended webpack configuration: webpack.config.js with babel-loader

rules: [
  {
    test: /\.config.css$/,
    loader: 'babel-loader!postcss-variables-loader'
  },

  // dont forget to exclude *.config.css from other css loaders
  {
    test: /\.css$/,
    exclude: /\.config.css$/,
    loader: 'css-loader!postcss-loader'
  }
]

Options

if production.env.NODE_ENV === 'development' it will try to wrap config inside Proxy in runtime. It is used to guard from accidental mutations or accessing missing keys. If you dont want this behaviour: pass es5=1:

loader: 'postcss-variables-loader?es5=1'