Merge pull request #14 from binbat/fix/styles-regression

refactor(webapp): update dependencies; extract unocss config file

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
-    "jotai": "^2.10.1",
+    "jotai": "^2.10.2",
     "jotai-devtools": "^0.10.1",
     "jotai-location": "^0.5.5",
     "react": "^18.3.1",
@@ -22,22 +22,22 @@
     "whip-whep": "1.2.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.14.0",
+    "@eslint/js": "^9.15.0",
     "@iconify-json/logos": "^1.2.3",
     "@stylistic/eslint-plugin-js": "^2.10.1",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@unocss/preset-attributify": "^0.64.0",
-    "@unocss/preset-icons": "^0.64.0",
-    "@unocss/preset-uno": "^0.64.0",
-    "@unocss/reset": "^0.64.0",
+    "@unocss/preset-attributify": "^0.64.1",
+    "@unocss/preset-icons": "^0.64.1",
+    "@unocss/preset-uno": "^0.64.1",
+    "@unocss/reset": "^0.64.1",
     "@vitejs/plugin-react": "^4.3.3",
     "cross-env": "^7.0.3",
     "eslint": "^9.14.0",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.13.0",
-    "unocss": "^0.64.0",
-    "vite": "^5.4.10"
+    "typescript-eslint": "^8.14.0",
+    "unocss": "^0.64.1",
+    "vite": "^5.4.11"
   }
 }

tsconfig.json

@@ -17,6 +17,9 @@
     "skipLibCheck": false
   },
   "include": ["webapp"],
-  "exclude": ["**/vite.config.ts"],
+  "exclude": [
+    "webapp/vite.config.ts",
+    "webapp/uno.config.ts"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -6,5 +6,8 @@
     "allowSyntheticDefaultImports": true,
     "strict": true
   },
-  "include": ["webapp/vite.config.ts"]
+  "include": [
+    "webapp/vite.config.ts",
+    "webapp/uno.config.ts"
+  ]
 }

webapp/main.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
-import 'virtual:uno.css'
-import App from './app'
 import { DevTools } from 'jotai-devtools'
 
 import '@unocss/reset/tailwind-compat.css'
+import 'virtual:uno.css'
+import 'jotai-devtools/styles.css'
+
+import App from './app'
+import './index.css'
 
 const container = document.getElementById('root')
 const root = createRoot(container!)

webapp/uno.config.ts

@@ -0,0 +1,23 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetUno,
+} from 'unocss'
+
+export default defineConfig({
+  shortcuts: [
+    { logo: 'i-logos-react w-6em h-6em transform transition-800 hover:rotate-180' },
+    { 'btn-primary': 'py-2 px-4 bg-blue-500 duration-500 text-white font-bold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 disabled:pointer-events-none disabled:bg-slate-300' }
+  ],
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle'
+      }
+    })
+  ]
+})

webapp/vite.config.ts

@@ -1,11 +1,8 @@
 import { resolve } from 'node:path'
 
 import { defineConfig } from 'vite'
-import React from '@vitejs/plugin-react'
 import UnoCSS from 'unocss/vite'
-import presetAttributify from '@unocss/preset-attributify'
-import presetIcons from '@unocss/preset-icons'
-import presetUno from '@unocss/preset-uno'
+import React from '@vitejs/plugin-react'
 
 const ProjectRoot = resolve(import.meta.dirname, '..')
 const WebAppRoot = resolve(ProjectRoot, 'webapp')
@@ -31,22 +28,7 @@ export default defineConfig({
     emptyOutDir: true
   },
   plugins: [
-    UnoCSS({
-      shortcuts: [
-        { logo: 'i-logos-react w-6em h-6em transform transition-800 hover:rotate-180' },
-        { 'btn-primary': 'py-2 px-4 bg-blue-500 duration-500 text-white font-bold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 disabled:pointer-events-none disabled:bg-slate-300' }
-      ],
-      presets: [
-        presetUno(),
-        presetAttributify(),
-        presetIcons({
-          extraProperties: {
-            'display': 'inline-block',
-            'vertical-align': 'middle'
-          }
-        })
-      ]
-    }),
+    UnoCSS(resolve(WebAppRoot, 'uno.config.ts')),
     React()
   ]
 })