core

core copied to clipboard

Vue version

3.2.40

Link to minimal reproduction

https://sfc.vuejs.org/#eNptkU1OhEAQha9S6Q0zicAeGRPv0Rt+mpme0D/pajATwgI3HkDjFVwY9yYuPQrGc9gNaMYJu6r6HvR7eR251TpqG0YSkmJhuLaAzDb6hkoutDIWOjCsgh4qowQEThpQSWWhJFpgcl9zPMDOazaBYWWw/WVf72/fzw+raBxex+FjvH8ch6dVQWUy+fmScbygaTx7dO7cYpnQdWaZ32xa8haKOkPcUZJRErsrwL9rPl/T+PxDmaI91X4EyFV56vwAUKhamQTaMOey3Cw5t9drcA66zs6Triv+os64n0JOjsgVmSsIRaajIyrpSprs0QUgJQkshilx1fidkoO1GpM4xqrw1R4xUmYfuykyjbRcsIihCHOj7pAZ92NKlpd70v8AnvrAUQ==

Steps to reproduce

1, Declare responsive variables in script with Unicode variable names.' 2, Use in style via v-bind.

What is expected?

JS and CSS variable names both support Unicode variable names, so there is no problem compiling directly into Unicode CSS variable names?

    var(--472cff63-english);
    var(--472cff63-中文);
    var(--472cff63-にほんご);
    var(--472cff63-français);

What is actually happening?

Unicode JS variable names used in Style via v-bind() will be replaced with _ when compiled into CSS code. Then variable names with the same number of digits will be converted to the same.

    var(--472cff63-english);
    var(--472cff63-__);
    var(--472cff63-____);
    var(--472cff63-fran_ais);

System Info

No response

Any additional comments?

No response

It will only affect dev mode, and be hashed, like var(--50d5a8e9), in production mode.