SSR: CSS custom properties bug using v-bind

[jasonkellydk]

Version

3.2.31

Reproduction link

github.com

Steps to reproduce

1. Npm run start

2. Go to http://localhost:3000 see FOUT

2.a Alternatively see view-source:http://localhost:3000/ and watch the custom properties generated by v-bind

What is expected?

The custom property should have a valid syntax containing the "--" prefix

example of the problem: "7ba5bd90:250px";

What is actually happening?

the custom property would contain the required "--"

example of the solution: "--7ba5bd90:250px";

---

It happened while using server side rendering and noticing a flash of unstyled components

[simqifeng]

When will this bug be fixed, encountered the same problem

[xiaoyongchen]

// template

// props
disabledColor: {
type: String,
default: "#86949e",
},

// css

.is-color-disabled {
font-weight: 600;
color: v-bind(disabledColor);
}

// result
color: var(--dc5f906c-disabledColor);