From e416ef46720a0e0765166cf9b54e38077fdc80d6 Mon Sep 17 00:00:00 2001
From: Alexandra Petrova <alexandra.petrova@epicmax.co>
Date: Wed, 1 May 2024 22:42:20 +0300
Subject: [PATCH] Sizes styles rendering

---
 packages/nuxt/src/runtime/plugin.ts           | 26 +++++--
 packages/ui/.storybook/preview.ts             |  4 +-
 .../ui/src/components/va-button/VaButton.vue  | 17 ++---
 .../components/va-config/VaConfig.demo.vue    | 20 ++++-
 .../ui/src/components/va-config/VaConfig.vue  | 76 +++++++++++++------
 .../src/composables/useComponentVariables.ts  | 12 +--
 packages/ui/src/composables/useSize.ts        |  2 +-
 .../component-config/config/default.ts        | 11 +++
 .../ui/src/services/component-config/index.ts |  1 +
 .../services/component-config/plugin/index.ts | 49 ++++++++++++
 .../theme/index.ts}                           |  0
 .../utils/render-styles-from-config.tsx       | 36 +++++++++
 .../utils/use-component-config-props.ts       |  3 +-
 packages/ui/src/services/size/index.ts        |  1 -
 .../create-vuestic/create-vuestic.ts          | 12 ++-
 .../ui/src/services/vue-plugin/plugins.ts     |  1 +
 packages/ui/src/utils/bem.ts                  | 14 ++++
 packages/ui/src/utils/css-variables.ts        |  6 +-
 packages/ui/src/utils/css.ts                  |  8 ++
 19 files changed, 236 insertions(+), 63 deletions(-)
 create mode 100644 packages/ui/src/services/component-config/plugin/index.ts
 rename packages/ui/src/services/{size/types.ts => component-config/theme/index.ts} (100%)
 create mode 100644 packages/ui/src/services/component-config/utils/render-styles-from-config.tsx
 delete mode 100644 packages/ui/src/services/size/index.ts
 create mode 100644 packages/ui/src/utils/bem.ts

diff --git a/packages/nuxt/src/runtime/plugin.ts b/packages/nuxt/src/runtime/plugin.ts
index b7cf91b70f3..6fa535a29e1 100644
--- a/packages/nuxt/src/runtime/plugin.ts
+++ b/packages/nuxt/src/runtime/plugin.ts
@@ -9,28 +9,27 @@ import {
   type PartialGlobalConfig
 } from 'vuestic-ui'
 import { markRaw, computed, watch, type Ref } from 'vue'
-import { useHead, ReactiveHead, defineNuxtPlugin, useCookie  } from '#imports'
+import type { VuesticOptions } from '../types'
+import { useHead, ReactiveHead, defineNuxtPlugin, useCookie } from '#imports'
 import NuxtLink from '#app/components/nuxt-link'
 import configFromFile from '#vuestic-config'
 
-import type { VuesticOptions } from '../types'
-
 function getGlobalProperty (app, key) {
   return app.config.globalProperties[key]
 }
 
-export default defineNuxtPlugin(async (nuxtApp) => {
+export default defineNuxtPlugin((nuxtApp) => {
   const { vueApp: app } = nuxtApp
 
   // It's important to use `, because TS will compile qoutes to " and JSON will not be parsed...
-  const moduleOptions: VuesticOptions = JSON.parse(`<%= options.value %>`)
+  const moduleOptions: VuesticOptions = JSON.parse('<%= options.value %>')
   const themeCookie = useCookie(moduleOptions.themeCookieKey)
   const userConfig = configFromFile || moduleOptions.config || {}
   const configWithColors: PartialGlobalConfig = {
     ...userConfig,
     colors: {
       currentPresetName: themeCookie.value || userConfig.colors?.currentPresetName || 'light',
-      ...userConfig.colors,
+      ...userConfig.colors
     }
   }
 
@@ -44,7 +43,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       VaDropdownPlugin,
       VaToastPlugin,
       VaModalPlugin,
-      ColorsClassesPlugin,
+      ColorsClassesPlugin
     },
     /** Do not import any components. Nuxt will import them automatically */
     components: {}
@@ -76,6 +75,19 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     }))
   }
 
+  const componentConfig = getGlobalProperty(app, '$vaComponentConfig')
+  if (componentConfig) {
+    useHead(computed(() => {
+      return {
+        style: [
+          {
+            innerHTML: componentConfig.renderStyles()
+          }
+        ]
+      } satisfies ReactiveHead
+    }))
+  }
+
   // Watch for preset name change and update cookie
   const { globalConfig } = getGlobalProperty(app, '$vaConfig') as { globalConfig: Ref<GlobalConfig> }
   watch(() => globalConfig.value.colors.currentPresetName, (newTheme) => {
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 5bde006a8d5..9eb72fc69c1 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -9,7 +9,7 @@ import {
   VaToastPlugin,
   VaModalPlugin,
   VaDropdownPlugin,
-  BreakpointConfigPlugin,
+  BreakpointConfigPlugin, ComponentConfigPlugin,
 } from './../src/main'
 import demoIconAliases from './vuestic-config/demo-icon-aliases'
 import demoIconFonts from './vuestic-config/demo-icon-fonts'
@@ -49,7 +49,7 @@ setup((app) => {
         },
       },
     },
-    plugins: { VaToastPlugin, VaDropdownPlugin, VaModalPlugin, BreakpointConfigPlugin },
+    plugins: { VaToastPlugin, VaDropdownPlugin, VaModalPlugin, BreakpointConfigPlugin, ComponentConfigPlugin },
   }))
 })
 
diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue
index 78416afe271..812aaef5530 100644
--- a/packages/ui/src/components/va-button/VaButton.vue
+++ b/packages/ui/src/components/va-button/VaButton.vue
@@ -5,7 +5,7 @@
     class="va-button"
     :class="computedClass"
     :style="computedStyle"
-    v-bind="attributesComputed"
+    v-bind="{ ...variablesComputed, ...attributesComputed }"
   >
     <span class="va-button__content" :class="wrapperClassComputed">
       <slot
