如何解析 CSS 以添加 CSS 选择器前缀

Question

我有以下my-file.css：

.a [data-smth] { ... }
.b .c.d { ... }
.e { ... }
#f { ... }

我想在 Node.js 中执行以下操作（伪代码）：

let css = readFile('my-file.css')
let prefixedCss = prefixClasses(css, 'prfx-')
writeFile(prefixedCss, 'my-prefixed-file.css')

以my-prefixed-file.css结束：

.prfx-a [data-smth] { ... }
.prfx-b .prfx-c.prfx-d { ... }
.prfx-e { ... }
#f { ... }

我找到了这些 npm 模块：

https://github.com/vic/prefix-css（多年未更新，有问题）
https://pegjs.org/（需要大量低级 AST 配置）

但我想知道是否有更好/更安全的解决方案已经过测试/成为标准做法？

注意： 以上文件内容只是一个示例。我正在寻找一种方法来实现我完全不知道其内容的文件。所以我正在寻找一个“通用”的解决方案。

非常欢迎任何帮助，并在此先感谢您！ :-)

Answer 1

您可能想查看https://github.com/marceloucker/postcss-prefixer#postcss-prefixer。

postcss 前缀

PostCSS 插件为所有 css 选择器类和 id 添加前缀。

用法

与PostCSS cli:

在您的项目目录中安装postcss-cli 和postcss-prefixer：

npm install postcss-cli postcss-prefixer --save-dev

在你的 package.json 中

"scripts": {
      "postcss": "postcss input.css -u postcss-prefixer -o output.css"
}

其他

postcss([ require('postcss-prefixer')({ /* options */ }) ])

选项

前缀

Type: `string`<br>
Default: none

用作前缀的字符串

忽略

Type: `array`<br>
Default: `[]`

插件忽略的选择器数组，接受字符串和正则表达式。

示例

插件生成结果的使用示例。

代码

const postcss = require('postcss');
const prefixer = require('postcss-prefixer');
const input = fs.readFileSync('path/to/file.css',  'utf-8');
const output = postcss([
  prefixer({
        prefix: 'prefix-'
        ignore: [ /selector-/, '.ignore', '#ignore' ]
    })
]).process(input);

输入：

#selector-one .example {
  /* content */
}
.selector-two .example2 {
  /* content */
}
#ignore .ignore {
  /* content */
}
#ignore .other {
  /* content */
}

输出：

#selector-one .prefix-example {
  /* content */
}
.selector-two .prefix-example2 {
  /* content */
}
#ignore .ignore {
  /* content */
}
#ignore .prefix-other {
  /* content */
}

学分

插件基于postcss-class-prefix由thompsongl创建。