Importing correctly scoped css from node_modules outside of _app

[mormahr]

Bug report

Describe the bug

Importing a stylesheet from a package is not possible in a page, because next throws with this error:

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.tsx.
Read more: https://err.sh/next.js/css-global

While I understand where this stems from, it makes code-splitting impossible. If I import a component from a component library, I need to import the CSS as well. There might be libraries that don't correctly scope their selectors, but that shouldn't stop me from overwriting this warning. CSS that is imported from a library isn't inherently "global".

To Reproduce

1. import "my-library/index.css"
2. yarn dev
3. I get the error from above

Expected behavior

The file should be imported.

I see these possible solutions:

• Global flag in next.config.js
• Comment annotation on import
• Warn instead of completely blocking it
• Check if the CSS only contains scoped selectors

Additional context

There have been previous discussions about this.

From the blog

Since stylesheets are global by nature, they must be imported in the Custom component. This is necessary to avoid class name and ordering conflicts for global styles.

I disagree with this statement, the reasoning being that an external library can use CSS modules and package them as a CSS file to import. Which is perfectly valid and common practice and does not have side effects.

#10059

This issue got closed because the global import in _app is the correct choice there.
This comment describes the exact problem, but there hasn't been any response, as the issue is closed. The comment got a lot of positive reactions though, so I suppose I'm not the only one with this problem.

#10975

Seems to be unrelated.

#9830

Might be related, but I'm not sure.

My use case

I write long articles with a lot of custom artwork and interactive illustrations. Articles use private npm packages with react components that render SVG with quite a bit of CSS. These packages use CSS modules and export an index.js and index.css. Adding all the CSS files to _app causes all the CSS to be loaded, even if people are on the home page, the contact form, or any other article, even though it's 100% unused. It also goes against having the file system take care of your pages because almost every page corresponds to a CSS import in _app.

[mikestopcontinues]

I'm facing this same problem simply trying to use Linaria, which scopes its own class names. Though the css files it produces don't end in .module.css, they're "modules." I need an easy way to integrate with the library.

[x5engine]

why did even switch to nextjs again?

[salazarm]

I'd also like to be able to use GlobalCSS outside of node_modules. This would help us incrementally adopt CSS Modules

[x5engine]

yeah this is very important! many npm packages are not working with nextjs but work with CRA, or other frameworks

[smurrayatwork]

For anyone else that's trying to use this with dart sass' js implementation for things like @use support and sass modules, if you have -any- other node module that has a dependency on node-sass, the default next setup will use node-sass instead of sass. Locally I've fixed it by doing the following:

// example next.config.js
module.exports = {
webpack(config, options) {
  config.module.rules.forEach(rule => {
          if (rule.oneOf) {
            const nestedScss = rule.oneOf.find((one) => {
              return one.test
                && 'some.scss'.match(one.test) 
                && one.issuer 
                && one.issuer.include 
                && one.issuer.include.includes('_app');
            });
            if (nestedScss) {
              const sassLoader = nestedScss.use.find(u => u.loader.includes('sass-loader'));
              // Set implementation to sass instead of node-sass here.
              sassLoader.options.implementation = require('sass');
            }
          }
        })
  }
}

You'll then need to import your scss files in _app.js.

[x5engine]

@smurrayatwork this is hacking not coding sorry

[salazarm]

Also the restriction on it being exclusively _app.js is a little cumbersome.

If we're not going to support CSS references everywhere then could we make it so CSS can also be referenced by direct dependencies of _app (that are not referenced anywhere else)?
ie. It's fine if it's required by _app (and nowhere else) which would give the CSS a deterministic order based off imports.

It's not ideal however the use case I have is that I have is one codebase shared by multiple applications that import a shared module which imports shared CSS. I'd hate to duplicate those shared CSS imports in _app.js for every application. Currently to get around that I'd have to do some fancy js metaprogramming because we can't require css in other modules.

Instead I would like my current approach to work which is I have an "App Factory" which imports all the shared CSS. _app then uses the factory and imports its own CSS on top of the shared ones.

[theogravity]

I'm adding #13991 as I think it relates to this issue.