Styles duplicated across css chunks create source order issues

Bug report

Describe the bug

I have an application that uses a component on multiple pages. When I build the project that component’s styles are duplicated in each of the relevant css page chunks; this creates visual bugs.

For example (some-component, and initial-page-component-override are classes applied to the same element in the DOM on the initial page):

initial-page.chunk.css

// component styles
.some-component { margin-bottom: 10px; }

// page specific override
.initial-page-component-override { margin-bottom: 20px; }

second-page.chunk.css

// component styles
.some-component { margin-bottom: 10px; }

When second-page.chunk.css is added to the DOM the component styles are reapplied over the top of any page specific styles defined in the initial page. The overrides are lost and the incorrect margin is now applied to the component on the initial page. N.B. this is not an issue in dev mode, only in production.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Checkout https://github.com/petewarman/nextjs-css-module-issue
2. npm i, npm run build, npm start
3. Hover the cursor over the lime green button
4. See it change to pink when the second page’s stylesheet is preloaded

Expected behavior

Style declarations should not be duplicated in compiled stylesheets. Component styles should loaded (in their own chunk?) above page specific styles.

System information

• OS: macOS
• Version of Next.js: 9.3.6
• Version of Node.js: 10.16.3

[VictorPivnenko]

Experienced the same issues with next v9.5.1 on prod build, on dev build the styles are ok.

[iksent]

I am having exactly the same problem: https://github.com/zeit/next.js/issues/11946#issuecomment-615298112