Skip to content

Unicode variable names in v-bind of Style will be convert to _ #6803

Closed
@AuroraTea

Description

@AuroraTea

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions