Sizes styles rendering

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) => {

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

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: {

packages/ui/src/components/va-config/VaConfig.vue

@@ -1,52 +1,78 @@
 <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,
 })
 
 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)

packages/ui/src/composables/useComponentVariables.ts

@@ -3,24 +3,14 @@ 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) => {
   if (typeof size === 'number') { return `${size}px` }
   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!')

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.

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'

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

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
+  }, '')
+}

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