From 7c54cfa5108a673dfc9eb2ce46f3683bbab7caac Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Fri, 3 Oct 2025 16:34:05 +0200
Subject: [PATCH] fix: fix UI styles

---
 src/app/src/assets/css/main.css |  1 -
 src/app/src/main.ts             |  5 ++---
 src/app/src/utils/styles.ts     | 34 +++++++++++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 src/app/src/utils/styles.ts

diff --git a/src/app/src/assets/css/main.css b/src/app/src/assets/css/main.css
index 5e5481f5..74f99b35 100644
--- a/src/app/src/assets/css/main.css
+++ b/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');
diff --git a/src/app/src/main.ts b/src/app/src/main.ts
index a015471a..8bb3c604 100644
--- a/src/app/src/main.ts
+++ b/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
diff --git a/src/app/src/utils/styles.ts b/src/app/src/utils/styles.ts
new file mode 100644
index 00000000..330f56d6
--- /dev/null
+++ b/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()
+}