chore: bump unocss from 0.59.4 to 66.5.2

ackzell · ackzell · commit 627941fa9da5 · 2025-10-02T22:48:41.000+02:00
diff --git a/docs/tutorialkit.dev/package.json b/docs/tutorialkit.dev/package.json
@@ -31,6 +31,6 @@
     "sharp": "^0.32.6",
     "starlight-links-validator": "^0.9.0",
     "typescript": "^5.4.5",
-    "unocss": "^0.59.4"
+    "unocss": "66.5.2"
   }
 }
diff --git a/e2e/package.json b/e2e/package.json
@@ -27,14 +27,14 @@
     "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@unocss/reset": "^0.59.4",
-    "@unocss/transformer-directives": "^0.62.0",
+    "@unocss/reset": "66.5.2",
+    "@unocss/transformer-directives": "66.5.2",
     "astro": "^4.15.0",
     "fast-glob": "^3.3.2",
     "playwright": "^1.46.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "unocss": "^0.59.4",
+    "unocss": "66.5.2",
     "unzipper": "^0.12.3"
   }
 }
diff --git a/e2e/test/topbar.test.ts b/e2e/test/topbar.test.ts
@@ -3,7 +3,7 @@ import { readdirSync, readFileSync, rmSync } from 'node:fs';
 import type { Readable } from 'node:stream';
 import { test, expect } from '@playwright/test';
 import * as unzipper from 'unzipper';
