Subscribe on changes!

CSS variable injection between comments does not work

avatar
Jul 28th 2021

Version

3.2.0-beta.6

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDEgY2xhc3M9XCJ0ZXh0XCI+e3sgbXNnIH19PC9oMT5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXA+XG5jb25zdCBtc2cgPSAnSGVsbG8gV29ybGQhJ1xuY29uc3QgY29sb3IgPSAncmVkJ1xuPC9zY3JpcHQ+XG48c3R5bGU+XG4vKiovXG4gIC50ZXh0IHtcbiAgICBjb2xvcjogdi1iaW5kKGNvbG9yKVxuICB9XG4vKiovXG48L3N0eWxlPiJ9

Steps to reproduce

  • Open the link.
  • v-bind() should inject red into the text color, but it remains the default color.

What is expected?

I expected the text color to be red.

What is actually happening?

If you use comment before and after v-bind() in CSS, v-bind() between comments will not be injected.


I think we need to use non-greedy(?) for regex.

https://github.com/vuejs/vue-next/blob/204e194d2b9833a29e918b8b197cad3fb6cfb155/packages/compiler-sfc/src/cssVars.ts#L41

avatar
Jul 28th 2021

uh~ sorry. it's my fault.