@moluoxixi/postcss-selector-prefix
基于 postcss-selector-parser 的 PostCSS 插件,用于精确替换 class 与 id 选择器的名称前缀。 插件会替换 selector AST 中的 class/id 节点、class/id 属性选择器的值, 以及 CSS 值里能表达 selector 的文本片段; 不会改写 url(...) 这类资源路径,也不会碰 HTML 或 JS 字符串。
Vite 使用
ts
import { createSelectorPrefixPlugin } from '@moluoxixi/postcss-selector-prefix'
import { defineConfig } from 'vite'
export default defineConfig({
css: {
postcss: {
plugins: [
createSelectorPrefixPlugin({
fromPrefix: 'el-',
toPrefix: 'moluoxixi-',
}),
],
},
},
})以上配置会将 .el-button、#el-app、[class^="el-"]、[id="el-app"] 以及 content: '.el-button #el-app'、@supports selector(.el-button) 里的 selector 文本改写为对应的 moluoxixi 前缀;url(".el-button.svg") 仍会保持原样。