fix(compiler-sfc): ensure css custom properties do not start with a digit (#13870)

diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 323c9c7a5993c572e740049f74445c2466b6b03c..d0d45890e99e2ef67d74f59eb3aa593c267e7473 100644 (file)
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -109,8 +109,8 @@ describe('CSS vars injection', () => {
       { isProd: true },
     )
     expect(content).toMatch(`_useCssVars(_ctx => ({
-  "4003f1a6": (_ctx.color),
-  "41b6490a": (_ctx.font.size)
+  "v4003f1a6": (_ctx.color),
+  "v41b6490a": (_ctx.font.size)
 }))}`)
 
     const { code } = compileStyle({
@@ -124,8 +124,8 @@ describe('CSS vars injection', () => {
     })
     expect(code).toMatchInlineSnapshot(`
       ".foo {
-              color: var(--4003f1a6);
-              font-size: var(--41b6490a);
+              color: var(--v4003f1a6);
+              font-size: var(--v41b6490a);
       }"
     `)
   })

diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index c6d1633cf60caacb4392a335646b522eeefb333a..313380c3b40397a7b4c7a2fe08a01ed3ead49e14 100644 (file)
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -40,7 +40,8 @@ function genVarName(
   isSSR = false,
 ): string {
   if (isProd) {
-    return hash(id + raw)
+    // hash must not start with a digit to comply with CSS custom property naming rules
+    return hash(id + raw).replace(/^\d/, r => `v${r}`)
   } else {
     // escape ASCII Punctuation & Symbols
     // #7823 need to double-escape in SSR because the attributes are rendered