Whitelisting/ Safelisting WordPress Classes

sage
,
1

How are people whitelisting WP CSS classes that get injected into the code from things like the content editor? Is there a way to do this in a CSS/SCSS file like using PurgeCSS? My sidebar, widget, content classes, etc styling keeps getting stripped out

2

I use two packages:

With something like this for the config:

  .purgeCss({
    safelist: [
      ...require('purgecss-with-wordpress').safelist,
      'show',
      'active',
      'collapsing',
      'modal',
      /^btn/,
      /^navbar/,
      /^modal/,
      ...require('purgecss-whitelister')([
        'resources/styles/blocks/**/*.scss',
        'resources/styles/components/**/*.scss',
        'resources/styles/editor.scss',
      ]),
    ],
  });
1 Like
3

Thanks for the reply! Are you doing this in Sage 10? I’m asking because purgeCSS isn’t a dependency (that I could find in my yarn.lock) yet my classes still get purged. So I didn’t want to install purgeCSS if there was a native way I should be doing this in Sage 10.

On sage 9 I’d just have a CSS style sheet in my starter repo and then put the comments in the CSS file that purgeCSS provides to skip over purging them.

4

That example was pulled from a config using Laravel Mix and tailwind with purgecss added on.

If you’re using bud, then there’s an optional purgecss extension that you could use.

But the answer depends on what your setup is… What’s your build process look like right now? (e.g., bud, mix, tailwind, etc)

1 Like
5

I tagged the post as bud / sage 10. I’m using sage 10 default config. Tailwind and Bud running the default package.json Something is currently purging the classes with the default sage 10 + tailwind + bud setup but unsure what it is or how I can prevent the process from purging classes. The typical purgeCSS ignores weren’t working and I don’t see purgeCSS as a dependency. I didn’t want to add purgeCSS as my styles are getting pruned already.

6

No worries! I saw “purgecss” and assumed you had modified the build process in some way to include it.

If you’re using the default sage config, bud build shouldn’t purge any styles on its own to my knowledge, and Tailwind’s JIT will only generate styles for classes found in your code. The default content setting is ['./app/**/*.php', './resources/**/*.{php,vue,js}'] as found in tailwind.config.js.

One thing you could try is to safelist classes in tailwind.config.js, but that would only apply to Tailwind styles, not the styles you’ve defined outside of its config.

If you get a chance, post up your current config and an example of styles getting purged.

1 Like
7

Sorry for the delay.

I got a repo up: GitHub - bbuilds/pat-theme

Anyways, I realized my issue. I think they were purged because I had them wrapped in
@layer base {} in my CSS file… whoops.

2 Likes
8

Nice! Thanks for sharing the solution. That is absolutely the type of thing that would catch me too lol.

1 Like