Transforming `:is()` results in duplicate selectors

[RobinMalfait]

While testing the :is() feature in Chrome 88 everything works as expected because Chrome 88 introduced the :is() pseudo class. However, the moment you use Chrome 87, it tries to transform the :is() to the expanded version of the selector which could lead to duplicate CSS.

Input:

.foo :is(.bar) {
  color: red;
}

Expected output:

.foo .bar {
  color: red;
}

Actual output:

.foo .bar {
  color: red;
}

.foo .bar {
  color: red;
}

You can see this behaviour in the playground:

1. With Chrome 88: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A5767168%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22.foo%20%3Ais(.bar)%20%7B%5Cn%20%20color%3A%20red%3B%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D
2. With Chrome 87: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A5701632%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22.foo%20%3Ais(.bar)%20%7B%5Cn%20%20color%3A%20red%3B%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

It also looks like the moment some splitting has to happen, duplicate rules are generated. Here is another example where splitting happens because of ::backdrop resulting in duplicate rules:

Input:

*,
::before,
::after,
::backdrop {
  padding: 5px;
}

Output:

*, :before, :after {
  padding: 5px;
}

*, :before, :after {
  padding: 5px;
}

::-webkit-backdrop {
  padding: 5px;
}

::backdrop {
  padding: 5px;
}

1. https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6750208%2C%22firefox%22%3A6684672%2C%22safari%22%3A917504%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22*%2C%5Cn%3A%3Abefore%2C%5Cn%3A%3Aafter%2C%5Cn%3A%3Abackdrop%20%7B%5Cn%20%20padding%3A%205px%3B%5Cn%7D%5Cn%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D