From b8ec165fc01a7ede34b669e353634b808365e499 Mon Sep 17 00:00:00 2001
From: Quang Phan <vnphanquang@gmail.com>
Date: Mon, 25 Nov 2024 11:57:04 +0700
Subject: [PATCH 1/2] Add support for Tailwind v4 CSS theme override

---
 README.md                                     | 12 +++++++++
 package.json                                  |  1 +
 scripts/build.ts                              |  5 ++++
 .../__snapshots__/tailwind-v4_test.ts.snap    | 14 ++++++++++
 scripts/targets/tailwind-v4.ts                | 26 +++++++++++++++++++
 scripts/targets/tailwind-v4_test.ts           |  9 +++++++
 6 files changed, 67 insertions(+)
 create mode 100644 scripts/targets/__snapshots__/tailwind-v4_test.ts.snap
 create mode 100644 scripts/targets/tailwind-v4.ts
 create mode 100644 scripts/targets/tailwind-v4_test.ts

diff --git a/README.md b/README.md
index c315514..6e35480 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,18 @@ npm install @evilmartians/harmony
 
 Harmony can work as drop-in replacement for the Tailwind color palette:
 
+### Tailwind v4
+
+Simply import `@evilmartians/harmony/tailwind.css`:
+
+```css
+/* app.css, or anywhere within Tailwind-aware context */
+@import 'tailwindcss';
+@import "@evilmartians/harmony/tailwind.css";
+```
+
+### Tailwind v3
+
 ```js
 // tailwind.config.js
 
diff --git a/package.json b/package.json
index 4775070..da7b592 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
       "require": "./dist/tailwind/index.mjs",
       "types": "./dist/tailwind/index.d.ts"
     },
+    "./tailwind.css": "./dist/tailwind/index.css",
     "./base": {
       "import": "./dist/base/index.mjs",
       "require": "./dist/base/index.js",
diff --git a/scripts/build.ts b/scripts/build.ts
index 8417c67..e287c62 100644
--- a/scripts/build.ts
+++ b/scripts/build.ts
@@ -4,6 +4,7 @@ import { buildTailwindPalette } from "./targets/tailwind.ts";
 import { buildBasicPalette } from "./targets/base.ts";
 import { ExportTarget, PaletteWithFallback } from "./types.ts";
 import { buildCssVars } from "./targets/cssVariables.ts";
+import { buildTailwindv4Palette } from "./targets/tailwind-v4.ts";
 
 //
 // Config
@@ -19,6 +20,10 @@ const EXPORT_TARGETS = [
     targetDir: "tailwind",
     target: buildTailwindPalette,
   },
+  {
+    targetDir: "tailwind",
+    target: buildTailwindv4Palette,
+  },
   {
     targetDir: "css",
     target: buildCssVars,
diff --git a/scripts/targets/__snapshots__/tailwind-v4_test.ts.snap b/scripts/targets/__snapshots__/tailwind-v4_test.ts.snap
new file mode 100644
index 0000000..8c4b4d6
--- /dev/null
+++ b/scripts/targets/__snapshots__/tailwind-v4_test.ts.snap
@@ -0,0 +1,14 @@
+export const snapshot = {};
+
+snapshot[`Tailwind v4 palette theme override 1`] = `
+"
+@theme {
+  --color-*: initial;
+
+  --color-red-100:oklch(0.966797 0.0171875 20);
+  --color-red-500:oklch(0.742188 0.151562 20);
+  
+  --color-orange-100:oklch(0.966797 0.0171875 43.3333);
+  
+}"
+`;
diff --git a/scripts/targets/tailwind-v4.ts b/scripts/targets/tailwind-v4.ts
new file mode 100644
index 0000000..5c7d9e0
--- /dev/null
+++ b/scripts/targets/tailwind-v4.ts
@@ -0,0 +1,26 @@
+import { path } from "../deps.ts";
+import type { ExportTarget } from "../types.ts";
+
+const css = String.raw;
+
+export const buildTailwindv4Palette: ExportTarget = async (
+  { palette, targetDir },
+) => {
+  const vars: string[] = [];
+
+  for (const [color, shades] of Object.entries(palette)) {
+    for (const [shade, value] of Object.entries(shades)) {
+      vars.push(`--color-${color}-${shade}:${value.oklch};`);
+    }
+    vars.push("");
+  }
+
+  const template = css`
+@theme {
+  --color-*: initial;
+
+  ${vars.join("\n  ")}
+}`;
+
+  await Deno.writeTextFile(path.join(targetDir, "index.css"), template);
+};
diff --git a/scripts/targets/tailwind-v4_test.ts b/scripts/targets/tailwind-v4_test.ts
new file mode 100644
index 0000000..d76f918
--- /dev/null
+++ b/scripts/targets/tailwind-v4_test.ts
@@ -0,0 +1,9 @@
+import { buildTailwindv4Palette } from "./tailwind-v4.ts";
+import { testExportTarget } from "./testUtils.ts";
+
+Deno.test("Tailwind v4 palette theme override", async (t) => {
+  await testExportTarget(t, buildTailwindv4Palette, [
+    "index.css",
+  ]);
+});
+

From 3e20f1a9568986bbb79f6b5c0cdb8a531255bdb1 Mon Sep 17 00:00:00 2001
From: Quang Phan <vnphanquang@gmail.com>
Date: Mon, 25 Nov 2024 17:11:35 +0700
Subject: [PATCH 2/2] Add back white & black for Tailwind v4

---
 scripts/targets/__snapshots__/tailwind-v4_test.ts.snap | 3 +++
 scripts/targets/tailwind-v4.ts                         | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/scripts/targets/__snapshots__/tailwind-v4_test.ts.snap b/scripts/targets/__snapshots__/tailwind-v4_test.ts.snap
index 8c4b4d6..92b6d75 100644
--- a/scripts/targets/__snapshots__/tailwind-v4_test.ts.snap
+++ b/scripts/targets/__snapshots__/tailwind-v4_test.ts.snap
@@ -5,6 +5,9 @@ snapshot[`Tailwind v4 palette theme override 1`] = `
 @theme {
   --color-*: initial;
 
+  --color-white: #fff;
+  --color-black: #000;
+
   --color-red-100:oklch(0.966797 0.0171875 20);
   --color-red-500:oklch(0.742188 0.151562 20);
   
diff --git a/scripts/targets/tailwind-v4.ts b/scripts/targets/tailwind-v4.ts
index 5c7d9e0..7ba2619 100644
--- a/scripts/targets/tailwind-v4.ts
+++ b/scripts/targets/tailwind-v4.ts
@@ -19,6 +19,9 @@ export const buildTailwindv4Palette: ExportTarget = async (
 @theme {
   --color-*: initial;
 
+  --color-white: #fff;
+  --color-black: #000;
+
   ${vars.join("\n  ")}
 }`;