From 9c279517b9bc1f4c250c555ec9b9eb6104756d56 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 24 Sep 2025 10:11:36 +0100 Subject: [PATCH] fix(compiler-sfc): ensure css custom properties do not start with a digit (#13870) --- packages/compiler-sfc/__tests__/cssVars.spec.ts | 8 ++++---- packages/compiler-sfc/src/style/cssVars.ts | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) 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 -- 2.47.3