refactor(vapor): rename vaporUseCssVars to useVaporCssVars and update related references

Author: edison1105

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

@@ -10,12 +10,12 @@ import {
 import type { SFCDescriptor } from '../parse'
 import type { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
-import { capitalize, getEscapedCssVarName } from '@vue/shared'
+import { getEscapedCssVarName } from '@vue/shared'
 
 export const CSS_VARS_HELPER = `useCssVars`
 
 export function getCssVarsHelper(vapor: boolean | undefined): string {
-  return vapor ? `vapor${capitalize(CSS_VARS_HELPER)}` : CSS_VARS_HELPER
+  return vapor ? `useVaporCssVars` : CSS_VARS_HELPER
 }
 
 export function genCssVarsFromList(

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

@@ -71,6 +71,10 @@ function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
   }
 }
 
+/**
+ * @internal
+ * shared between vdom and vapor
+ */
 export function baseUseCssVars(
   instance: GenericComponentInstance | null,
   getParentNode: () => Node,
@@ -86,7 +90,7 @@ export function baseUseCssVars(
   /* v8 ignore stop */
 
   if (__DEV__) {
-    instance.getCssVars = () => getVars()
+    instance.getCssVars = getVars
   }
 
   const updateTeleports = (instance.ut = (vars = getVars()) => {
@@ -116,6 +120,10 @@ export function baseUseCssVars(
   })
 }
 
+/**
+ * @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

packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts

@@ -5,15 +5,15 @@ import {
   renderEffect,
   setStyle,
   template,
-  vaporUseCssVars,
+  useVaporCssVars,
 } from '@vue/runtime-vapor'
 import { nextTick, onMounted, reactive, ref } from '@vue/runtime-core'
 import { makeRender } from '../_utils'
 import type { VaporComponent } from '../../src/component'
 
 const define = makeRender()
 
-describe('vaporUseCssVars', () => {
+describe('useVaporCssVars', () => {
   async function assertCssVars(getApp: (state: any) => VaporComponent) {
     const state = reactive({ color: 'red' })
     const App = getApp(state)
@@ -35,7 +35,7 @@ describe('vaporUseCssVars', () => {
     const t0 = template('<div></div>')
     await assertCssVars(state => ({
       setup() {
-        vaporUseCssVars(() => state)
+        useVaporCssVars(() => state)
         const n0 = t0()
         return n0
       },
@@ -46,7 +46,7 @@ describe('vaporUseCssVars', () => {
     const t0 = template('<div></div>')
     await assertCssVars(state => ({
       setup() {
-        vaporUseCssVars(() => state)
+        useVaporCssVars(() => state)
         const n0 = t0()
         const n1 = t0()
         return [n0, n1]
@@ -64,7 +64,7 @@ describe('vaporUseCssVars', () => {
     })
     await assertCssVars(state => ({
       setup() {
-        vaporUseCssVars(() => state)
+        useVaporCssVars(() => state)
         return createComponent(Child)
       },
     }))
@@ -82,7 +82,7 @@ describe('vaporUseCssVars', () => {
 
     define({
       setup() {
-        vaporUseCssVars(() => state)
+        useVaporCssVars(() => state)
         const n0 = createIf(
           () => value.value,
           () => {
@@ -125,7 +125,7 @@ describe('vaporUseCssVars', () => {
     const t0 = template('<div></div>')
     define({
       setup() {
-        vaporUseCssVars(() => state)
+        useVaporCssVars(() => state)
         return createComponent(Child, null, {
           default: () => {
             return createIf(
@@ -174,7 +174,7 @@ describe('vaporUseCssVars', () => {
 
     define({
       setup() {
-        vaporUseCssVars(() => state)
+        useVaporCssVars(() => state)
         const n0 = t0() as any
         renderEffect(() =>
           setStyle(n0, state.color ? 'pointer-events: none' : undefined),
@@ -214,7 +214,7 @@ describe('vaporUseCssVars', () => {
 
     define({
       setup() {
-        vaporUseCssVars(() => state)
+        useVaporCssVars(() => state)
         return createIf(
           () => value.value,
           () => createComponent(Child),
@@ -246,7 +246,7 @@ describe('vaporUseCssVars', () => {
 
     define({
       setup() {
-        vaporUseCssVars(() => state)
+        useVaporCssVars(() => state)
         onMounted(() => {
           colorInOnMount = (
             root.children[0] as HTMLElement

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

@@ -7,14 +7,13 @@ import { type VaporComponentInstance, isVaporComponent } from '../component'
 import { isArray } from '@vue/shared'
 import type { Block } from '../block'
 
-export function vaporUseCssVars(getter: () => Record<string, string>): void {
+export function useVaporCssVars(getter: () => Record<string, string>): void {
   if (!__BROWSER__ && !__TEST__) return
-
   const instance = currentInstance as VaporComponentInstance
   baseUseCssVars(
     instance,
     () => resolveParentNode(instance.block),
-    () => getter(),
+    getter,
     vars => setVarsOnBlock(instance.block, vars),
   )
 }

packages/runtime-vapor/src/index.ts

@@ -54,7 +54,7 @@ export {
   getDefaultValue,
 } from './apiCreateFor'
 export { createTemplateRefSetter } from './apiTemplateRef'
-export { vaporUseCssVars } from './helpers/useCssVars'
+export { useVaporCssVars } from './helpers/useCssVars'
 export { createDynamicComponent } from './apiCreateDynamicComponent'
 export { applyVShow } from './directives/vShow'
 export {