PostCSS 导入 JSON

导入 JSON 文件并生成 CSS 自定义属性。 。 。 .

使用量

安装插件 .

npm i -D @daltontan/postcss-import-json

向您添加 PostCSS 配置 :

module.exports = {
  plugins: [require("@daltontan/postcss-import-json")],
};

添加到您的 CSS 文件 :

:root {
  @import-json './path/to.json';
}

路径相对 CSS 文件.

选项

地图

一个转换可变值的函数。 例如:

@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

前缀

CSS 自定义属性前缀, 默认为 --。 。 。 .

JSON 输入 :

{
  "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; }
    }),
  ],
};

示例

JSON 输入 :

{
  "pageWidth": 800,
  "color": {
    "primary": "#00f",
    "secondary": "#0aa"
  },
  "border-radius": "1rem"
}

生成的 CSS :

--pageWidth: 800;
--color-primary: #00f;
--color-secondary: #0aa;
--border-radius: 1rem;