feat: add proper tailwind scoping and config!

lib/vite-plugin-react-classname-prefixer.ts

@@ -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

lib/vite-plugin-scope-tailwind

@@ -0,0 +1 @@
+Subproject commit cec13df7edcb480dfb111de3c74887f1c3ffb7e2

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",

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

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

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: {