fix(runtime-vapor): Loss of css var in Teleport by jackma9604 · Pull Request #14284 · vuejs/core

jackma9604 · 2026-01-06T03:05:08Z

coderabbitai · 2026-01-06T03:05:13Z

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.

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 · 2026-01-06T03:06:08Z

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	85.5 kB	30 kB	26.5 kB
runtime-dom.global.prod.js	108 kB	40.7 kB	36.6 kB
vue.global.prod.js	167 kB	60.8 kB	54 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.3 kB	18.9 kB	17.3 kB
createApp	57.3 kB	22 kB	20.1 kB
createApp + vaporInteropPlugin	85.4 kB	31.9 kB	28.8 kB
createVaporApp	27.6 kB	10.6 kB	9.72 kB
createSSRApp	61.6 kB	23.9 kB	21.7 kB
defineCustomElement	63.3 kB	23.9 kB	21.8 kB
overall	72.1 kB	27.3 kB	24.9 kB

pkg-pr-new · 2026-01-06T03:06:24Z

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/compiler-vapor

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/runtime-vapor

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: d6b496c

jackma9604 · 2026-01-06T09:20:54Z

the vdom mode has the same problem. I'm trying to fix it!

edison1105 · 2026-01-07T09:14:02Z

Thanks for the PR!
Could you please add a test case?

edison1105 · 2026-01-07T09:18:09Z

packages/runtime-vapor/src/components/Teleport.ts

        ;(nodes.onUpdated || (nodes.onUpdated = [])).push(() =>
          updateCssVars(this),
        )
+      } else if (isVaporComponent(nodes) && isFragment(nodes.block)) {


should consider recursively processing child nodes
see repl with this PR

Okay, I'll revise it!

edison1105 · 2026-01-08T08:39:13Z

Thanks for the PR. I've made minor tweaks. see d6b496c

move test to useCssVars.spec.ts
avoid register updateCssVars callback to instance's updated hooks because the DOM tree won't
changed when the component updated.

fix(runtime-vapor): Loss of css var in Teleport

b0060ac

edison1105 added need test The PR has missing test cases. 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: vapor related to vapor mode labels Jan 7, 2026

edison1105 reviewed Jan 7, 2026

View reviewed changes

fix(runtime-vapor): change the registerUpdateCssVars method to recursive

f0f4246

jackma9604 force-pushed the fix/loss-of-css-var-in-teleport branch from e60b9a9 to 623bfb2 Compare January 7, 2026 12:56

jackma9604 requested a review from edison1105 January 7, 2026 13:00

jackma9604 force-pushed the fix/loss-of-css-var-in-teleport branch from 623bfb2 to f0f4246 Compare January 7, 2026 13:06

jackma9604 and others added 3 commits January 7, 2026 22:39

fix(runtime-vapor): fix VaporTeleport hmr

f0ee98d

fix(runtime-vapor): add the test of Teleport with css vars

9d443d4

chore: minor tweaks

d6b496c

edison1105 removed the need test The PR has missing test cases. label Jan 8, 2026

edison1105 merged commit 9bb5046 into vuejs:minor Jan 8, 2026
15 checks passed

jackma9604 deleted the fix/loss-of-css-var-in-teleport branch January 8, 2026 08:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(runtime-vapor): Loss of css var in Teleport#14284

fix(runtime-vapor): Loss of css var in Teleport#14284
edison1105 merged 5 commits intovuejs:minorfrom
jackma9604:fix/loss-of-css-var-in-teleport

jackma9604 commented Jan 6, 2026

Uh oh!

coderabbitai bot commented Jan 6, 2026

Review skipped

Uh oh!

github-actions bot commented Jan 6, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Jan 6, 2026 •

edited

Loading

Uh oh!

jackma9604 commented Jan 6, 2026

Uh oh!

edison1105 commented Jan 7, 2026

Uh oh!

edison1105 Jan 7, 2026 •

edited

Loading

Uh oh!

jackma9604 Jan 7, 2026

Uh oh!

edison1105 commented Jan 8, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

jackma9604 commented Jan 6, 2026

Uh oh!

coderabbitai bot commented Jan 6, 2026

Review skipped

Uh oh!

github-actions bot commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

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

Uh oh!

Uh oh!

jackma9604 commented Jan 6, 2026

Uh oh!

edison1105 commented Jan 7, 2026

Uh oh!

edison1105 Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jackma9604 Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

edison1105 commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Jan 6, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 6, 2026 •

edited

Loading

edison1105 Jan 7, 2026 •

edited

Loading

edison1105 commented Jan 8, 2026 •

edited

Loading