Infinite loop on ":where" selector

[jakubsmolaga]

Hi,

It seems like DropCSS loops forever when encountering the ":where" selector. It is relevant to me because I tried to use it on the Open Props Normalize stylesheet. After failing I then tried to pinpoint the exact statement that causes the issue and It turns out that DropCSS just hangs on every ":where" selector. Here is a codepen that demonstrates the problem .

I don't understand the internals of this project very well but I'm open to contributing a bug fix if someone just points me in the right direction. Maybe all those compiler architecture lectures won't go to waste after all 😉.

As a side note I tried all other dead css eliminators (that I'm aware of) and they all seemed to struggle with ":where" too:

• PurgeCSS - removed all ":where" selectors including the used ones
• PurifyCSS - didn't remove any ":where" selectors
• UnCSS - didn't remove any ":where" selectors

So it would be cool if DropCSS was the first one to actually support it. If we get it working we might even get added to the Open Props documentation since the project is still developing and Adam seems to care about performance a lot.

Anyway, thank you for all your work and this wonderful project.

[freddy38510]

Hi @jakubsmolaga,

@leeoniya has made a fantastic work with this library. It seems that he "do not intend to add and maintain all the future css selector expansions".

Could you try this fork https://github.com/freddy38510/dropcss ? I added the support of pseudo class :where.

If it works good for you I could make a PR in this repository. Maybe @leeoniya will merge it.

[leeoniya]

sorry for late reply.

i would be open to reviewing a PR for :where, but keep in mind, that it has to support multiple selectors. the main reason i have not merged #59 is because that PR only supports a single selector inside :is(), which is not very useful.

see some of the possible combos of :is() and :where() here: https://web.dev/css-is-and-where/

the most simple implementation may be to just expand these selectors into the longer forms, which dropcss already handles correctly. you will not have 100% correctness due to specificity differences, but it will work fine when these selectors are used only as short-hands for the longer forms. if you're brave and would like to try adding native support for these without expansion, then great!