PostCSS plugin that read json file to CSS Custom Properties.
Sometimes you need share settings between JavaScript and CSS.
Read in a json file:
{
"maxWidth": "1024px",
"primaryColor": "#1f587a",
"bgColor": "#efefef",
"darkBgColor": "#263238",
"logo": {
"img": "/assets/logo.png"
}
}
Into:
:root {
--maxWidth: 1024px;
--primaryColor: #1f587a;
--bgColor: #efefef;
--darkBgColor: #263238;
--logo-img: "/assets/logo.png";
}
Use:
@import "constants.json";
.logo {
background-image: url(var(--logo-img));
}
Currently you can do this via postcss-custom-properties:
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var customProperties = require("postcss-custom-properties")
var variables = require('constants.json');
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css using postcss-custom-properties
var output = postcss()
.use(customProperties({
variables: variables
}))
.process(css)
.css
If you found this might be useful or got some ideas, please leave a comment in this issue.
MIT