Use :where to reduce specificity

[adamwathan]

This PR changes the output of this plugin to use the :where pseudo-class to reduce the specificity of the selectors, making it possible to easily override typography styles with utilities.

Here's an example of how the output has changed:

- .prose a code {
+ .prose :where(a code) {
    color: #111827;
  }

Prior to this PR, using a utility like this to override a typography style like this wouldn't work unless you enabled the important option in your tailwind.config.js file:

<div class="prose">
  <!-- ... -->
  <p>
    The <a href="#"><code class="text-green-500">:where pseudo-class</code></a> is awesome.
  </p>
</div>

After merging this PR, the code above will just work 🥳 This solves one of the most common pain points of working with this plugin, as people often want to make minor tweaks within a typographic block and out of the box they can't.

This CSS feature has great browser support these days, but it doesn't work in Safari < 14:

https://caniuse.com/mdn-css_selectors_where

Safari 15 was just released, so I expect to see Safari 13 quickly become something we don't have to worry about and I'm not too worried about this change. We could introduce an option to preserve the old behavior if needed, would be really easy.

This is technically a breaking change, so will target the next version of the plugin.

[redonkulus]

Remove?

[adamwathan]

Thanks fixed!

[neupauer]

Hey, great idea 🥳. One issue I noticed is that pseudo elements like ::before should be after the :where parenthesis.

- `:where(ul > li::before)`
+ `:where(ul > li)::before`

[adamwathan]

@neupauer Ah good catch, I forgot about this! I'll make sure to get that fixed before merging 👍🏻

[neupauer]

Idea 💡

Hey, I probably shouldn't put this in this PR :)

I got an idea how to make a .no-prose utility that disables styles inside .prose container.

<div class="prose">
  <!-- Styled -->
  <div class="no-prose">
    <!-- NOT Styled -->
  </div>
  <!-- Styled -->
</div>

.prose :where(_SELECTOR_):not(:where(.no-prose _SELECTOR_))

Proof of concept here: https://play.tailwindcss.com/V4LPQ3jV46?file=css - it seems to work quite well

I'll try to find if there are any edge cases where it won't work, and also I don't know yet how it affects the specificity.

[adamwathan]

@neupauer Let's chat about that here!

#32 (comment)

[adamwathan]

Just noticed another bug in the current output (damn you snapshot tests)...

Will have to fix that before merging (super fixable).

[adamwathan]

Need to also check how this behaves with the prefix option, not sure if postcss selector parser handles the inside of where.

[reinink]

I've updated this plugin to have a new target option, which allows you to enable/disable the use of the :where() selectors. The options include:

target: 'modern' // enables :where() selectors (the default)
target: 'legacy' // disables :where() selectors