Is using :is() in postcss-nesting counter to the point of supporting older browsers?

[hyperknot]

I'm wondering about this whole :is() usage in postcss-nesting. Isn't it totally counter to the point of supporting older browsers?

:is() doesn't have great browser support (https://caniuse.com/css-matches-pseudo).

So why is this plugin pushing it all the time, even for super simple rules? It doesn't help with supporting older browsers, or I don't understand the point of this plugin.

[romainmenke]

Hi @hyperknot,

Which browsers specifically do you know that you absolutely need to support that also lack support for :is()?

Compare:

• https://caniuse.com/?search=css%20nesting (±91%)
• https://caniuse.com/css-matches-pseudo (±97%)

By transpiling only nested CSS you gain 6% extra support coverage.
Depending on your region and/or specific target group this might be more or less.

As time passes this gap will shrink, which is also the entire point of polyfills and transpilers, to eventually become redundant.

---

There is a plugin to downgrade many cases of the :is() pseudo selector: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class

Does that help?

---

Isn't it totally counter to the point of supporting older browsers?

In our list of priorities accuracy and correctness come before covering the oldest browser versions.

Nesting can only be correctly transpiled to non-nested CSS by using the :is() pseudo.
This ensure that the outcome is correct in all cases even when this limits how far back the support goes.

The plugin to further transpile :is() helps with supporting those extremely old browser versions.

---

Was there a specific issue you encountered?

[hyperknot]

I think I don't understand the use case then.
If I'm targetting modern browsers, I don't use any polyfill/plugin.
If I'm targetting older browsers, I need a plugin which generates versions compatible with the older browsers, like postcss-nested.

I understand there might be edge-cases, but I'm talking about

.markdown-body {
  a {
    &:hover {
      color: #5c91cf;
    }
  }

becoming

:is(.markdown-body a):hover {
      color: #5c91cf;
    }

I mean I can use postcss-nested and I'm good. I'm just wondering if I'm missing the point of the nesting plugin.

[romainmenke]

I am unsure if you read and understood my comment?
Also unsure if you are trolling because you didn't answer any of my questions.

---

The postcss-nesting plugin transpiles nested CSS to un-nested CSS. It does this correctly and efficiently.

The postcss-is-pseudo-class plugin transpiles selectors with :is() to selectors without :is().

Using both plugins allows you to target really old browsers.

---

postcss-nested is not the same.
It doesn't work the same as native CSS nesting.
It is Sass style nesting.

---

Again, which browser version do you need to support?
Was there an actual issue?

Also keep in mind that everyone has a different definition of modern and old browser versions.

• CSS nesting was supported natively in Chrome 120
• :is() was supported in Chrome 88 (released in 2021, that is already an old browser version)

Transpiling both features, by using both plugins allows you to target even much older browser versions. But each plugin has their own scope and purpose.

[romainmenke]

postcss-preset-env includes both plugins so you can also see this in the postcss-preset-env playground:

Chrome >= 90

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyLm1hcmtkb3duLWJvZHklMjAlN0IlNUNuJTIwJTIwYSUyMCU3QiU1Q24lMjAlMjAlMjAlMjAlMjYlM0Fob3ZlciUyMCU3QiU1Q24lMjAlMjAlMjAlMjAlMjAlMjBjb2xvciUzQSUyMCUyMzVjOTFjZiUzQiU1Q24lMjAlMjAlMjAlMjAlN0QlNUNuJTIwJTIwJTdEJTVDbiU3RCUyMiUyQyUyMmNvbmZpZyUyMiUzQSU3QiUyMmJyb3dzZXJzJTIyJTNBJTVCJTIyQ2hyb21lJTIwJTNFJTNEJTIwOTAlMjIlNUQlMkMlMjJtaW5pbXVtVmVuZG9ySW1wbGVtZW50YXRpb25zJTIyJTNBMCUyQyUyMnN0YWdlJTIyJTNBMiUyQyUyMmxvZ2ljYWwlMjIlM0ElN0IlMjJpbmxpbmVEaXJlY3Rpb24lMjIlM0ElMjJsZWZ0LXRvLXJpZ2h0JTIyJTJDJTIyYmxvY2tEaXJlY3Rpb24lMjIlM0ElMjJ0b3AtdG8tYm90dG9tJTIyJTdEJTdEJTdE

    :is(.markdown-body a):hover {
      color: #5c91cf;
    }

---

Chrome >= 50

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyLm1hcmtkb3duLWJvZHklMjAlN0IlNUNuJTIwJTIwYSUyMCU3QiU1Q24lMjAlMjAlMjAlMjAlMjYlM0Fob3ZlciUyMCU3QiU1Q24lMjAlMjAlMjAlMjAlMjAlMjBjb2xvciUzQSUyMCUyMzVjOTFjZiUzQiU1Q24lMjAlMjAlMjAlMjAlN0QlNUNuJTIwJTIwJTdEJTVDbiU3RCUyMiUyQyUyMmNvbmZpZyUyMiUzQSU3QiUyMmJyb3dzZXJzJTIyJTNBJTVCJTIyQ2hyb21lJTIwJTNFJTNEJTIwNTAlMjIlNUQlMkMlMjJtaW5pbXVtVmVuZG9ySW1wbGVtZW50YXRpb25zJTIyJTNBMCUyQyUyMnN0YWdlJTIyJTNBMiUyQyUyMmxvZ2ljYWwlMjIlM0ElN0IlMjJpbmxpbmVEaXJlY3Rpb24lMjIlM0ElMjJsZWZ0LXRvLXJpZ2h0JTIyJTJDJTIyYmxvY2tEaXJlY3Rpb24lMjIlM0ElMjJ0b3AtdG8tYm90dG9tJTIyJTdEJTdEJTdE

 .markdown-body a:hover {
      color: #5c91cf;
    }

[hyperknot]

OK, using both sounds like a good idea. Still, if not for the answer by you, the readme suggests something totally different:
as it says:

usage of :is() pseudo-class is no longer optional

I think if the readme would say "if you don't want to use :is(), please add the postcss-is-pseudo-class after/before this plugin", it'd be a perfect explanation for all users.

[romainmenke]

Docs text update to:

usage of :is() pseudo-class in the generated CSS is no longer optional. However you can add postcss-is-pseudo-class to transpile further

https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#2024-02-default