Whitelisting doesn't keep a selector that ends in the html tag figure

[robertvrabel]

I'm having trouble with selector staying when I have it whitelisted. I tried diving into the code but I can't quite figure out where the bug might be. Is there a list of HTML tags that purgeCSS goes off that it only allows? I'm trying to figure out why figure tag isn't working properly. See below for an example:

Whitelist:

whitelistPatterns: [/vrabel/]

CSS:

/* This stays as expected */
.vrabel a {
    margin: 0;
}

/* This gets purged */
.vrabel figure {
    margin: 0;
}

[jsnanigans]

It looks like the vrable selector is whitelisted correctly but because figure is not whitelisted it is purged, I assume that you have a a tag in your content but no figure tag.

Thank you for reporting this, and sorry for the late response. We will look into this.

[robertvrabel]

@jsnanigans Ahh! So it has to match both. It would be really nice for it to work by matching the left most selector only, so you can easily whitelist everything under a particular selector. This would be really handy for when you're pulling in packages.

The instance I had this problem is with magnific popup: https://github.com/dimsemenov/Magnific-Popup . They use a figure tag injected with javascript so it doesn't actually exist in my scanned files. While I could add the figure tag somewhere as an example, it would much easier to just whitelistPatterns: /mfp-/and call it a day instead of worrying about .mfp figure.

Let me know if this is something that might be possible, or a feature you see as useful. Happy to try and help contribute as well if you can point me in the right direction :)

[jsnanigans]

It's not very intuitive, but purgecss breaks the selector into its peaces here so .vrabel figure becomes ['vrabel', 'figure'] then it checks your whitelistPatterns on it here.

I would totally be for changing this, but i'm not sure how to best to it without breaking it for users who rely on the current behavior, if you want to have a crack at it, we would appreciate the help!
Here is a quick guide to contributing: https://github.com/FullHuman/purgecss/blob/master/CONTRIBUTING.md

[robertvrabel]

Thanks for the explanation! Perhaps a config value for how the matching works to make it flexible could work. That way we wouldn't break current functionality.

[danielcardoso5]

This is also my main issue with purgecss. One use case is that I'm using Smooch messaging platform and a while ago they stopped providing a script file that I can pass to purgecss in order for it to look at the selectors defined there. In my code I'm overriding their styles by using something like #sk-holder and I want every selector that's a child of #sk-holder to be kept by purge css, but they're being stripped. It's basically the same issue as @robertvrabel stated above.

I could think of a solution where you would pass a list of objects into whitelistPatterns, this objects would have two properties, the pattern itself and a boolean to keep child selectors. We could keep the current functionality by checking if the element in the whitelistPatterns array is a string or an object.