Allow Global CSS in Component Modules

[salazarm]

Feature request

Hi I would like a setting to allow importing Global CSS in component Module.

Is your feature request related to a problem? Please describe.

I use many external components, some which require importing their CSS directly. The current rule of not allowing Global CSS in components has a few drawbacks for me:

1. We have to require all of these global css in _app which is a bad separation of concerns
2. Components that were lazy loaded dynamically will no longer have their CSS also loaded dynamically (page load bundle size is bigger which sucks because CSS is on the critical path to avoid FOUCs.
3. Its a lot harder to incrementally update, we have hundreds of components using global css format right now. Would like a way to adopt CSS Modules incrementally
4. I'm aware of the issues talked about here: https://err.sh/next.js/css-global At Facebook the approach we took is to explicitly not depend on CSS ordering. Every build would randomly permute CSS to make such side effects obvious and more easily detectable. What we are doing now is forcing an explicit dependency on ordering, that means there will always be a danger when moving CSS across files. Instead people should be educated about relying on CSS Specificity instead which is the real solution to these issues.

A clear and concise description of what you want and what your use case is.
Allow referencing Global CSS in modules

Describe alternatives you've considered

A build step that creates _app.tsx to avoid the issue of bad separation of concerns.

Additional context

For what its worth we should never be relying on CSS Ordering. We should be relying on CSS Specificity

[jamesmosier]

There have been a few different issues and discussions opened around this, the most recent being #12079

[salazarm]

Closing in favor of #12079

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.