feat(runtime-vapor): support v-bind() in CSS (#12621)

Author: edison1105

packages/compiler-sfc/src/compileScript.ts

@@ -34,7 +34,7 @@ import {
   normalScriptDefaultVar,
   processNormalScript,
 } from './script/normalScript'
-import { CSS_VARS_HELPER, genCssVarsCode } from './style/cssVars'
+import { genCssVarsCode, getCssVarsHelper } from './style/cssVars'
 import {
   type SFCTemplateCompileOptions,
   compileTemplate,
@@ -825,7 +825,7 @@ export function compileScript(
     // no need to do this when targeting SSR
     !ssr
   ) {
-    ctx.helperImports.add(CSS_VARS_HELPER)
+    ctx.helperImports.add(getCssVarsHelper(vapor))
     ctx.helperImports.add('unref')
     ctx.s.prependLeft(
       startOffset,
@@ -834,6 +834,7 @@ export function compileScript(
         ctx.bindingMetadata,
         scopeId,
         !!options.isProd,
+        vapor,
       )}\n`,
     )
   }

packages/compiler-sfc/src/style/cssVars.ts

@@ -14,6 +14,10 @@ import { getEscapedCssVarName } from '@vue/shared'
 
 export const CSS_VARS_HELPER = `useCssVars`
 
+export function getCssVarsHelper(vapor: boolean | undefined): string {
+  return vapor ? `useVaporCssVars` : CSS_VARS_HELPER
+}
+
 export function genCssVarsFromList(
   vars: string[],
   id: string,
@@ -168,6 +172,7 @@ export function genCssVarsCode(
   bindings: BindingMetadata,
   id: string,
   isProd: boolean,
+  vapor?: boolean,
 ) {
   const varsExp = genCssVarsFromList(vars, id, isProd)
   const exp = createSimpleExpression(varsExp, false)
@@ -188,7 +193,7 @@ export function genCssVarsCode(
           })
           .join('')
 
-  return `_${CSS_VARS_HELPER}(_ctx => (${transformedString}))`
+  return `_${getCssVarsHelper(vapor)}(_ctx => (${transformedString}))`
 }
 
 // <script setup> already gets the calls injected as part of the transform

packages/runtime-core/src/component.ts

@@ -461,6 +461,17 @@ export interface GenericComponentInstance {
    * @internal
    */
   suspense: SuspenseBoundary | null
+  /**
+   * `updateTeleportCssVars`
+   * For updating css vars on contained teleports
+   * @internal
+   */
+  ut?: (vars?: Record<string, string>) => void
+  /**
+   * dev only. For style v-bind hydration mismatch checks
+   * @internal
+   */
+  getCssVars?: () => Record<string, string>
 
   // lifecycle
   /**
@@ -690,18 +701,6 @@ export interface ComponentInternalInstance extends GenericComponentInstance {
    * @internal
    */
   n?: () => Promise<void>
-  /**
-   * `updateTeleportCssVars`
-   * For updating css vars on contained teleports
-   * @internal
-   */
-  ut?: (vars?: Record<string, unknown>) => void
-
-  /**
-   * dev only. For style v-bind hydration mismatch checks
-   * @internal
-   */
-  getCssVars?: () => Record<string, unknown>
 
   /**
    * v2 compat only, for caching mutated $options

packages/runtime-dom/src/helpers/useCssVars.ts

@@ -1,5 +1,6 @@
 import {
   Fragment,
+  type GenericComponentInstance,
   Static,
   type VNode,
   getCurrentInstance,
@@ -22,51 +23,25 @@ export function useCssVars(
 ): void {
   if (!__BROWSER__ && !__TEST__) return
 
-  const instance = getCurrentInstance()
-  /* v8 ignore start */
-  if (!instance) {
-    __DEV__ &&
-      warn(`useCssVars is called without current active component instance.`)
-    return
-  }
-  /* v8 ignore stop */
-
-  const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => {
-    Array.from(
-      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`),
-    ).forEach(node => setVarsOnNode(node, vars))
-  })
-
-  if (__DEV__) {
-    instance.getCssVars = () => getter(instance.proxy)
-  }
-
-  const setVars = () => {
-    const vars = getter(instance.proxy)
+  const instance = getCurrentInstance()! // to be check in baseUseCssVars
+  const getVars = () => getter(instance.proxy)
+  const setVars = (vars: Record<string, any>) => {
     if (instance.ce) {
       setVarsOnNode(instance.ce as any, vars)
     } else {
       setVarsOnVNode(instance.subTree, vars)
     }
-    updateTeleports(vars)
   }
 
-  // handle cases where child component root is affected
-  // and triggers reflow in onMounted
-  onBeforeUpdate(() => {
-    queuePostFlushCb(setVars)
-  })
-
-  onMounted(() => {
-    // run setVars synchronously here, but run as post-effect on changes
-    watch(setVars, NOOP, { flush: 'post' })
-    const ob = new MutationObserver(setVars)
-    ob.observe(instance.subTree.el!.parentNode, { childList: true })
-    onUnmounted(() => ob.disconnect())
-  })
+  baseUseCssVars(
+    instance as GenericComponentInstance,
+    () => instance.subTree.el!.parentNode!,
+    getVars,
+    setVars,
+  )
 }
 
-function setVarsOnVNode(vnode: VNode, vars: Record<string, unknown>) {
+function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
   if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
     const suspense = vnode.suspense!
     vnode = suspense.activeBranch!
@@ -96,7 +71,60 @@ function setVarsOnVNode(vnode: VNode, vars: Record<string, unknown>) {
   }
 }
 
-function setVarsOnNode(el: Node, vars: Record<string, unknown>) {
+/**
+ * @internal
+ * shared between vdom and vapor
+ */
+export function baseUseCssVars(
+  instance: GenericComponentInstance | null,
+  getParentNode: () => Node,
+  getVars: () => Record<string, any>,
+  setVars: (vars: Record<string, any>) => void,
+): void {
+  /* v8 ignore start */
+  if (!instance) {
+    __DEV__ &&
+      warn(`useCssVars is called without current active component instance.`)
+    return
+  }
+  /* v8 ignore stop */
+
+  if (__DEV__) {
+    instance.getCssVars = getVars
+  }
+
+  const updateTeleports = (instance.ut = (vars = getVars()) => {
+    Array.from(
+      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`),
+    ).forEach(node => setVarsOnNode(node, vars))
+  })
+
+  const applyCssCars = () => {
+    const vars = getVars()
+    setVars(vars)
+    updateTeleports(vars)
+  }
+
+  // handle cases where child component root is affected
+  // and triggers reflow in onMounted
+  onBeforeUpdate(() => {
+    queuePostFlushCb(applyCssCars)
+  })
+
+  onMounted(() => {
+    // run setVars synchronously here, but run as post-effect on changes
+    watch(applyCssCars, NOOP, { flush: 'post' })
+    const ob = new MutationObserver(applyCssCars)
+    ob.observe(getParentNode(), { childList: true })
+    onUnmounted(() => ob.disconnect())
+  })
+}
+
+/**
+ * @internal
+ * shared between vdom and vapor
+ */
+export function setVarsOnNode(el: Node, vars: Record<string, string>): void {
   if (el.nodeType === 1) {
     const style = (el as HTMLElement).style
     let cssText = ''

packages/runtime-dom/src/index.ts

@@ -329,6 +329,10 @@ export { patchStyle } from './modules/style'
  * @internal
  */
 export { shouldSetAsProp } from './patchProp'
+/**
+ * @internal
+ */
+export { baseUseCssVars, setVarsOnNode } from './helpers/useCssVars'
 /**
  * @internal
  */