3f11815b02
### 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 |
||
|---|---|---|
| .. | ||
| create-next-app | ||
| eslint-config-next | ||
| eslint-plugin-next | ||
| font | ||
| next | ||
| next-bundle-analyzer | ||
| next-codemod | ||
| next-env | ||
| next-mdx | ||
| next-plugin-storybook | ||
| next-polyfill-module | ||
| next-polyfill-nomodule | ||
| next-swc | ||
| react-refresh-utils | ||
| third-parties | ||