prefix-selector
批量给 css 文件加前缀选择器
本项目基于 postcss 和 postcss-prefix-selector 进行的整合的库
主要支持的是针对整个文件夹的 css 前缀选择器的添加
命令行使用方式
# 查看使用方法
prefix-selector -h
prefix-selector <string> [options]
Arguments:
string glob 定义的文件夹路径 https://www.npmjs.com/package/glob
Options:
-V, --version output the version number
-p, --prefix <prefix> 需添加的 css 前缀选择器
-e, --exclude <exclude> 无需处理的选择器
-b, --body 是否修改 body 为 `body${prefix}`
-o, --id-class-only 只对 包含 id 或 class 选择器 的做替换
-h, --help display help for command
js 调用
const { prefixSelector } = require('prefixSelector');
// 具体参考 https://www.npmjs.com/package/postcss-prefix-selector#usage-with-postcss
prefixSelector('glob路径', {
// 前缀选择器
prefix?: string | undefined;
// 无需处理的选择器
exclude?: ReadonlyArray<string | RegExp> | undefined;
// 只对 包含 id 或 class 选择器 的做替换
idClassOnly: boolean;
// 自定义处理函数
transform?: ((prefix: Readonly<string>, selector: Readonly<string>, prefixedSelector: Readonly<string>, file: Readonly<string>) => string) | undefined;
})
postcss 插件调用
我们参考 postcss-prefix-selector 实现了 createPlugin
,其入参与 js 调用的 方式的 第二个参数相同
const { createPlugin } = require('prefix-selector');
createPlugin(
// 与 js 调用的第二个参数相同
...options,
// 对于低版本的 post-css 需要开启该选项
isOld: boolean,
)
运行时使用
考虑到存在 styled-components 等运行时 css 方案,我们这里提供了一个专用于运行时的插件
执行前后 css 比较
命令行:
prefix-selector './a.css' -p '[customer-prefix]' -b
执行前 a.css:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
#main {
border: 1px solid black;
}
ul li {
padding: 5px;
}
执行后 a.css:
@media screen and (min-width: 480px) {
body[customer-prefix] {
background-color: lightgreen;
}
}
[customer-prefix] #main {
border: 1px solid black;
}
[customer-prefix] ul li {
padding: 5px;
}
使用场景,qiankun 等微前端框架的样式隔离
- 在微前端的应用中子项目的样式会互相影响,通过本工具 你可以给每个子项目打包后的 css 选择器增加 前缀选择器,来实现样式隔离。
- 在主项目中可以监听子项目的预挂载事件动态修改 body 的属性(选择器)来进行对应匹配。
let previousAppName;
// 以 qiankun 为例
registerMicroApps(..., {
beforeMount: [
(app: any) => {
document.body.removeAttribute(previousAppName);
document.body.setAttribute(app.name, '');
previousAppName = app.name;
},
],
})