Inject global CSS variables into your files via PostCSS
npm install postcss-inject-css-variables
Inject global CSS variables into your files via PostCSS
__Transform__
`` css`
/ Your CSS /
__to__
` css`
:root {
--colorAlpha: #000;
--colorBeta: #111
}
/ Your CSS /
__using__
` js`
module.exports = {
colorAlpha: '#000',
colorBeta: '#111'
}
_and some PostCSS magic_
` bash`
npm i -D postcss-inject-css-variables
` js
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 /
`
#### webpack.config.js
` js
const variables = require('./variables.js')
const config = {
postcss: function (webpack) {
return [
// plugins..
require('postcss-inject-css-variables')(variables),
// more plugins..
]
},
}
`
#### variables.js
` js`
module.exports = {
colorAlpha: '#000',
colorBeta: '#111'
}
`
Copyright © 2016 Pierre Cholhot
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.
``