Purgecss: Understanding child selectors

[TomS-]

Hey,

I'm just wondering about child selectors. They don't really make sense. So I have a class called markdown which gets HTML from a WYSIWYG field.

I'm wrapping this in a .markdown class. For some reason .markdown p and .markdown h2 is preserved but .markdown li is not?

[jsnanigans]

Hey,

That really depends on the configuration of whitelist options and your html, I assume that you have a p and a h2 somewhere in the content but no li so it gets removed

If you want all selectors to be preserved that start with .markdown then you can add a whitelist option to your purgecss config:

{
  // ...
  whitelistPatternsChildren: [/^markdown$/]
}

[TomS-]

@jsnanigans Ah, so if I use a li anywhere else in the template it will also keep .markdown li. Thanks for bringing my attention to whitelistPatternsChildren I didn't know that was an option. Doesn't seem to be in the documentation.

[jsnanigans]

because purgecss can't yet understand scoped selectors if you have this html:
<section><div class="red"></div></section> it can only find these selectors: section div and red but it does not understand that div and red are inside of section and it also cant classify them as tag and class as of now.
So if you have a li outside of .markdown it will not remove it.
As you can see there is still a lot of room for improvement :wrench:

The whitelistPatternsChildren just got added 6 days ago and nobody got to write the documentation for it yet. Feel free to open another issue if you are having any - issues - with it