fix(compiler-vapor): handling of class and style bindings on SVG elements by edison1105 · Pull Request #14383 · vuejs/core

edison1105 · 2026-02-01T04:23:28Z

close #14382

Summary by CodeRabbit

Tests
- Added test case for SVG elements with :style binding.
Bug Fixes
- Improved handling of class and style bindings on SVG elements during compilation; SVG elements now use optimized operations instead of generic attribute setting.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-02-01T04:23:34Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

🔍 Trigger a full review

📝 Walkthrough

Walkthrough

This change fixes SVG element styling in Vue's Vapor compiler by modifying how :class and :style bindings are handled. The compiler now prioritizes special helper functions (class, style, etc.) over generic attribute handling for SVG elements, ensuring proper property binding instead of string concatenation.

Changes

Cohort / File(s)	Summary
SVG Prop Binding Logic `packages/compiler-vapor/src/generators/prop.ts`	Reordered precedence in getRuntimeHelper to check special helpers (class, style, innerHTML, etc.) before falling back to SVG attribute path, allowing SVG elements to benefit from specialized setClass and setStyle functions.
SVG Binding Tests `packages/compiler-vapor/__tests__/transforms/vBind.spec.ts`	Updated test expectations for SVG class bindings to use _setClass and added new test case for SVG style bindings using _setStyle.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

scope: compiler, :hammer: p3-minor-bug

Suggested reviewers

skirtles-code

Poem

🐰 A hop and a skip through the SVG fix,
Where styles now bind with proper tricks,
No more objects stringified in sight,
Just setStyle and setClass, oh what delight! 🎨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The changes directly address the linked issue `#14382` by fixing SVG style and class binding handling to emit correct runtime helpers (_setStyle, _setClass) instead of incorrect serialization.
Out of Scope Changes check	✅ Passed	All changes in the pull request are directly related to fixing SVG class/style bindings in the vapor compiler, with no unrelated modifications detected.
Title check	✅ Passed	The title accurately summarizes the main change: fixing SVG handling for class and style bindings in the compiler-vapor package by updating the precedence of special helpers.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch edison/fix/14382

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

pkg-pr-new · 2026-02-01T04:24:13Z

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14383

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

yarn add https://pkg.pr.new/@vue/compiler-core@14383.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14383

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

yarn add https://pkg.pr.new/@vue/compiler-dom@14383.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14383

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

yarn add https://pkg.pr.new/@vue/compiler-sfc@14383.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14383

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

yarn add https://pkg.pr.new/@vue/compiler-ssr@14383.tgz

@vue/compiler-vapor

pnpm add https://pkg.pr.new/@vue/compiler-vapor@14383

npm i https://pkg.pr.new/@vue/compiler-vapor@14383

yarn add https://pkg.pr.new/@vue/compiler-vapor@14383.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14383

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

yarn add https://pkg.pr.new/@vue/reactivity@14383.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14383

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

yarn add https://pkg.pr.new/@vue/runtime-core@14383.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14383

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

yarn add https://pkg.pr.new/@vue/runtime-dom@14383.tgz

@vue/runtime-vapor

pnpm add https://pkg.pr.new/@vue/runtime-vapor@14383

npm i https://pkg.pr.new/@vue/runtime-vapor@14383

yarn add https://pkg.pr.new/@vue/runtime-vapor@14383.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14383

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

yarn add https://pkg.pr.new/@vue/server-renderer@14383.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14383

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

yarn add https://pkg.pr.new/@vue/shared@14383.tgz

vue

pnpm add https://pkg.pr.new/vue@14383

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

yarn add https://pkg.pr.new/vue@14383.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14383

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

yarn add https://pkg.pr.new/@vue/compat@14383.tgz

commit: 50b3389

github-actions · 2026-02-01T04:24:15Z

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	86.4 kB	30.2 kB	26.6 kB
runtime-dom.global.prod.js	109 kB	41.4 kB	37.2 kB
vue.global.prod.js	169 kB	61.2 kB	54.5 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	49.5 kB	19.4 kB	17.7 kB
createApp	58.5 kB	22.7 kB	20.7 kB
createApp + vaporInteropPlugin	80.5 kB	29.9 kB	27.1 kB
createVaporApp	29.3 kB	11.3 kB	10.4 kB
createSSRApp	62.8 kB	24.4 kB	22.2 kB
createVaporSSRApp	32.7 kB	12.6 kB	11.5 kB
defineCustomElement	64.5 kB	24.6 kB	22.3 kB
defineVaporCustomElement	39.6 kB	14.6 kB	13.4 kB
overall	73.3 kB	28 kB	25.4 kB

edison1105 · 2026-02-01T12:22:09Z

@coderabbitai review

coderabbitai · 2026-02-01T12:22:16Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

…s/style bindings

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/compiler-vapor/src/generators/prop.ts`:
- Around line 188-197: The special-helper branch currently returns helper
directly from getSpecialHelper(key, tagName) so SVG elements call helpers like
setClass without the isSVG flag; change the return path so when isSVG is true
you wrap/extend the returned helper with { isSVG: true } (e.g. for the helper
variable returned by getSpecialHelper in prop.ts) so functions like
setClass/setAttr receive the isSVG flag; ensure this wrapping is applied before
returning the helper (similar to how helpers.setAttr is extended) so SVG class
bindings use setAttribute instead of el.className.

packages/compiler-vapor/src/generators/prop.ts

edison1105 linked an issue Feb 1, 2026 that may be closed by this pull request

[Vapor] ⁨:style={...}⁩ attributes on SVG elements render as ⁨[object Object]⁩ #14382

Closed

fix(compiler-vapor): update SVG handling in v-bind generator for clas…

427895a

…s/style bindings

edison1105 force-pushed the edison/fix/14382 branch from 88331ab to 427895a Compare February 1, 2026 12:27

coderabbitai bot reviewed Feb 1, 2026

View reviewed changes

packages/compiler-vapor/src/generators/prop.ts Outdated Show resolved Hide resolved

edison1105 changed the title ~~fix(compiler-vapor): update SVG handling in v-bind generator for class/style bindings~~ fix(compiler-vapor): handling of class and style bindings on SVG elements Feb 1, 2026

fix(compiler-vapor): pass isSVG flag to setClass helper for SVG elements

50b3389

edison1105 added the scope: vapor related to vapor mode label Feb 2, 2026

edison1105 merged commit 3019448 into minor Feb 2, 2026
17 checks passed

edison1105 deleted the edison/fix/14382 branch February 2, 2026 01:49

edison1105 mentioned this pull request Feb 2, 2026

[Vapor] ⁨:style={...}⁩ attributes on SVG elements render as ⁨[object Object]⁩ #14382

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(compiler-vapor): handling of class and style bindings on SVG elements#14383

fix(compiler-vapor): handling of class and style bindings on SVG elements#14383
edison1105 merged 2 commits intominorfrom
edison/fix/14382

edison1105 commented Feb 1, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Feb 1, 2026 •

edited

Loading

Review skipped

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Uh oh!

pkg-pr-new bot commented Feb 1, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 1, 2026

Uh oh!

edison1105 commented Feb 1, 2026

Uh oh!

coderabbitai bot commented Feb 1, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

edison1105 commented Feb 1, 2026 • 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 Feb 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Uh oh!

pkg-pr-new bot commented Feb 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 1, 2026

Size Report

Bundles

Usages

Uh oh!

edison1105 commented Feb 1, 2026

Uh oh!

coderabbitai bot commented Feb 1, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

edison1105 commented Feb 1, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 1, 2026 •

edited

Loading

pkg-pr-new bot commented Feb 1, 2026 •

edited

Loading