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

When will this bug be fixed, encountered the same problem

// template

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

// css

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

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