From: Daniel Roe <daniel@roe.dev>
Date: Wed, 24 Sep 2025 09:11:36 +0000 (+0100)
Subject: fix(compiler-sfc): ensure css custom properties do not start with a digit (#13870)
X-Git-Tag: v3.5.22~20
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=9c279517b9bc1f4c250c555ec9b9eb6104756d56;p=thirdparty%2Fvuejs%2Fcore.git

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 323c9c7a5..d0d45890e 100644
--- 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 c6d1633cf..313380c3b 100644
--- 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