PostCSS Import JSON
Imports a JSON file and generates CSS custom properties.
Usage
Install plugin.
npm i -D @daltontan/postcss-import-json
Add to you PostCSS config:
module.exports = {
plugins: [require("@daltontan/postcss-import-json")],
};
Add to your CSS file:
:root {
@import-json './path/to.json';
}
The path is relative to the CSS file.
Options
map
A function to convert the variable values. For example:
@param {string[]} selector - The keys that form the current value e.g. {parent: {child: 'value'}} will have the child
selector as ['parent', 'child'].
@param value - The value for the current node.
(selector, value) => selector[0] === 'color' ? '#' + value : value
prefix
The CSS Custom properties prefix, default is --
.
JSON input:
{
"my-color": "red"
}
module.exports = {
plugins: [
require("@daltontan/postcss-import-json"), // :root { --my-color: red; } (default)
],
};
module.exports = {
plugins: [
require("@daltontan/postcss-import-json")({
prefix: "", // :root { my-color: red; }
}),
],
};
Example
JSON input:
{
"pageWidth": 800,
"color": {
"primary": "#00f",
"secondary": "#0aa"
},
"border-radius": "1rem"
}
Generated CSS:
--pageWidth: 800;
--color-primary: #00f;
--color-secondary: #0aa;
--border-radius: 1rem;