@@ -109,7 +109,9 @@ const props = defineProps({
   plain: { type: Boolean, default: false },
   round: { type: Boolean, default: false },
   size: {
-    type: [String, Number] as PropType<'small' | 'medium' | 'large' | string | number>,
+    type: [String, Number] as PropType<
+      'small' | 'medium' | 'large' | string | number
+    >,
     default: 'medium',
   },
   icon: { type: String, default: '' },
@@ -188,7 +190,6 @@ const variablesComputed = useComponentVariables(props)
 const computedStyle = computed(() => ({
   borderColor: props.borderColor ? getColor(props.borderColor) : 'transparent',
   ...contentColorComputed.value,
-  ...variablesComputed.value,
 }))
 
 defineExpose({
@@ -294,9 +295,7 @@ defineExpose({
 
   .va-button__content {
     font-size: var(--va-button-font-size);
-    padding:
-      var(--va-button-content-py)
-      var(--va-button-content-px);
+    padding: var(--va-button-content-py) var(--va-button-content-px);
     line-height: var(--va-button-line-height);
   }
 
@@ -323,13 +322,11 @@ defineExpose({
     .va-button__content {
       padding-top:
         calc(
-          var(--va-button-content-py) -
-          var(--va-button-bordered-border)
+          var(--va-button-content-py) - var(--va-button-bordered-border)
         );
       padding-bottom:
         calc(
-          var(--va-button-content-py) -
-          var(--va-button-bordered-border)
+          var(--va-button-content-py) - var(--va-button-bordered-border)
         );
     }
   }
diff --git a/packages/ui/src/components/va-config/VaConfig.demo.vue b/packages/ui/src/components/va-config/VaConfig.demo.vue
index 945f16d6caf..044d3464a6b 100644
--- a/packages/ui/src/components/va-config/VaConfig.demo.vue
+++ b/packages/ui/src/components/va-config/VaConfig.demo.vue
@@ -86,8 +86,19 @@
     <VbCard title="Colors">
       <va-config :colors="{ variables: {
         primary: '#f0f',
-      } }">
-        <va-button>
+      } }" :components="isOn ? {
+        VaButton: {
+      size: 'xs',
+      sizesConfig: {
+        xs: {
+          variables: {
+            fontSize: '10px',
+          },
+        },
+      },
+    },
+      } : undefined">
+        <va-button @click="isOn = !isOn">
           Button inside va-config
         </va-button>
 
@@ -106,7 +117,7 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useGlobalConfig } from '../../services/global-config/global-config'
 import { useColors } from '../../composables'
 import { VaButton } from '../va-button'
@@ -148,6 +159,8 @@ export default {
 
     const { getColor } = useColors()
 
+    const isOn = ref(true)
+
     const cardPreset = {
       highlightTop: {
         square: true,
@@ -198,6 +211,7 @@ export default {
       buttonRoundConfigValue,
       cardPreset,
       buttonPreset,
+      isOn,
     }
   },
   computed: {
diff --git a/packages/ui/src/components/va-config/VaConfig.vue b/packages/ui/src/components/va-config/VaConfig.vue
index 76d5ae159c5..e1965ccb25c 100644
--- a/packages/ui/src/components/va-config/VaConfig.vue
+++ b/packages/ui/src/components/va-config/VaConfig.vue
@@ -1,42 +1,70 @@
 <template>
-  <CssVarsRenderer v-if="doRenderCssVars" v-bind="$attrs">
+  <CssVarsRenderer v-if="doRenderCssVars" v-bind="{ ...props, ...$attrs }">
     <slot />
   </CssVarsRenderer>
   <slot v-else />
 </template>
 
 <script lang="ts">
-import { computed, PropType, h, Fragment, defineComponent } from 'vue'
+import { computed, PropType, h, Fragment, defineComponent, useCssVars } from 'vue'
 import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import { ComponentConfig } from '../../services/component-config'
 
-import { provideLocalConfig, useLocalConfig } from '../../composables/useLocalConfig'
+import {
+  provideLocalConfig,
+  useLocalConfig,
+} from '../../composables/useLocalConfig'
 import { useGlobalConfigProvider } from './hooks/useGlobalConfigProvider'
 import { PartialGlobalConfig } from '../../services/global-config'
 import { renderSlotNodes } from '../../utils/headless'
-import { useColors } from '../../composables'
+import { useColors, useCurrentComponentId } from '../../composables'
+import { renderComponentsStyles } from '../../services/component-config/utils/render-styles-from-config'
+
+const ConfigProps = {
+  components: {
+    type: Object as PropType<ComponentConfig>,
+    default: () => ({}),
+  },
+  colors: { type: Object as PropType<PartialGlobalConfig['colors']> },
+  i18n: { type: Object as PropType<PartialGlobalConfig['i18n']> },
+}
 
 const CssVarsRenderer = defineComponent({
   name: 'VaCssVarsRenderer',
+  props: ConfigProps,
 
   inheritAttrs: false,
 
   setup (props, { slots, attrs }) {
-    const { colorsToCSSVariable, colors } = useColors()
+    const { colorsToCSSVariable, currentPresetName } = useColors()
+
+    const id = useCurrentComponentId()
 
-    const style = computed(() => {
-      return colorsToCSSVariable(colors)
+    const styleAttr = computed(() => {
+      return colorsToCSSVariable({
+        ...props.colors?.variables,
+        ...(props.colors?.presets || {})[currentPresetName.value],
+      })
     })
 
-    return () => h(Fragment, attrs, renderSlotNodes(slots.default, {}, {
-      style: style.value,
-    }) || undefined)
+    const elementId = `va-config-${id}`
+
+    const componentStyles = computed(() => renderComponentsStyles(props.components, `#${elementId}`))
+
+    return () =>
+      h(
+        'div',
+        { ...attrs, style: styleAttr.value, id: elementId },
+        [
+          componentStyles.value ? h('style', { innerHTML: componentStyles.value }) : undefined,
+          slots.default?.(),
+        ],
+      )
   },
 })
 </script>
 
 <script lang="ts" setup>
-
 defineOptions({
   name: 'VaConfig',
   inheritAttrs: false,
@@ -44,9 +72,7 @@ defineOptions({
 
 const props = defineProps({
   ...useComponentPresetProp,
-  components: { type: Object as PropType<ComponentConfig>, default: () => ({}) },
-  colors: { type: Object as PropType<PartialGlobalConfig['colors']> },
-  i18n: { type: Object as PropType<PartialGlobalConfig['i18n']> },
+  ...ConfigProps,
 })
 
 const prevChain = useLocalConfig()
@@ -55,19 +81,21 @@ const nextChain = computed(() => [...prevChain.value, props.components])
 
 provideLocalConfig(nextChain)
 
-const newConfig = useGlobalConfigProvider(computed(() => {
-  const config = {} as any
+const newConfig = useGlobalConfigProvider(
+  computed(() => {
+    const config = {} as any
 
-  if (props.colors) {
-    config.colors = props.colors
-  }
+    if (props.colors) {
+      config.colors = props.colors
+    }
 
-  if (props.i18n) {
-    config.i18n = props.i18n
-  }
+    if (props.i18n) {
+      config.i18n = props.i18n
+    }
 
-  return config
-}))
+    return config
+  }),
+)
 
 const doRenderCssVars = computed(() => {
   return Boolean(props.colors)
diff --git a/packages/ui/src/composables/useComponentVariables.ts b/packages/ui/src/composables/useComponentVariables.ts
index 42ed713cfaa..c516dfca4dc 100644
--- a/packages/ui/src/composables/useComponentVariables.ts
+++ b/packages/ui/src/composables/useComponentVariables.ts
@@ -3,7 +3,7 @@ import { ReadonlyOrPlainArray } from '../utils/types/array'
 import { computed, getCurrentInstance } from 'vue'
 import { isCSSSizeValue, isCSSVariable } from '../utils/css'
 import isNil from 'lodash/isNil'
-import { SizeProps, SizesConfig } from '../services/size'
+import { SizeProps, SizesConfig } from '../services/component-config/theme'
 import { useBem } from './useBem'
 
 const sizeToAbsolute = (size: unknown) => {
@@ -11,16 +11,6 @@ const sizeToAbsolute = (size: unknown) => {
   return String(size)
 }
 
-export const renderVariablesFromConfig = <Variables extends string>(sizesConfig: SizesConfig<Variables, string>, componentName: string) => {
-  return Object.entries(sizesConfig).reduce<Record<string, string>>((acc, [size, { variables }]) => {
-    for (const property in variables) {
-      acc[cssVariableName({ componentName, size, property })] = variables[property]
-    }
-
-    return acc
-  }, {})
-}
-
 export const useComponentVariables = <Variables extends string>(props: SizeProps<SizesConfig<Variables, string>>, componentName = getCurrentInstance()?.type.name) => {
   if (!componentName) {
     throw new Error('Component name must be provided!')
diff --git a/packages/ui/src/composables/useSize.ts b/packages/ui/src/composables/useSize.ts
index 2e3105f69a3..cc1f85fa28e 100644
--- a/packages/ui/src/composables/useSize.ts
+++ b/packages/ui/src/composables/useSize.ts
@@ -1,5 +1,5 @@
 import { PropType } from 'vue'
-import { SizesConfig } from '../services/size'
+import { SizesConfig } from '../services/component-config/theme'
 
 /**
  * You could add these props to any component by destructuring them inside props option.
diff --git a/packages/ui/src/services/component-config/config/default.ts b/packages/ui/src/services/component-config/config/default.ts
index 2567c1686ea..ecb6eb5c94e 100644
--- a/packages/ui/src/services/component-config/config/default.ts
+++ b/packages/ui/src/services/component-config/config/default.ts
@@ -1,7 +1,18 @@
 import { ComponentConfig } from '../types'
 
 export const getComponentsDefaultConfig = (): ComponentConfig =>
+  // TODO: Should be handled in size service
   ({
+    VaRating: {
+      size: 'xl',
+      sizesConfig: {
+        xl: {
+          variables: {
+            numberItemSize: '28px',
+          },
+        },
+      },
+    },
     all: {},
     presets: {
       VaButton: {
diff --git a/packages/ui/src/services/component-config/index.ts b/packages/ui/src/services/component-config/index.ts
index ef65e2a9a36..0f7c9911c65 100644
--- a/packages/ui/src/services/component-config/index.ts
+++ b/packages/ui/src/services/component-config/index.ts
@@ -1,3 +1,4 @@
+export * from './theme'
 export * from './types'
 export * from './config/default'
 export * from './utils/use-component-config-props'
diff --git a/packages/ui/src/services/component-config/plugin/index.ts b/packages/ui/src/services/component-config/plugin/index.ts
new file mode 100644
index 00000000000..6a15c6954e8
--- /dev/null
+++ b/packages/ui/src/services/component-config/plugin/index.ts
@@ -0,0 +1,49 @@
+import { computed, watch } from 'vue'
+
+import { isServer } from '../../../utils/ssr'
+import { useGlobalConfig } from '../../../composables/useGlobalConfig'
+import { defineGlobalProperty, defineVuesticPlugin } from '../../vue-plugin/utils'
+import { addOrUpdateStyleElement } from '../../../utils/dom'
+
+import { ComponentConfig } from '../types'
+import { generateUniqueId } from '../../../utils/uuid'
+import { renderComponentsStyles } from '../utils/render-styles-from-config'
+
+const handleConfigUpdate = (config: Partial<ComponentConfig>, styleId: string) => {
+  addOrUpdateStyleElement(
+    `va-component-classes-${styleId}`,
+    () => renderComponentsStyles(config),
+  )
+}
+
+const createComponentConfigPlugin = () => {
+  if (isServer()) { return }
+
+  const { globalConfig } = useGlobalConfig()
+
+  const uniqueId = computed(generateUniqueId)
+
+  watch(() => globalConfig.value.components, (components) => {
+    if (components) {
+      handleConfigUpdate(components, uniqueId.value)
+    }
+  }, { immediate: true, deep: true })
+
+  return {
+    renderStyles: () => {
+      return renderComponentsStyles(globalConfig.value.components)
+    },
+  }
+}
+
+export const ComponentConfigPlugin = defineVuesticPlugin(() => ({
+  install (app) {
+    defineGlobalProperty(app, '$vaComponentConfig', createComponentConfigPlugin())
+  },
+}))
+
+declare module '@vue/runtime-core' {
+  export interface ComponentCustomProperties {
+    $vaComponentConfig: ReturnType<typeof createComponentConfigPlugin>
+  }
+}
diff --git a/packages/ui/src/services/size/types.ts b/packages/ui/src/services/component-config/theme/index.ts
similarity index 100%
rename from packages/ui/src/services/size/types.ts
rename to packages/ui/src/services/component-config/theme/index.ts
diff --git a/packages/ui/src/services/component-config/utils/render-styles-from-config.tsx b/packages/ui/src/services/component-config/utils/render-styles-from-config.tsx
new file mode 100644
index 00000000000..1abaaeca121
--- /dev/null
+++ b/packages/ui/src/services/component-config/utils/render-styles-from-config.tsx
@@ -0,0 +1,36 @@
+import { SizesConfig } from '../theme'
+import { cssVariableName } from '../../../utils/css-variables'
+import { CSSProperties } from 'vue'
+import { bemClassName } from '../../../utils/bem'
+import { renderCSSRule } from '../../../utils/css'
+import { ComponentConfig } from '../types'
+
+const renderComponentStyles = (sizesConfig: SizesConfig<string, string>, componentName: string, scopeSelector?: string) => {
+  return Object.entries(sizesConfig).reduce((acc, [size, { variables }]) => {
+    const definitions: CSSProperties = {}
+
+    for (const property in variables) {
+      definitions[cssVariableName({ componentName, property })] = variables[property]
+    }
+
+    const classSelector = `.${bemClassName({ block: componentName, modifier: size })}`
+
+    const selector = scopeSelector ? `${scopeSelector} ${classSelector}` : classSelector
+
+    acc += renderCSSRule(selector, definitions)
+
+    return acc
+  }, '')
+}
+
+export const renderComponentsStyles = (config: ComponentConfig, scopeSelector?: string) => {
+  return Object.entries(config).reduce((styles, [componentName, componentConfig]) => {
+    const sizesConfig: SizesConfig<string, string> | undefined = 'sizesConfig' in componentConfig ? componentConfig.sizesConfig : undefined
+
+    if (sizesConfig) {
+      styles += renderComponentStyles(sizesConfig, componentName, scopeSelector)
+    }
+
+    return styles
+  }, '')
+}
diff --git a/packages/ui/src/services/component-config/utils/use-component-config-props.ts b/packages/ui/src/services/component-config/utils/use-component-config-props.ts
index 7c853e8f1bd..cfe7d6d5fbc 100644
--- a/packages/ui/src/services/component-config/utils/use-component-config-props.ts
+++ b/packages/ui/src/services/component-config/utils/use-component-config-props.ts
@@ -3,6 +3,7 @@ import { useLocalConfig } from '../../../composables/useLocalConfig'
 import { useGlobalConfig } from '../../global-config/global-config'
 import { computed } from 'vue'
 import { injectChildPresetPropFromParent } from '../../../composables/useChildComponents'
+import omit from 'lodash/omit'
 
 export const useComponentConfigProps = <T extends VuesticComponent>(component: T, originalProps: Props) => {
   const localConfig = useLocalConfig()
@@ -27,6 +28,6 @@ export const useComponentConfigProps = <T extends VuesticComponent>(component: T
     const presetName = parentPropPreset?.value || instancePreset.value || localConfigProps.preset || globalConfigProps.preset
     const presetProps = presetName && getPresetProps(presetName)
 
-    return { ...globalConfigProps, ...localConfigProps, ...presetProps }
+    return omit({ ...globalConfigProps, ...localConfigProps, ...presetProps }, 'sizesConfig')
   })
 }
diff --git a/packages/ui/src/services/size/index.ts b/packages/ui/src/services/size/index.ts
deleted file mode 100644
index c9f6f047dc0..00000000000
--- a/packages/ui/src/services/size/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './types'
diff --git a/packages/ui/src/services/vue-plugin/create-vuestic/create-vuestic.ts b/packages/ui/src/services/vue-plugin/create-vuestic/create-vuestic.ts
index 012d1196931..44cdab1ddd7 100644
--- a/packages/ui/src/services/vue-plugin/create-vuestic/create-vuestic.ts
+++ b/packages/ui/src/services/vue-plugin/create-vuestic/create-vuestic.ts
@@ -1,6 +1,15 @@
 import type { PartialGlobalConfig } from '../../global-config/types'
 import { defineVuesticPlugin, usePlugin } from '../utils'
-import { GlobalConfigPlugin, VaDropdownPlugin, VaToastPlugin, VaModalPlugin, ColorConfigPlugin, BreakpointConfigPlugin, CachePlugin } from '../plugins'
+import {
+  GlobalConfigPlugin,
+  VaDropdownPlugin,
+  VaToastPlugin,
+  VaModalPlugin,
+  ColorConfigPlugin,
+  BreakpointConfigPlugin,
+  CachePlugin,
+  ComponentConfigPlugin,
+} from '../plugins'
 import * as vuesticComponents from '../components'
 import type { VuesticComponents } from '../types/components'
 import { setCurrentApp } from '../../current-app'
@@ -32,6 +41,7 @@ export const createVuestic = defineVuesticPlugin((options: { config?: PartialGlo
     usePlugin(app, CachePlugin)
     usePlugin(app, ColorConfigPlugin(config))
     usePlugin(app, ColorsClassesPlugin)
+    usePlugin(app, ComponentConfigPlugin)
 
     usePlugin(app, BreakpointConfigPlugin)
     usePlugin(app, VaDropdownPlugin)
diff --git a/packages/ui/src/services/vue-plugin/plugins.ts b/packages/ui/src/services/vue-plugin/plugins.ts
index 05fa7f2fb14..9c6dc1147c7 100644
--- a/packages/ui/src/services/vue-plugin/plugins.ts
+++ b/packages/ui/src/services/vue-plugin/plugins.ts
@@ -6,3 +6,4 @@ export { VaDropdownPlugin } from '../../components/va-dropdown/plugin'
 export { VaModalPlugin } from '../../components/va-modal/plugin'
 export { CachePlugin } from '../cache/plugin'
 export { ColorsClassesPlugin } from '../colors-classes/plugin'
+export { ComponentConfigPlugin } from '../component-config/plugin'
diff --git a/packages/ui/src/utils/bem.ts b/packages/ui/src/utils/bem.ts
new file mode 100644
index 00000000000..5e846907fc6
--- /dev/null
+++ b/packages/ui/src/utils/bem.ts
@@ -0,0 +1,14 @@
+import kebabCase from 'lodash/kebabCase'
+
+interface BEMClassNameComponents {
+  prefix?: string;
+  block: string;
+  element?: string;
+  modifier?: string;
+}
+
+export const bemClassName = (components: BEMClassNameComponents) => {
+  const { prefix = 'va', block, element, modifier } = components
+
+  return `${prefix}-${kebabCase(block).replace(/^va-/, '')}${element ? `__${kebabCase(element)}` : ''}${modifier ? `--${kebabCase(modifier)}` : ''}`
+}
diff --git a/packages/ui/src/utils/css-variables.ts b/packages/ui/src/utils/css-variables.ts
index b65ce144054..4c8597636e4 100644
--- a/packages/ui/src/utils/css-variables.ts
+++ b/packages/ui/src/utils/css-variables.ts
@@ -9,8 +9,10 @@ interface CSSVariableNameComponents {
   property: string
 }
 
-export function cssVariableName(property: string): string;
-export function cssVariableName(name: CSSVariableNameComponents): string;
+type CSSVariable = `--${string}`;
+
+export function cssVariableName(property: string): CSSVariable;
+export function cssVariableName(components: CSSVariableNameComponents): CSSVariable;
 export function cssVariableName (arg: string | CSSVariableNameComponents) {
   const { prefix = 'va', componentName, state, nestedElement, size, property }: CSSVariableNameComponents = typeof arg === 'string' ? { property: arg } : arg
 
diff --git a/packages/ui/src/utils/css.ts b/packages/ui/src/utils/css.ts
index 6ac539532df..9aa64689918 100644
--- a/packages/ui/src/utils/css.ts
+++ b/packages/ui/src/utils/css.ts
@@ -1,3 +1,5 @@
+import { CSSProperties } from 'vue'
+
 const CSS_UNITS = ['em', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'rem', 'vh', 'vw', 'vmin', 'vmax']
 
 const CSS_VALUE_REGEX = new RegExp(`^[\\d]+${CSS_UNITS.join('|')}$`)
@@ -9,3 +11,9 @@ export const isCSSVariable = (strColor: string): boolean => /var\(--.+\)/.test(s
 export const safeCSSLength = (length: string | number) => (
   typeof length === 'number' ? `${length}px` : length
 )
+
+export const renderCSSRule = (selector: string, properties: CSSProperties) => {
+  const styles = Object.entries(properties).map(([key, value]) => `${key}: ${value};`).join('')
+
+  return `${selector} { ${styles} }`
+}