Here’s a tip for whitelisting the styles from an entire CSS or SCSS file easily.
In this case, we’re going to whitelist the selectors in the TailwindCSS Preflight file (which basically contains normalize.css and a few additional resets). To whitelist something else, just insert your path or paths.
We’ll use this package: https://github.com/qodesmith/purgecss-whitelister. Refer to the GIthub page for additional docs.
yarn add --dev purgecss-whitelister
You will need to import the whitelister. Add this with the other imports at the top of the file:
const whitelister = require("purgecss-whitelister");
And then edit the PurgeCSS section of your config:
whitelistPatternsChildren: [/^gfield/, /^gform/, /^ginput/],
extensions: ["js", "php"],
This is the important bit:
It shows how to whitelist both an arbitrary selector of your choice (like you normally would with PurgeCSS) and the results of the whitelister plugin.
whitelister('mypath.css') uses the whitelister package to get the selectors from the file or files you specify.
whitelister() returns and adds them to the
whitelist array along with any other items in it (
my-whitelisted-selector, in this case).
Thanks to @knowler for helping with this!