PurgeCSS and Markdown output, how to whitelist element selectors? - css

Question

starting to use tailwindcss i was soon confronted with the need for PurgeCSS in order to wipe of (a lot of) superfluous css from my stylesheets. Next to being a great tool in general, PurgeCSS can become a cat-and-mouse-game for wanted and unwanted selectors, especially after deploying tree-shaken-minified-nano-purged production code.
In order to prevent PurgeCSS from being to tidy it has some possibilities to whitelist selectors from being purged: using whitelist, whitelistPatterns, whitelistPatternsChildren or /* purgecss start and stop ignore */ directly in stylesheets.
Usually i'd protect some selectors regexp in the options and some whole imported stylesheets by comments (see example below). But especially selectors which have been created dynamically such as Markdown converted to HTML. All the <p>, <blockquote>, <h1>, <h2>, <a>, … would be purged because they have not been present in the .md files.
This concerns mostly element selectors, so: is there a way or a regexp to whitelist all selectors which are not a class?
I tried some regexp for whitelistPatterns, like ^(?!\.).+, ^(?!\.)\w+, …, but they either did not work or whitelisted all selectors, including classes.
Thanks for any help.
// 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 */

Answer 1

Tailwind runs a pretty forgiving purge by default, as mentioned here. Keeping the default works for me, but if I configure purge mode "all", I start to lose styles exactly as you describe - Because the elements don't appear in my Markdown files.
To fix this, you can pass a list of whitelisted elements through to PurgeCSS from your Tailwind config file.
First, make sure you are using the optional configuration file:
npx tailwindcss init
You can then configure it something like below. Here, I am using the more aggressive purge but also whitelisting specific elements. Here's an example which parses 11ty layouts:
module.exports = {
// Purge is executed only when NODE_ENV=production
purge: {
mode: 'all',
content: [
'site/_includes/**/*.njk'
],
options: {
whitelist: [
'body',
'html',
'a',
'h1',
'h2',
'h3',
'h4',
'p'
]
}
},
theme: {
extend: {},
},
variants: {},
plugins: [],
}