From 174e1121590f29e0d93d65c763ef638b5e5c3d28 Mon Sep 17 00:00:00 2001 From: Ren Rizzolo Date: Tue, 7 Nov 2023 11:05:49 +1100 Subject: [PATCH] chore(docs): add next css order note --- site/docs/integrations/next.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/site/docs/integrations/next.md b/site/docs/integrations/next.md index 54be3db96..cfc3e319b 100644 --- a/site/docs/integrations/next.md +++ b/site/docs/integrations/next.md @@ -96,3 +96,13 @@ module.exports = createVanillaExtractPlugin(nextConfig); ``` [`transpilepackages`]: https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages + +## CSS load order issues + +There are some known issues with Next.js css load order and/or duplicate css. + +- When client-side navigating, new css is injected into the head, but unused css isn't removed. This means if route B has a component that applies some global css to a component also in route A, upon returning to route A, those styles from route B will still be applied. +- When using App router, css can be duplicated which could cause unexpected overrides. + +[next.js #51030](https://github.com/vercel/next.js/issues/51030) +[next.js #40080](https://github.com/vercel/next.js/issues/40080)