fix(compiler-sfc): prefix digit css custom properties #13870

danielroe · 2025-09-11T11:38:03Z

in short, custom properties must not start with an unescaped digit, as they are a more specialised form of <ident> (docs).

Summary by CodeRabbit

Bug Fixes
- Production builds now emit CSS custom property names with a leading “v” when the generated identifier would start with a digit. Non-production behavior is unchanged.
Tests
- Updated test expectations to reflect the “v”-prefixed CSS variable names in production mode.

…igit

coderabbitai · 2025-09-11T11:38:12Z

Walkthrough

Production-only CSS var name generation now prefixes a leading digit with "v" to comply with CSS rules. Tests updated to expect "v"-prefixed hashes in prod mode; non-prod behavior unchanged.

Changes

Cohort / File(s)	Change Summary
Prod CSS var name sanitization `packages/compiler-sfc/src/style/cssVars.ts`	In isProd path, `genVarName` now ensures hashed names don’t start with a digit by prefixing with "v" when necessary. Added comment; non-prod unchanged.
Test expectations update `packages/compiler-sfc/__tests__/cssVars.spec.ts`	Updated prod-mode snapshots/expectations to use `v`-prefixed custom property names and references (e.g., `--v4003f1a6`).

Sequence Diagram(s)

sequenceDiagram
  participant SFC as SFC Compiler
  participant CSSV as genVarName (prod)
  participant OUT as Output CSS/JS

  SFC->>CSSV: request variable name (id, raw)
  note over CSSV: hash = hash(id+raw)
  CSSV->>CSSV: if hash starts with digit<br/>prefix with "v"
  CSSV-->>SFC: sanitized name (e.g., v4003f1a6)
  SFC->>OUT: emit var(--v4003f1a6) and _useCssVars mapping

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

scope: sfc, scope: sfc-style-vars, :hammer: p3-minor-bug

Suggested reviewers

yyx990803
edison1105

Pre-merge checks (2 passed, 1 warning)

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly and accurately describes the primary change: preventing CSS custom properties in compiler-sfc from starting with a digit by prefixing them. It names the affected package (compiler-sfc) and the nature of the change (fix), which matches the code and test updates in the PR. The wording is concise and clear for teammates scanning PR history.

Poem

A nibble of hash, a hop of style,
I prefix digits with a jaunty smile.
In prod I squeak, “v” leads the way—
Custom props can safely play.
Tests now purr, no failing fright,
Carrot-green builds, all CSS right. 🥕✨

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-09-11T11:39:00Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB	38.5 kB	34.6 kB
vue.global.prod.js	159 kB	58.6 kB	52.1 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.6 kB	18.2 kB	16.7 kB
createApp	54.6 kB	21.3 kB	19.4 kB
createSSRApp	58.9 kB	23 kB	21 kB
defineCustomElement	59.6 kB	22.8 kB	20.9 kB
overall	68.8 kB	26.4 kB	24.2 kB

pkg-pr-new · 2025-09-11T11:39:11Z

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13870

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13870

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13870

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13870

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13870

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13870

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13870

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13870

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13870

vue

npm i https://pkg.pr.new/vue@13870

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13870

commit: 49b6313

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

packages/compiler-sfc/src/style/cssVars.ts (1)
43-44: Minor: avoid regex for single-char check.

Tiny micro-opt/readability; equivalent behavior without a regex.
-    return hash(id + raw).replace(/^\d/, r => `v${r}`)
+    const h = hash(id + raw)
+    return h.charCodeAt(0) >= 48 && h.charCodeAt(0) <= 57 ? `v${h}` : h
packages/compiler-sfc/__tests__/cssVars.spec.ts (1)

112-114: Tests correctly updated for prefixed prod vars.

Assertions now expect var names with a leading 'v' and match the implementation.

Consider adding a small sanity check that a non-digit-leading hash remains unchanged (guard against accidental double-prefixing).

Also applies to: 127-128

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 75220c7 and 49b6313.

📒 Files selected for processing (2)

packages/compiler-sfc/__tests__/cssVars.spec.ts (2 hunks)
packages/compiler-sfc/src/style/cssVars.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Redirect rules
GitHub Check: Header rules
GitHub Check: Pages changed

🔇 Additional comments (1)

packages/compiler-sfc/src/style/cssVars.ts (1)

43-44: Compliant var naming for prod — LGTM.

Prefixing digit-starting hashes fixes invalid custom property idents. Change is minimal and scoped to prod path.

11Alone11 · 2025-09-12T20:59:37Z

Hi! Thanks a lot for creating this PR 🙏
Just wanted to kindly mention that this change is quite important for SEO — it directly affects how pages are indexed.
If possible, it would be great to merge it soon so projects depending on Vue 3 can benefit from it earlier.
Thanks again for your time and efforts! 🚀

fix(compiler-sfc): ensure css custom properties do not start with a d…

49b6313

…igit

coderabbitai bot reviewed Sep 11, 2025

View reviewed changes

edison1105 added ready to merge The PR is ready to be merged. scope: sfc 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Sep 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(compiler-sfc): prefix digit css custom properties #13870

fix(compiler-sfc): prefix digit css custom properties #13870

danielroe commented Sep 11, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Sep 11, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 11, 2025

Uh oh!

pkg-pr-new bot commented Sep 11, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

11Alone11 commented Sep 12, 2025

Uh oh!

Uh oh!

Uh oh!

fix(compiler-sfc): prefix digit css custom properties #13870

Are you sure you want to change the base?

fix(compiler-sfc): prefix digit css custom properties #13870

Conversation

danielroe commented Sep 11, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested labels

Suggested reviewers

Pre-merge checks (2 passed, 1 warning)

Poem

Uh oh!

github-actions bot commented Sep 11, 2025

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Sep 11, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

11Alone11 commented Sep 12, 2025

Uh oh!

Uh oh!

danielroe commented Sep 11, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 11, 2025 •

edited

Loading