CSS Modules styles defined in wrong order in development mode

[jensmeindertsma]

Bug report

Describe the bug

In development mode, when a page imports styles from a .module.css file ( import styles from "./home.module.css" ) and then imports another component after that ( import { Container } from "../components/Container" ), and passes the imported styles to the component like <Container className={styles.blue}>, these styles get overriden by the imported component. This component has it's own styles and passes the className prop to a DOM element:

import styles from "./Container.module.css";

function classes(...classNames) {
  const joined = classNames.join(' ');
  return joined;
}

export const Container = ({
  children,
  className= "",
}) => {
  return (
    <div className={classes(styles.container, className)}>
	 {children}
    </div>
  );
};

The Container has the following style:

.container {
	background-color: yellow;
}

But the page provides the following style:

.blue {
	background-color: blue;
}

In development, the styles are injected into the head as follows:

<style>
.index_blue__3Iu-s {
	background-color: blue;
}
</style>
<style>
.Container_container__1UmhU {
	background-color: yellow;
}
</style>

In production, these styles are combined into one stylesheet:

.Container_container__1UmhU {
    background-color: #ff0
}

.index_blue__3Iu-s {
    background-color: #00f
}

As you can see, there is a difference in order. This causes the inconsistency across environments with CSS ( yellow in development, blue in production ).

I believe that the production result is the correct one, as you should be able to override the component styles.

I'd be happy to try to contribute to a fix. However, I am a beginner developer so I might need some guidance.

To Reproduce

Clone my reproduction repository and run npm run dev to see the styles applied incorrectly, and run npm run build; npm run start to see that the styles work as intended.

Expected behavior

I would expect that in both development and production mode the classes get defined in the same order so that the styles are applied correctly.

System information

• OS: Windows 10
• Browser: Chrome 81.0.4044.138
• Version of Next.js: 9.4.1
• Version of Node.js: 12.16.1

More information

The style tags are injected by the code in this file. It uses style-loader in development and the MiniCssExtractPlugin in production. What is the reason as to why it isn't used in development mode?

_NEXT-1386

[jensmeindertsma]

@Timer I rewrote the issue as it wasn't that clear previously.

[jensmeindertsma]

Even moving the import to the bottom of the file doesn't work perfectly, because changing the component className still moves that class below the page styles.

I'd be happy to work on this, but I need some direction. I tried using MiniCssExtractPlugin that's already used in production also for development mode but that causes some errors too. Could someone explain why there is a different approach to styles across development and production mode? @Timer

[petewarman]

I think the order of the imports matters - in the example page you have

import styles from "./index.module.css";
import { Container } from "../components/Container";

So I would expect the source order of the compiled css to be

1. page styles
2. component styles

Therefore in your example the component style should override the page styles and the background should be yellow. ie. the dev mode is correct. Worryingly it's the production mode that gets it wrong.

[jensmeindertsma]

@petewarman Moving the styles import to after the component import works, until I modify the component too much (changing the name of the class it applies to the div). Then the styles of the component are re-inserted after the page styles despite the page styles import being the last import in the file

[giuseppeg]

This is likely a generic issue with CSS Modules and not Next.js specific https://twitter.com/giuseppegurgone/status/1084921816030896135
https://twitter.com/giuseppegurgone/status/1166043099900076033

[jensmeindertsma]

You might be right. Although I do still think the loading order should be consistent across environments

[giuseppeg]

fair point

[jensmeindertsma]

Going to keep this open because this is something that Next.js could improve. I'm willing to help work on it.