fix(runtime-vapor): handle css vars work with empty VaporFragment (#14268)

edison1105 · web-flow · commit 8aa371453054 · 2026-01-04T09:10:46.000+08:00
close #14266
diff --git a/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts
@@ -1,6 +1,7 @@
 import {
   VaporTeleport,
   createComponent,
+  createFor,
   createIf,
   createPlainElement,
   defineVaporComponent,
@@ -410,4 +411,48 @@ describe('useVaporCssVars', () => {
 
     expect(colorInOnMount).toBe(`red`)
   })
+
+  test('work with v-if false', () => {
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+
+    define({
+      setup() {
+        useVaporCssVars(() => state)
+        return createIf(
+          () => false,
+          () => {
+            const n2 = template('<div class="red">Hi</div>')()
+            return n2
+          },
+          null as any,
+          true,
+        )
+      },
+    }).render({}, root)
+
+    expect(root.innerHTML).toBe(`<!--if-->`)
+  })
+
+  test('work with empty v-for', () => {
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+
+    define({
+      setup() {
+        useVaporCssVars(() => state)
+        return createFor(
+          // empty source
+          () => [],
+          item => {
+            return template('<div class="red">Hi</div>')()
+          },
+          undefined,
+          4,
+        )
+      },
+    }).render({}, root)
+
+    expect(root.innerHTML).toBe(`<!--for-->`)
+  })
 })
diff --git a/packages/runtime-vapor/src/apiCreateIf.ts b/packages/runtime-vapor/src/apiCreateIf.ts
@@ -8,6 +8,7 @@ import {
 } from './insertionState'
 import { renderEffect } from './renderEffect'
 import { DynamicFragment } from './fragment'
+import { createComment, createTextNode } from './dom/node'
 
 export function createIf(
   condition: () => any,
@@ -22,7 +23,11 @@ export function createIf(
 
   let frag: Block
   if (once) {
-    frag = condition() ? b1() : b2 ? b2() : []
+    frag = condition()
+      ? b1()
+      : b2
+        ? b2()
+        : [__DEV__ ? createComment('if') : createTextNode()]
   } else {
     frag =
       isHydrating || __DEV__ ? new DynamicFragment('if') : new DynamicFragment()
diff --git a/packages/runtime-vapor/src/helpers/useCssVars.ts b/packages/runtime-vapor/src/helpers/useCssVars.ts
@@ -23,11 +23,12 @@ function resolveParentNode(block: Block): Node {
   if (block instanceof Node) {
     return block.parentNode!
   } else if (isArray(block)) {
-    return resolveParentNode(block[0])
+    // Use the last element, so ForFragment will use the anchor
+    return resolveParentNode(block[block.length - 1])
   } else if (isVaporComponent(block)) {
     return resolveParentNode(block.block!)
   } else {
-    return resolveParentNode(block.nodes)
+    return resolveParentNode(block.anchor || block.nodes)
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -23,11 +23,12 @@ function resolveParentNode(block: Block): Node {`
`23`	`23`	`if (block instanceof Node) {`
`24`	`24`	`return block.parentNode!`
`25`	`25`	`} else if (isArray(block)) {`
`26`		`- return resolveParentNode(block[0])`
	`26`	`+ // Use the last element, so ForFragment will use the anchor`
	`27`	`+ return resolveParentNode(block[block.length - 1])`
`27`	`28`	`} else if (isVaporComponent(block)) {`
`28`	`29`	`return resolveParentNode(block.block!)`
`29`	`30`	`} else {`
`30`		`- return resolveParentNode(block.nodes)`
	`31`	`+ return resolveParentNode(block.anchor \|\| block.nodes)`
`31`	`32`	`}`
`32`	`33`	`}`
`33`	`34`