PostCSS Inject CSS Variables

Inject global CSS variables into your files via PostCSS

Transform

/* Your CSS */

to

:root {
  --colorAlpha: #000;
  --colorBeta: #111
}
/* Your CSS */

using

module.exports = {
  colorAlpha: '#000',
  colorBeta: '#111'
}

and some PostCSS magic

Installation

npm i -D postcss-inject-css-variables

Usage

with node

const postcss = require('postcss')
const injectVariables = require('postcss-inject-css-variables')

const fs = require('fs')

const mycss = fs.readFileSync('input.css', 'utf8')

const variables = {
  colorAlpha: '#000',
  colorBeta: '#111'
}

// Process your CSS with postcss-inject-css-variables
const output = postcss([
    injectVariables(variables)
  ])
  .process(mycss)
  .css

console.log(output)

// :root {
//   --colorAlpha: #000;
//   --colorBeta: #111
// }
// /* CSS content */

with webpack

webpack.config.js

const variables = require('./variables.js')

const config = {
  postcss: function (webpack) {
    return [
      // plugins..
      require('postcss-inject-css-variables')(variables),
      // more plugins..
    ]
  },
}

variables.js

module.exports = {
  colorAlpha: '#000',
  colorBeta: '#111'
}

License

Copyright © 2016 Pierre Cholhot <[email protected]>

This work is free. You can redistribute it and/or modify it under the
terms of the Do What The Fuck You Want To Public License, Version 2,
as published by Sam Hocevar. See the LICENSE file for more details.