From a39f55e40a4246094c5697fd05f22cec7fafb58c Mon Sep 17 00:00:00 2001 From: Francisco Diaz Date: Thu, 18 Dec 2025 11:15:14 +0100 Subject: [PATCH 01/21] chore: update dependencies --- packages/x-tailwindcss/package.json | 8 +- pnpm-lock.yaml | 625 +++++++++++++++++++++------- 2 files changed, 471 insertions(+), 162 deletions(-) diff --git a/packages/x-tailwindcss/package.json b/packages/x-tailwindcss/package.json index a2ca6ce642..d4b895d6cc 100644 --- a/packages/x-tailwindcss/package.json +++ b/packages/x-tailwindcss/package.json @@ -46,14 +46,14 @@ }, "devDependencies": { "@rollup/plugin-commonjs": "29.0.0", + "@tailwindcss/postcss": "4.1.17", + "@tailwindcss/vite": "4.1.17", + "@types/tailwindcss": "^3.1.0", "@vitejs/plugin-vue": "5.2.4", - "autoprefixer": "10.4.21", - "postcss": "8.4.12", - "postcss-import": "16.1.0", "rimraf": "3.0.2", "rollup": "4.9.1", "rollup-plugin-typescript2": "0.36.0", - "tailwindcss": "3.4.0", + "tailwindcss": "4.1.17", "ts-jest": "29.4.6", "typescript": "5.9.3", "vite": "6.4.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c04c24ff72..2cf1352f31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,7 +10,7 @@ importers: devDependencies: '@empathyco/eslint-config': specifier: 1.8.0 - version: 1.8.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@vue/compiler-sfc@3.5.25)(jiti@1.21.7)(typescript@5.9.3) + version: 1.8.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.25)(jiti@2.6.1)(typescript@5.9.3) colors: specifier: 1.4.0 version: 1.4.0 @@ -295,7 +295,7 @@ importers: version: 24.10.4 '@vitejs/plugin-vue': specifier: 5.2.4 - version: 5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3)) + version: 5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3)) '@vue/test-utils': specifier: 2.4.6 version: 2.4.6 @@ -373,10 +373,10 @@ importers: version: 5.9.3 vite: specifier: 6.4.1 - version: 6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2) + version: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2) vite-plugin-vue-inspector: specifier: 5.3.2 - version: 5.3.2(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2)) + version: 5.3.2(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2)) vue: specifier: 3.5.25 version: 3.5.25(typescript@5.9.3) @@ -427,18 +427,18 @@ importers: '@rollup/plugin-commonjs': specifier: 29.0.0 version: 29.0.0(rollup@4.9.1) + '@tailwindcss/postcss': + specifier: 4.1.17 + version: 4.1.17 + '@tailwindcss/vite': + specifier: 4.1.17 + version: 4.1.17(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2)) + '@types/tailwindcss': + specifier: ^3.1.0 + version: 3.1.0 '@vitejs/plugin-vue': specifier: 5.2.4 - version: 5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3)) - autoprefixer: - specifier: 10.4.21 - version: 10.4.21(postcss@8.4.12) - postcss: - specifier: 8.4.12 - version: 8.4.12 - postcss-import: - specifier: 16.1.0 - version: 16.1.0(postcss@8.4.12) + version: 5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3)) rimraf: specifier: 3.0.2 version: 3.0.2 @@ -449,17 +449,17 @@ importers: specifier: 0.36.0 version: 0.36.0(rollup@4.9.1)(typescript@5.9.3) tailwindcss: - specifier: 3.4.0 - version: 3.4.0(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)) + specifier: 4.1.17 + version: 4.1.17 ts-jest: specifier: 29.4.6 - version: 29.4.6(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.28.3))(esbuild@0.20.0)(jest-util@29.7.0)(jest@29.7.0(@types/node@24.10.4)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(typescript@5.9.3) + version: 29.4.6(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.28.3))(jest-util@29.7.0)(jest@29.7.0(@types/node@24.10.4))(typescript@5.9.3) typescript: specifier: 5.9.3 version: 5.9.3 vite: specifier: 6.4.1 - version: 6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2) + version: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2) vue: specifier: 3.5.25 version: 3.5.25(typescript@5.9.3) @@ -2056,6 +2056,9 @@ packages: '@jridgewell/gen-mapping@0.3.13': resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} + '@jridgewell/remapping@2.3.5': + resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==} + '@jridgewell/resolve-uri@3.1.2': resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} @@ -2592,6 +2595,99 @@ packages: peerDependencies: eslint: '>=9.0.0' + '@tailwindcss/node@4.1.17': + resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==} + + '@tailwindcss/oxide-android-arm64@4.1.17': + resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [android] + + '@tailwindcss/oxide-darwin-arm64@4.1.17': + resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + + '@tailwindcss/oxide-darwin-x64@4.1.17': + resolution: {integrity: sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + + '@tailwindcss/oxide-freebsd-x64@4.1.17': + resolution: {integrity: sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==} + engines: {node: '>= 10'} + cpu: [x64] + os: [freebsd] + + '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17': + resolution: {integrity: sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==} + engines: {node: '>= 10'} + cpu: [arm] + os: [linux] + + '@tailwindcss/oxide-linux-arm64-gnu@4.1.17': + resolution: {integrity: sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + + '@tailwindcss/oxide-linux-arm64-musl@4.1.17': + resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + + '@tailwindcss/oxide-linux-x64-gnu@4.1.17': + resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + + '@tailwindcss/oxide-linux-x64-musl@4.1.17': + resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + + '@tailwindcss/oxide-wasm32-wasi@4.1.17': + resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==} + engines: {node: '>=14.0.0'} + cpu: [wasm32] + bundledDependencies: + - '@napi-rs/wasm-runtime' + - '@emnapi/core' + - '@emnapi/runtime' + - '@tybys/wasm-util' + - '@emnapi/wasi-threads' + - tslib + + '@tailwindcss/oxide-win32-arm64-msvc@4.1.17': + resolution: {integrity: sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + + '@tailwindcss/oxide-win32-x64-msvc@4.1.17': + resolution: {integrity: sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + + '@tailwindcss/oxide@4.1.17': + resolution: {integrity: sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==} + engines: {node: '>= 10'} + + '@tailwindcss/postcss@4.1.17': + resolution: {integrity: sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==} + + '@tailwindcss/vite@4.1.17': + resolution: {integrity: sha512-4+9w8ZHOiGnpcGI6z1TVVfWaX/koK7fKeSYF3qlYg2xpBtbteP2ddBxiarL+HVgfSJGeK5RIxRQmKm4rTJJAwA==} + peerDependencies: + vite: ^5.2.0 || ^6 || ^7 + '@teppeis/multimaps@3.0.0': resolution: {integrity: sha512-ID7fosbc50TbT0MK0EG12O+gAP3W3Aa/Pz4DaTtQtEvlc9Odaqi0de+xuZ7Li2GtK4HzEX7IuRWS/JmZLksR3Q==} engines: {node: '>=14'} @@ -2726,6 +2822,10 @@ packages: '@types/strip-json-comments@0.0.30': resolution: {integrity: sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==} + '@types/tailwindcss@3.1.0': + resolution: {integrity: sha512-JxPzrm609hzvF4nmOI3StLjbBEP3WWQxDDJESqR1nh94h7gyyy3XSl0hn5RBMJ9mPudlLjtaXs5YEBtLw7CnPA==} + deprecated: This is a stub types definition. tailwindcss provides its own type definitions, so you do not need this installed. + '@types/tmp@0.2.6': resolution: {integrity: sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==} @@ -4036,6 +4136,10 @@ packages: resolution: {integrity: sha512-rlpvsxUtM0PQvy9iZe640/IWwWYyBsTApREbA1pHOpmOUIl9MkP/U4z7vTtg4Oaojvqhxt7sdufnT0EzGaR31g==} engines: {node: '>=4'} + detect-libc@2.1.2: + resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} + engines: {node: '>=8'} + detect-newline@3.1.0: resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==} engines: {node: '>=8'} @@ -5557,6 +5661,10 @@ packages: resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==} hasBin: true + jiti@2.6.1: + resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==} + hasBin: true + jju@1.4.0: resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} @@ -5736,6 +5844,76 @@ packages: resolution: {integrity: sha512-lvAEYW8mB8QblL6Q/PI/wMzKNvIrF7Kpujf/4fGS/32a2i3jzUXi04TNyIBcK6dQJ34IgywfaKGh+Jq4HYPFmg==} engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + lightningcss-android-arm64@1.30.2: + resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [android] + + lightningcss-darwin-arm64@1.30.2: + resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + + lightningcss-darwin-x64@1.30.2: + resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + + lightningcss-freebsd-x64@1.30.2: + resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + + lightningcss-linux-arm-gnueabihf@1.30.2: + resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + + lightningcss-linux-arm64-gnu@1.30.2: + resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + + lightningcss-linux-arm64-musl@1.30.2: + resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + + lightningcss-linux-x64-gnu@1.30.2: + resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + + lightningcss-linux-x64-musl@1.30.2: + resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + + lightningcss-win32-arm64-msvc@1.30.2: + resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [win32] + + lightningcss-win32-x64-msvc@1.30.2: + resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + + lightningcss@1.30.2: + resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==} + engines: {node: '>= 12.0.0'} + lilconfig@2.1.0: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} engines: {node: '>=10'} @@ -6757,12 +6935,6 @@ packages: peerDependencies: postcss: ^8.0.0 - postcss-import@16.1.0: - resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==} - engines: {node: '>=18.0.0'} - peerDependencies: - postcss: ^8.0.0 - postcss-js@4.0.1: resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} @@ -7856,6 +8028,9 @@ packages: engines: {node: '>=14.0.0'} hasBin: true + tailwindcss@4.1.17: + resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==} + tapable@2.2.3: resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==} engines: {node: '>=6'} @@ -8643,44 +8818,44 @@ snapshots: '@jridgewell/gen-mapping': 0.3.13 '@jridgewell/trace-mapping': 0.3.30 - '@antfu/eslint-config@4.6.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@vue/compiler-sfc@3.5.25)(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)': + '@antfu/eslint-config@4.6.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.25)(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)': dependencies: '@antfu/install-pkg': 1.1.0 '@clack/prompts': 0.10.1 - '@eslint-community/eslint-plugin-eslint-comments': 4.5.0(eslint@9.21.0(jiti@1.21.7)) + '@eslint-community/eslint-plugin-eslint-comments': 4.5.0(eslint@9.21.0(jiti@2.6.1)) '@eslint/markdown': 6.6.0 - '@stylistic/eslint-plugin': 4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - '@typescript-eslint/parser': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - '@vitest/eslint-plugin': 1.5.2(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) + '@stylistic/eslint-plugin': 4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/parser': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + '@vitest/eslint-plugin': 1.5.2(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) ansis: 3.17.0 cac: 6.7.14 - eslint: 9.21.0(jiti@1.21.7) - eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@1.21.7)) + eslint: 9.21.0(jiti@2.6.1) + eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@2.6.1)) eslint-flat-config-utils: 2.1.4 - eslint-merge-processors: 2.0.0(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-antfu: 3.1.1(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-command: 3.3.1(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-jsdoc: 50.8.0(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-jsonc: 2.21.0(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-n: 17.23.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) + eslint-merge-processors: 2.0.0(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-antfu: 3.1.1(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-command: 3.3.1(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-jsdoc: 50.8.0(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-jsonc: 2.21.0(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-n: 17.23.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) eslint-plugin-no-only-tests: 3.3.0 - eslint-plugin-perfectionist: 4.15.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - eslint-plugin-pnpm-catalogs: 0.1.0(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-regexp: 2.10.0(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-toml: 0.12.0(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-unicorn: 57.0.0(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-unused-imports: 4.3.0(@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7)) - eslint-plugin-vue: 10.6.2(@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@1.21.7))) - eslint-plugin-yml: 1.19.0(eslint@9.21.0(jiti@1.21.7)) - eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.25)(eslint@9.21.0(jiti@1.21.7)) + eslint-plugin-perfectionist: 4.15.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + eslint-plugin-pnpm-catalogs: 0.1.0(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-regexp: 2.10.0(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-toml: 0.12.0(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-unicorn: 57.0.0(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-unused-imports: 4.3.0(@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1)) + eslint-plugin-vue: 10.6.2(@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@2.6.1))) + eslint-plugin-yml: 1.19.0(eslint@9.21.0(jiti@2.6.1)) + eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.25)(eslint@9.21.0(jiti@2.6.1)) globals: 16.5.0 jsonc-eslint-parser: 2.4.2 local-pkg: 1.1.2 parse-gitignore: 2.0.0 toml-eslint-parser: 0.10.0 - vue-eslint-parser: 10.2.0(eslint@9.21.0(jiti@1.21.7)) + vue-eslint-parser: 10.2.0(eslint@9.21.0(jiti@2.6.1)) yaml-eslint-parser: 1.3.2 transitivePeerDependencies: - '@eslint/json' @@ -9533,7 +9708,7 @@ snapshots: '@cucumber/ci-environment': 12.0.0 '@cucumber/cucumber-expressions': 18.0.1 '@cucumber/gherkin': 37.0.0 - '@cucumber/gherkin-streams': 6.0.0(@cucumber/gherkin@37.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@31.0.0))(@cucumber/messages@31.0.0) + '@cucumber/gherkin-streams': 6.0.0(@cucumber/gherkin@37.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@30.1.0))(@cucumber/messages@31.0.0) '@cucumber/gherkin-utils': 10.0.0 '@cucumber/html-formatter': 22.2.0(@cucumber/messages@31.0.0) '@cucumber/junit-xml-formatter': 0.9.0(@cucumber/messages@31.0.0) @@ -9571,7 +9746,7 @@ snapshots: yaml: 2.8.2 yup: 1.7.1 - '@cucumber/gherkin-streams@6.0.0(@cucumber/gherkin@37.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@31.0.0))(@cucumber/messages@31.0.0)': + '@cucumber/gherkin-streams@6.0.0(@cucumber/gherkin@37.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@30.1.0))(@cucumber/messages@31.0.0)': dependencies: '@cucumber/gherkin': 37.0.0 '@cucumber/message-streams': 4.0.1(@cucumber/messages@31.0.0) @@ -9722,10 +9897,10 @@ snapshots: tslib: 2.8.1 optional: true - '@empathyco/eslint-config@1.8.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@vue/compiler-sfc@3.5.25)(jiti@1.21.7)(typescript@5.9.3)': + '@empathyco/eslint-config@1.8.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.25)(jiti@2.6.1)(typescript@5.9.3)': dependencies: - '@antfu/eslint-config': 4.6.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@vue/compiler-sfc@3.5.25)(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - eslint: 9.21.0(jiti@1.21.7) + '@antfu/eslint-config': 4.6.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.25)(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + eslint: 9.21.0(jiti@2.6.1) prettier: 3.5.3 prettier-plugin-tailwindcss: 0.6.11(prettier@3.5.3) transitivePeerDependencies: @@ -10001,22 +10176,22 @@ snapshots: '@esbuild/win32-x64@0.27.1': optional: true - '@eslint-community/eslint-plugin-eslint-comments@4.5.0(eslint@9.21.0(jiti@1.21.7))': + '@eslint-community/eslint-plugin-eslint-comments@4.5.0(eslint@9.21.0(jiti@2.6.1))': dependencies: escape-string-regexp: 4.0.0 - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) ignore: 5.3.2 - '@eslint-community/eslint-utils@4.9.0(eslint@9.21.0(jiti@1.21.7))': + '@eslint-community/eslint-utils@4.9.0(eslint@9.21.0(jiti@2.6.1))': dependencies: - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) eslint-visitor-keys: 3.4.3 '@eslint-community/regexpp@4.12.1': {} - '@eslint/compat@1.3.2(eslint@9.21.0(jiti@1.21.7))': + '@eslint/compat@1.3.2(eslint@9.21.0(jiti@2.6.1))': optionalDependencies: - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) '@eslint/config-array@0.19.2': dependencies: @@ -10331,6 +10506,11 @@ snapshots: '@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/trace-mapping': 0.3.30 + '@jridgewell/remapping@2.3.5': + dependencies: + '@jridgewell/gen-mapping': 0.3.13 + '@jridgewell/trace-mapping': 0.3.30 + '@jridgewell/resolve-uri@3.1.2': {} '@jridgewell/sourcemap-codec@1.5.5': {} @@ -11015,10 +11195,10 @@ snapshots: '@standard-schema/spec@1.0.0': {} - '@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)': + '@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)': dependencies: - '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - eslint: 9.21.0(jiti@1.21.7) + '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + eslint: 9.21.0(jiti@2.6.1) eslint-visitor-keys: 4.2.1 espree: 10.4.0 estraverse: 5.3.0 @@ -11027,6 +11207,82 @@ snapshots: - supports-color - typescript + '@tailwindcss/node@4.1.17': + dependencies: + '@jridgewell/remapping': 2.3.5 + enhanced-resolve: 5.18.3 + jiti: 2.6.1 + lightningcss: 1.30.2 + magic-string: 0.30.21 + source-map-js: 1.2.1 + tailwindcss: 4.1.17 + + '@tailwindcss/oxide-android-arm64@4.1.17': + optional: true + + '@tailwindcss/oxide-darwin-arm64@4.1.17': + optional: true + + '@tailwindcss/oxide-darwin-x64@4.1.17': + optional: true + + '@tailwindcss/oxide-freebsd-x64@4.1.17': + optional: true + + '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17': + optional: true + + '@tailwindcss/oxide-linux-arm64-gnu@4.1.17': + optional: true + + '@tailwindcss/oxide-linux-arm64-musl@4.1.17': + optional: true + + '@tailwindcss/oxide-linux-x64-gnu@4.1.17': + optional: true + + '@tailwindcss/oxide-linux-x64-musl@4.1.17': + optional: true + + '@tailwindcss/oxide-wasm32-wasi@4.1.17': + optional: true + + '@tailwindcss/oxide-win32-arm64-msvc@4.1.17': + optional: true + + '@tailwindcss/oxide-win32-x64-msvc@4.1.17': + optional: true + + '@tailwindcss/oxide@4.1.17': + optionalDependencies: + '@tailwindcss/oxide-android-arm64': 4.1.17 + '@tailwindcss/oxide-darwin-arm64': 4.1.17 + '@tailwindcss/oxide-darwin-x64': 4.1.17 + '@tailwindcss/oxide-freebsd-x64': 4.1.17 + '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.17 + '@tailwindcss/oxide-linux-arm64-gnu': 4.1.17 + '@tailwindcss/oxide-linux-arm64-musl': 4.1.17 + '@tailwindcss/oxide-linux-x64-gnu': 4.1.17 + '@tailwindcss/oxide-linux-x64-musl': 4.1.17 + '@tailwindcss/oxide-wasm32-wasi': 4.1.17 + '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17 + '@tailwindcss/oxide-win32-x64-msvc': 4.1.17 + + '@tailwindcss/postcss@4.1.17': + dependencies: + '@alloc/quick-lru': 5.2.0 + '@tailwindcss/node': 4.1.17 + '@tailwindcss/oxide': 4.1.17 + postcss: 8.5.6 + tailwindcss: 4.1.17 + + '@tailwindcss/vite@4.1.17(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2))': + dependencies: + '@tailwindcss/node': 4.1.17 + '@tailwindcss/oxide': 4.1.17 + tailwindcss: 4.1.17 + vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2) + '@teppeis/multimaps@3.0.0': {} '@testing-library/jest-dom@6.6.4': @@ -11168,6 +11424,10 @@ snapshots: '@types/strip-json-comments@0.0.30': {} + '@types/tailwindcss@3.1.0': + dependencies: + tailwindcss: 4.1.17 + '@types/tmp@0.2.6': {} '@types/tough-cookie@4.0.5': {} @@ -11189,15 +11449,15 @@ snapshots: '@types/node': 24.10.4 optional: true - '@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)': + '@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)': dependencies: '@eslint-community/regexpp': 4.12.1 - '@typescript-eslint/parser': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/parser': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) '@typescript-eslint/scope-manager': 8.49.0 - '@typescript-eslint/type-utils': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/type-utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) '@typescript-eslint/visitor-keys': 8.49.0 - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) ignore: 7.0.5 natural-compare: 1.4.0 ts-api-utils: 2.1.0(typescript@5.9.3) @@ -11205,14 +11465,14 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)': + '@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)': dependencies: '@typescript-eslint/scope-manager': 8.49.0 '@typescript-eslint/types': 8.49.0 '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3) '@typescript-eslint/visitor-keys': 8.49.0 debug: 4.4.3(supports-color@8.1.1) - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) typescript: 5.9.3 transitivePeerDependencies: - supports-color @@ -11235,13 +11495,13 @@ snapshots: dependencies: typescript: 5.9.3 - '@typescript-eslint/type-utils@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)': + '@typescript-eslint/type-utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)': dependencies: '@typescript-eslint/types': 8.49.0 '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3) - '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) debug: 4.4.3(supports-color@8.1.1) - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) ts-api-utils: 2.1.0(typescript@5.9.3) typescript: 5.9.3 transitivePeerDependencies: @@ -11264,13 +11524,13 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)': + '@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)': dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7)) + '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1)) '@typescript-eslint/scope-manager': 8.49.0 '@typescript-eslint/types': 8.49.0 '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3) - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) typescript: 5.9.3 transitivePeerDependencies: - supports-color @@ -11339,16 +11599,16 @@ snapshots: '@unrs/resolver-binding-win32-x64-msvc@1.11.1': optional: true - '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))': + '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))': dependencies: - vite: 6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2) + vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2) vue: 3.5.25(typescript@5.9.3) - '@vitest/eslint-plugin@1.5.2(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)': + '@vitest/eslint-plugin@1.5.2(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)': dependencies: '@typescript-eslint/scope-manager': 8.49.0 - '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - eslint: 9.21.0(jiti@1.21.7) + '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + eslint: 9.21.0(jiti@2.6.1) optionalDependencies: typescript: 5.9.3 transitivePeerDependencies: @@ -12639,6 +12899,8 @@ snapshots: detect-indent@5.0.0: {} + detect-libc@2.1.2: {} + detect-newline@3.1.0: {} detective-amd@6.0.1: @@ -12967,20 +13229,20 @@ snapshots: optionalDependencies: source-map: 0.6.1 - eslint-compat-utils@0.5.1(eslint@9.21.0(jiti@1.21.7)): + eslint-compat-utils@0.5.1(eslint@9.21.0(jiti@2.6.1)): dependencies: - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) semver: 7.7.3 - eslint-compat-utils@0.6.5(eslint@9.21.0(jiti@1.21.7)): + eslint-compat-utils@0.6.5(eslint@9.21.0(jiti@2.6.1)): dependencies: - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) semver: 7.7.3 - eslint-config-flat-gitignore@2.1.0(eslint@9.21.0(jiti@1.21.7)): + eslint-config-flat-gitignore@2.1.0(eslint@9.21.0(jiti@2.6.1)): dependencies: - '@eslint/compat': 1.3.2(eslint@9.21.0(jiti@1.21.7)) - eslint: 9.21.0(jiti@1.21.7) + '@eslint/compat': 1.3.2(eslint@9.21.0(jiti@2.6.1)) + eslint: 9.21.0(jiti@2.6.1) eslint-flat-config-utils@2.1.4: dependencies: @@ -12993,38 +13255,38 @@ snapshots: optionalDependencies: unrs-resolver: 1.11.1 - eslint-json-compat-utils@0.2.1(eslint@9.21.0(jiti@1.21.7))(jsonc-eslint-parser@2.4.2): + eslint-json-compat-utils@0.2.1(eslint@9.21.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.2): dependencies: - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) esquery: 1.6.0 jsonc-eslint-parser: 2.4.2 - eslint-merge-processors@2.0.0(eslint@9.21.0(jiti@1.21.7)): + eslint-merge-processors@2.0.0(eslint@9.21.0(jiti@2.6.1)): dependencies: - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) - eslint-plugin-antfu@3.1.1(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-antfu@3.1.1(eslint@9.21.0(jiti@2.6.1)): dependencies: - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) - eslint-plugin-command@3.3.1(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-command@3.3.1(eslint@9.21.0(jiti@2.6.1)): dependencies: '@es-joy/jsdoccomment': 0.50.2 - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) - eslint-plugin-es-x@7.8.0(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-es-x@7.8.0(eslint@9.21.0(jiti@2.6.1)): dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7)) + '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1)) '@eslint-community/regexpp': 4.12.1 - eslint: 9.21.0(jiti@1.21.7) - eslint-compat-utils: 0.5.1(eslint@9.21.0(jiti@1.21.7)) + eslint: 9.21.0(jiti@2.6.1) + eslint-compat-utils: 0.5.1(eslint@9.21.0(jiti@2.6.1)) - eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1)): dependencies: '@typescript-eslint/types': 8.49.0 comment-parser: 1.4.1 debug: 4.4.3(supports-color@8.1.1) - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) eslint-import-context: 0.1.9(unrs-resolver@1.11.1) is-glob: 4.0.3 minimatch: 10.1.1 @@ -13032,18 +13294,18 @@ snapshots: stable-hash-x: 0.2.0 unrs-resolver: 1.11.1 optionalDependencies: - '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) transitivePeerDependencies: - supports-color - eslint-plugin-jsdoc@50.8.0(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-jsdoc@50.8.0(eslint@9.21.0(jiti@2.6.1)): dependencies: '@es-joy/jsdoccomment': 0.50.2 are-docs-informative: 0.0.2 comment-parser: 1.4.1 debug: 4.4.3(supports-color@8.1.1) escape-string-regexp: 4.0.0 - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) espree: 10.4.0 esquery: 1.6.0 parse-imports-exports: 0.2.4 @@ -13052,13 +13314,13 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-jsonc@2.21.0(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-jsonc@2.21.0(eslint@9.21.0(jiti@2.6.1)): dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7)) + '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1)) diff-sequences: 27.5.1 - eslint: 9.21.0(jiti@1.21.7) - eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@1.21.7)) - eslint-json-compat-utils: 0.2.1(eslint@9.21.0(jiti@1.21.7))(jsonc-eslint-parser@2.4.2) + eslint: 9.21.0(jiti@2.6.1) + eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@2.6.1)) + eslint-json-compat-utils: 0.2.1(eslint@9.21.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.2) espree: 10.4.0 graphemer: 1.4.0 jsonc-eslint-parser: 2.4.2 @@ -13067,12 +13329,12 @@ snapshots: transitivePeerDependencies: - '@eslint/json' - eslint-plugin-n@17.23.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3): + eslint-plugin-n@17.23.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3): dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7)) + '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1)) enhanced-resolve: 5.18.3 - eslint: 9.21.0(jiti@1.21.7) - eslint-plugin-es-x: 7.8.0(eslint@9.21.0(jiti@1.21.7)) + eslint: 9.21.0(jiti@2.6.1) + eslint-plugin-es-x: 7.8.0(eslint@9.21.0(jiti@2.6.1)) get-tsconfig: 4.13.0 globals: 15.15.0 globrex: 0.1.2 @@ -13084,52 +13346,52 @@ snapshots: eslint-plugin-no-only-tests@3.3.0: {} - eslint-plugin-perfectionist@4.15.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3): + eslint-plugin-perfectionist@4.15.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3): dependencies: '@typescript-eslint/types': 8.49.0 - '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - eslint: 9.21.0(jiti@1.21.7) + '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + eslint: 9.21.0(jiti@2.6.1) natural-orderby: 5.0.0 transitivePeerDependencies: - supports-color - typescript - eslint-plugin-pnpm-catalogs@0.1.0(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-pnpm-catalogs@0.1.0(eslint@9.21.0(jiti@2.6.1)): dependencies: - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) find-up-simple: 1.0.1 jsonc-eslint-parser: 2.4.2 pnpm-catalogs-utils: 0.1.0 - eslint-plugin-regexp@2.10.0(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-regexp@2.10.0(eslint@9.21.0(jiti@2.6.1)): dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7)) + '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1)) '@eslint-community/regexpp': 4.12.1 comment-parser: 1.4.1 - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) jsdoc-type-pratt-parser: 4.8.0 refa: 0.12.1 regexp-ast-analysis: 0.7.1 scslre: 0.3.0 - eslint-plugin-toml@0.12.0(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-toml@0.12.0(eslint@9.21.0(jiti@2.6.1)): dependencies: debug: 4.4.3(supports-color@8.1.1) - eslint: 9.21.0(jiti@1.21.7) - eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@1.21.7)) + eslint: 9.21.0(jiti@2.6.1) + eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@2.6.1)) lodash: 4.17.21 toml-eslint-parser: 0.10.0 transitivePeerDependencies: - supports-color - eslint-plugin-unicorn@57.0.0(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-unicorn@57.0.0(eslint@9.21.0(jiti@2.6.1)): dependencies: '@babel/helper-validator-identifier': 7.28.5 - '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7)) + '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1)) ci-info: 4.3.1 clean-regexp: 1.0.0 core-js-compat: 3.47.0 - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) esquery: 1.6.0 globals: 15.15.0 indent-string: 5.0.0 @@ -13142,42 +13404,42 @@ snapshots: semver: 7.7.3 strip-indent: 4.1.1 - eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1)): dependencies: - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) optionalDependencies: - '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) + '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) - eslint-plugin-vue@10.6.2(@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@1.21.7))): + eslint-plugin-vue@10.6.2(@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@2.6.1))): dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7)) - eslint: 9.21.0(jiti@1.21.7) + '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1)) + eslint: 9.21.0(jiti@2.6.1) natural-compare: 1.4.0 nth-check: 2.1.1 postcss-selector-parser: 7.1.0 semver: 7.7.3 - vue-eslint-parser: 10.2.0(eslint@9.21.0(jiti@1.21.7)) + vue-eslint-parser: 10.2.0(eslint@9.21.0(jiti@2.6.1)) xml-name-validator: 4.0.0 optionalDependencies: - '@stylistic/eslint-plugin': 4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) - '@typescript-eslint/parser': 8.49.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3) + '@stylistic/eslint-plugin': 4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/parser': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3) - eslint-plugin-yml@1.19.0(eslint@9.21.0(jiti@1.21.7)): + eslint-plugin-yml@1.19.0(eslint@9.21.0(jiti@2.6.1)): dependencies: debug: 4.4.3(supports-color@8.1.1) diff-sequences: 27.5.1 escape-string-regexp: 4.0.0 - eslint: 9.21.0(jiti@1.21.7) - eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@1.21.7)) + eslint: 9.21.0(jiti@2.6.1) + eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@2.6.1)) natural-compare: 1.4.0 yaml-eslint-parser: 1.3.2 transitivePeerDependencies: - supports-color - eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.25)(eslint@9.21.0(jiti@1.21.7)): + eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.25)(eslint@9.21.0(jiti@2.6.1)): dependencies: '@vue/compiler-sfc': 3.5.25 - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) eslint-scope@8.4.0: dependencies: @@ -13188,9 +13450,9 @@ snapshots: eslint-visitor-keys@4.2.1: {} - eslint@9.21.0(jiti@1.21.7): + eslint@9.21.0(jiti@2.6.1): dependencies: - '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7)) + '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1)) '@eslint-community/regexpp': 4.12.1 '@eslint/config-array': 0.19.2 '@eslint/core': 0.12.0 @@ -13225,7 +13487,7 @@ snapshots: natural-compare: 1.4.0 optionator: 0.9.4 optionalDependencies: - jiti: 1.21.7 + jiti: 2.6.1 transitivePeerDependencies: - supports-color @@ -14590,6 +14852,8 @@ snapshots: jiti@1.21.7: {} + jiti@2.6.1: {} + jju@1.4.0: {} joi@18.0.2: @@ -14867,6 +15131,55 @@ snapshots: - bluebird - supports-color + lightningcss-android-arm64@1.30.2: + optional: true + + lightningcss-darwin-arm64@1.30.2: + optional: true + + lightningcss-darwin-x64@1.30.2: + optional: true + + lightningcss-freebsd-x64@1.30.2: + optional: true + + lightningcss-linux-arm-gnueabihf@1.30.2: + optional: true + + lightningcss-linux-arm64-gnu@1.30.2: + optional: true + + lightningcss-linux-arm64-musl@1.30.2: + optional: true + + lightningcss-linux-x64-gnu@1.30.2: + optional: true + + lightningcss-linux-x64-musl@1.30.2: + optional: true + + lightningcss-win32-arm64-msvc@1.30.2: + optional: true + + lightningcss-win32-x64-msvc@1.30.2: + optional: true + + lightningcss@1.30.2: + dependencies: + detect-libc: 2.1.2 + optionalDependencies: + lightningcss-android-arm64: 1.30.2 + lightningcss-darwin-arm64: 1.30.2 + lightningcss-darwin-x64: 1.30.2 + lightningcss-freebsd-x64: 1.30.2 + lightningcss-linux-arm-gnueabihf: 1.30.2 + lightningcss-linux-arm64-gnu: 1.30.2 + lightningcss-linux-arm64-musl: 1.30.2 + lightningcss-linux-x64-gnu: 1.30.2 + lightningcss-linux-x64-musl: 1.30.2 + lightningcss-win32-arm64-msvc: 1.30.2 + lightningcss-win32-x64-msvc: 1.30.2 + lilconfig@2.1.0: {} lilconfig@3.1.3: {} @@ -16218,13 +16531,6 @@ snapshots: read-cache: 1.0.0 resolve: 1.22.10 - postcss-import@16.1.0(postcss@8.4.12): - dependencies: - postcss: 8.4.12 - postcss-value-parser: 4.2.0 - read-cache: 1.0.0 - resolve: 1.22.10 - postcss-js@4.0.1(postcss@8.5.6): dependencies: camelcase-css: 2.0.1 @@ -17398,6 +17704,8 @@ snapshots: transitivePeerDependencies: - ts-node + tailwindcss@4.1.17: {} + tapable@2.2.3: {} tar-stream@2.2.0: @@ -17831,7 +18139,7 @@ snapshots: core-util-is: 1.0.2 extsprintf: 1.3.0 - vite-plugin-vue-inspector@5.3.2(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2)): + vite-plugin-vue-inspector@5.3.2(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2)): dependencies: '@babel/core': 7.28.3 '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.3) @@ -17842,11 +18150,11 @@ snapshots: '@vue/compiler-dom': 3.5.25 kolorist: 1.8.0 magic-string: 0.30.21 - vite: 6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2) + vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2) transitivePeerDependencies: - supports-color - vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2): + vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2): dependencies: esbuild: 0.25.9 fdir: 6.5.0(picomatch@4.0.3) @@ -17857,7 +18165,8 @@ snapshots: optionalDependencies: '@types/node': 24.10.4 fsevents: 2.3.3 - jiti: 1.21.7 + jiti: 2.6.1 + lightningcss: 1.30.2 sass: 1.70.0 tsx: 4.21.0 yaml: 2.8.2 @@ -17896,10 +18205,10 @@ snapshots: transitivePeerDependencies: - vue - vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@1.21.7)): + vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@2.6.1)): dependencies: debug: 4.4.3(supports-color@8.1.1) - eslint: 9.21.0(jiti@1.21.7) + eslint: 9.21.0(jiti@2.6.1) eslint-scope: 8.4.0 eslint-visitor-keys: 4.2.1 espree: 10.4.0 From b666693f004a093cc1def8afacd0c3704a877fc1 Mon Sep 17 00:00:00 2001 From: Francisco Diaz Date: Thu, 18 Dec 2025 12:37:05 +0100 Subject: [PATCH 02/21] feat: refactor components and styles for Tailwind migration --- .../demo/src/css/{index.pcss => index.css} | 10 +- packages/x-tailwindcss/demo/src/main.ts | 2 +- .../demo/tailwindcss-nesting.d.ts | 5 - packages/x-tailwindcss/demo/tsconfig.json | 2 +- packages/x-tailwindcss/demo/vite.config.ts | 18 ++- packages/x-tailwindcss/src/index.ts | 1 - .../x-tailwindcss/src/old-ds-plugin/index.ts | 1 - .../x-tailwindcss/src/old-ds-plugin/plugin.ts | 128 ------------------ packages/x-tailwindcss/src/types.ts | 79 ++++------- .../src/x-tailwind-plugin/components.ts | 32 ++--- .../components/attach/index.ts | 10 +- .../components/badge/circle.ts | 4 +- .../components/badge/index.ts | 26 ++-- .../components/button-group/index.ts | 2 +- .../components/button/index.ts | 27 ++-- .../components/facet-filter/index.ts | 22 ++- .../components/highlight/default.ts | 2 +- .../components/icon/background-colors.ts | 38 +++--- .../components/icon/colors.ts | 29 ++-- .../components/icon/index.ts | 22 ++- .../components/icon/stroke-widths.ts | 2 +- .../components/input-group/index.ts | 31 +++-- .../components/input/index.ts | 22 ++- .../components/layout/index.ts | 8 +- .../components/layout/max-width.ts | 4 +- .../components/layout/min-margin.ts | 4 +- .../components/layout/utils.ts | 14 +- .../components/picture/index.ts | 18 +-- .../components/progress-bar/default.ts | 2 +- .../components/progress-bar/index.ts | 16 +-- .../components/sliding-panel/buttons/index.ts | 16 +-- .../components/sliding-panel/fade/index.ts | 40 +++--- .../suggestion-group/button/index.ts | 2 +- .../suggestion-group/button/lighter-colors.ts | 2 +- .../components/suggestion-group/colors.ts | 31 +++-- .../components/suggestion-group/index.ts | 18 +-- .../components/suggestion/colors.ts | 29 ++-- .../components/suggestion/index.ts | 18 +-- .../x-tailwind-plugin/components/tag/index.ts | 22 +-- .../components/typography/text1/index.ts | 12 +- .../components/typography/text2/index.ts | 12 +- .../components/typography/title1/index.ts | 12 +- .../components/typography/title2/index.ts | 12 +- .../components/typography/title3/index.ts | 12 +- .../components/typography/title4/index.ts | 12 +- .../layout/layout-container.ts | 2 +- .../x-tailwind-plugin/dynamic-utilities.ts | 2 +- .../src/x-tailwind-plugin/plugin.ts | 77 +++++------ .../src/x-tailwind-plugin/utilities.ts | 3 +- .../src/x-tailwind-plugin/utils/map-colors.ts | 17 +++ packages/x-tailwindcss/tsconfig.json | 5 +- 51 files changed, 387 insertions(+), 550 deletions(-) rename packages/x-tailwindcss/demo/src/css/{index.pcss => index.css} (50%) delete mode 100644 packages/x-tailwindcss/demo/tailwindcss-nesting.d.ts delete mode 100644 packages/x-tailwindcss/src/old-ds-plugin/index.ts delete mode 100644 packages/x-tailwindcss/src/old-ds-plugin/plugin.ts diff --git a/packages/x-tailwindcss/demo/src/css/index.pcss b/packages/x-tailwindcss/demo/src/css/index.css similarity index 50% rename from packages/x-tailwindcss/demo/src/css/index.pcss rename to packages/x-tailwindcss/demo/src/css/index.css index 5e369fcbd4..5c2f4bd3fd 100644 --- a/packages/x-tailwindcss/demo/src/css/index.pcss +++ b/packages/x-tailwindcss/demo/src/css/index.css @@ -1,8 +1,10 @@ -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; -@layer components { +@import 'tailwindcss'; + +@plugin "../../../src/x-tailwind-plugin/plugin"; + +/*@layer components { .x-custom-button { @apply x-button x-button-outlined x-button-highlight x-button-lg x-transition-colors; } } +*/ diff --git a/packages/x-tailwindcss/demo/src/main.ts b/packages/x-tailwindcss/demo/src/main.ts index 5f8475dd52..64dc2f5fe5 100644 --- a/packages/x-tailwindcss/demo/src/main.ts +++ b/packages/x-tailwindcss/demo/src/main.ts @@ -1,5 +1,5 @@ import { createApp } from 'vue' import xdsShowcase from './components/xds-showcase.vue' -import './css/index.pcss' +import './css/index.css' createApp(xdsShowcase).mount('#app') diff --git a/packages/x-tailwindcss/demo/tailwindcss-nesting.d.ts b/packages/x-tailwindcss/demo/tailwindcss-nesting.d.ts deleted file mode 100644 index 8ce054772c..0000000000 --- a/packages/x-tailwindcss/demo/tailwindcss-nesting.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module 'tailwindcss/nesting' { - import type { PluginCreator } from 'postcss' - const plugin: PluginCreator - export default plugin -} diff --git a/packages/x-tailwindcss/demo/tsconfig.json b/packages/x-tailwindcss/demo/tsconfig.json index f9411a16e4..7984c4d6d0 100644 --- a/packages/x-tailwindcss/demo/tsconfig.json +++ b/packages/x-tailwindcss/demo/tsconfig.json @@ -4,5 +4,5 @@ "compilerOptions": { "experimentalDecorators": true }, - "include": ["./src/**/*.ts", "./src/**/*.vue", "vite.config.ts", "tailwindcss-nesting.d.ts"] + "include": ["./src/**/*.ts", "./src/**/*.vue", "vite.config.ts"] } diff --git a/packages/x-tailwindcss/demo/vite.config.ts b/packages/x-tailwindcss/demo/vite.config.ts index 87ac40a03b..714d471d54 100644 --- a/packages/x-tailwindcss/demo/vite.config.ts +++ b/packages/x-tailwindcss/demo/vite.config.ts @@ -1,19 +1,17 @@ import { resolve } from 'node:path' +import tailwindcss from '@tailwindcss/vite' import vue from '@vitejs/plugin-vue' -import autoprefixer from 'autoprefixer' -import tailwindcss from 'tailwindcss' -import tailwindcssNesting from 'tailwindcss/nesting' import { defineConfig } from 'vite' -import tailwindConfig from './tailwind.config' export default defineConfig({ build: { outDir: resolve(__dirname, '../showcase'), }, - css: { - postcss: { - plugins: [tailwindcss(tailwindConfig), tailwindcssNesting(), autoprefixer()], - }, - }, - plugins: [vue()], + plugins: [ + vue(), + // eslint-disable-next-line ts/no-unsafe-argument + tailwindcss({ + config: resolve(__dirname, './tailwind.config.ts'), + } as any), + ], }) diff --git a/packages/x-tailwindcss/src/index.ts b/packages/x-tailwindcss/src/index.ts index 347f1c629f..23b208c505 100644 --- a/packages/x-tailwindcss/src/index.ts +++ b/packages/x-tailwindcss/src/index.ts @@ -1,3 +1,2 @@ -export * from './old-ds-plugin' export * from './types' export * from './x-tailwind-plugin' diff --git a/packages/x-tailwindcss/src/old-ds-plugin/index.ts b/packages/x-tailwindcss/src/old-ds-plugin/index.ts deleted file mode 100644 index bf63a4331b..0000000000 --- a/packages/x-tailwindcss/src/old-ds-plugin/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as oldDsPlugin } from './plugin' diff --git a/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts b/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts deleted file mode 100644 index bc64402c43..0000000000 --- a/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts +++ /dev/null @@ -1,128 +0,0 @@ -import type { Dictionary } from '@empathyco/x-utils' -import type { TailwindHelpers } from '../types' -import { reduce } from '@empathyco/x-utils' -import plugin from 'tailwindcss/plugin' - -/** - * Maps a `Dictionary` to another with the same properties but adding a prefix the keys. - * - * @param prefix - The prefix to add. - * @param obj - The `Dictionary` to map. - * @returns A new `Dictionary` with the keys prefixed. - */ -function mapPrefix( - prefix: Prefix, - obj: SomeObject, -): PrefixObject { - return reduce( - obj, - (result, key, value) => { - result[`${prefix}${key as string}`] = value - return result - }, - {} as PrefixObject, - ) -} - -/** - * Prefix the given object type keys. - */ -type PrefixObject = { - [Key in keyof SomeObject as `${Prefix}${Key & string}`]: SomeObject[Key] -} - -/** - * Integrates tailwind theme with the old design system tokens. - */ -// eslint-disable-next-line ts/unbound-method -export default plugin(({ addBase, theme }: TailwindHelpers) => { - addBase({ - ':root': { - // COLOR - ...mapPrefix('--x-color-base-', { - lead: theme('x.colors.lead.50'), - auxiliary: theme('x.colors.auxiliary.25'), - 'neutral-10': theme('x.colors.neutral.90'), - 'neutral-35': theme('x.colors.neutral.75'), - 'neutral-70': theme('x.colors.neutral.25'), - 'neutral-95': theme('x.colors.neutral.10'), - 'neutral-100': theme('x.colors.neutral.0'), - accent: theme('x.colors.auxiliary.50'), - enable: theme('x.colors.success.50'), - disable: theme('x.colors.error.50'), - }), - - // SPACING - ...mapPrefix('--x-size-base-', { - '01': theme('x.spacing.2'), - '02': theme('x.spacing.4'), - '03': theme('x.spacing.8'), - '04': theme('x.spacing.12'), - '05': theme('x.spacing.16'), - '06': theme('x.spacing.24'), - '07': theme('x.spacing.32'), - '08': theme('x.spacing.40'), - '09': theme('x.spacing.48'), - '10': theme('x.spacing.56'), - '11': theme('x.spacing.64'), - '12': theme('x.spacing.80'), - '13': theme('x.spacing.80'), - '14': theme('x.spacing.96'), - '15': theme('x.spacing.128'), - '16': '152px', - '17': '184px', - '18': '216px', - '19': '280px', - '20': '344px', - }), - - // BORDER - ...mapPrefix('--x-size-border-', { - 'radius-base-pill': theme('x.borderRadius.round'), - 'width-base': theme('x.borderWidth.1'), - }), - - // FONT FAMILY - '--x-font-family-base': theme('x.fontFamily.main'), - - // FONT SIZES - ...mapPrefix('--x-size-font-', { - 'base-xs': theme('x.fontSize.xs'), - 'base-s': theme('x.fontSize.sm'), - 'base-m': theme('x.fontSize.md'), - 'base-l': theme('x.fontSize.lg'), - 'base-xl': theme('x.fontSize.2xl'), - }), - - // FONT WEIGHT - ...mapPrefix('--x-number-font-weight-base-', { - light: theme('x.fontWeight.light'), - regular: theme('x.fontWeight.regular'), - bold: theme('x.fontWeight.bold'), - }), - - // LINE HEIGHT - ...mapPrefix('--x-size-line-height-base-', { - s: theme('x.lineHeight.sm'), - m: theme('x.lineHeight.md'), - l: theme('x.lineHeight.lg'), - }), - - // TEXT - '--x-color-text-default': theme('x.colors.neutral.100'), - '--x-font-family-text': theme('x.fontFamily.main'), - '--x-size-font-text': theme('x.fontSize.sm'), - '--x-number-font-weight-text': theme('x.fontWeight.regular'), - '--x-size-line-height-text': theme('x.lineHeight.sm'), - - // TITLE 3 - '--x-font-family-title3': theme('x.fontFamily.main'), - '--x-size-font-title3': theme('x.fontSize.md'), - '--x-number-font-weight-title3': theme('x.fontWeight.regular'), - '--x-size-line-height-title3': theme('x.lineHeight.md'), - - // IMAGE - '--x-number-aspect-ratio-picture': theme('x.aspectRatio.default'), - }, - }) -}) diff --git a/packages/x-tailwindcss/src/types.ts b/packages/x-tailwindcss/src/types.ts index d5360e6617..2df5052a0d 100644 --- a/packages/x-tailwindcss/src/types.ts +++ b/packages/x-tailwindcss/src/types.ts @@ -1,83 +1,52 @@ -import type { ExtractPath } from '@empathyco/x-utils' -import type { Config } from 'tailwindcss' -import type { PluginAPI } from 'tailwindcss/types/config' -import type Theme from './x-tailwind-plugin/theme' +import type { Config, PluginAPI, Theme } from 'tailwindcss/plugin' +import { ExtractPath } from '@empathyco/x-utils' /** * Represents a `CSS` variable name. - * - * @example - * ```typescript - * const leadColor: CssVariable = '--color-lead'; - * ``` - * - * @internal */ type CssVariable = `--${string}` /** - * Represents a `Css` class selector. - * - * @example - * ```typescript - * const btnClass: CssClassSelector = '.x-btn'; - * ``` - * - * @internal + * Represents a `CSS` class selector. */ type CssClassSelector = `.${string}` + /** * Represents a `CSS` nested selector. - * - * @example - * ```typescript - * const nestedSelector: CssNestedSelector = '&--lead'; - * ``` - * - * @internal */ type CssNestedSelector = `&${string}` + /** * Represents a `CSS` pseudo selector. - * - * @example - * ```typescript - * const rootSelector: CssPseudoSelector = ':root'; - * ``` - * - * @internal */ type CssPseudoSelector = `:${string}` /** - * Represents the different `CSS` styling options for a component. - * - * @example - * ```typescript - * const cssOptions: CssStyleOptions = { - * '--color-lead': 'blue', - * '.x-btn': { - * '&--lead': { - * color: 'var(--color-lead)', - * gap: theme('x.spacing.2') - * } - * } - * } - * ``` - * - * @public + * Represents the different CSS styling options for a component. */ export interface CssStyleOptions { - [Key: CssClassSelector | CssNestedSelector | CssPseudoSelector]: + [key: CssClassSelector | CssNestedSelector | CssPseudoSelector]: | CssStyleOptions - | Partial - [Key: CssVariable]: string & Partial + | Record + + [key: CssVariable]: string +} + +export interface CSSRuleValue { + [key: string]: string | number | CSSRuleValue | undefined +} + +/** + * Minimal replacement for Tailwind v3's CSSRuleObject. + */ +export interface CSSRuleObject { + [selector: string]: CSSRuleValue | string | number | undefined } /** - * All the tailwind helpers provided by the plugin. - * - * @public + * The helpers provided internally by our Tailwind plugin. + * Tailwind CSS 4 no longer exposes `PluginAPI`, + * so we recreate the pieces we need. */ export type TailwindHelpers = PluginAPI & { theme: ( diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts index 06e2222e7c..69ff25a3c3 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts @@ -1,5 +1,4 @@ -import type { CSSRuleObject } from 'tailwindcss/types/config' -import type { TailwindHelpers } from '../types' +import type { CSSRuleValue, TailwindHelpers } from '../types' import { attach } from './components/attach' import { badge } from './components/badge' import { button } from './components/button' @@ -19,7 +18,10 @@ import { suggestionGroup } from './components/suggestion-group' import { suggestionGroupButton } from './components/suggestion-group/button' import { tag } from './components/tag' import { typography } from './components/typography' -import { variables } from './components/variables' + +export interface CSSRuleObject { + [selector: string]: CSSRuleValue | string | number | undefined +} /** * Default component styles. @@ -31,26 +33,24 @@ import { variables } from './components/variables' */ export default function components(helpers: TailwindHelpers) { return { - ...variables(helpers), + ...attach(helpers), + ...badge(helpers), ...button(helpers), ...buttonGroup(helpers), - ...icon(helpers), - ...suggestion(helpers), + ...facetFilter(helpers), ...highlight(helpers), - ...typography(helpers), + ...icon(helpers), ...input(helpers), ...inputGroup(helpers), - ...typography(helpers), - ...suggestionGroup(helpers), - ...suggestionGroupButton(helpers), - ...slidingPanel(helpers), - ...picture(helpers), ...layout(helpers), + ...picture(helpers), + ...progressBar(helpers), ...scroll(helpers), + ...slidingPanel(helpers), + ...suggestion(helpers), + ...suggestionGroup(helpers), + ...suggestionGroupButton(helpers), ...tag(helpers), - ...badge(helpers), - ...facetFilter(helpers), - ...progressBar(helpers), - ...attach(helpers), + ...typography(helpers), } as unknown as CSSRuleObject } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts index 66600a2905..29ea58057f 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts @@ -10,30 +10,28 @@ export function attach(_helpers: TailwindHelpers) { return { '.x-attach-container': { position: 'relative', - }, - '.x-attach-to': { - '&-top-left': { + '& > .x-attach-to-top-left': { position: 'absolute', top: 0, left: 0, transform: 'translate(calc(var(--attach-horizontal-offset, 50%) * -1), -50%)', }, - '&-top-right': { + '& > .x-attach-to-top-right': { position: 'absolute', top: 0, right: 0, transform: 'translate(var(--attach-horizontal-offset, 50%), -50%)', }, - '&-bottom-right': { + '& > .x-attach-to-bottom-right': { position: 'absolute', bottom: 0, right: 0, transform: 'translate( var(--attach-horizontal-offset, 50%), 50%)', }, - '&-bottom-left': { + '& > .x-attach-to-bottom-left': { position: 'absolute', bottom: 0, left: 0, diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts index 847f34fe7b..3ebb462da6 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts @@ -16,10 +16,10 @@ export function badgeCircle({ theme }: TailwindHelpers) { padding: '0', width: theme('x.spacing.24'), - '&.badge-sm': { + '&.x-badge-sm': { width: theme('x.spacing.20'), }, - '&.badge-md': { + '&.x-badge-md': { width: theme('x.spacing.24'), }, }, diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts index 5824cd50a4..77195dd724 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts @@ -18,19 +18,19 @@ export function badge(helpers: TailwindHelpers) { return { '.x-badge': { ...badgeDefault(helpers), - ...rename( - { - ...badgeSizes(helpers), - ...badgeCircle(helpers), - ...badgeColors(helpers), - ...badgeOutlined(helpers), - ...badgeLight(helpers), - ...badgeBright(helpers), - }, - { - prefix: '&-', - }, - ), }, + ...rename( + { + ...badgeSizes(helpers), + ...badgeCircle(helpers), + ...badgeColors(helpers), + ...badgeOutlined(helpers), + ...badgeLight(helpers), + ...badgeBright(helpers), + }, + { + prefix: '&.x-badge-', + }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts index e750103c86..11b6d8f630 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts @@ -13,7 +13,7 @@ export function buttonGroup(helpers: TailwindHelpers) { return { '.x-button-group': { ...buttonGroupDefault(helpers), - ...rename(buttonGroupDivider(helpers), { prefix: '&-' }), }, + ...rename(buttonGroupDivider(helpers), { prefix: '&.x-button-group-' }), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts index 506d084f29..db878ffb2d 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts @@ -19,21 +19,18 @@ import { buttonTight } from './tight' */ export function button(helpers: TailwindHelpers) { return { - '.x-button': deepMerge( - buttonDefault(helpers), - rename( - { - ...buttonColors(helpers), - ...buttonSizes(helpers), - ...buttonLayouts(helpers), - ...buttonOutlined(helpers), - ...buttonLink(helpers), - ...buttonGhost(helpers), - ...buttonTight(helpers), - }, - { prefix: '&-' }, - ), - buttonDisabled(helpers), + '.x-button': deepMerge(buttonDefault(helpers), buttonDisabled(helpers)), + ...rename( + { + ...buttonColors(helpers), + ...buttonSizes(helpers), + ...buttonLayouts(helpers), + ...buttonOutlined(helpers), + ...buttonLink(helpers), + ...buttonGhost(helpers), + ...buttonTight(helpers), + }, + { prefix: '&.x-button-' }, ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts index a2104f2e95..2c0d37f4da 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts @@ -16,18 +16,16 @@ import { facetFilterUnderline } from './underline' */ export function facetFilter(helpers: TailwindHelpers) { return { - '.x-facet-filter': deepMerge( - facetFilterDefault(helpers), - rename( - { - ...facetFilterSizes(helpers), - ...facetFilterColors(helpers), - ...facetFilterUnderline(helpers), - ...facetFilterGhost(helpers), - ...facetFilterSimple(helpers), - }, - { prefix: '&-' }, - ), + '.x-facet-filter': deepMerge(facetFilterDefault(helpers)), + ...rename( + { + ...facetFilterSizes(helpers), + ...facetFilterColors(helpers), + ...facetFilterUnderline(helpers), + ...facetFilterGhost(helpers), + ...facetFilterSimple(helpers), + }, + { prefix: '&.x-facet-filter-' }, ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts index 2bda788cc4..e1a31da30e 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts @@ -10,7 +10,7 @@ export function highlightDefault(helpers: TailwindHelpers) { const { theme } = helpers return { fontWeight: theme('x.fontWeight.bold'), - '&-match': { + '& > .x-highlight-text-match': { fontWeight: theme('x.fontWeight.regular'), }, } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/background-colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/background-colors.ts index 666fef9c86..136a8fdfab 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/background-colors.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/background-colors.ts @@ -1,6 +1,5 @@ import type { TailwindHelpers } from '../../../types' -import { map, rename } from '@empathyco/x-utils' -import { mapColors } from '../../utils/map-colors' +import { mapColorsFlat } from '../../utils/map-colors' /** * Returns the `background color` variants for component `icon`. @@ -9,23 +8,22 @@ import { mapColors } from '../../utils/map-colors' * @returns The {@link CssStyleOptions} for the variant. */ export function iconBackgroundColors(helpers: TailwindHelpers) { - return { - bg: rename( - mapColors( - color => ({ - '[stroke="#fff"]': { stroke: color['50'] }, - '[fill="#fff"]': { fill: color['50'] }, - ...rename( - map(color, (shadeName, shadeColor) => ({ - '[stroke="#fff"]': { stroke: shadeColor }, - '[fill="#fff"]': { fill: shadeColor }, - })), - { prefix: '&-' }, - ), - }), - helpers, + return mapColorsFlat((color, colorName) => { + return { + [`bg-${colorName}`]: { + '[stroke="#fff"]': { stroke: color['50'] }, + '[fill="#fff"]': { fill: color['50'] }, + }, + + ...Object.fromEntries( + Object.entries(color).map(([shadeName, shadeColor]) => [ + `bg-${colorName}-${shadeName}`, + { + '[stroke="#fff"]': { stroke: shadeColor }, + '[fill="#fff"]': { fill: shadeColor }, + }, + ]), ), - { prefix: '&-' }, - ), - } + } + }, helpers) } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/colors.ts index 649238296a..eb5bdccbbb 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/colors.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/colors.ts @@ -1,6 +1,5 @@ import type { TailwindHelpers } from '../../../types' -import { map, rename } from '@empathyco/x-utils' -import { mapColors } from '../../utils/map-colors' +import { mapColorsFlat } from '../../utils/map-colors' /** * Returns the `color` variants for component `icon`. @@ -9,16 +8,20 @@ import { mapColors } from '../../utils/map-colors' * @returns The {@link CssStyleOptions} for the variant. */ export function iconColors(helpers: TailwindHelpers) { - return mapColors( - color => ({ - color: color[50], - ...rename( - map(color, (shadeName, shadeColor) => ({ - color: shadeColor, - })), - { prefix: '&-' }, + return mapColorsFlat((color, colorName) => { + return { + [`${colorName}`]: { + color: color[50], + }, + + ...Object.fromEntries( + Object.entries(color).map(([shadeName, shadeColor]) => [ + `${colorName}-${shadeName}`, + { + color: shadeColor, + }, + ]), ), - }), - helpers, - ) + } + }, helpers) } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts index fc8de75772..3f3ad4cd00 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts @@ -15,18 +15,16 @@ import { iconStrokeWidths } from './stroke-widths' */ export function icon(helpers: TailwindHelpers) { return { - '.x-icon': Object.assign( - iconDefault(helpers), - rename( - { - ...iconColors(helpers), - ...iconBackgroundColors(helpers), - ...iconSizes(helpers), - ...iconSharp(helpers), - ...iconStrokeWidths(helpers), - }, - { prefix: '&-' }, - ), + '.x-icon': Object.assign(iconDefault(helpers)), + ...rename( + { + ...iconColors(helpers), + ...iconBackgroundColors(helpers), + ...iconSizes(helpers), + ...iconSharp(helpers), + ...iconStrokeWidths(helpers), + }, + { prefix: '&.x-icon-' }, ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts index 03c9054457..d1274117bb 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts @@ -13,7 +13,7 @@ export function iconStrokeWidths({ theme }: TailwindHelpers) { map(theme('x.strokeWidth'), (width, value) => ({ '*': { strokeWidth: value }, })), - { prefix: '&-' }, + { prefix: '&.x-icon-stroke-width-' }, ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts index 1f88030aa9..4c06cc24b6 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts @@ -15,19 +15,24 @@ import { inputGroupSizes } from './sizes' */ export function inputGroup(helpers: TailwindHelpers) { return { - '.x-input-group': deepMerge( - inputGroupDefault(helpers), - rename( - { - ...inputGroupColors(helpers), - ...inputGroupSizes(helpers), - ...inputGroupLine(helpers), - ...inputGroupButtons(helpers), - }, - { - prefix: '&-', - }, - ), + '.x-input-group': deepMerge(inputGroupDefault(helpers)), + ...rename( + { + ...inputGroupColors(helpers), + ...inputGroupSizes(helpers), + ...inputGroupLine(helpers), + }, + { + prefix: '&.x-input-group-', + }, + ), + ...rename( + { + ...inputGroupButtons(helpers), + }, + { + prefix: '& > .x-input-group-', + }, ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts index 7268966d90..1fab251b7a 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts @@ -14,18 +14,16 @@ import { inputSizes } from './sizes' */ export function input(helpers: TailwindHelpers) { return { - '.x-input': deepMerge( - inputDefault(helpers), - rename( - { - ...inputColors(helpers), - ...inputSizes(helpers), - ...inputLine(helpers), - }, - { - prefix: '&-', - }, - ), + '.x-input': deepMerge(inputDefault(helpers)), + ...rename( + { + ...inputColors(helpers), + ...inputSizes(helpers), + ...inputLine(helpers), + }, + { + prefix: '&.x-input-', + }, ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts index f50a332574..ca3f5a840c 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts @@ -15,15 +15,15 @@ import { utils } from './utils' */ export function layout(helpers: TailwindHelpers) { return { - '.x-layout': rename( + ...rename( { ...container(helpers), - ...maxWidth(helpers), - ...minMargin(helpers), ...item(helpers), }, - { prefix: '&-' }, + { prefix: '&.x-layout-' }, ), + ...minMargin(helpers), + ...maxWidth(helpers), ...utils(helpers), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts index 26f59e0e5a..916012b681 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts @@ -10,11 +10,11 @@ import { map, rename } from '@empathyco/x-utils' export function maxWidth(helpers: TailwindHelpers) { const { theme } = helpers return { - 'max-width': rename( + ...rename( map(theme('x.layoutMaxWidth'), (maxWidthName, maxWidthValue) => ({ '--x-layout-max-width': maxWidthValue, })), - { prefix: '&-' }, + { prefix: '.x-layout-max-width-' }, ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts index 8c9d1f3070..05fc364e29 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts @@ -10,11 +10,11 @@ import { map, rename } from '@empathyco/x-utils' export function minMargin(helpers: TailwindHelpers) { const { theme } = helpers return { - 'min-margin': rename( + ...rename( map(theme('x.spacing'), (spacingName, spacingValue) => ({ '--x-layout-min-margin': spacingValue, })), - { prefix: '&-' }, + { prefix: '.x-layout-min-margin-' }, ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts index 3f060b15c6..654a027b68 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts @@ -31,10 +31,10 @@ export function utils(_helpers: TailwindHelpers) { minHeight: '0', }, - '.x-layout-on-margin-left': { + '.x-layout-item > .x-layout-on-margin-left': { gridColumn: '1 / 2', }, - '.x-layout-on-margin-right': { + '.x-layout-item > .x-layout-on-margin-right': { gridColumn: '-2 / -1', }, @@ -51,19 +51,19 @@ export function utils(_helpers: TailwindHelpers) { alignContent: 'flex-start', }, - '.x-layout-no-margin-left': { + '.x-layout-item.x-layout-no-margin-left': { '--x-margin-left': '0px', }, - '.x-layout-no-margin-right': { + '.x-layout-item.x-layout-no-margin-right': { '--x-margin-right': '0px', }, - '.x-layout-no-margin': { + '.x-layout-item.x-layout-no-margin': { '--x-margin-left': '0px', '--x-margin-right': '0px', }, - '@media (hover: hover) and (pointer: fine)': { - '.x-scroll > .x-layout-item:not(.x-layout-no-margin-right)': { + '.x-scroll > .x-layout-item:not(.x-layout-no-margin-right)': { + '@media (hover: hover) and (pointer: fine)': { '--x-layout-scroll-width': '17px', }, }, diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts index 8c63b1de72..446c41f91c 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts @@ -14,15 +14,15 @@ export function picture(helpers: TailwindHelpers) { return { '.x-picture': { ...pictureDefault(helpers), - ...rename( - { - ...zoom(), - ...overlay(helpers), - }, - { - prefix: '&-', - }, - ), }, + ...rename( + { + ...zoom(), + ...overlay(helpers), + }, + { + prefix: '&.x-picture-', + }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts index 0b8c112ee3..c7c2970b51 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts @@ -16,7 +16,7 @@ export function progressBarDefault(helpers: TailwindHelpers) { backgroundColor: theme('x.colors.neutral.25'), overflow: 'hidden', - '& > &-fill': { + '& > .x-progress-bar-fill': { height: '100%', backgroundColor: `var(--progress-bar-color-50, ${theme('x.colors.neutral.90')})`, }, diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts index 2e53e331cd..b5d8767109 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts @@ -13,15 +13,13 @@ import { progressBarSizes } from './sizes' */ export function progressBar(helpers: TailwindHelpers) { return { - '.x-progress-bar': deepMerge( - progressBarDefault(helpers), - rename( - { - ...progressBarColors(helpers), - ...progressBarSizes(helpers), - }, - { prefix: '&-' }, - ), + '.x-progress-bar': deepMerge(progressBarDefault(helpers)), + ...rename( + { + ...progressBarColors(helpers), + ...progressBarSizes(helpers), + }, + { prefix: '&.x-progress-bar-' }, ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts index 25f6aea2d8..1bdc2cee7d 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts @@ -9,15 +9,13 @@ import { slidingPanelButtonsPositions } from './positions' */ export function slidingPanelButtons() { return { - '.x-sliding-panel-button': { - '&-left': { - ...slidingPanelButtonsDefault(), - left: 0, - }, - '&-right': { - ...slidingPanelButtonsDefault(), - right: 0, - }, + '.x-sliding-panel-button-left': { + ...slidingPanelButtonsDefault(), + left: 0, + }, + '.x-sliding-panel-button-right': { + ...slidingPanelButtonsDefault(), + right: 0, }, ...slidingPanelButtonsHover(), ...slidingPanelButtonsPositions(), diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts index 6cb23f174f..2290715895 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts @@ -25,30 +25,26 @@ export function slidingPanelFade(helpers: TailwindHelpers) { ), }, '&.x-sliding-panel-at-start': { - '.x-sliding-panel-fade': { - ...startSizes.md, - ...rename( - { - ...startSizes, - }, - { - prefix: '&-', - }, - ), - }, + ...startSizes.md, + ...rename( + { + ...startSizes, + }, + { + prefix: '&.x-sliding-panel-fade-', + }, + ), }, '&.x-sliding-panel-at-end': { - '.x-sliding-panel-fade': { - ...endSizes.md, - ...rename( - { - ...endSizes, - }, - { - prefix: '&-', - }, - ), - }, + ...endSizes.md, + ...rename( + { + ...endSizes, + }, + { + prefix: '&.x-sliding-panel-fade-', + }, + ), }, '&.x-sliding-panel-at-start.x-sliding-panel-at-end': { '.x-sliding-panel-fade': { diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts index 04c50914f4..79300f8a55 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts @@ -22,7 +22,7 @@ export function suggestionGroupButton(helpers: TailwindHelpers) { ...suggestionGroupButtonRectangle(helpers), ...suggestionGroupButtonLighter(), }, - { prefix: '&-' }, + { prefix: '&.x-suggestion-group-button-' }, ), }, ...suggestionGroupLighterColors(helpers), diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts index 89282f9c75..530512773f 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts @@ -18,6 +18,6 @@ export function suggestionGroupLighterColors(helpers: TailwindHelpers) { }), helpers, ), - { prefix: '.x-suggestion-group-' }, + { prefix: '.x-suggestion-group-lighter-' }, ) } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/colors.ts index f5f09c80f2..abaa471c26 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/colors.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/colors.ts @@ -1,6 +1,5 @@ import type { TailwindHelpers } from '../../../types' -import { map, rename } from '@empathyco/x-utils' -import { mapColors } from '../../utils/map-colors' +import { mapColorsFlat } from '../../utils/map-colors' /** * Returns the `color` variants for component `suggestion group`. @@ -9,17 +8,21 @@ import { mapColors } from '../../utils/map-colors' * @returns The {@link CssStyleOptions} for the variant. */ export function suggestionGroupColors(helpers: TailwindHelpers) { - return mapColors( - color => ({ - '--suggestion-group-color-75': color['75'], - color: 'var(--suggestion-group-color-75)', - ...rename( - map(color, (shadeName, shadeColor) => ({ - color: shadeColor, - })), - { prefix: '&-' }, + return mapColorsFlat((color, colorName) => { + return { + [`${colorName}`]: { + '--suggestion-group-color-75': color['75'], + color: color['75'], + }, + + ...Object.fromEntries( + Object.entries(color).map(([shadeName, shadeColor]) => [ + `${colorName}-${shadeName}`, + { + color: shadeColor, + }, + ]), ), - }), - helpers, - ) + } + }, helpers) } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts index cea54d20ee..ee0eb7345e 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts @@ -16,15 +16,15 @@ export function suggestionGroup(helpers: TailwindHelpers) { return { '.x-suggestion-group': { ...suggestionGroupDefault(helpers), - ...rename( - { - ...suggestionGroupColors(helpers), - ...suggestionGroupSizes(helpers), - ...suggestionGroupGhost(helpers), - ...suggestionGroupOutlined(helpers), - }, - { prefix: '&-' }, - ), }, + ...rename( + { + ...suggestionGroupColors(helpers), + ...suggestionGroupSizes(helpers), + ...suggestionGroupGhost(helpers), + ...suggestionGroupOutlined(helpers), + }, + { prefix: '.x-suggestion-group-' }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/colors.ts index d3a0eb972f..44c4273bcf 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/colors.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/colors.ts @@ -1,6 +1,5 @@ import type { TailwindHelpers } from '../../../types' -import { map, rename } from '@empathyco/x-utils' -import { mapColors } from '../../utils/map-colors' +import { mapColorsFlat } from '../../utils/map-colors' /** * Returns the `color` variants for component `suggestion`. @@ -9,16 +8,20 @@ import { mapColors } from '../../utils/map-colors' * @returns The {@link CssStyleOptions} for the variant. */ export function suggestionColors(helpers: TailwindHelpers) { - return mapColors( - color => ({ - color: color['75'], - ...rename( - map(color, (shadeName, shadeColor) => ({ - color: shadeColor, - })), - { prefix: '&-' }, + return mapColorsFlat((color, colorName) => { + return { + [`${colorName}`]: { + color: color['75'], + }, + + ...Object.fromEntries( + Object.entries(color).map(([shadeName, shadeColor]) => [ + `${colorName}-${shadeName}`, + { + color: shadeColor, + }, + ]), ), - }), - helpers, - ) + } + }, helpers) } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts index 961b66c85e..d451a50386 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts @@ -16,15 +16,15 @@ export function suggestion(helpers: TailwindHelpers) { return { '.x-suggestion': { ...suggestionDefault(helpers), - ...rename( - { - ...suggestionColors(helpers), - ...suggestionSizes(helpers), - ...suggestionOutlined(helpers), - ...suggestionGhost(helpers), - }, - { prefix: '&-' }, - ), }, + ...rename( + { + ...suggestionColors(helpers), + ...suggestionSizes(helpers), + ...suggestionOutlined(helpers), + ...suggestionGhost(helpers), + }, + { prefix: '&.x-suggestion-' }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts index f70b7ab10f..16348d04d0 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts @@ -18,17 +18,17 @@ export function tag(helpers: TailwindHelpers) { return { '.x-tag': { ...tagDefault(helpers), - ...rename( - { - ...tagSizes(helpers), - ...tagColors(helpers), - ...tagOutlined(helpers), - ...tagSolid(helpers), - ...tagGhost(helpers), - ...tagTight(helpers), - }, - { prefix: '&-' }, - ), }, + ...rename( + { + ...tagSizes(helpers), + ...tagColors(helpers), + ...tagOutlined(helpers), + ...tagSolid(helpers), + ...tagGhost(helpers), + ...tagTight(helpers), + }, + { prefix: '.x-tag-' }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts index a4c8135bac..b85ffb9861 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts @@ -13,12 +13,12 @@ export function text1(helpers: TailwindHelpers) { return { '.x-text1': { ...textDefault(helpers), - ...rename( - { - ...textSizes(helpers), - }, - { prefix: '&-' }, - ), }, + ...rename( + { + ...textSizes(helpers), + }, + { prefix: '&.x-text1-' }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts index 55f88294a3..b0a9d9a971 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts @@ -13,12 +13,12 @@ export function text2(helpers: TailwindHelpers) { return { '.x-text2': { ...textDefault(helpers), - ...rename( - { - ...textSizes(helpers), - }, - { prefix: '&-' }, - ), }, + ...rename( + { + ...textSizes(helpers), + }, + { prefix: '&.x-text2-' }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts index fb02c37f9c..7a91aae3ba 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts @@ -13,12 +13,12 @@ export function title1(helpers: TailwindHelpers) { return { '.x-title1': { ...titleDefault(helpers), - ...rename( - { - ...titleSizes(helpers), - }, - { prefix: '&-' }, - ), }, + ...rename( + { + ...titleSizes(helpers), + }, + { prefix: '.x-title1-' }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts index 724e735597..445e188c46 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts @@ -13,12 +13,12 @@ export function title2(helpers: TailwindHelpers) { return { '.x-title2': { ...titleDefault(helpers), - ...rename( - { - ...titleSizes(helpers), - }, - { prefix: '&-' }, - ), }, + ...rename( + { + ...titleSizes(helpers), + }, + { prefix: '.x-title2-' }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts index 9f2fbc12e2..1436904309 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts @@ -13,12 +13,12 @@ export function title3(helpers: TailwindHelpers) { return { '.x-title3': { ...titleDefault(helpers), - ...rename( - { - ...titleSizes(helpers), - }, - { prefix: '&-' }, - ), }, + ...rename( + { + ...titleSizes(helpers), + }, + { prefix: '.x-title3-' }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts index 19068ebd27..db69250198 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts @@ -13,12 +13,12 @@ export function title4(helpers: TailwindHelpers) { return { '.x-title4': { ...titleDefault(helpers), - ...rename( - { - ...titleSizes(helpers), - }, - { prefix: '&-' }, - ), }, + ...rename( + { + ...titleSizes(helpers), + }, + { prefix: '.x-title4-' }, + ), } } diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts index 54fc2d62ae..8905f9c2b3 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts @@ -32,7 +32,7 @@ export function dynamicLayoutContainer(helpers: TailwindHelpers) { }, }), }, - { prefix: 'x-layout-container-' }, + { prefix: '.x-layout-container-' }, ), }, (name, styles) => { diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts index 61ede2de9d..98e53354a4 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts @@ -11,7 +11,7 @@ import type { TailwindHelpers } from '../types' export default function dynamicUtilities({ theme }: TailwindHelpers) { return { // TODO: replace this example styles with actual design styles - 'font-util': { + '.font-util': { styles: (value: any) => ({ fontSize: value, }), diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts index 4b32999d9d..10cdb49a50 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts @@ -1,55 +1,46 @@ +import type { PluginAPI } from 'tailwindcss/plugin' import type { TailwindHelpers } from '../types' + import { forEach } from '@empathyco/x-utils' import plugin from 'tailwindcss/plugin' import components from './components' +import { variables } from './components/variables' import dynamicComponents from './dynamic-components' + import dynamicUtilities from './dynamic-utilities' import xTheme from './theme' import utilities from './utilities' -/** - * Defines the x-tailwind plugin as a Tailwind {@link plugin} that can be invoked passing a - * configuration object to customize it. The plugin is bundled with generated static and dynamic - * components and utilities, all based on the plugin's theme. - * - * @public - */ -export default plugin.withOptions( - () => { - /** - * Registers the generated CSS for the components and utilities of the plugin to the - * respective Tailwind layer. It depends on the plugin's theme, affecting - * the color, spacing, etc... Of the styles generated in this step. - * - * @param helpers - The {@link TailwindHelpers}. - * @internal - */ - return function (helpers: TailwindHelpers) { - /* Add components */ - helpers.addComponents(components(helpers), { respectPrefix: false }) - /* Add dynamic components */ - forEach(dynamicComponents(helpers), (key, { styles, values }) => { - helpers.matchComponents( - { [key]: styles }, - { respectPrefix: false, values: values ?? undefined }, - ) - }) - /* Add dynamic utilities */ - forEach(dynamicUtilities(helpers), (key, { styles, values }) => { - helpers.matchUtilities( - { [key]: styles }, - { respectPrefix: false, values: values ?? undefined }, - ) - }) - /* Add utilities */ - helpers.addUtilities(utilities(helpers), { respectPrefix: false }) - /* Add variant to selected */ - helpers.addVariant('selected', '&.x-selected') - } +function createHelpers(api: PluginAPI): TailwindHelpers & PluginAPI { + return api as TailwindHelpers & PluginAPI +} + +const _xTailwindPlugin = plugin( + api => { + const helpers = createHelpers(api) + + helpers.addBase({ ...variables(helpers) }) + helpers.addComponents(components(helpers)) + + forEach(dynamicComponents(helpers), (key, { styles }) => { + helpers.addComponents({ [key]: styles }) + }) + + forEach(dynamicUtilities(helpers), (key, { styles }) => { + helpers.addUtilities({ [key]: styles }) + }) + + helpers.addUtilities(utilities(helpers)) + + helpers.addVariant('selected', '&.x-selected') }, - () => { - return { - theme: { x: xTheme }, - } + { + theme: { + x: xTheme, + }, }, ) + +const xTailwindPlugin: unknown = _xTailwindPlugin + +export default xTailwindPlugin diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts index 494f856b56..745c9f6c32 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts @@ -1,5 +1,4 @@ -import type { CSSRuleObject } from 'tailwindcss/types/config' -import type { TailwindHelpers } from '../types' +import type { CSSRuleObject, TailwindHelpers } from '../types' /** * Default utility styles. diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts index 1b3de912f8..3440eb6812 100644 --- a/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts +++ b/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts @@ -65,3 +65,20 @@ export function mapColors( }, ) } + +export function mapColorsFlat( + mapperFn: (color: ThemeColor, colorName: string) => Record, + { theme }: TailwindHelpers, +) { + const colors: Omit = theme('x.colors') + + return Object.entries(colors).reduce( + (acc, [colorName, color]) => { + if (!['transparent', 'current'].includes(colorName)) { + Object.assign(acc, mapperFn(color as ThemeColor, colorName)) + } + return acc + }, + {} as Record, + ) +} diff --git a/packages/x-tailwindcss/tsconfig.json b/packages/x-tailwindcss/tsconfig.json index 070c4a19ed..a8679654ba 100644 --- a/packages/x-tailwindcss/tsconfig.json +++ b/packages/x-tailwindcss/tsconfig.json @@ -11,7 +11,10 @@ "inlineSources": true, "sourceMap": true, "esModuleInterop": true, - "skipLibCheck": true + "skipLibCheck": true, + "paths": { + "tailwindcss/plugin": ["./node_modules/tailwindcss/dist/plugin.d.mts"] + } }, "include": ["src/**/*.ts"] } From b6ad97a555576c722d9d1b6fa2ea47e44ac9fca4 Mon Sep 17 00:00:00 2001 From: Francisco Diaz Date: Thu, 18 Dec 2025 14:44:32 +0100 Subject: [PATCH 03/21] feat(x-tailwindcss): update TypeScript configuration --- packages/x-tailwindcss/demo/tsconfig.json | 2 +- packages/x-tailwindcss/demo/vite.config.ts | 2 +- packages/x-tailwindcss/src/types.ts | 17 ++++++----------- packages/x-tailwindcss/tsconfig.json | 10 +++++----- 4 files changed, 13 insertions(+), 18 deletions(-) diff --git a/packages/x-tailwindcss/demo/tsconfig.json b/packages/x-tailwindcss/demo/tsconfig.json index 7984c4d6d0..13d8342908 100644 --- a/packages/x-tailwindcss/demo/tsconfig.json +++ b/packages/x-tailwindcss/demo/tsconfig.json @@ -4,5 +4,5 @@ "compilerOptions": { "experimentalDecorators": true }, - "include": ["./src/**/*.ts", "./src/**/*.vue", "vite.config.ts"] + "include": ["./src/**/*.ts", "./src/**/*.vue", "vite.config.ts", "tailwind.config.ts"], } diff --git a/packages/x-tailwindcss/demo/vite.config.ts b/packages/x-tailwindcss/demo/vite.config.ts index 714d471d54..55b530adc3 100644 --- a/packages/x-tailwindcss/demo/vite.config.ts +++ b/packages/x-tailwindcss/demo/vite.config.ts @@ -9,7 +9,7 @@ export default defineConfig({ }, plugins: [ vue(), - // eslint-disable-next-line ts/no-unsafe-argument + // eslint-disable-next-line ts/no-unsafe-call tailwindcss({ config: resolve(__dirname, './tailwind.config.ts'), } as any), diff --git a/packages/x-tailwindcss/src/types.ts b/packages/x-tailwindcss/src/types.ts index 2df5052a0d..8df203a2b5 100644 --- a/packages/x-tailwindcss/src/types.ts +++ b/packages/x-tailwindcss/src/types.ts @@ -1,6 +1,3 @@ -import type { Config, PluginAPI, Theme } from 'tailwindcss/plugin' -import { ExtractPath } from '@empathyco/x-utils' - /** * Represents a `CSS` variable name. */ @@ -36,9 +33,6 @@ export interface CSSRuleValue { [key: string]: string | number | CSSRuleValue | undefined } -/** - * Minimal replacement for Tailwind v3's CSSRuleObject. - */ export interface CSSRuleObject { [selector: string]: CSSRuleValue | string | number | undefined } @@ -48,9 +42,10 @@ export interface CSSRuleObject { * Tailwind CSS 4 no longer exposes `PluginAPI`, * so we recreate the pieces we need. */ -export type TailwindHelpers = PluginAPI & { - theme: ( - path?: ExtractPath, - defaultValue?: TDefaultValue, - ) => TDefaultValue +export interface TailwindHelpers { + theme: (path?: string, defaultValue?: any) => any + addUtilities: (utilities: Record) => void + addComponents: (components: Record) => void + addBase: (base: Record) => void + addVariant: (name: string, definition: any) => void } diff --git a/packages/x-tailwindcss/tsconfig.json b/packages/x-tailwindcss/tsconfig.json index a8679654ba..17a9265b8f 100644 --- a/packages/x-tailwindcss/tsconfig.json +++ b/packages/x-tailwindcss/tsconfig.json @@ -4,17 +4,17 @@ "lib": ["esnext", "dom"], "module": "esnext", "moduleResolution": "node", - "types": ["tailwindcss"], + "paths": { + "tailwindcss/plugin": ["./node_modules/tailwindcss/dist/plugin.d.mts"] + }, + "types": [], "strict": true, "declaration": true, "importHelpers": true, "inlineSources": true, "sourceMap": true, "esModuleInterop": true, - "skipLibCheck": true, - "paths": { - "tailwindcss/plugin": ["./node_modules/tailwindcss/dist/plugin.d.mts"] - } + "skipLibCheck": true }, "include": ["src/**/*.ts"] } From b4a626b59c955163280fbb774fada3aaa1a8b852 Mon Sep 17 00:00:00 2001 From: Francisco Diaz Date: Thu, 18 Dec 2025 15:03:59 +0100 Subject: [PATCH 04/21] feat(x-components): integrate x-tailwindcss --- packages/x-components/.postcssrc.js | 9 - packages/x-components/package.json | 8 +- packages/x-components/src/tailwind/index.css | 8 +- .../src/tailwind/tailwind.config.ts | 15 ++ packages/x-components/tailwind.config.ts | 23 -- packages/x-components/vite.config.ts | 6 +- packages/x-tailwindcss/package.json | 18 +- pnpm-lock.yaml | 244 +----------------- 8 files changed, 51 insertions(+), 280 deletions(-) delete mode 100644 packages/x-components/.postcssrc.js create mode 100644 packages/x-components/src/tailwind/tailwind.config.ts delete mode 100644 packages/x-components/tailwind.config.ts diff --git a/packages/x-components/.postcssrc.js b/packages/x-components/.postcssrc.js deleted file mode 100644 index b5c4eba7df..0000000000 --- a/packages/x-components/.postcssrc.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = { - plugins: [ - require('tailwindcss'), - require('tailwindcss/nesting'), - require('autoprefixer'), - require('postcss-logical'), - require('postcss-dir-pseudo-class'), - ], -} diff --git a/packages/x-components/package.json b/packages/x-components/package.json index 258f8f4191..23a17ef819 100644 --- a/packages/x-components/package.json +++ b/packages/x-components/package.json @@ -102,6 +102,8 @@ "@empathyco/x-tailwindcss": "^2.0.0-alpha.20", "@microsoft/api-documenter": "7.28.2", "@microsoft/api-extractor": "7.55.2", + "@tailwindcss/postcss": "4.1.17", + "@tailwindcss/vite": "4.1.17", "@testing-library/jest-dom": "6.6.4", "@types/aria-query": "5.0.4", "@types/jest": "29.5.14", @@ -109,16 +111,12 @@ "@vitejs/plugin-vue": "5.2.4", "@vue/test-utils": "2.4.6", "@vue/vue3-jest": "29.2.6", - "autoprefixer": "10.4.21", "convert-source-map": "2.0.0", "cypress": "15.7.1", "esbuild": "0.20.0", "jest": "29.7.0", "jest-environment-jsdom": "29.7.0", "jest-scss-transform": "1.0.4", - "postcss": "8.4.12", - "postcss-dir-pseudo-class": "7.0.0", - "postcss-logical": "4.0.2", "rimraf": "3.0.2", "rollup": "4.9.1", "rollup-plugin-copy": "3.5.0", @@ -128,7 +126,7 @@ "rollup-plugin-vue": "6.0.0", "sass": "1.70.0", "start-server-and-test": "2.1.3", - "tailwindcss": "3.4.0", + "tailwindcss": "4.1.17", "ts-jest": "29.4.6", "ts-node": "10.9.2", "typescript": "5.9.3", diff --git a/packages/x-components/src/tailwind/index.css b/packages/x-components/src/tailwind/index.css index b5c61c9567..aca35259ed 100644 --- a/packages/x-components/src/tailwind/index.css +++ b/packages/x-components/src/tailwind/index.css @@ -1,3 +1,5 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@config './tailwind.config.ts'; + +@plugin "@empathyco/x-tailwindcss/plugin"; diff --git a/packages/x-components/src/tailwind/tailwind.config.ts b/packages/x-components/src/tailwind/tailwind.config.ts new file mode 100644 index 0000000000..3f2b6f4320 --- /dev/null +++ b/packages/x-components/src/tailwind/tailwind.config.ts @@ -0,0 +1,15 @@ +import type { Config } from 'tailwindcss' +import tailwind from '@empathyco/x-tailwindcss' + +export default { + content: [ + './public/index.html', + './src/**/*.vue', + './node_modules/@empathyco/x-tailwindcss/showcase/**/*.js', + ], + theme: { + extend: { + ...tailwind, + }, + }, +} satisfies Config diff --git a/packages/x-components/tailwind.config.ts b/packages/x-components/tailwind.config.ts deleted file mode 100644 index 07408410c2..0000000000 --- a/packages/x-components/tailwind.config.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { xTailwindPlugin, oldDsPlugin } from '@empathyco/x-tailwindcss' -import { Config } from 'tailwindcss' -import options from './src/tailwind/plugin-options' - -export default { - content: [ - './public/index.html', - './src/**/*.vue', - './node_modules/@empathyco/x-tailwindcss/showcase/**/*.js', - ], - prefix: 'x-', - theme: { - extend: { - fontFamily: ({ theme }) => theme('x.fontFamily'), - fontSize: ({ theme }) => theme('x.fontSize'), - spacing: ({ theme }) => theme('x.spacing'), - colors: ({ theme }) => theme('x.colors'), - screens: ({ theme }) => theme('x.screens'), - }, - }, - plugins: [xTailwindPlugin(options), oldDsPlugin], - important: true, -} as Config diff --git a/packages/x-components/vite.config.ts b/packages/x-components/vite.config.ts index 05d5bcefe0..416e087ffc 100644 --- a/packages/x-components/vite.config.ts +++ b/packages/x-components/vite.config.ts @@ -2,6 +2,7 @@ import { resolve } from 'path' import vue from '@vitejs/plugin-vue' import { defineConfig } from 'vite' import Inspector from 'vite-plugin-vue-inspector' +import tailwindcss from '@tailwindcss/vite' export const vueDocsPlugin = { name: 'vue-docs', @@ -11,7 +12,10 @@ export const vueDocsPlugin = { } export default defineConfig({ - plugins: [vue(), vueDocsPlugin, Inspector()], + plugins: [vue(), vueDocsPlugin, Inspector(), + tailwindcss({ + config: resolve(__dirname, './tailwind.config.ts'), + } as any),], resolve: { alias: { vue: resolve(__dirname, 'node_modules/vue'), diff --git a/packages/x-tailwindcss/package.json b/packages/x-tailwindcss/package.json index d4b895d6cc..8eab0b5c76 100644 --- a/packages/x-tailwindcss/package.json +++ b/packages/x-tailwindcss/package.json @@ -16,9 +16,21 @@ "system", "empathy" ], - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/types/index.d.ts", + "exports": { + ".": { + "types": "./dist/types/index.d.ts", + "import": "./dist/esm/index.js", + "require": "./dist/cjs/index.js" + }, + "./plugin": { + "import": "./dist/esm/x-tailwind-plugin/plugin.js", + "require": "./dist/cjs/x-tailwind-plugin/plugin.js" + }, + "./old-ds-plugin": { + "import": "./dist/esm/old-ds-plugin/plugin.js", + "require": "./dist/cjs/old-ds-plugin/plugin.js" + } + }, "files": [ "dist", "showcase" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2cf1352f31..d3116de73b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -281,6 +281,12 @@ importers: '@microsoft/api-extractor': specifier: 7.55.2 version: 7.55.2(@types/node@24.10.4) + '@tailwindcss/postcss': + specifier: 4.1.17 + version: 4.1.17 + '@tailwindcss/vite': + specifier: 4.1.17 + version: 4.1.17(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(tsx@4.21.0)(yaml@2.8.2)) '@testing-library/jest-dom': specifier: 6.6.4 version: 6.6.4 @@ -302,9 +308,6 @@ importers: '@vue/vue3-jest': specifier: 29.2.6 version: 29.2.6(@babel/core@7.28.3)(babel-jest@29.7.0(@babel/core@7.28.3))(jest@29.7.0(@types/node@24.10.4)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3)) - autoprefixer: - specifier: 10.4.21 - version: 10.4.21(postcss@8.4.12) convert-source-map: specifier: 2.0.0 version: 2.0.0 @@ -323,15 +326,6 @@ importers: jest-scss-transform: specifier: 1.0.4 version: 1.0.4(babel-jest@29.7.0(@babel/core@7.28.3)) - postcss: - specifier: 8.4.12 - version: 8.4.12 - postcss-dir-pseudo-class: - specifier: 7.0.0 - version: 7.0.0(postcss@8.4.12) - postcss-logical: - specifier: 4.0.2 - version: 4.0.2 rimraf: specifier: 3.0.2 version: 3.0.2 @@ -360,8 +354,8 @@ importers: specifier: 2.1.3 version: 2.1.3 tailwindcss: - specifier: 3.4.0 - version: 3.4.0(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)) + specifier: 4.1.17 + version: 4.1.17 ts-jest: specifier: 29.4.6 version: 29.4.6(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.28.3))(esbuild@0.20.0)(jest-util@29.7.0)(jest@29.7.0(@types/node@24.10.4)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(typescript@5.9.3) @@ -3355,13 +3349,6 @@ packages: resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==} engines: {node: '>= 4.0.0'} - autoprefixer@10.4.21: - resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==} - engines: {node: ^10 || ^12 || >=14} - hasBin: true - peerDependencies: - postcss: ^8.1.0 - available-typed-arrays@1.0.7: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} @@ -3543,10 +3530,6 @@ packages: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} - camelcase-css@2.0.1: - resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} - engines: {node: '>= 6'} - camelcase-keys@6.2.2: resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==} engines: {node: '>=8'} @@ -3766,10 +3749,6 @@ packages: resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==} engines: {node: '>=20'} - commander@4.1.1: - resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} - engines: {node: '>= 6'} - commander@6.2.1: resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==} engines: {node: '>= 6'} @@ -4190,9 +4169,6 @@ packages: devlop@1.1.0: resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} - didyoumean@1.2.2: - resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} - diff-sequences@27.5.1: resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} @@ -4217,9 +4193,6 @@ packages: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} - dlv@1.1.3: - resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} - doctypes@1.1.0: resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==} @@ -4817,9 +4790,6 @@ packages: resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==} engines: {node: '>=0.4.x'} - fraction.js@4.3.7: - resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} - from@0.1.7: resolution: {integrity: sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==} @@ -5657,10 +5627,6 @@ packages: node-notifier: optional: true - jiti@1.21.7: - resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==} - hasBin: true - jiti@2.6.1: resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==} hasBin: true @@ -5918,10 +5884,6 @@ packages: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} engines: {node: '>=10'} - lilconfig@3.1.3: - resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==} - engines: {node: '>=14'} - lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} @@ -6490,10 +6452,6 @@ packages: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} - normalize-range@0.1.2: - resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} - engines: {node: '>=0.10.0'} - normalize-url@6.1.0: resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==} engines: {node: '>=10'} @@ -6604,10 +6562,6 @@ packages: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - object-hash@3.0.0: - resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} - engines: {node: '>= 6'} - object-inspect@1.13.4: resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==} engines: {node: '>= 0.4'} @@ -6827,9 +6781,6 @@ packages: performance-now@2.1.0: resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} - picocolors@0.2.1: - resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==} - picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -6899,12 +6850,6 @@ packages: peerDependencies: postcss: ^8.2.15 - postcss-dir-pseudo-class@7.0.0: - resolution: {integrity: sha512-i8I6vqB0T0fpanLBjFoMPp3iTgKPccZCyZ149Q1RuRVlnKD00DbRFSkbp4/XDJaNzKJeto/DM/Uj62icEtVh9A==} - engines: {node: ^14 || ^16 || >=18} - peerDependencies: - postcss: ^8.4 - postcss-discard-comments@5.1.2: resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==} engines: {node: ^10 || ^12 || >=14.0} @@ -6929,34 +6874,6 @@ packages: peerDependencies: postcss: ^8.2.15 - postcss-import@15.1.0: - resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} - engines: {node: '>=14.0.0'} - peerDependencies: - postcss: ^8.0.0 - - postcss-js@4.0.1: - resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} - engines: {node: ^12 || ^14 || >= 16} - peerDependencies: - postcss: ^8.4.21 - - postcss-load-config@4.0.2: - resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} - engines: {node: '>= 14'} - peerDependencies: - postcss: '>=8.0.9' - ts-node: '>=9.0.0' - peerDependenciesMeta: - postcss: - optional: true - ts-node: - optional: true - - postcss-logical@4.0.2: - resolution: {integrity: sha512-tlX1n19np6/JznvyymZM6SIe0FymD5Ngwcg2j825vNKhADu0p1PTgEmsCjakCbvn78kaIFzYTI32NpgOEwgifQ==} - engines: {node: '>=8.0.0'} - postcss-merge-longhand@5.1.7: resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==} engines: {node: ^10 || ^12 || >=14.0} @@ -7017,12 +6934,6 @@ packages: peerDependencies: postcss: ^8.1.0 - postcss-nested@6.2.0: - resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==} - engines: {node: '>=12.0'} - peerDependencies: - postcss: ^8.2.14 - postcss-normalize-charset@5.1.0: resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==} engines: {node: ^10 || ^12 || >=14.0} @@ -7124,10 +7035,6 @@ packages: peerDependencies: postcss: ^8.2.9 - postcss@7.0.39: - resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==} - engines: {node: '>=6.0.0'} - postcss@8.4.12: resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==} engines: {node: ^10 || ^12 || >=14} @@ -7376,9 +7283,6 @@ packages: react-is@18.3.1: resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} - read-cache@1.0.0: - resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} - read-cmd-shim@3.0.0: resolution: {integrity: sha512-KQDVjGqhZk92PPNRj9ZEXEuqg8bUobSKRw+q0YQ3TKI5xkce7bUJobL4Z/OtiEbAAv70yEpYIXp4iQ9L8oPVog==} engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} @@ -7980,11 +7884,6 @@ packages: engines: {node: '>=18'} hasBin: true - sucrase@3.35.0: - resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} - engines: {node: '>=16 || 14 >=14.17'} - hasBin: true - supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -8023,11 +7922,6 @@ packages: resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==} engines: {node: '>=20'} - tailwindcss@3.4.0: - resolution: {integrity: sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==} - engines: {node: '>=14.0.0'} - hasBin: true - tailwindcss@4.1.17: resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==} @@ -8169,9 +8063,6 @@ packages: resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} engines: {node: '>=6.10'} - ts-interface-checker@0.1.13: - resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} - ts-jest@29.4.6: resolution: {integrity: sha512-fSpWtOO/1AjSNQguk43hb/JCo16oJDnMJf3CdEGNkqsEX3t0KX96xvyX1D7PfLCpVoKu4MfVrqUkFyblYoY4lA==} engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0} @@ -8744,11 +8635,6 @@ packages: resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} engines: {node: '>= 6'} - yaml@2.8.1: - resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==} - engines: {node: '>= 14.6'} - hasBin: true - yaml@2.8.2: resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==} engines: {node: '>= 14.6'} @@ -11956,16 +11842,6 @@ snapshots: at-least-node@1.0.0: {} - autoprefixer@10.4.21(postcss@8.4.12): - dependencies: - browserslist: 4.25.3 - caniuse-lite: 1.0.30001737 - fraction.js: 4.3.7 - normalize-range: 0.1.2 - picocolors: 1.1.1 - postcss: 8.4.12 - postcss-value-parser: 4.2.0 - available-typed-arrays@1.0.7: dependencies: possible-typed-array-names: 1.1.0 @@ -12224,8 +12100,6 @@ snapshots: callsites@3.1.0: {} - camelcase-css@2.0.1: {} - camelcase-keys@6.2.2: dependencies: camelcase: 5.3.1 @@ -12423,8 +12297,6 @@ snapshots: commander@14.0.2: {} - commander@4.1.1: {} - commander@6.2.1: {} commander@7.2.0: {} @@ -12963,8 +12835,6 @@ snapshots: dependencies: dequal: 2.0.3 - didyoumean@1.2.2: {} - diff-sequences@27.5.1: {} diff-sequences@29.6.3: {} @@ -12979,8 +12849,6 @@ snapshots: dependencies: path-type: 4.0.0 - dlv@1.1.3: {} - doctypes@1.1.0: {} dom-accessibility-api@0.6.3: {} @@ -13781,8 +13649,6 @@ snapshots: format@0.2.2: {} - fraction.js@4.3.7: {} - from@0.1.7: {} fs-constants@1.0.0: {} @@ -14850,8 +14716,6 @@ snapshots: - supports-color - ts-node - jiti@1.21.7: {} - jiti@2.6.1: {} jju@1.4.0: {} @@ -15182,8 +15046,6 @@ snapshots: lilconfig@2.1.0: {} - lilconfig@3.1.3: {} - lines-and-columns@1.2.4: {} lines-and-columns@2.0.4: {} @@ -15994,8 +15856,6 @@ snapshots: normalize-path@3.0.0: {} - normalize-range@0.1.2: {} - normalize-url@6.1.0: {} nouislider@15.8.1: {} @@ -16180,8 +16040,6 @@ snapshots: object-assign@4.1.1: {} - object-hash@3.0.0: {} - object-inspect@1.13.4: {} object-is@1.1.6: @@ -16441,8 +16299,6 @@ snapshots: performance-now@2.1.0: {} - picocolors@0.2.1: {} - picocolors@1.1.1: {} picomatch@2.3.1: {} @@ -16503,11 +16359,6 @@ snapshots: postcss: 8.4.12 postcss-value-parser: 4.2.0 - postcss-dir-pseudo-class@7.0.0(postcss@8.4.12): - dependencies: - postcss: 8.4.12 - postcss-selector-parser: 6.1.2 - postcss-discard-comments@5.1.2(postcss@8.4.12): dependencies: postcss: 8.4.12 @@ -16524,30 +16375,6 @@ snapshots: dependencies: postcss: 8.4.12 - postcss-import@15.1.0(postcss@8.5.6): - dependencies: - postcss: 8.5.6 - postcss-value-parser: 4.2.0 - read-cache: 1.0.0 - resolve: 1.22.10 - - postcss-js@4.0.1(postcss@8.5.6): - dependencies: - camelcase-css: 2.0.1 - postcss: 8.5.6 - - postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)): - dependencies: - lilconfig: 3.1.3 - yaml: 2.8.1 - optionalDependencies: - postcss: 8.5.6 - ts-node: 10.9.2(@types/node@24.10.4)(typescript@5.9.3) - - postcss-logical@4.0.2: - dependencies: - postcss: 7.0.39 - postcss-merge-longhand@5.1.7(postcss@8.4.12): dependencies: postcss: 8.4.12 @@ -16607,11 +16434,6 @@ snapshots: icss-utils: 5.1.0(postcss@8.4.12) postcss: 8.4.12 - postcss-nested@6.2.0(postcss@8.5.6): - dependencies: - postcss: 8.5.6 - postcss-selector-parser: 6.1.2 - postcss-normalize-charset@5.1.0(postcss@8.4.12): dependencies: postcss: 8.4.12 @@ -16705,11 +16527,6 @@ snapshots: postcss: 8.5.6 quote-unquote: 1.0.0 - postcss@7.0.39: - dependencies: - picocolors: 0.2.1 - source-map: 0.6.1 - postcss@8.4.12: dependencies: nanoid: 3.3.11 @@ -16923,10 +16740,6 @@ snapshots: react-is@18.3.1: {} - read-cache@1.0.0: - dependencies: - pify: 2.3.0 - read-cmd-shim@3.0.0: {} read-cmd-shim@4.0.0: {} @@ -17633,16 +17446,6 @@ snapshots: dependencies: commander: 12.1.0 - sucrase@3.35.0: - dependencies: - '@jridgewell/gen-mapping': 0.3.13 - commander: 4.1.1 - glob: 10.4.5 - lines-and-columns: 1.2.4 - mz: 2.7.0 - pirates: 4.0.7 - ts-interface-checker: 0.1.13 - supports-color@5.5.0: dependencies: has-flag: 3.0.0 @@ -17677,33 +17480,6 @@ snapshots: tagged-tag@1.0.0: {} - tailwindcss@3.4.0(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)): - dependencies: - '@alloc/quick-lru': 5.2.0 - arg: 5.0.2 - chokidar: 3.6.0 - didyoumean: 1.2.2 - dlv: 1.1.3 - fast-glob: 3.3.3 - glob-parent: 6.0.2 - is-glob: 4.0.3 - jiti: 1.21.7 - lilconfig: 2.1.0 - micromatch: 4.0.8 - normalize-path: 3.0.0 - object-hash: 3.0.0 - picocolors: 1.1.1 - postcss: 8.5.6 - postcss-import: 15.1.0(postcss@8.5.6) - postcss-js: 4.0.1(postcss@8.5.6) - postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)) - postcss-nested: 6.2.0(postcss@8.5.6) - postcss-selector-parser: 6.1.2 - resolve: 1.22.10 - sucrase: 3.35.0 - transitivePeerDependencies: - - ts-node - tailwindcss@4.1.17: {} tapable@2.2.3: {} @@ -17837,8 +17613,6 @@ snapshots: ts-dedent@2.2.0: {} - ts-interface-checker@0.1.13: {} - ts-jest@29.4.6(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.28.3))(esbuild@0.20.0)(jest-util@29.7.0)(jest@29.7.0(@types/node@24.10.4)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(typescript@5.9.3): dependencies: bs-logger: 0.2.6 @@ -18432,8 +18206,6 @@ snapshots: yaml@1.10.2: {} - yaml@2.8.1: {} - yaml@2.8.2: {} yargs-parser@20.2.4: {} From 2c53a223ad8bfaa31b18539d68ba0e53bc30cbc1 Mon Sep 17 00:00:00 2001 From: Francisco Diaz Date: Thu, 18 Dec 2025 15:42:26 +0100 Subject: [PATCH 05/21] feat(x-components): remove prefix in common Tailwind classes --- .../layouts/multi-column-max-width-layout.vue | 2 +- .../src/components/page-loader-button.vue | 8 +- .../src/tailwind/tailwind.config.ts | 3 +- .../accessibility/accessibility-check.vue | 2 +- .../wai-base-dropdown-and-base-switch.vue | 2 +- .../accessibility/wai-base-event-button.vue | 2 +- .../accessibility/wai-base-result-link.vue | 4 +- packages/x-components/src/views/home/Home.vue | 78 +++++++++---------- .../x-components/src/views/home/aside.vue | 16 ++-- .../src/views/home/predictive-layer.vue | 4 +- .../views/home/sliding-next-query-preview.vue | 6 +- .../src/views/home/sliding-query-preview.vue | 4 +- .../components/query-preview-list.vue | 4 +- 13 files changed, 68 insertions(+), 67 deletions(-) diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue index 1f771fb891..2df2c10277 100644 --- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue +++ b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue @@ -72,7 +72,7 @@ - +