Skip to content

CSS variable injection between comments does not work #4201

Closed
@ota-meshi

Description

@ota-meshi

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions