Next.js: Duplicated styles creates a source order issue when importing CSS modules from node_modules using next-transpile-modules

[petewarman]

I have a nextjs application that has a dependency on a react component library (a first party library) that uses CSS modules to manage styling. I'm passing that library through next-transpile-modules in my next.config.js as suggested here: https://github.com/zeit/next.js/blob/master/errors/css-modules-npm.md

The problem is that if a component from the library is used on more than one page in my application that library component's styles are duplicated in each pages' generated CSS file. This leads to an unpredictable source order (depending on which page loads first) and therefore visual bugs because of the way the styling cascade works.

To Reproduce

I've created a reduced test case:
Nextjs app: https://github.com/petewarman/nextjs-css-module-issue
Component lib: https://github.com/petewarman/demo-component-lib

1. checkout the Next app repo and npm i, npm run build and then npm start
2. visit localhost:3000
3. notice that the button styles change on hover

What seems to be happening

The shared components styles are duplicated in both the generated files in .next/static/css. When the cursor hovers over the link nextjs prefetches the styles for '/another-page' and adds them to the DOM. This results in an incorrect CSS order like this:

// component lib style (present in the homepage css)
.button { background: black; }

// homepage-specific override styling (present in the homepage css)
.button { background: red; }

// component lib style (present in another-page's css)
.button { background: black; }

Expected behavior

The styles for the shared components should be added to the application above page specific styles, and not be duplicated across pages.

[iksent]

Any updates on this?
Just can't use Next.js in production due to this bug.
My problem: https://github.com/zeit/next.js/issues/11946#issuecomment-615298112
@Timer @timneutkens

[petewarman]

I've tested against next 9.3.6-canary.16 and the issue still exists. NB this is an issue with production builds so won't be fixed by https://github.com/zeit/next.js/pull/11901

[petewarman]

I've done some further investigation and this issue isn't isn't related to shared component libs or next-transpile-modules. I've created a new issue with a simplified explanation of the problem so will close this one. See https://github.com/zeit/next.js/issues/12343