From aba02687dba803d53ecedb77155dca3945f53f1d Mon Sep 17 00:00:00 2001 From: Juan Di Toro 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: {