fix(compiler-sfc): escape non-word characters of css var

[sxzz]

This bug will affect dev mode only.

closes #6803

---

ATM, #6815 hasn't been merged. So reproduction cannot reproduce on SFC playground.

Reproduction:

<script setup>
import { ref } from 'vue'

const 蓝色 = ref('blue')
const 字体 = ref(800)
</script>

<template>
  <div class="text">
    hello
  </div>
</template>

<style>
  .text {
    color: v-bind(蓝色);
    font-weight: v-bind(字体);
  }
</style>

[antfu]

Maybe we could keep replacing symbols to _ but escape CJK chars for better readability.

[sxzz]

but it will cause conflict if there is the same length of symbols.

Example

[antfu]

We should always keep track of existing ones and add number suffixes to avoid conflicts.

[sxzz]

Maybe we could keep replacing symbols to _ but escape CJK chars for better readability.

@antfu IMHO, I don't think it's a good solution. Matching CJK is a complicated feature and it's unnecessary to have this in vue core. To avoid adding complexity, I guess just to escape all non-word characters is enough. After all, it only affects dev mode.

[antfu]

I think readability is important for dev otherwise we could use hashes as prod. Filtering is quite simple with /\p{Unified_Ideograph}/u

[sxzz]

It can only match Chinese characters, but can't Japanese Kana, Korean Hangeul... There are lots of other language characters around the world, e.g. Russian alphabet, and the Greek alphabet. How can vue handle all of them?

---

Plus, I think escaping is acceptable, not very bad

[posva]

can‘t we keep the unicode characters (in dev) as we do with variable names? After all, they seem to be valid CSS variable names

[sxzz]

@posva I tried Chinese and Japanese characters, and it can work. So maybe can we skip escaping from Unicode characters?

[sxzz]

I found an API CSS.escape, it can escape css var name perfectly. But it's browser-only API.

Can I add a polyfill dependency css.escape to compiler-sfc?

[posva]

I think it's better to avoid adding any polyfill. If Unicode works and is specified in the spec, let's do that. It should also be the lightest solution

[sxzz]

@posva Updated. It only escapes ASCII punctuation and symbols:  !"#$%&'()*+,./:;<=>?@[\]^`{|}~

[posva]

Despite devtools not highlighting the syntax correctly: the ) looks like it closes the var() statement

😆

It looks good! 👍

[antfu]

LGTM. Giving the fact that and . are quite common, maybe we could replace them to _ for better readbility?

[netlify]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	8123c37
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/63614d6b7079f200089a7d4f