[Bug]: Vue CSS v-bind condition is broken by lightningcss

[ywenhao]

Version

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
    Memory: 2.23 GB / 15.75 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @rsbuild/core: ^1.0.1 => 1.0.8
    @rsbuild/plugin-vue: ^1.0.1 => 1.0.1

Details

<template>
  <div class="content" @click="color = !color">
    <h1>Rsbuild with Vue</h1>
    <p>Start building amazing things with Rsbuild.</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref(true)
</script>

<style scoped>
content h1 {
  font-size: 3.6rem;
  font-weight: 700;
  /* ok */
  color: v-bind("color ? 'red': 'green'");
  /* no ok */
  color: v-bind('color ? "red": "green"');
}
</style>

// mian css
 /* ok */
  color: v-bind("color ? 'red': 'green'");
  /* no ok */
  color: v-bind('color ? "red": "green"');

Reproduce Steps

yarn dev

[chenjiahan]

I tried Vite and this does not work as well, is this a valid syntax in Vue?

[ywenhao]

/* no ok */
// color: v-bind('color ? "red": "green"');

/* ok */
// color: v-bind("color ? 'red': 'green'");

[chenjiahan]

Have you tried Vite demo?

[ywenhao]

yes , vite demo:

[chenjiahan]

I can’t reproduce a similar Vite demo. Can you provide your Vite / Rsbuild demos?

[github-actions]

Hello @ywenhao. Please provide a reproduction repository or online demo. For background, see Why reproductions are required. Thanks ❤️

[ywenhao]

Hello @ywenhao. Please provide a reproduction repository or online demo. For background, see Why reproductions are required. Thanks ❤️

git@github.com:ywenhao/rsbuild-vue-css-demo.git

vite-demo
https://stackblitz.com/edit/vitejs-vite-aw9yet?file=src%2FApp.vue

[github-actions]

As the issue was labelled with need reproduction, but no response in 5 days. This issue will be closed. Feel free to comment and reopen it if you have any further questions. For background, see Why reproductions are required.

由于该 issue 被标记为 "需要重现"，但在 5 天内没有回应，因此该 issue 将被关闭。如果你有任何进一步的问题，请随时发表评论并重新打开该 issue。背景请参考 为什么需要最小重现。

[chenjiahan]

The style is broken by lightningcss-loader.

• lightningcssLoader: false:

h1[data-v-7ba5bd90] {
  color: var(--7ba5bd90-color\ \?\ \"red\"\:\ \"green\");
}

• lightningcssLoader: true

h1[data-v-7ba5bd90] {
  color: var(--7ba5bd90-color\ \?\ \\\"red\\\"\:\ \\\"green\\\");
}

@GiveMe-A-Name can you help to fix this? ❤️