Broken pseudo element selectors when output uses `:is`

Open mischnic opened this issue 6 months ago • 0 comments

For this input

.pre {
  :global(.line:before),
  :global(.highlighted-line:before) {
    content: counter(line);
  }
}

Lightningcss generates (playground link)

:is(.EgL3uq_pre .line:before, .EgL3uq_pre .highlighted-line:before) {
  content: counter(line);
}

which is invalid

The :is() pseudo-class requires a selector list, a comma-separated list of one or more selectors as its argument. The list must not contain a pseudo-element, but any other simple, compound, and complex selectors are allowed.

Example HTML where you see this behavior:

<html>
  <head>
    <style>
      .original {
        .pre {
          .line:before,
          .highlighted-line:before {
            content: counter(line);
          }
        }
      }
      .lightningcss {
        :is(.EgL3uq_pre .line:before, .EgL3uq_pre .highlighted-line:before) {
          content: counter(line);
        }
      }
    </style>
  </head>
  <body>
    <div class="original">
      <div class="pre">
        <div class="line">hello</div>
        <div class="line">test</div>
      </div>
    </div>
    <hr />
    <div class="lightningcss">
      <div class="EgL3uq_pre">
        <div class="line">hello</div>
        <div class="line">test</div>
      </div>
    </div>
  </body>
</html>

Jul 17 '25 10:07 mischnic