mirror of
https://github.com/civitai/civitai.git
synced 2026-09-20 22:08:18 +08:00
Briant Diehl
5b2f15b2f2
Under Turbopack, per-component CSS Module styles are injected after the global Tailwind sheet. Both module rules and Tailwind components/utilities were unlayered, so source order let module rules override Tailwind utilities (symptom: horizontally stretched images on the image detail page, where EdgeMedia .responsive {height:auto} beat the Tailwind sizing class).
Fix: wrap every *.module.css/.module.scss into a 'modules' cascade layer via postcss-assign-layer. Tailwind components/utilities stay unlayered, so they beat any layer regardless of injection order. No explicit @layer order declaration is used: module CSS loads after Mantine's imports, so '@layer modules' naturally sits above '@layer mantine', and both sit below unlayered Tailwind. Final cascade: preflight < theme < utilities < mantine < modules < unlayered Tailwind (wins).
An explicit '@layer mantine, modules;' declaration was deliberately avoided: pinning 'mantine' as the first-declared layer dropped it below Tailwind's Preflight base layer, so Preflight's button reset beat Mantine styling (e.g. CategoryTags buttons lost their fill).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
28 lines
1.0 KiB
JavaScript
28 lines
1.0 KiB
JavaScript
module.exports = {
|
|
plugins: {
|
|
tailwindcss: {},
|
|
'postcss-preset-mantine': {},
|
|
'postcss-simple-vars': {
|
|
variables: {
|
|
'mantine-breakpoint-xs': '30em',
|
|
'mantine-breakpoint-sm': '48em',
|
|
'mantine-breakpoint-md': '64em',
|
|
'mantine-breakpoint-lg': '74em',
|
|
'mantine-breakpoint-xl': '90em',
|
|
},
|
|
},
|
|
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: {} } : {})
|
|
}
|
|
}
|