CSS is reset on route change in production build

Bug report

Describe the bug

When you navigate to a different route in Next.js 10.0.0 module specific css is reset. This is problematic, because I keep the component mounted for a bit longer to do some animations with framer-motion. In Next.js 9 this was not an issue.

Edit: By the comments it seems like this bug first occured in 9.5.5

To Reproduce

Here is a very basic example. If you run the app in dev mode it works fine, but the production build doesn’t. The css is immediately removed if you click on the link. https://v10-test.vercel.app/

Source code: https://github.com/mxmtsk/v10-test

To keep the page component mounted until the animation is finished, I’m using AnimatePresence from framer-motion

Edit: Here’s the same example using Next 9.5.1, where everything works fine: https://v10-test-git-v9.mxmtsk.vercel.app/

Expected behavior

CSS should not be reset.

System information

• OS: macOS
• All Browsers
• Version of Next.js: 10.0.0
• Version of Node.js: 12.13.1

[organdonor47]

same issue as #17464

[damianslonski]

I have the same issue, but even with Next 9.5.5. 🤔 Probably the reason is production code splitting for CSS Modules. E.g. global styles & styled-components work fine.

https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files. These .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.