feat: ssr support for <style vars>

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

@@ -1,6 +1,6 @@
 import {
   render,
-  useCSSVars,
+  useCssVars,
   h,
   reactive,
   nextTick,
@@ -37,7 +37,7 @@ describe('useCssVars', () => {
     await assertCssVars(state => ({
       setup() {
         // test receiving render context
-        useCSSVars((ctx: any) => ({
+        useCssVars((ctx: any) => ({
           color: ctx.color
         }))
         return state
@@ -51,7 +51,7 @@ describe('useCssVars', () => {
   test('on fragment root', async () => {
     await assertCssVars(state => ({
       setup() {
-        useCSSVars(() => state)
+        useCssVars(() => state)
         return () => [h('div'), h('div')]
       }
     }))
@@ -62,7 +62,7 @@ describe('useCssVars', () => {
 
     await assertCssVars(state => ({
       setup() {
-        useCSSVars(() => state)
+        useCssVars(() => state)
         return () => h(Child)
       }
     }))
@@ -75,7 +75,7 @@ describe('useCssVars', () => {
       state => ({
         __scopeId: id,
         setup() {
-          useCSSVars(() => state, true)
+          useCssVars(() => state, true)
           return () => h('div')
         }
       }),

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

@@ -1,7 +1,7 @@
 import { warn, getCurrentInstance } from '@vue/runtime-core'
 import { EMPTY_OBJ } from '@vue/shared'
 
-export function useCSSModule(name = '$style'): Record<string, string> {
+export function useCssModule(name = '$style'): Record<string, string> {
   if (!__GLOBAL__) {
     const instance = getCurrentInstance()!
     if (!instance) {

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

@@ -9,7 +9,7 @@ import {
 } from '@vue/runtime-core'
 import { ShapeFlags } from '@vue/shared/src'
 
-export function useCSSVars(
+export function useCssVars(
   getter: (ctx: ComponentPublicInstance) => Record<string, string>,
   scoped = false
 ) {

packages/runtime-dom/src/index.ts

@@ -114,8 +114,8 @@ function normalizeContainer(container: Element | string): Element | null {
 }
 
 // SFC CSS utilities
-export { useCSSModule } from './helpers/useCssModule'
-export { useCSSVars } from './helpers/useCssVars'
+export { useCssModule } from './helpers/useCssModule'
+export { useCssVars } from './helpers/useCssVars'
 
 // DOM-only components
 export { Transition, TransitionProps } from './components/Transition'