Purgecss: Ability to report the amount of times a selector was detected

[claudiodekker]

Is your feature request related to a problem? Please describe.
Not problem-related. I'm often using TailwindCSS (utility-first CSS framework) in my projects, and while PurgeCSS is an absolute blessing, there are situations where I'm prototyping a design and use a specific class only once, while a previously used class that is VERY similar could've been used instead.

As a result of this, PurgeCSS keeps both selectors (as it should) resulting in a bigger filesize than could've been possible if I were more observant of what selectors I've been using. Currently, the only alternative option to this is to manually keep a list of used selectors on all pages, and how often they've been used, which is painful and will take forever, while not guaranteeing that it is compliant with the PurgeCSS settings.

Describe the solution you'd like
I'd like an option to 'report' the amount of times a selector was found to the console, ordered by usage.
For instance, something along the lines of this:

| Selector    | Usage (times)  |
+-------------+----------------+
| text-blue   | 10             |
| flex        | 8              |
| justify-end | 6              |
| text-right  | 1              |
+-------------+----------------+

When observing the output above, I can easily see text-right is only used once, after which I can go and see where and how it's actually used, so I can consider replacing it with a combination of flex and justify-end instead, resulting in another class purged by PurgeCSS, and thus an even smaller filesize.

Describe alternatives you've considered
Creating a separate plugin, although I think this would fit perfectly in this project.

Additional context
None.

[hacknug]

I understand what you mean, I agree it would be interesting to have such tool BUT do not think you can substitute .text-right with .flex.justify-end since that would only _work_ on single-line elements. Multi-line elements will still have their text aligned to the left which is not what you wanted in the first place.

[claudiodekker]

Of course, but I found it a better example to use than “mr-1”, “mr-2”, “pr-1” or something similar. In the end, it all comes down to your specific situation, and I thought what better than two modifiers that both “theoretically” position content.

[jsnanigans]

I see how this could be useful but I think its a bit outside the scope of purgecss, because it uses a regular expression to find possible selectors you would not get a very nice output, here is a example from regexpal with the default extractor and some random html from this github page:

as you can see there is a lot of useless stuff in there but I'm guessing you really only want class names

[Ffloriel]

I agree with @jsnanigans, it seems outside of the scope of PurgeCSS.