avoid merging global css in a way that leaks into other chunk groups (#67373)
### What? This disallows merging of global css with styles that appear on other pages/chunk groups. ### Why? Before we made the assumption that all CSS is written in a way that it only affects the elements it should really affect. In general writing CSS in that way is recommended. In App Router styles are only added and never removed. This means when a user uses client-side navigations to navigate the application, styles from all previous pages are still active on the current page. To avoid visual artefacts one need to write CSS in a way that it only affects certain elements. Usually this can be archived by using class names. CSS Modules even enforce this recommendation. Assuming that all styles are written this way allows to optimize CSS loading as request count can be reduced when (small) styles are merged together. But turns out that some applications are written differently. They use global styles that are not scoped to a class name (e. g. to `body` directly instead) and use them in different sections of the application. They are structured in a way that doesn't allow client-side navigations between these sections. This should be valid too, which makes our assumption not always holding true. This PR changes the algorithm so we only make that assumption for CSS Modules, but not for global CSS. While this affects the ability to optimize, applications usually do not use too much global CSS files, so that can be accepted. fixes #64773
This commit is contained in:
parent
609277b271
commit
3f11815b02
8 changed files with 94 additions and 0 deletions
|
@ -11,6 +11,10 @@ const MIN_CSS_CHUNK_SIZE = 30 * 1024
|
||||||
*/
|
*/
|
||||||
const MAX_CSS_CHUNK_SIZE = 100 * 1024
|
const MAX_CSS_CHUNK_SIZE = 100 * 1024
|
||||||
|
|
||||||
|
function isGlobalCss(module: Module) {
|
||||||
|
return !/\.module\.(css|scss|sass)$/.test(module.nameForCondition() || '')
|
||||||
|
}
|
||||||
|
|
||||||
type ChunkState = {
|
type ChunkState = {
|
||||||
chunk: Chunk
|
chunk: Chunk
|
||||||
modules: Module[]
|
modules: Module[]
|
||||||
|
@ -125,6 +129,8 @@ export class CssChunkingPlugin {
|
||||||
|
|
||||||
// Process through all modules
|
// Process through all modules
|
||||||
for (const startModule of remainingModules) {
|
for (const startModule of remainingModules) {
|
||||||
|
let globalCssMode = isGlobalCss(startModule)
|
||||||
|
|
||||||
// The current position of processing in all selected chunks
|
// The current position of processing in all selected chunks
|
||||||
let allChunkStates = new Map(chunkStatesByModule.get(startModule)!)
|
let allChunkStates = new Map(chunkStatesByModule.get(startModule)!)
|
||||||
|
|
||||||
|
@ -225,8 +231,36 @@ export class CssChunkingPlugin {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Global CSS must not leak into unrelated chunks
|
||||||
|
const nextIsGlobalCss = isGlobalCss(nextModule)
|
||||||
|
if (nextIsGlobalCss && globalCssMode) {
|
||||||
|
if (allChunkStates.size !== nextChunkStates.size) {
|
||||||
|
// Fast check
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (globalCssMode) {
|
||||||
|
for (const chunkState of nextChunkStates.keys()) {
|
||||||
|
if (!allChunkStates.has(chunkState)) {
|
||||||
|
// Global CSS would leak into chunkState
|
||||||
|
continue loop
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (nextIsGlobalCss) {
|
||||||
|
for (const chunkState of allChunkStates.keys()) {
|
||||||
|
if (!nextChunkStates.has(chunkState)) {
|
||||||
|
// Global CSS would leak into chunkState
|
||||||
|
continue loop
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
potentialNextModules.delete(nextModule)
|
potentialNextModules.delete(nextModule)
|
||||||
currentSize += size
|
currentSize += size
|
||||||
|
if (nextIsGlobalCss) {
|
||||||
|
globalCssMode = true
|
||||||
|
}
|
||||||
for (const [chunkState, i] of nextChunkStates) {
|
for (const [chunkState, i] of nextChunkStates) {
|
||||||
if (allChunkStates.has(chunkState)) {
|
if (allChunkStates.has(chunkState)) {
|
||||||
// This reduces the request count of the chunk group
|
// This reduces the request count of the chunk group
|
||||||
|
|
4
test/e2e/app-dir/css-order/app/base.css
Normal file
4
test/e2e/app-dir/css-order/app/base.css
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
#hello1,
|
||||||
|
#hello2 {
|
||||||
|
color: rgb(255, 0, 0);
|
||||||
|
}
|
12
test/e2e/app-dir/css-order/app/global-first/page.tsx
Normal file
12
test/e2e/app-dir/css-order/app/global-first/page.tsx
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
import '../base.css'
|
||||||
|
import './style.css'
|
||||||
|
import Nav from '../nav'
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p id="hello1">hello world</p>
|
||||||
|
<Nav />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
4
test/e2e/app-dir/css-order/app/global-first/style.css
Normal file
4
test/e2e/app-dir/css-order/app/global-first/style.css
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
#hello1,
|
||||||
|
#hello2 {
|
||||||
|
color: rgb(0, 255, 0);
|
||||||
|
}
|
12
test/e2e/app-dir/css-order/app/global-second/page.tsx
Normal file
12
test/e2e/app-dir/css-order/app/global-second/page.tsx
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
import '../base.css'
|
||||||
|
import './style.css'
|
||||||
|
import Nav from '../nav'
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p id="hello2">hello world</p>
|
||||||
|
<Nav />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
4
test/e2e/app-dir/css-order/app/global-second/style.css
Normal file
4
test/e2e/app-dir/css-order/app/global-second/style.css
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
#hello1,
|
||||||
|
#hello2 {
|
||||||
|
color: rgb(0, 0, 255);
|
||||||
|
}
|
|
@ -70,6 +70,16 @@ export default function Nav() {
|
||||||
Partial Reversed B
|
Partial Reversed B
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link href={'/global-first'} id="global-first">
|
||||||
|
Global First
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link href={'/global-second'} id="global-second">
|
||||||
|
Global Second
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h3>Pages</h3>
|
<h3>Pages</h3>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -183,6 +183,20 @@ const PAGES: Record<
|
||||||
color: 'rgb(255, 55, 255)',
|
color: 'rgb(255, 55, 255)',
|
||||||
background: 'rgba(0, 0, 0, 0)',
|
background: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
'global-first': {
|
||||||
|
group: 'global',
|
||||||
|
conflict: true,
|
||||||
|
url: '/global-first',
|
||||||
|
selector: '#hello1',
|
||||||
|
color: 'rgb(0, 255, 0)',
|
||||||
|
},
|
||||||
|
'global-second': {
|
||||||
|
group: 'global',
|
||||||
|
conflict: true,
|
||||||
|
url: '/global-second',
|
||||||
|
selector: '#hello2',
|
||||||
|
color: 'rgb(0, 0, 255)',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const allPairs = getPairs(Object.keys(PAGES))
|
const allPairs = getPairs(Object.keys(PAGES))
|
||||||
|
|
Loading…
Reference in a new issue