Vue doesn't work correctly with dark classes in Tailwind 3.3

[doutatsu]

Vue version

3.2.41

Link to minimal reproduction

https://github.com/remiconnesson/tailwind-vue-deep-apply-dark-bug

Steps to reproduce

Reproduction already exists in tailwindlabs/tailwindcss#11024

What is expected?

Vue correctly converts deep selectors inside scoped CSS

What is actually happening?

For example it gets converted like this

.dark .wrapper-without-is[data-v-472cff63] .child-text {
  color: blue;
}

instead of this:

:is(.dark .wrapper[data-v-472cff63] .child-text) {
  color: blue;
}

System Info

No response

Any additional comments?

I am reposting this from the issue opened in TailwindCSS - tailwindlabs/tailwindcss#11024. Their team has said it's a Vue issue and they were planning on opening a bug report, but they never did. This issue has persisted for awhile and makes it impossible to upgrade, hence why I am opening it now

[Shyam-Chen]

I can't reproduce the issue, I am using UnoCSS.

[doutatsu]

@Shyam-Chen AFIK UnoCSS doesn't have this issue - only TailwindCSS on it's own (it was mentioned somewhere as I was reading through, will find the source)

[remiconnesson]

Hey in this reply tailwindlabs/tailwindcss#11024 (comment) there's a link to repro that doesn't use tailwindcss at all.

Link:
https://play.vuejs.org/#eNqtU8FSwjAQ/ZVMTjgD5cCtVmfU4aAHddRjLrVZIZAmmWQDOAz/bhIoLYo4znDb7tv39u1ru6Y3xmQLDzSnBUJtZIlwzRQhBReLVGxLUsnSuStGl7Y0BiyjO/AbXE2F5AOEFYYJBIfFsCPUrbssXtr5b4o/F/5n5eHS49KDpcCp9jgQ7ixb2rqpimEn2/Do8FMCcZU2wEMn2xkhOQcwvazddUHWUafSUtucWOCXTG2iRC5cL4uxkRPkQ/a79NDQD6mdAP6y0IoUw3RFsE/7FMMt6kNMspnTKnxLiRJC07UREuyTQaFVSDffikWslFIvH1IPrYd+06+mUM2P9GduFXuMPltwYBfA6B7D0k4gvJgIj18f00vag7XmXobpE+ALOC199Lgdu/WKB9udueT2vjbaolCTNzdeISjXHBWNxslNmmc0/FB3J05v7Y6yUeKFROnmCyTVKP0=

<template>
  <div>
    <div class="wrapper">
      <div class="child-text">test</div>
    </div>
    <div class="dark">
      <div class="wrapper">
        <div class="child-text">test</div>
      </div>
      <div class="wrapper-without-is">
        <div class="child-text">test</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wrapper :deep(.child-text) {
  color: red;
}

:is(.dark .wrapper :deep(.child-text)) {
  color: blue;
}

.dark .wrapper-without-is :deep(.child-text) {
  color: blue;
}
</style>

results in

[yyx990803]

closed via #8929