build-plugin-sto-rewrite-postcss v0.1.1

Build Plugin Sto Rewrite Postcss

增强 cone 默认的 postcss 配置, 加入自定义插件支持 内置 css 命名空间, 可按项目需要选择性开启

安装

$ npm i build-plugin-sto-rewrite-postcss -D
# or
$ yarn add build-plugin-sto-rewrite-postcss --dev

使用

自定义 postcss 插件

build.json 配置项

{
  "plugins": [
    [
      "build-plugin-sto-rewrite-postcss",
      {
        "plugins": [
          [
            "postcss-xxx-plugin",
            // 插件参数
            {
              ...
            }
          ]
        ]
      }
    ]
  ]
}

css 命名空间

对不同项目之间做样式隔离, 防止样式引起的冲突, 常应用于前端微应用 不传 namespace 或 namespace.className 不启用该功能

使用效果

.text-center {
  text-align: center;
}
// => 
// 注: .namespace-xxxx 为自定义配置项
// .namespace-xxxx .text-center {
//  text-align: center;
// }

对应build.json 配置项

{
  "plugins": [
    [
      "build-plugin-sto-rewrite-postcss",
      {
        "namespace": {
          // 自定义命名空间, 在所有css选择器前添加的选择器
          "className": ".namespace-xxx",
          // 不加命名空间的 class
          "ignore": ["body", "html"]
        },
      }
    ]
  ]
}