Как я могу разобрать 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-prefixer

Плагин PostCSS для добавления префикса ко всем классам и идентификаторам селекторов CSS.

Использование

С 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 .