Allow importing CSS modules from other NPM packages

Feature request

Allow importing CSS modules from other NPM packages.

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

An NPM package is the primitive of code sharing. Therefore monorepo is very common to split the domain into separate NPM packages. It feels very wrong when we can’t import React components.

It should be possible to import CSS files from packages that follow the CSS modules convention *.module.(css|scss) because Next.js ensures already that CSS Modules are side-effect free.

The current solution forces me:

• Handle my private packages as “global-CSS”
• Pre-compile all my components to not have a CSS import statement.

Current error:

error - ./node_modules/react-modern-calendar/dist/esm/components/Calendar/index.module.css
CSS Modules cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-modules-npm

Additional context

Next.js: 9.4.2

[lauriskuznecovs]

I really appreciate that many things are new bundle in Next.js by default, but there are some cases which really blocks development.

Referring to this documentation, it should work if we import css from our component, instead of dependency importing it inside node_modules

Example:

• My next app > Component A > Dependency A (react-bootstrap) - WORKS

// _app.js
import 'bootstrap/dist/css/bootstrap.css'

// Component A
import Button from 'react-bootstrap/Button';

• My next app > Component A > Dependency A > Dependency B (react-bootstrap) - DOES NOT WORK

// _app.js
import 'Dependency-A/styles.css'

// Component A
import Button from 'my-custom-ui-lib/Button';

// Dependency A
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.css'
// My custom logic which makes some new component out of Bootstrap Buttons

[arshaw]

I would very much like Next to support css modules for third-party libs, but I’ll hold off on expressing why. I just want to comment on the .module.css naming issue for now.

This sort of reminds me of the .js versus .mjs debate… how a file extension for essentially the same format changes the way in which others interpret it. .mjs was at least championed by the Node.js team, but as for interpreting a CSS file as either a local module or global, I can’t imagine any organization declaring a standard. It’s more a responsibility of the bundlers, and if any bundler was going to create a defacto standard for this, it would be Webpack…

…well it turns out Webpack already seems to have settled upon the .module.css extension. Take a look at the docs for the css-loader: https://webpack.js.org/loaders/css-loader/#auto . If you configure modules:true the modules{auto:true} is implied, which results in any filenames matching /\.module\.\w+$/i being interpreted as a local CSS modules.

I would kindly ask the Next team to consider going along with this standard! It would make my life as a third-party UI-based CSS-enabled package maintainer much easier!