feat: update to unocss (#290)

* feat: first pass to go to unocss

* feat: full transition to unocss is complete

* feat(playwright): enhance snapshot approval workflow with patch creation and commit automation

* fix(playwright): remove unnecessary pull request permissions and comment step from snapshot approval workflow

* feat(playwright): update snapshot patch creation to include staged changes

* test: update Playwright snapshots

* fix: do not commit the patch file

* test: update Playwright snapshots

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: hrgui

.github/workflows/playwright.yml

@@ -55,6 +55,21 @@ jobs:
             echo "No file changes after update-snapshots."
           fi
 
+      - name: Create snapshot patch
+        if: steps.detect_changes.outputs.changed == 'true'
+        shell: bash
+        run: |
+          git add -A
+          git diff --cached --binary > playwright-snapshots.patch
+
+      - name: Upload snapshot patch
+        if: steps.detect_changes.outputs.changed == 'true'
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-snapshot-patch
+          path: playwright-snapshots.patch
+          retention-days: 14
+
       - name: Upload Playwright report
         if: always()
         uses: actions/upload-artifact@v4
@@ -75,8 +90,59 @@ jobs:
     needs: visual-check
     if: needs.visual-check.outputs.snapshots_changed == 'true'
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
     environment:
       name: playwright-snapshot-approval
     steps:
-      - name: Approved snapshot updates
-        run: echo "Snapshot updates approved."
+      - name: Resolve target branch
+        id: resolve_branch
+        shell: bash
+        run: |
+          branch_name="${GITHUB_HEAD_REF:-${GITHUB_REF_NAME}}"
+
+          if [[ -z "$branch_name" ]]; then
+            echo "Unable to determine target branch."
+            exit 1
+          fi
+
+          if [[ "$branch_name" == "main" ]]; then
+            echo "Snapshot updates cannot be auto-committed to main."
+            exit 1
+          fi
+
+          echo "branch_name=$branch_name" >> "$GITHUB_OUTPUT"
+          echo "Snapshot updates approved for branch: $branch_name"
+
+      - name: Checkout target branch
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ steps.resolve_branch.outputs.branch_name }}
+
+      - name: Download snapshot patch
+        uses: actions/download-artifact@v4
+        with:
+          name: playwright-snapshot-patch
+          path: ${{ runner.temp }}/playwright-snapshot-patch
+
+      - name: Apply snapshot patch
+        shell: bash
+        run: git apply --index --reject --whitespace=nowarn "$RUNNER_TEMP/playwright-snapshot-patch/playwright-snapshots.patch"
+
+      - name: Commit snapshot updates
+        id: commit_snapshot_updates
+        shell: bash
+        run: |
+          if [[ -z "$(git status --porcelain)" ]]; then
+            echo "No snapshot changes to commit after approval."
+            echo "committed=false" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git add -A
+          git commit -m "test: update Playwright snapshots"
+          git push origin "HEAD:${{ steps.resolve_branch.outputs.branch_name }}"
+          echo "committed=true" >> "$GITHUB_OUTPUT"
+          echo "commit_sha=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"

README.md

@@ -22,7 +22,7 @@ bun run dev
 - [vitest](https://vitest.dev/) for unit testing
 - [@testing-library/preact](https://preactjs.com/guide/v10/preact-testing-library/) for testing-library
 - [mermaid](https://mermaid-js.github.io/mermaid/#/) for mermaid diagrams for markdown
-- [tailwindcss](https://tailwindcss.com/) for CSS
+- [unocss](https://unocss.dev/) for utility-first CSS
 - [Vercel](https://vercel.com/) for Build Previews
 - [Github Pages](https://pages.github.com/) for Production
 

astro.config.mjs

@@ -1,6 +1,6 @@
 import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
 import preact from "@astrojs/preact";
+import unoCss from "@unocss/astro";
 import tsconfigPaths from "vite-tsconfig-paths";
 import remarkMermaid from "./utils/remark-mermaid/index.mjs";
 
@@ -12,12 +12,5 @@ export default defineConfig({
   markdown: {
     remarkPlugins: ["remark-gfm", "remark-smartypants", remarkMermaid],
   },
-  integrations: [
-    tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
-    }),
-    preact(),
-  ],
+  integrations: [unoCss(), preact()],
 });

bun.lockb

@@ -17,20 +17,21 @@
   },
   "devDependencies": {
     "@astrojs/preact": "5.0.2",
-    "@astrojs/tailwind": "6.0.2",
     "@eslint/compat": "^1.2.6",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.20.0",
     "@netlify/classnames-template-literals": "^1.0.3",
     "@playwright/test": "^1.50.1",
     "@preact/preset-vite": "^2.10.1",
-    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/preact": "^3.2.4",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.13.4",
     "@typescript-eslint/eslint-plugin": "^8.24.0",
     "@typescript-eslint/parser": "^8.24.0",
+    "@unocss/astro": "^66.6.7",
+    "@unocss/preset-typography": "^66.6.7",
+    "@unocss/preset-wind3": "^66.6.7",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.9",
     "@vitest/ui": "^2.1.9",
@@ -56,11 +57,10 @@
     "preact": "^10.25.4",
     "prettier": "^3.5.1",
     "prettier-plugin-astro": "^0.14.1",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss": "^3.4.17",
     "ts-essentials": "^10.0.4",
     "typescript": "^5.9.3",
     "unist-util-visit": "^5.0.0",
+    "unocss": "^66.6.7",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.0"
   },

e2e/home.spec.ts-snapshots/home-page-chromium-linux.png

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

e2e/home.spec.ts-snapshots/home-page-firefox-linux.png

@@ -1,4 +1,4 @@
-import { twMerge } from "tailwind-merge";
+import classNames from "classnames";
 
 import Github from "~/components/icons/Github";
 import LinkedIn from "~/components/icons/LinkedIn";
@@ -10,7 +10,7 @@ type Props = {
 
 const AppSocialMedia = ({ className }: Props) => {
   return (
-    <div className={twMerge("flex gap-2", className)}>
+    <div className={classNames("flex gap-2", className)}>
       <a
         title="View My Github Profile"
         href={GITHUB_URL}