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

Same problem here too :cry:
I described my problem here: https://github.com/zeit/next.js/pull/11901#issuecomment-614644961

Any progress? I still have the same problem and I can't put it into production.
Tested on 9.3.7-canary.9

@EduardoPedrosa
Status: v9.3.7-canary.11 and the problem still persist.

We seem to be having a similar problem with components from a shared component library in our monorepo - any styles in our app that affect those components are overridden by the library styles, despite the fact that the specificity of the styles in our app CSS files is higher and therefore should take precedence. It looks fine in dev mode, just not production :(

(We are using SCSS modules with @zeit/next-sass)

When i was using @zeit/next-sass or @zeit/next-css everything was pretty fine with order, preference and duplicates between chuncks. :thinking:

The real problem to me begins when i updated nextjs to 9.3 and started using css modules.

I tried both 2 methods (next-sass and built-in) - the problem existed in both cases

My Stack:
1) CSS Modules
2) SCSS
3) Dart-Sass with @use imports

Tried a lot of variations and this one works for me (having no styles duplicates):

1) package.json:

"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"next": "9.2.1", (9.4.1 is current)
"node-sass": "npm:[email protected]", (this is dart sass, but can be used default)

2) next.config.js

const path = require('path')
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const withBundleAnalyzer = require('@next/bundle-analyzer')({ // Optional, of course
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(
  withCSS(
    withSass({
      cssModules: true,
      sassLoaderOptions: {
        // Resolving SASS absolute imports
        includePaths: [path.resolve(__dirname, 'src')],
      },
      cssLoaderOptions: {
        importLoaders: 2,
        localIdentName:
          process.env.NODE_ENV === 'production'
            ? '[hash:base64]'
            : '[name]__[local]__[hash:base64:5]',
      },
      webpack(config, options) {
        // Resolving absolute imports
        config.resolve.modules.push(path.join(__dirname, 'src'))

        // Make global styles work
        config.module.rules.forEach(rule => {
          if (rule.test && rule.test.toString().includes('.scss')) {
            rule.rules = rule.use.map(useRule => {
              if (typeof useRule === 'string') {
                return {
                  loader: useRule,
                }
              }

              if (useRule.loader.startsWith('css-loader')) {
                return {
                  oneOf: [
                    {
                      test: new RegExp('.module.scss$'),
                      loader: useRule.loader,
                      options: useRule.options,
                    },
                    {
                      loader: useRule.loader,
                      options: {},
                    },
                  ],
                }
              }
              return useRule
            })
            delete rule.use
          }
        })

        return config
      },
    }),
  ),
)

3) Importing global (not modules) styles like this:

index.scss:

...
@import '~emoji-mart/css/emoji-mart.css';
...

It will be great, if someone try such a configuration, so I can make sure this really works.

I suggest replacing this:

.other-page__component-override { background: pink; }

With this:

.other-page .component-override { background: pink; }

So the page-specific styles only apply on that specific page =).

I'm having trouble with this bug too.
I changed the next-css to built-in css and it happened.
It works in development mode, but it doesn't work in production mode when CSR is used. In SSR, there is no problem.

I use next 9.4.4 with built-in css support and I have this problem too, it happens in production.

Same problem on next 9.4.4. Only in production mode

This happens to our production env on next 9.4.4, and somehow we found a solution.

As using node-sass, we try various options from the doc, and solve this by adding a new sassOptions to next.config.js

module.exports = {
  ...,
  sassOptions: {
    outputStyle: 'expanded',
  },
}

Reference: outputStyle

After checking css classname after next build, this seems to be working.
Hope this helps!

Thanks for sharing @Howard86, tried but it didn't work here. We are using next-css and next-sass on our builds also (not the built-in CSS support from next, and having the same problem described in this issue), and the duplication occurs in classes coming from pure css imported as css-modules, which not come from sass styles

@Howard86 @alexandre-marchina

I am using built-in CSS from next, next 9.4.4 and your solution also dont worked to me. :cry:

i've same problem with antd and next latest 😞

same issue . css load perfect in dev but in product some chunks of css does not load

Same issue here too.

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

This bug makes using css-modules in next.js impossible (cause no one wants to add !important in styles)

This bug makes using css-modules in next.js impossible (cause no one wants to add !important in styles)

You can bump up specificity for the styles that override the basic styles. For instance, let's have components dependency as Button <- IconButton <- MoreSpecificButton. In this case, Button has its own styles that get reloaded when switching to another page and therefore overrides styles from IconButton and MoreSpecificButton. If IconButton has its styles defined as .className.className, and MoreSpecificButton has its styles as .className.className too then Button won't override it. And having the fact that the order of IconButton and MoreSpecificButton styles is correct in css the styles of MoreSpecificButton will always override IconButton - expected.

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

I am experiencing the same issue.

+1 with Tailwind, Bootstrap. Current workaround is to import all the styles via link rel in the _document.js. For Tailwind it is custom css build. This problem is very annoying.

I'm using css modules with tailwind (normal global css import). Inlining css solved the load ordering, but I don't know if it is still duplicating, it's just a workaround. In production, I didn't notice a style overriding another.

https://github.com/vercel/next-plugins/issues/238#issuecomment-432211871

This is fixed on the latest Next.js canary. Please upgrade to next@^9.5.3-canary.7 and let us know!

Doesn't fix it for me, as an example, line heights, font weights, background colors, borders are different in dev and prod.

@talaikis please open a new issue with a fully reproducible demo then! I've tested the exact code given in this reproduction and its working on canary now.

Fix to me, but it causes another more critical problem.
In my case when i change only hash url using Router.push(localhost:3000/#change) coming fromlocalhost:3000` all stylesheets reload again causing the screen blink.

Can you please try 9.5.3-canary.9?

@Timer running npm i:

i had try 9.5.3-canary.9 but its still persist problem with hash.

I didn't mention it, but am using 9.5.2 and when i migrated to 9.5.3-canary.6 there is also an error in devtools console when i use router to change hash like above.
The problem dont exist in 9.5.3-canary.5.

@fabinppk please open a new issue with a reproduction!

Just wanted to confirm the original issue seems to be fixed in 9.5.3-canary.9. Thank you @Timer

Thanks for confirming @petewarman!

@Timer sure. I think your fix its ok and its not related with this problem in devtools.
Thank you. :+1:

Can confirm this is still happening with 9.5.6-canary.11, classes get duplicated across chunks.

@glottonous all problems commented in this issues was solved by timer.

Ps: i am using 9.5.5. 👌👌

@fabinppk I can confirm that the same issue is still happening as of 9.5.6-canary.11.

@glottonous I did some tests on my project with version 9.5.6-canary.11 and I didn't have any problems.

If you are really having a problem, open a new issue by referencing this one. :+1:

in nextjs 10, same issues

Same issues 10.0.1

I've started #19055 with a reproducible demo.