diff --git a/package.json b/package.json index 051d0df971..edbd7e8304 100644 --- a/package.json +++ b/package.json @@ -326,6 +326,7 @@ "pg-format": "^1.0.4", "playwright": "^1.57.0", "postcss": "^8.5.3", + "postcss-assign-layer": "^0.4.0", "postcss-preset-mantine": "^1.17.0", "postcss-simple-vars": "^7.0.1", "prettier": "^2.8.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c40246c49b..4e1f82466a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -761,6 +761,9 @@ importers: postcss: specifier: ^8.5.3 version: 8.5.6 + postcss-assign-layer: + specifier: ^0.4.0 + version: 0.4.0(postcss@8.5.6) postcss-preset-mantine: specifier: ^1.17.0 version: 1.18.0(postcss@8.5.6) @@ -3059,6 +3062,10 @@ packages: '@rolldown/pluginutils@1.0.0-beta.27': resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==} + '@rollup/pluginutils@4.2.1': + resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==} + engines: {node: '>= 8.0.0'} + '@rollup/rollup-android-arm-eabi@4.56.0': resolution: {integrity: sha512-LNKIPA5k8PF1+jAFomGe3qN3bbIgJe/IlpDBwuVjrDKrJhVWywgnJvflMt/zkbVNLFtF1+94SljYQS6e99klnw==} cpu: [arm] @@ -6040,6 +6047,9 @@ packages: estree-util-visit@2.0.0: resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==} + estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} @@ -8180,6 +8190,12 @@ packages: resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==} engines: {node: '>= 0.4'} + postcss-assign-layer@0.4.0: + resolution: {integrity: sha512-ART9ENWnvEyW3yyfJe83nz5j/IsbQHBgSMsUNFmC/+6zy0uC9YTriHKV6TEjOOHXRzXS2yNPj0ksvYkEwwkv5w==} + engines: {node: '>=12.0.0'} + peerDependencies: + postcss: ^8.3.0 + postcss-calc@10.1.1: resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==} engines: {node: ^18.12 || ^20.9 || >=22.0} @@ -13255,6 +13271,11 @@ snapshots: '@rolldown/pluginutils@1.0.0-beta.27': {} + '@rollup/pluginutils@4.2.1': + dependencies: + estree-walker: 2.0.2 + picomatch: 2.3.1 + '@rollup/rollup-android-arm-eabi@4.56.0': optional: true @@ -16702,6 +16723,8 @@ snapshots: '@types/estree-jsx': 1.0.5 '@types/unist': 3.0.3 + estree-walker@2.0.2: {} + estree-walker@3.0.3: dependencies: '@types/estree': 1.0.8 @@ -19366,6 +19389,11 @@ snapshots: possible-typed-array-names@1.1.0: {} + postcss-assign-layer@0.4.0(postcss@8.5.6): + dependencies: + '@rollup/pluginutils': 4.2.1 + postcss: 8.5.6 + postcss-calc@10.1.1(postcss@8.5.6): dependencies: postcss: 8.5.6 diff --git a/postcss.config.js b/postcss.config.js index 980dbabc3d..5265ce0812 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -12,6 +12,16 @@ module.exports = { }, }, autoprefixer: {}, + // Wrap every CSS Module's output in a `modules` cascade layer. Unlayered + // Tailwind utilities (see src/styles/globals.css) then always beat module + // styles regardless of Turbopack's CSS injection order — the root cause of + // module rules overriding Tailwind after the Next 16 / Turbopack switch. + // Value is the array the plugin expects; runs before cssnano so the + // @layer wrapper is in place before minification. + 'postcss-assign-layer': [ + { include: '**/*.module.css', layerName: 'modules' }, + { include: '**/*.module.scss', layerName: 'modules' }, + ], ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}) } }