search

parcel-bundler / lightningcss

An extremely fast CSS parser, transformer, bundler, and minifier written in Rust.
https://lightningcss.dev
Mozilla Public License 2.0
6.52k stars 189 forks source link

Custom css can not maintain single-quote using lightningcss #849

Closed GiveMe-A-Name closed 3 weeks ago

GiveMe-A-Name commented 3 weeks ago

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: https://github.com/web-infra-dev/rsbuild/issues/3595#issuecomment-2421679239

devongovett commented 3 weeks ago

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.