From a4510a8bcd209c50107ef625f49012234fc4475b Mon Sep 17 00:00:00 2001
From: Yuwang Cai <mrcaidev@gmail.com>
Date: Mon, 27 May 2024 13:44:17 +0800
Subject: [PATCH] fix: semantic classes generation for P3 colors

---
 src/index.test.ts | 20 ++++++++++++++++++++
 src/plugin.ts     |  5 ++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/index.test.ts b/src/index.test.ts
index 043864e..6a30797 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -56,6 +56,26 @@ test("Given no option, both utility and semantic classes are generated", async (
   expect(await format(result)).toStrictEqual(await format(expected));
 });
 
+test("Given no option, both utility and semantic classes are generated for P3 colors", async () => {
+  const expected = `
+    .bg-slatep3-1 {
+      background-color: color(display-p3 0.988 0.988 0.992);
+    }
+    .bg-slatep3-app {
+      background-color: color(display-p3 0.988 0.988 0.992);
+    }
+    @media (prefers-color-scheme: dark) {
+      .bg-slatep3-app {
+        background-color: color(display-p3 0.067 0.067 0.074);
+      }
+    }
+  `;
+
+  const result = await run({ content: "bg-slatep3-1 bg-slatep3-app" });
+
+  expect(await format(result)).toStrictEqual(await format(expected));
+});
+
 test("Given `disableSemantics: true`, only utility classes are generated", async () => {
   const expected = `
     .bg-slate-1 {
diff --git a/src/plugin.ts b/src/plugin.ts
index 634c006..9e0abee 100644
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -237,5 +237,8 @@ function findColorFamily(palette: Palette, colorName: string) {
  * @see https://github.com/tailwindlabs/tailwindcss/discussions/2049
  */
 function apply(...classes: string[]) {
-  return { [`@apply ${classes.join(" ")}`]: {} };
+  const processedClasses = classes.map((className) =>
+    className.replaceAll(" ", "_"),
+  );
+  return { [`@apply ${processedClasses.join(" ")}`]: {} };
 }