chore: fix build issues

Author: AlemTuzlak

packages/devtools-ui/package.json

@@ -53,6 +53,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "goober": "^2.1.16",
     "solid-js": "^1.9.7"
   },
@@ -62,4 +63,4 @@
   "devDependencies": {
     "vite-plugin-solid": "^2.11.6"
   }
-}
+}

packages/devtools-ui/src/components/button.tsx

@@ -1,4 +1,5 @@
 import { splitProps } from 'solid-js'
+import clsx from 'clsx'
 import { useStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js'
 
@@ -27,13 +28,9 @@ export function Button(props: ButtonProps) {
     'className',
   ])
   const variant = local.variant || 'primary'
-  const classes = [
-    styles().button.base,
+  const classes = clsx(styles().button.base,
     styles().button.variant(variant, local.outline, local.ghost),
-    local.className,
-  ]
-    .filter(Boolean)
-    .join(' ')
+    local.className,)
 
   return (
     <button {...rest} class={classes}>

packages/devtools-ui/src/components/tree.tsx

@@ -1,8 +1,7 @@
 import { For, Show, createSignal } from 'solid-js'
+import clsx from 'clsx'
 import { useStyles } from '../styles/use-styles'
 
-const clsx = (...args: any) => [...args].filter(Boolean).join(' ')
-
 export function JsonTree(props: { value: any }) {
   return <JsonValue isRoot value={props.value} />
 }

packages/devtools-ui/src/styles/use-styles.ts

@@ -264,7 +264,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {
         const v = buttonVariantColors[variant]
         if (ghost) {
-          return goober.css`
+          return css`
             background: transparent;
             color: ${v.bg};
             border-color: transparent;
@@ -277,7 +277,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
           `
         }
         if (outline) {
-          return goober.css`
+          return css`
             background: transparent;
             color: ${v.bg};
             border-color: ${v.bg};
@@ -292,7 +292,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
           `
         }
         // Default solid button
-        return goober.css`
+        return css`
           background: ${v.bg};
           color: ${v.text};
           border-color: ${v.border};