fix: fix UI styles

Author: farnabaz

src/app/src/assets/css/main.css

@@ -2,7 +2,6 @@
 @import "@nuxt/ui";
 @plugin "@tailwindcss/typography";
 
-@source "@farnabaz/mdc-editor";
 @source "../../**";
 
 @source inline('ring-orange-200 hover:ring-orange-300 hover:dark:ring-orange-700');

src/app/src/main.ts

@@ -7,6 +7,7 @@ import styles from './assets/css/main.css?inline'
 
 import { createHead } from '@unhead/vue/client'
 import { generateColors, tailwindColors } from './utils/colors'
+import { refineTailwindStyles } from './utils/styles.ts'
 
 import App from './app.vue'
 import Content from './pages/content.vue'
@@ -53,9 +54,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
       styles: [
         tailwindColors,
         generateColors(),
-        styles.replace(/:root/g, ':host')
-          .replace(/([^-])html/g, '$1:host')
-          .replace(/([^-])body/g, '$1:host'),
+        refineTailwindStyles(styles),
       ],
     },
   ) as VueElementConstructor

src/app/src/utils/styles.ts

@@ -0,0 +1,34 @@
+export function refineTailwindStyles(styles: string) {
+  styles = convertPropertyToVar(styles)
+  // Replace :root, html, and body with :host
+  styles = styles.replace(/:root/g, ':host')
+    .replace(/([^-])html/g, '$1:host')
+    .replace(/([^-])body/g, '$1:host')
+
+  return styles
+}
+
+export function convertPropertyToVar(cssText: string) {
+  const propertyRegex = /@property\s+(--[\w-]+)\s*\{([^}]*)\}/g
+  const cssVars: string[] = []
+
+  const result = cssText.replace(propertyRegex, (_, propertyName, propertyContent) => {
+    const initialValueMatch = propertyContent.match(/initial-value\s*:([^;]+)(;|$)/)
+
+    if (initialValueMatch) {
+      let initialValue = initialValueMatch[1].trim()
+
+      if (propertyContent.includes('<length>') && !initialValue.endsWith('px')) {
+        initialValue = `${initialValue}px`
+      }
+
+      cssVars.push(`${propertyName}: ${initialValue};`)
+    }
+
+    return ''
+  })
+
+  const cssVarsBlock = cssVars.length > 0 ? `:host {\n  ${cssVars.join('\n  ')}\n}` : ''
+
+  return cssVarsBlock + (cssVarsBlock && result.trim() ? '\n\n' : '') + result.trim()
+}