From aba02687dba803d53ecedb77155dca3945f53f1d Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Sun, 8 Oct 2023 15:29:48 +0200
Subject: [PATCH] feat: add proper tailwind scoping and config!

---
 lib/vite-plugin-react-classname-prefixer.ts | 27 ---------------------
 lib/vite-plugin-scope-tailwind              |  1 +
 package.json                                |  2 ++
 pnpm-lock.yaml                              |  6 +++++
 tailwind.config.ts                          | 17 ++++++++-----
 vite.config.ts                              |  4 +--
 6 files changed, 22 insertions(+), 35 deletions(-)
 delete mode 100644 lib/vite-plugin-react-classname-prefixer.ts
 create mode 160000 lib/vite-plugin-scope-tailwind

diff --git a/lib/vite-plugin-react-classname-prefixer.ts b/lib/vite-plugin-react-classname-prefixer.ts
deleted file mode 100644
index 9b97ab4..0000000
--- a/lib/vite-plugin-react-classname-prefixer.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Plugin } from "vite"
-
-const reactTailwindClassnamePrefixer = ({
-  prefix: outerPrefix
-}: {prefix: string}) => ({
-  name: "react-tailwind-classname-prefixer",
-  transform(code, id) {
-    if (!/\.tsx?$/.test(id)) return
-    const prefix = outerPrefix;
-
-    const classNameRegex = /className:\s*"([^"]*)"/g
-    const prefixedCode = code.replace(classNameRegex, (match, classNames) => {
-      const prefixedClassNames = classNames
-        .split(" ")
-        .map((className) => `${prefix}${className}`)
-        .join(" ")
-      return `className: "${prefixedClassNames}"`
-    })
-
-    return {
-      code: prefixedCode,
-      map: null
-    }
-  }
-}) as Plugin
-
-export default reactTailwindClassnamePrefixer
diff --git a/lib/vite-plugin-scope-tailwind b/lib/vite-plugin-scope-tailwind
new file mode 160000
index 0000000..cec13df
--- /dev/null
+++ b/lib/vite-plugin-scope-tailwind
@@ -0,0 +1 @@
+Subproject commit cec13df7edcb480dfb111de3c74887f1c3ffb7e2
diff --git a/package.json b/package.json
index dacc31d..8a365fb 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/uniqid": "^5.3.2",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
@@ -47,6 +48,7 @@
     "storybook": "^7.4.6",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
+    "uniqid": "^5.4.0",
     "vite": "^4.4.5",
     "vite-plugin-dts": "^3.6.0",
     "vite-plugin-scope-tailwind": "^1.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 02dd539..b921f42 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,6 +67,9 @@ devDependencies:
   '@types/react-dom':
     specifier: ^18.2.7
     version: 18.2.11
+  '@types/uniqid':
+    specifier: ^5.3.2
+    version: 5.3.2
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.0.0
     version: 6.7.4(@typescript-eslint/parser@6.7.4)(eslint@8.51.0)(typescript@5.2.2)
@@ -106,6 +109,9 @@ devDependencies:
   typescript:
     specifier: ^5.0.2
     version: 5.2.2
+  uniqid:
+    specifier: ^5.4.0
+    version: 5.4.0
   vite:
     specifier: ^4.4.5
     version: 4.4.11
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f8b916e..a3117f0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,10 +1,15 @@
-/** @type {import('tailwindcss').Config} */
+import {type Config} from "tailwindcss";
+
 export default {
   darkMode: ["class"],
-  // prefix: 'lume-sdk-',
   content: [
     './src/**/*.{ts,tsx}',
   ],
+  safelist: [
+    'text-primary',
+    'text-red-500',
+    'text-orange-500',
+  ],
   theme: {
     container: {
       center: true,
@@ -56,12 +61,12 @@ export default {
       },
       keyframes: {
         "accordion-down": {
-          from: { height: 0 },
+          from: { height: "0" },
           to: { height: "var(--radix-accordion-content-height)" },
         },
         "accordion-up": {
           from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
+          to: { height: "0" },
         },
       },
       animation: {
@@ -70,5 +75,5 @@ export default {
       },
     },
   },
-  plugins: [import("tailwindcss-animate")],
-}
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config
diff --git a/vite.config.ts b/vite.config.ts
index 6bea824..0dc2d2f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import scopeTailwind from "vite-plugin-scope-tailwind";
+import scopeTailwind from "./lib/vite-plugin-scope-tailwind/src/main";
 // import { resolve } from 'path'
 import svgr from "vite-plugin-svgr";
 import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svgr(), react(), scopeTailwind({react: true}), dts({
+  plugins: [svgr(), react(), scopeTailwind({react: true, classNameTransformers: ['cn']}), dts({
     tsconfigPath: "tsconfig.build.json"
   })],
   resolve: {