From 49b6313e95a1cb15264a80dac69b9851bcc3afdf Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 11 Sep 2025 12:37:34 +0100 Subject: [PATCH] fix(compiler-sfc): ensure css custom properties do not start with a digit --- 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 323c9c7a599..d0d45890e99 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 c6d1633cf60..313380c3b40 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