Custom css can not maintain single-quote using lightningcss

[GiveMe-A-Name]

The css code:

h1 {
  user-select: none;
  color: v-bind('color ? "red": "green"');
}

After lightningcss transform, the custom css would be double-quoted first.
The single-quoted can't be maintained.

h1 {
  user-select: none;
  color: v-bind("color ? \"red\": \"green\"");
}

v-bind("color ? \"red\": \"green\"") would transform into color: var(--7ba5bd90-color\ \?\ \\\"red\\\"\:\ \\\"green\\\"); by vue-loader. It's not expected.

Example in Lightningcss playground

Reference issue: web-infra-dev/rsbuild#3595 (comment)

[devongovett]

That's not valid CSS afaik. You should run Vue-loader before lightingcss so it is compiled first.

Or Vue loader should be more resilient. The output CSS is equivalent according to the CSS spec. Which quotes you use should not matter.