-import { theme } from '../../packages/theme/src/theme';
+import { theme } from '../../packages/theme/src/theme.js';
 
 test('user can change theme', async ({ page }) => {
   await page.goto('/');
@@ -13,12 +13,43 @@ test('user can change theme', async ({ page }) => {
 
   // default light theme
   await expect(html).toHaveAttribute('data-theme', 'light');
-  await expect(heading).toHaveCSS('color', hexToRGB(theme.colors.gray[800]));
+
+  /**
+   * Normalize both the expected token and the computed style to canonical rgba(...) to
+   * avoid mismatches caused by different color-space serializations (oklab vs rgb)
+   */
+  const normalizeColor = (cssColor: string) =>
+    page.evaluate((c: string) => {
+      const canvas = document.createElement('canvas');
+      canvas.width = 1;
+      canvas.height = 1;
+
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        return c;
+      }
+
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = c;
+      ctx.fillRect(0, 0, 1, 1);
+
+      const d = ctx.getImageData(0, 0, 1, 1).data;
+
+      return 'rgba(' + d[0] + ', ' + d[1] + ', ' + d[2] + ', ' + d[3] / 255 + ')';
+    }, cssColor);
+
+  const expectedLight = await normalizeColor(hexToRGB(theme.colors.gray[800]));
+  const observedLightRgba = await normalizeColor(await heading.evaluate((el) => getComputedStyle(el).color));
+  expect(observedLightRgba).toBe(expectedLight);
 
   await page.getByRole('navigation').getByRole('button', { name: 'Toggle Theme' }).click();
 
   await expect(html).toHaveAttribute('data-theme', 'dark');
-  await expect(heading).toHaveCSS('color', hexToRGB(theme.colors.gray[200]));
+
+  const expectedDark = await normalizeColor(hexToRGB(theme.colors.gray[200]));
+  const observedDarkRgba = await normalizeColor(await heading.evaluate((el) => getComputedStyle(el).color));
+  expect(observedDarkRgba).toBe(expectedDark);
 });
 
 test('user can download project as zip', async ({ page }) => {
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -44,7 +44,7 @@
     "@tutorialkit/theme": "workspace:*",
     "@tutorialkit/types": "workspace:*",
     "@types/react": "^18.3.3",
-    "@unocss/reset": "^0.62.2",
+    "@unocss/reset": "66.5.2",
     "@webcontainer/api": "1.5.1",
     "astro": "^4.15.0",
     "astro-expressive-code": "^0.35.3",
@@ -61,7 +61,7 @@
     "remark-directive": "^3.0.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
-    "unocss": "^0.59.4",
+    "unocss": "66.5.2",
     "zod": "3.23.8"
   },
   "devDependencies": {
diff --git a/packages/astro/src/remark/callouts.ts b/packages/astro/src/remark/callouts.ts
@@ -106,9 +106,9 @@ export function remarkCalloutsPlugin() {
           const hideIcon = attributes.hideIcon === 'true';
 
           const classes = [
-            `callout callout-${variant} my-4 flex flex-col p-3 bg-tk-elements-markdown-callouts-backgroundColor text-tk-elements-markdown-callouts-textColor`,
+            `callout callout-${variant} my-4 flex flex-col p-3 bg-[var(--tk-elements-markdown-callouts-backgroundColor)] text-[var(--tk-elements-markdown-callouts-textColor)]`,
             attributes.class ?? '',
-            ...(noBorder ? [] : ['border-l-3', 'border-tk-elements-markdown-callouts-borderColor']),
+            ...(noBorder ? [] : ['border-l-3', 'border-[var(--tk-elements-markdown-callouts-borderColor)]']),
           ];
 
           node.attributes = {
@@ -139,7 +139,7 @@ function generate(title: string, children: any[], callout: Callout, hideIcon: bo
             data: {
               hName: 'div',
               hProperties: {
-                className: 'w-full flex gap-2 items-center text-tk-elements-markdown-callouts-titleTextColor',
+                className: 'w-full flex gap-2 items-center text-[var(--tk-elements-markdown-callouts-titleTextColor)]',
                 ariaHidden: true,
               },
             },
@@ -149,7 +149,7 @@ function generate(title: string, children: any[], callout: Callout, hideIcon: bo
                 : ([
                     {
                       type: 'html',
-                      value: `<span class="text-6 inline-block text-tk-elements-markdown-callouts-iconColor ${callout.icon}"></span>`,
+                      value: `<span class="text-6 inline-block text-[var(--tk-elements-markdown-callouts-iconColor)] ${callout.icon}"></span>`,
                     },
                   ] satisfies Children)),
               {
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -35,7 +35,7 @@
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/svg-spinners": "^1.1.2",
     "fast-glob": "^3.3.2",
-    "unocss": "^0.59.4"
+    "unocss": "66.5.2"
   },
   "devDependencies": {
     "@types/node": "^22.4.1",
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
@@ -1,8 +1,8 @@
+import * as fastGlob from 'fast-glob';
 import fs from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { basename, dirname, resolve } from 'node:path';
-import * as fastGlob from 'fast-glob';
-import { mergeConfigs, presetIcons, presetUno, transformerDirectives, type UserConfig } from 'unocss';
+import { mergeConfigs, presetIcons, presetWind4, transformerDirectives, type UserConfig } from 'unocss';
 
 import { theme } from './theme.js';
 import { transitionTheme } from './transition-theme.js';
@@ -26,16 +26,16 @@ export function defineConfig(config: UserConfig) {
         }),
       },
       presets: [
-        presetUno({
+        presetWind4({
           dark: {
             dark: '[data-theme="dark"]',
           },
         }),
         presetIcons({
           collections: {
             ...readCustomIcons(),
-            ph: () => import('@iconify-json/ph').then((i) => i.icons),
-            'svg-spinners': () => import('@iconify-json/svg-spinners').then((i) => i.icons),
+            ph: () => loadIconifyCollection('ph'),
+            'svg-spinners': () => loadIconifyCollection('svg-spinners'),
           },
         }),
       ],
@@ -87,3 +87,51 @@ const shortcuts: UserConfig['shortcuts'] = {
   'panel-button':
     'flex items-center gap-1.5 whitespace-nowrap rounded-md text-sm transition-theme bg-tk-elements-panel-headerButton-backgroundColor hover:bg-tk-elements-panel-headerButton-backgroundColorHover text-tk-elements-panel-headerButton-textColor hover:text-tk-elements-panel-headerButton-textColorHover',
 };
+
+async function loadIconifyCollection(name: string) {
+  // Try to require the package (works for CJS or when package exposes a CJS entry)
+  try {
+    // use createRequire to ensure resolution from the package context
+
+    const pkg = require(`@iconify-json/${name}`);
+
+    if (pkg && pkg.icons) {
+      return pkg.icons;
+    }
+  } catch {
+    // fallthrough to fs-based resolution
+  }
+
+  // Fall back: resolve package root and try to find a JSON file with icons
+  try {
+    const pkgJsonPath = require.resolve(`@iconify-json/${name}/package.json`, { paths: [process.cwd()] });
+    const pkgRoot = dirname(pkgJsonPath);
+
+    // Common icon file names
+    const candidates = ['icons.json', 'index.json', 'icons/index.json'];
+
+    for (const cand of candidates) {
+      try {
+        const full = resolve(pkgRoot, cand);
+        const text = await fs.readFile(full, 'utf8');
+        const parsed = JSON.parse(text);
+
+        if (parsed && parsed.icons) {
+          return parsed.icons;
+        }
+
+        // sometimes the package itself *is* the icons object
+        if (parsed && Object.keys(parsed).length) {
+          return parsed;
+        }
+      } catch {
+        // try next candidate
+      }
+    }
+  } catch {
+    // give up
+  }
+
+  // Last resort: return an empty collection to avoid throwing at build-time
+  return {};
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,6 @@`
`31`	`31`	`"sharp": "^0.32.6",`
`32`	`32`	`"starlight-links-validator": "^0.9.0",`
`33`	`33`	`"typescript": "^5.4.5",`
`34`		`- "unocss": "^0.59.4"`
	`34`	`+ "unocss": "66.5.2"`
`35`	`35`	`}`
`36`	`36`	`}`