470e48c001
This PR fixes a couple of categories of CSS issues in App Router, that come from the same root cause. ### 1. Duplicated styles being loaded in different layers This issue has been described in https://github.com/vanilla-extract-css/vanilla-extract/issues/1088#issuecomment-1563931144. If a CSS module (or a global CSS) is referenced in multiple layers (e.g. a layout and a page), it will be bundled into multiple CSS assets because each layer is considered as a separate entry. <img width="1141" alt="CleanShot-2023-05-26-GoB9Rhcs@2x" src="https://github.com/vercel/next.js/assets/3676859/8e0f5346-ee64-4553-950a-7fb44f769efc"> As explained in that issue, we have to bundle all CSS modules into one chunk to avoid a big number of requests. ### 2. CSS ordering issues (conflicts) This is likely causing https://github.com/vercel/next.js/issues/48120. When the layer-based bundling and ordering logic applies to CSS, it can potentially cause non-deterministic order. In this example, button A in the layout should be in blue. However when button B is imported by the page, button A becomes red. This is an inconsistent experience and can be hard to debug and fix. <img width="1090" alt="CleanShot-2023-05-26-Ar4MN5rP@2x" src="https://github.com/vercel/next.js/assets/3676859/4328d5d7-23af-4c42-bedf-30f8f062d96a"> |
||
---|---|---|
.. | ||
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-dev-overlay | ||
react-refresh-utils |