Package Exports

postcss-inject-css-variables

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-inject-css-variables) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Inject CSS Variables

Inject global CSS variables into your files via PostCSS

Transform

/* Your CSS */

: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'
}