Очистка CSS и вывод Markdown, как сделать селектор элементов в белом списке? - PullRequest
Новая
       38

Очистка CSS и вывод Markdown, как сделать селектор элементов в белом списке?

0 голосов
/ 05 марта 2020

начинает использовать попутный ветер css Я вскоре столкнулся с необходимостью Очистка CSS, чтобы стереть (много) лишнего css с моего таблицы стилей. Помимо того, что Purge CSS является отличным инструментом в целом, он может стать игрой в кошки-мышки для разыскиваемых и нежелательных селекторов, особенно после развертывания производственного кода в виде миниатюрных нано-очищенных деревьев.

Чтобы предотвратить чистку Purge CSS, он имеет некоторые возможности для очистки селекторов белого списка от очистки : используя whitelist, whitelistPatterns, whitelistPatternsChildren или /* purgecss start and stop ignore */ непосредственно в таблицах стилей.

Обычно я защищал бы некоторые селекторы regexp в опциях и некоторые целые импортированные таблицы стилей комментариями (см. Пример ниже). Но особенно селекторы, которые были созданы динамически, такие как Markdown, преобразованные в HTML. Все <p>, <blockquote>, <h1>, <h2>, <a>, … будут удалены, поскольку их нет в файлах .md.

Это касается в основном селекторы элементов , так: есть ли способ или регулярное выражение для добавления в белый список всех селекторов, которые не являются классом?

Я попытался использовать некоторое регулярное выражение для whitelistPatterns, например ^(?!\.).+, ^(?!\.)\w+,… , но они либо не работали, либо помещали в белый список все селекторы, включая классы.

Спасибо за любую помощь. 

// postcss.config.js
const whitelist = /^(\.|p|ul|ol|h\d+|pre|code|carousel|flickity|spinner)/
const purgecss = require("@fullhuman/postcss-purgecss")({
  // …
  whitelistPatterns: [whitelist],
  whitelistPatternsChildren: [whitelist] 
});

// styles.css
/*! purgecss start ignore */
@import "admin.css";
/*! purgecss end ignore */
...