multiple nested selectors within `:deep` don't work with lightningcss

[brc-dd]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

:deep(.foo) {
  &:hover,
  &:focus,
  &:focus-within {
    .bar {
      color: red;
    }
  }
}

when css.transformer is set to lightningcss, this is getting compiled to:

:is(:deep(.foo):hover,:deep(.foo):focus,:deep(.foo):focus-within) .bar[data-v-4089b056]{color:red}

with postcss:

:is([data-v-4089b056] .foo:hover,[data-v-4089b056] .foo:focus,[data-v-4089b056] .foo:focus-within) .bar{color:red}

Reproduction

https://stackblitz.com/edit/vitejs-vite-3kuur5ua?file=src/App.vue,vite.config.ts

Steps to reproduce

1. Hover on the button in preview. The color doesn't change.
2. Comment out transformer: 'lightningcss' in vite.config.ts and save.
3. Hover on the button in preview. The color changes to red.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 22.22.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-vue: ^6.0.5 => 6.0.6 
    vite: ^8.0.8 => 8.0.8

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[haoqunjiang]

Correction:
With PostCSS it's compiled into:

[data-v-7a7a37b1] .foo {
&:hover,
  &:focus,
  &:focus-within {
.bar {
      color: red;
}
}
}

Seems like a @vue/compiler-sfc bug.

• Lightning CSS does the syntax lowering for CSS nesting (because it's not supported until Chrome 120, and baseline-widely-available currently targets Chrome 111), so the selector becomes :is(:deep(.foo):hover,:deep(.foo):focus,:deep(.foo):focus-within) .bar
• @vue/compiler-sfc can't handle the :deep() selector inside :is() correctly

Vite doesn't come with postcss-nested by default so this example works fine with PostCSS transform.

Actually even with postcss-nested enabled in user land, it still works, because postcss-nested only does plain text expansion instead of using the more recommended :is() pseudo class. (postcss-nesting handles it correctly though).