From 10233f1dbf41a3950282937f32095acc748abd9e Mon Sep 17 00:00:00 2001 From: Brooooooklyn Date: Wed, 5 Feb 2025 11:09:57 +0000 Subject: [PATCH] fix(admin): migrate tailwindcss config to v4 (#9940) --- packages/frontend/admin/src/global.css | 93 +++++++- tools/cli/package.json | 1 + tools/cli/src/webpack/index.ts | 35 ++- yarn.lock | 285 ++++++++++++++++++++++++- 4 files changed, 386 insertions(+), 28 deletions(-) diff --git a/packages/frontend/admin/src/global.css b/packages/frontend/admin/src/global.css index 0f0ff2aa2ca70..0935b17cfa9b5 100644 --- a/packages/frontend/admin/src/global.css +++ b/packages/frontend/admin/src/global.css @@ -1,6 +1,93 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@config '../tailwind.config.js'; + +@import 'tailwindcss'; +@import 'tailwindcss/utilities'; + +@plugin 'tailwindcss-animate'; + +@custom-variant dark (&:is(.dark *)); + +@theme { + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-ring: hsl(var(--ring)); + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + + --color-secondary: hsl(var(--secondary)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + + --color-destructive: hsl(var(--destructive)); + --color-destructive-foreground: hsl(var(--destructive-foreground)); + + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + + --color-popover: hsl(var(--popover)); + --color-popover-foreground: hsl(var(--popover-foreground)); + + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); + + --radius-lg: var(--radius); + --radius-md: calc(var(--radius) - 2px); + --radius-sm: calc(var(--radius) - 4px); + + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + + @keyframes accordion-down { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } + } + @keyframes accordion-up { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } + } +} + +@utility container { + margin-inline: auto; + padding-inline: 2rem; + @media (width >= --theme(--breakpoint-sm)) { + max-width: none; + } + @media (width >= 1400px) { + max-width: 1400px; + } +} + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } +} @layer base { :root { diff --git a/tools/cli/package.json b/tools/cli/package.json index 0ce89aaea364a..9c803eecb03c4 100644 --- a/tools/cli/package.json +++ b/tools/cli/package.json @@ -20,6 +20,7 @@ "@napi-rs/simple-git": "^0.1.19", "@perfsee/webpack": "^1.13.0", "@sentry/webpack-plugin": "^3.0.0", + "@tailwindcss/postcss": "^4.0.0", "@vanilla-extract/webpack-plugin": "^2.3.15", "autoprefixer": "^10.4.20", "clipanion": "^3.2.1", diff --git a/tools/cli/src/webpack/index.ts b/tools/cli/src/webpack/index.ts index 5acf84d13972d..50aea196221f7 100644 --- a/tools/cli/src/webpack/index.ts +++ b/tools/cli/src/webpack/index.ts @@ -255,25 +255,24 @@ export function createWebpackConfig( loader: 'postcss-loader', options: { postcssOptions: { - plugins: [ - cssnano({ - preset: [ - 'default', - { - convertValues: false, - }, + plugins: pkg.join('tailwind.config.js').exists() + ? [ + [ + '@tailwindcss/postcss', + require(pkg.join('tailwind.config.js').value), + ], + ['autoprefixer'], + ] + : [ + cssnano({ + preset: [ + 'default', + { + convertValues: false, + }, + ], + }), ], - }), - ].concat( - pkg.join('tailwind.config.js').exists() - ? [ - require('tailwindcss')( - require(pkg.join('tailwind.config.js').value) - ), - 'autoprefixer', - ] - : [] - ), }, }, }, diff --git a/yarn.lock b/yarn.lock index 907f0ace5b229..943df11b3f8f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -105,6 +105,7 @@ __metadata: "@napi-rs/simple-git": "npm:^0.1.19" "@perfsee/webpack": "npm:^1.13.0" "@sentry/webpack-plugin": "npm:^3.0.0" + "@tailwindcss/postcss": "npm:^4.0.0" "@types/lodash-es": "npm:^4.17.12" "@types/mime-types": "npm:^2.1.4" "@types/node": "npm:^22.0.0" @@ -920,6 +921,13 @@ __metadata: languageName: unknown linkType: soft +"@alloc/quick-lru@npm:^5.2.0": + version: 5.2.0 + resolution: "@alloc/quick-lru@npm:5.2.0" + checksum: 10/bdc35758b552bcf045733ac047fb7f9a07c4678b944c641adfbd41f798b4b91fffd0fdc0df2578d9b0afc7b4d636aa6e110ead5d6281a2adc1ab90efd7f057f8 + languageName: node + linkType: hard + "@ampproject/remapping@npm:^2.2.0": version: 2.3.0 resolution: "@ampproject/remapping@npm:2.3.0" @@ -14435,6 +14443,150 @@ __metadata: languageName: node linkType: hard +"@tailwindcss/node@npm:^4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/node@npm:4.0.3" + dependencies: + enhanced-resolve: "npm:^5.18.0" + jiti: "npm:^2.4.2" + tailwindcss: "npm:4.0.3" + checksum: 10/7a2d79298aaa09804a28b291e5bdeab978383367e137ef1e2f04f10cfe3dbd71597fce408c275852a6f7ea12f5120372707040f9c9dade59ff7d55c1728921f1 + languageName: node + linkType: hard + +"@tailwindcss/oxide-android-arm64@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-android-arm64@npm:4.0.3" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + +"@tailwindcss/oxide-darwin-arm64@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.0.3" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@tailwindcss/oxide-darwin-x64@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-darwin-x64@npm:4.0.3" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@tailwindcss/oxide-freebsd-x64@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.0.3" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.3" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.3" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@tailwindcss/oxide-linux-arm64-musl@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.0.3" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@tailwindcss/oxide-linux-x64-gnu@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.0.3" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@tailwindcss/oxide-linux-x64-musl@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.0.3" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.3" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@tailwindcss/oxide-win32-x64-msvc@npm:4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.0.3" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"@tailwindcss/oxide@npm:^4.0.3": + version: 4.0.3 + resolution: "@tailwindcss/oxide@npm:4.0.3" + dependencies: + "@tailwindcss/oxide-android-arm64": "npm:4.0.3" + "@tailwindcss/oxide-darwin-arm64": "npm:4.0.3" + "@tailwindcss/oxide-darwin-x64": "npm:4.0.3" + "@tailwindcss/oxide-freebsd-x64": "npm:4.0.3" + "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.0.3" + "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.0.3" + "@tailwindcss/oxide-linux-arm64-musl": "npm:4.0.3" + "@tailwindcss/oxide-linux-x64-gnu": "npm:4.0.3" + "@tailwindcss/oxide-linux-x64-musl": "npm:4.0.3" + "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.0.3" + "@tailwindcss/oxide-win32-x64-msvc": "npm:4.0.3" + dependenciesMeta: + "@tailwindcss/oxide-android-arm64": + optional: true + "@tailwindcss/oxide-darwin-arm64": + optional: true + "@tailwindcss/oxide-darwin-x64": + optional: true + "@tailwindcss/oxide-freebsd-x64": + optional: true + "@tailwindcss/oxide-linux-arm-gnueabihf": + optional: true + "@tailwindcss/oxide-linux-arm64-gnu": + optional: true + "@tailwindcss/oxide-linux-arm64-musl": + optional: true + "@tailwindcss/oxide-linux-x64-gnu": + optional: true + "@tailwindcss/oxide-linux-x64-musl": + optional: true + "@tailwindcss/oxide-win32-arm64-msvc": + optional: true + "@tailwindcss/oxide-win32-x64-msvc": + optional: true + checksum: 10/86fedaf133df200fa06a12fc22f9bd3a07f85b1250876f04546685225828ce30476cca3a0fffa4f4b1417634b2874e3e1c74162faa4c6fb6759c21529c67cde1 + languageName: node + linkType: hard + +"@tailwindcss/postcss@npm:^4.0.0": + version: 4.0.3 + resolution: "@tailwindcss/postcss@npm:4.0.3" + dependencies: + "@alloc/quick-lru": "npm:^5.2.0" + "@tailwindcss/node": "npm:^4.0.3" + "@tailwindcss/oxide": "npm:^4.0.3" + lightningcss: "npm:^1.29.1" + postcss: "npm:^8.4.41" + tailwindcss: "npm:4.0.3" + checksum: 10/f23240ea8eb0ea0a487ff88786566f1156db38f5448aeb514eeefebb6b6d99b0b7f5cf00b4fc7d2e835f1bbf7a88edee04f8585b4ff825cdae6a4a62ca9d5de3 + languageName: node + linkType: hard + "@tanstack/react-table@npm:^8.20.5": version: 8.20.6 resolution: "@tanstack/react-table@npm:8.20.6" @@ -20222,6 +20374,15 @@ __metadata: languageName: node linkType: hard +"detect-libc@npm:^1.0.3": + version: 1.0.3 + resolution: "detect-libc@npm:1.0.3" + bin: + detect-libc: ./bin/detect-libc.js + checksum: 10/3849fe7720feb153e4ac9407086956e073f1ce1704488290ef0ca8aab9430a8d48c8a9f8351889e7cdc64e5b1128589501e4fef48f3a4a49ba92cd6d112d0757 + languageName: node + linkType: hard + "detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.1, detect-libc@npm:^2.0.3": version: 2.0.3 resolution: "detect-libc@npm:2.0.3" @@ -20916,13 +21077,13 @@ __metadata: languageName: node linkType: hard -"enhanced-resolve@npm:^5.15.0, enhanced-resolve@npm:^5.17.1": - version: 5.18.0 - resolution: "enhanced-resolve@npm:5.18.0" +"enhanced-resolve@npm:^5.15.0, enhanced-resolve@npm:^5.17.1, enhanced-resolve@npm:^5.18.0": + version: 5.18.1 + resolution: "enhanced-resolve@npm:5.18.1" dependencies: graceful-fs: "npm:^4.2.4" tapable: "npm:^2.2.0" - checksum: 10/e88463ef97b68d40d0da0cd0c572e23f43dba0be622d6d44eae5cafed05f0c5dac43e463a83a86c4f70186d029357f82b56d9e1e47e8fc91dce3d6602f8bd6ce + checksum: 10/50e81c7fe2239fba5670ebce78a34709906ed3a79274aa416434f7307b252e0b7824d76a7dd403eca795571dc6afd9a44183fc45a68475e8f2fdfbae6e92fcc3 languageName: node linkType: hard @@ -25350,7 +25511,7 @@ __metadata: languageName: node linkType: hard -"jiti@npm:^2.0.0, jiti@npm:^2.3.0, jiti@npm:^2.4.1": +"jiti@npm:^2.0.0, jiti@npm:^2.3.0, jiti@npm:^2.4.1, jiti@npm:^2.4.2": version: 2.4.2 resolution: "jiti@npm:2.4.2" bin: @@ -25782,6 +25943,116 @@ __metadata: languageName: node linkType: hard +"lightningcss-darwin-arm64@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-darwin-arm64@npm:1.29.1" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"lightningcss-darwin-x64@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-darwin-x64@npm:1.29.1" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"lightningcss-freebsd-x64@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-freebsd-x64@npm:1.29.1" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"lightningcss-linux-arm-gnueabihf@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-arm-gnueabihf@npm:1.29.1" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"lightningcss-linux-arm64-gnu@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-arm64-gnu@npm:1.29.1" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"lightningcss-linux-arm64-musl@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-arm64-musl@npm:1.29.1" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"lightningcss-linux-x64-gnu@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-x64-gnu@npm:1.29.1" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"lightningcss-linux-x64-musl@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-x64-musl@npm:1.29.1" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"lightningcss-win32-arm64-msvc@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-win32-arm64-msvc@npm:1.29.1" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"lightningcss-win32-x64-msvc@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-win32-x64-msvc@npm:1.29.1" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"lightningcss@npm:^1.29.1": + version: 1.29.1 + resolution: "lightningcss@npm:1.29.1" + dependencies: + detect-libc: "npm:^1.0.3" + lightningcss-darwin-arm64: "npm:1.29.1" + lightningcss-darwin-x64: "npm:1.29.1" + lightningcss-freebsd-x64: "npm:1.29.1" + lightningcss-linux-arm-gnueabihf: "npm:1.29.1" + lightningcss-linux-arm64-gnu: "npm:1.29.1" + lightningcss-linux-arm64-musl: "npm:1.29.1" + lightningcss-linux-x64-gnu: "npm:1.29.1" + lightningcss-linux-x64-musl: "npm:1.29.1" + lightningcss-win32-arm64-msvc: "npm:1.29.1" + lightningcss-win32-x64-msvc: "npm:1.29.1" + dependenciesMeta: + lightningcss-darwin-arm64: + optional: true + lightningcss-darwin-x64: + optional: true + lightningcss-freebsd-x64: + optional: true + lightningcss-linux-arm-gnueabihf: + optional: true + lightningcss-linux-arm64-gnu: + optional: true + lightningcss-linux-arm64-musl: + optional: true + lightningcss-linux-x64-gnu: + optional: true + lightningcss-linux-x64-musl: + optional: true + lightningcss-win32-arm64-msvc: + optional: true + lightningcss-win32-x64-msvc: + optional: true + checksum: 10/c6428a695ca985fa28ea899eb72471e0c6a71715291cb62f938b038596a971b6b22d83415d882dec27841169b1b773989b16df173f5ce9075c3fdc22ff764cff + languageName: node + linkType: hard + "lilconfig@npm:^3.1.2, lilconfig@npm:~3.1.3": version: 3.1.3 resolution: "lilconfig@npm:3.1.3" @@ -29957,7 +30228,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.33, postcss@npm:^8.4.38, postcss@npm:^8.4.49": +"postcss@npm:^8.4.33, postcss@npm:^8.4.38, postcss@npm:^8.4.41, postcss@npm:^8.4.49": version: 8.5.1 resolution: "postcss@npm:8.5.1" dependencies: @@ -33505,7 +33776,7 @@ __metadata: languageName: node linkType: hard -"tailwindcss@npm:^4.0.0": +"tailwindcss@npm:4.0.3, tailwindcss@npm:^4.0.0": version: 4.0.3 resolution: "tailwindcss@npm:4.0.3" checksum: 10/d9c464b205df6169aab7bf05b158562ec15820c47ad7e9fff2419c98d2040ef53ff5689a8f57b80510576311e356fbb02ab7c47b3868885fe39dc3d1bd83b543