Migrate to UnoCSS

richardguerre · Jul 14, 2023 · 60a8209 · 60a8209
1 parent c9cd109
commit 60a8209
Show file tree

Hide file tree

Showing 18 changed files with 1,339 additions and 803 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -20,7 +20,7 @@
         "esbenp.prettier-vscode",
         "Prisma.prisma",
         "meta.relay",
-        "bradlc.vscode-tailwindcss"
+        "antfu.unocss"
       ]
     }
   },

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,8 +1,4 @@
 {
-  "recommendations": [
-    "esbenp.prettier-vscode",
-    "meta.relay",
-    "bradlc.vscode-tailwindcss",
-    "prisma.prisma"
-  ]
+  "recommendations": ["esbenp.prettier-vscode", "meta.relay", "prisma.prisma", "antfu.unocss"],
+  "unwantedRecommendations": ["bradlc.vscode-tailwindcss"]
 }
diff --git a/README.md b/README.md
@@ -82,7 +82,7 @@ If you are using VS Code, you will be prompted to install the recommended extens
 
 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) for formatting.
 - [Relay](https://marketplace.visualstudio.com/items?itemName=meta.relay) for [Relay GraphQL](https://relay.dev) support.
-- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) for [Tailwind CSS](https://tailwindcss.com) support.
+- [UnoCSS](https://marketplace.visualstudio.com/items?itemName=bradlc.antfu.unocss) for [UnoCSS](https://unocss.dev) support.
 - [Prisma](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma) for [Prisma](https://www.prisma.io) support.
 
 ## Running tests
@@ -116,10 +116,27 @@ const MyComponent = ({ value }) => {
   return <div>{value}</div>;
 };
 
+// ❌ Bad
+const MyComponent = (props) => {
+  const { value } = props;
+  return <div>{value}</div>;
+};
+
 // ✅ Good
 const MyComponent = (props) => {
   // destructuring objects returned by React hooks is fine
   const { symbol } = useLocaleCurrency();
   return <div>{props.myProp} {symbol}</div>;
 };
+
+// ✅ Good
+const MyComponent = (props) => {
+  // destructuring arrays is fine
+  const [value, setValue] = useState(props.value);
+  return <div>{value}</div>;
+};
 ```
+
+## Why UnoCSS instead of TailwindCSS?
+
+I was originally using TailwindCSS, but as I later realized I wanted/needed plugins to also have access to the same theme as the main app, I decided to switch to UnoCSS. This is because UnoCSS can be run at runtime, so plugins can add classes that the main app may not use directly, but that plugins can use. This is not possible with TailwindCSS, as it needs to be compiled at build time so all classes would need to be known at build time (not possible if hot swapping plugins).
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
     <title>Flow</title>
   </head>
   <body class="bg-background-200 text-foreground-900">

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -21,6 +21,7 @@
     "@flowdev/plugin": "*",
     "@flowdev/relay": "*",
     "@flowdev/ui": "*",
+    "@flowdev/unocss": "*",
     "@tiptap/extension-bullet-list": "^2.0.3",
     "@tiptap/extension-document": "^2.0.0-beta.218",
     "@tiptap/extension-history": "^2.0.0-beta.218",
@@ -32,6 +33,7 @@
     "@tiptap/pm": "^2.0.0-beta.218",
     "@tiptap/react": "^2.0.0-beta.218",
     "@tiptap/starter-kit": "^2.0.3",
+    "@unocss/runtime": "^0.53.5",
     "dayjs": "^1.11.7",
     "framer-motion": "^10.12.10",
     "react": "^18.2.0",
@@ -42,7 +44,6 @@
   },
   "devDependencies": {
     "@swc/plugin-relay": "^1.5.36",
-    "@tailwindcss/typography": "^0.5.9",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.1",
@@ -51,7 +52,6 @@
     "postcss": "^8.4.23",
     "relay-compiler": "^14.1.0",
     "sass": "^1.62.0",
-    "tailwindcss": "^3.3.2",
     "typescript": "^4.9.3",
     "vite": "^4.0.0",
     "vite-tsconfig-paths": "^4.0.5"

diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
diff --git a/apps/web/src/components/CalendarList.tsx b/apps/web/src/components/CalendarList.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo } from "react";
 import { graphql, useRefetchableFragment } from "@flowdev/relay";
 import { CalendarList_data$key } from "@flowdev/web/relay/__generated__/CalendarList_data.graphql";
 import { DayTimeGrid, CalendarEvent, CalendarArtifact } from "@flowdev/calendar";
-import colors from "tailwindcss/colors";
+import { tailwindColors } from "@flowdev/unocss";
 import { dayStoreAtom } from "@flowdev/web/stores/dayStore";
 import { useStore } from "@flowdev/jotai";
 
@@ -51,8 +51,8 @@ export const CalendarList = (props: CalendarListProps) => {
         id: edge.node.id,
         title: edge.node.title,
         scheduledAt: new Date(edge.node.scheduledAt!),
-        textColor: color ? colors[edge.node.color]["900"] : undefined,
-        backgroundColor: color ? colors[edge.node.color]["100"] : undefined,
+        textColor: color ? tailwindColors[edge.node.color]["900"] : undefined,
+        backgroundColor: color ? tailwindColors[edge.node.color]["100"] : undefined,
         durationInMinutes: edge.node.durationInMinutes ?? 0,
         ...(edge.node.isAllDay ? { isAllDay: true } : {}),
       });
@@ -85,7 +85,7 @@ export const CalendarList = (props: CalendarListProps) => {
   return (
     <div className="flex h-full flex-col">
       <div className="p-3 text-xl font-semibold">Calendar</div>
-      <div className="h-full overflow-y-scroll pl-3 pt-3">
+      <div className="h-full overflow-y-scroll pl-3 pt-0.5 pt-3">
         <DayTimeGrid events={events} artifacts={artifacts} startHour={4} />
       </div>
     </div>

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
diff --git a/apps/web/src/index.tsx b/apps/web/src/index.tsx
@@ -6,7 +6,13 @@ import {
   RelayEnvironmentProvider,
 } from "@flowdev/web/relay/environment";
 import { IconContext } from "@flowdev/icons";
-import "./index.css";
+import initUnocssRuntime from "@unocss/runtime";
+import unocssConfig from "@flowdev/unocss";
+
+initUnocssRuntime({
+  autoPrefix: true,
+  defaults: unocssConfig,
+});
 
 const IndexView = React.lazy(() => import("./views/IndexView"));
 const SettingsView = React.lazy(() => import("./views/SettingsView"));

diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js