[SOLVED] Merged CSS file output (no bundling) in Production

[kapsule-studio]

TLDR: Your styles are merged in a single file in Production instead of being bundled for each page => Answer in the next comment.

I use Next.js with Tailwind. I also have some scss files to handle styles that would be too complex to handle with Tailwind.
These scss files are directly imported on the pages where they are needed. While other global styles are loaded at the root of the app for all pages.

One complexity of my app is that I use multiple Layout. For those not accustomed with Next.js, the Layout is the root of the app and every page you visit is a children of the Layout. For example, you would put your <Navigation /> inside Layout so it is available on every page.

My app, which is a website builder, uses 3 different Layout, for 3 different contexts. One for the app itself, one for the generated websites and one for the website editor inside the app. Note that each Layout imports a different global styles file as they are different depending on the context.

MY ISSUE: Everything is working properly in dev mode. A given page will load only its corresponding global styles and the locally imported scss styles if it has any. The bundling is done as expected. But in production... everything is just merged into a single file. So the styles from one Layout are loaded on every Layout. The local scss files are also loaded on every page. You can only imagine the mess of conflicts it creates.

Can someone please tell me what is going on? Is there something I can do to change the way my css is bundled in production?

Note that I am sure the issue is coming from Tailwind. My project was using only css and scss files before implementing Tailwind and this styles merging started there.

Any help would be greatly appreciated. Sorry for not putting up a reproduction repo, this seems like a lot of time spent with no guarantee it will lead to a solution.

[kapsule-studio]

UPDATE: As always, I spent hours to find a solution to my problem and then end up writing a post on GitHub only to find the solution an hour later... I'll leave it here for anyone running into this in the future:

You need to install postcss-import and add it to your plugins in your postcss.config.js file. As described here.