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

close #14266

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-->`)
+  })
 })

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()

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)
   }
 }