feat: add proper tailwind scoping and config!

This commit is contained in:
Juan Di Toro 2023-10-08 15:29:48 +02:00
parent c043c5b6a1
commit aba02687db
6 changed files with 22 additions and 35 deletions

View File

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

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

View File

@ -34,6 +34,7 @@
"@storybook/testing-library": "^0.2.2", "@storybook/testing-library": "^0.2.2",
"@types/react": "^18.2.15", "@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7", "@types/react-dom": "^18.2.7",
"@types/uniqid": "^5.3.2",
"@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0", "@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3", "@vitejs/plugin-react": "^4.0.3",
@ -47,6 +48,7 @@
"storybook": "^7.4.6", "storybook": "^7.4.6",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"uniqid": "^5.4.0",
"vite": "^4.4.5", "vite": "^4.4.5",
"vite-plugin-dts": "^3.6.0", "vite-plugin-dts": "^3.6.0",
"vite-plugin-scope-tailwind": "^1.1.3", "vite-plugin-scope-tailwind": "^1.1.3",

View File

@ -67,6 +67,9 @@ devDependencies:
'@types/react-dom': '@types/react-dom':
specifier: ^18.2.7 specifier: ^18.2.7
version: 18.2.11 version: 18.2.11
'@types/uniqid':
specifier: ^5.3.2
version: 5.3.2
'@typescript-eslint/eslint-plugin': '@typescript-eslint/eslint-plugin':
specifier: ^6.0.0 specifier: ^6.0.0
version: 6.7.4(@typescript-eslint/parser@6.7.4)(eslint@8.51.0)(typescript@5.2.2) version: 6.7.4(@typescript-eslint/parser@6.7.4)(eslint@8.51.0)(typescript@5.2.2)
@ -106,6 +109,9 @@ devDependencies:
typescript: typescript:
specifier: ^5.0.2 specifier: ^5.0.2
version: 5.2.2 version: 5.2.2
uniqid:
specifier: ^5.4.0
version: 5.4.0
vite: vite:
specifier: ^4.4.5 specifier: ^4.4.5
version: 4.4.11 version: 4.4.11

View File

@ -1,10 +1,15 @@
/** @type {import('tailwindcss').Config} */ import {type Config} from "tailwindcss";
export default { export default {
darkMode: ["class"], darkMode: ["class"],
// prefix: 'lume-sdk-',
content: [ content: [
'./src/**/*.{ts,tsx}', './src/**/*.{ts,tsx}',
], ],
safelist: [
'text-primary',
'text-red-500',
'text-orange-500',
],
theme: { theme: {
container: { container: {
center: true, center: true,
@ -56,12 +61,12 @@ export default {
}, },
keyframes: { keyframes: {
"accordion-down": { "accordion-down": {
from: { height: 0 }, from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" }, to: { height: "var(--radix-accordion-content-height)" },
}, },
"accordion-up": { "accordion-up": {
from: { height: "var(--radix-accordion-content-height)" }, from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 }, to: { height: "0" },
}, },
}, },
animation: { animation: {
@ -70,5 +75,5 @@ export default {
}, },
}, },
}, },
plugins: [import("tailwindcss-animate")], plugins: [require("tailwindcss-animate")],
} } satisfies Config

View File

@ -1,13 +1,13 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' 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 { resolve } from 'path'
import svgr from "vite-plugin-svgr"; import svgr from "vite-plugin-svgr";
import dts from 'vite-plugin-dts' import dts from 'vite-plugin-dts'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [svgr(), react(), scopeTailwind({react: true}), dts({ plugins: [svgr(), react(), scopeTailwind({react: true, classNameTransformers: ['cn']}), dts({
tsconfigPath: "tsconfig.build.json" tsconfigPath: "tsconfig.build.json"
})], })],
resolve: { resolve: {