Next.js: Styles duplicated across css chunks create source order issues

Created on 30 Apr 2020 · 42Comments · Source: vercel/next.js

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:

Checkout https://github.com/petewarman/nextjs-css-module-issue
npm i, npm run build, npm start
Hover the cursor over the lime green button
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

bug 3

Source

petewarman

👍26

Most helpful comment

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

iksent on 30 Apr 2020

👍8

All 42 comments

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

iksent on 30 Apr 2020

👍8

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

fabinppk on 30 Apr 2020

👍7

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

EduardoPedrosa on 5 May 2020

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

fabinppk on 5 May 2020

👍4

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)

sophiekoonin on 12 May 2020

👍7

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.

fabinppk on 13 May 2020

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

iksent on 14 May 2020

👍7

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.

iksent on 18 May 2020

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 =).

MurkyMeow on 13 Jun 2020

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.

p-chan on 10 Jul 2020

👍4

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

kambala3000 on 10 Jul 2020

👍4

Same problem on next 9.4.4. Only in production mode

GrefriT on 11 Jul 2020

👍5

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!

Howard86 on 15 Jul 2020

👀3 😕3

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

alexandre-marchina on 15 Jul 2020

@Howard86 @alexandre-marchina

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

fabinppk on 16 Jul 2020

👍3

i've same problem with antd and next latest 😞

qipoy on 27 Jul 2020

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

AurangzaibRamzan on 4 Aug 2020

Same issue here too.

bherila on 5 Aug 2020

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

VictorPivnenko on 6 Aug 2020

👍7 👀1

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

marcin-piela-sf on 11 Aug 2020

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.

VictorPivnenko on 11 Aug 2020

👎3 👍2

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.

ysthedood on 11 Aug 2020

👍1

+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.

talaikis on 11 Aug 2020

👍1

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

lucasmogari on 11 Aug 2020

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

Timer on 18 Aug 2020

👍3

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

talaikis on 18 Aug 2020

👍1

@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.

Timer on 18 Aug 2020

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.

fabinppk on 18 Aug 2020

Can you please try 9.5.3-canary.9?

Timer on 18 Aug 2020

👍1

@Timer running npm i:

fabinppk on 18 Aug 2020

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.