Different outputs of nested media queries

[vanyauhalin]

Hi. I have encountered an issue while using nested media queries with pseudo-elements. Look.

Setup

$ cat package.json
{
  "type": "module",
  "scripts": {
    "build": "node main.js"
  },
  "devDependencies": {
    "browserslist": "^4.23.2",
    "lightningcss": "^1.25.1"
  }
}

$ cat main.js
import browserslist from "browserslist"
import {browserslistToTargets, bundle} from "lightningcss"

function main() {
  const l = browserslist("> 0.25%")
  const t = browserslistToTargets(l)
  const r = bundle({
    drafts: {customMedia: true},
    filename: "main.css",
    minify: false,
    targets: t,
  })
  console.log(r.code.toString())
}

main()

$ cat main.css
@custom-media --m (width >= 1px);

.a::before,
.a::after {
  display: block;
}

.a::before {
  @media (--m) {
    content: "";
  }
}

.a::after {
  @media (--m) {
    content: "";
  }
}

.b::before,
.b::after {
  display: block;
  @media (--m) {
    content: "";
  }
}

Current

$ pnpm build
.a:before, .a:after {
  display: block;
}

@media (min-width: 1px) {
  .a:before {
    content: "";
  }
}

@media (min-width: 1px) {
  .a:after {
    content: "";
  }
}

.b:before, .b:after {
  display: block;
}

@media (min-width: 1px) {
  :is(.b:before, .b:after) {
    content: "";
  }
}

Expected

$ pnpm build
.a:before, .a:after {
  display: block;
}

@media (min-width: 1px) {
  .a:before, .a:after {
    content: "";
  }
}

.b:before, .b:after {
  display: block;
}

@media (min-width: 1px) {
  .b:before, .b:after {
    content: "";
  }
}