lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

Nesting results in invalid `:is()` when using pseudo elements

Open RobinMalfait opened this issue 1 year ago • 0 comments

Input:

.bar,
.foo::marker {
  @media (min-width: 768px) {
    color: red;
  }
}

Output:

@media (min-width: 768px) {
  :is(.bar, .foo::marker) {
    color: red;
  }
}

The ::marker inside of :is() is invalid.

Expected output:

@media (min-width: 768px) {
  .bar,
  .foo::marker {
    color: red;
  }
}

Reproduction: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22.bar%2C%5Cn.foo%3A%3Amarker%20%7B%5Cn%20%20%40media%20(min-width%3A%20768px)%20%7B%5Cn%20%20%20%20color%3A%20red%3B%5Cn%20%20%7D%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


If you move the @media to the outside, then it does result in the expected output: Input:

@media (min-width: 768px) {
  .bar,
  .foo::marker {
    color: red;
  }
}

Output:

@media (min-width: 768px) {
  :is(.bar, .foo::marker) {
    color: red;
  }
}

RobinMalfait avatar Jan 16 '24 11:01 RobinMalfait