CSS Order is different when extractCSS is used

[AndrewBogdanovTSS]

Version

2.2.0

Reproduction link

https://github.com/AndrewBogdanovTSS/nuxt-css-order

Steps to reproduce

• Clone the repo
• $ nuxt build
• $ nuxt start

What is expected ?

Swiper active control has orange color and positioned at the bottom http://take.ms/UsNSR

What is actually happening?

Swiper active control has blue color and has a shift of 10px
http://take.ms/ZDjz0

Additional comments?

This issue is happening due to a fact that order of extracted css files is wrong when extractCSS is in use.
vendors.css is placed after app.css this is causing vendor styles to override stylesheets defined by the user
http://take.ms/ynVEVK
http://take.ms/D8FH9

_{This bug report is available on Nuxt community (#c8052)}

[manniL]

Likely related: webpack-contrib/mini-css-extract-plugin#202

[bjunc]

I noticed this as well. It messes with styling when the selector order is what determines specificity. For instance, we use tiny reset. That should be the very first CSS loaded, but in our case (when using extractCSS), it wasn't – making extractCSS completely unusable.

[AndrewBogdanovTSS]

@bjunc yes. As I was mentioning above vendors.css is placed after your.css in the generated index.html and that's what causing all of the issues!

[nmfzone]

I also experiencing this issue. Any solution on this? @Atinux
It's very important to notice.

[stale]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[nmfzone]

Still..

[manniL]

@nmfzone even with latest nuxt-edge?

[manniL]

Looks like it's fixed (https://codesandbox.io/s/github/AndrewBogdanovTSS/nuxt-css-order/tree/master/)

[nmfzone]

@manniL Sorry for coming late. I'm not using Nuxt Edge, because it's production environment. So, I must update/upgrade the Vue to make it works?

[manniL]

@nmfzone Updating Vue should be fine, yes (yarn upgrade or npm update)

[AndrewBogdanovTSS]

I checked it on my projects and I can confirm that the bug is fixed! Thanks @manniL

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[AndrewBogdanovTSS]

This issue reappeared on version 2.3.4, also was able to reproduce it on Nuxt-edge aka 2.4
Repro link: https://codesandbox.io/s/qqp1wq28yw
Additional screenshot from a real world project:
https://monosnap.com/file/pbTr2qlW2Y5GByq2RoV3y3Mlmytrg4
as you can see app.css is linked twice and the second time it's linked after pages.css that should be last in a list of css linkages.
Correct order:

1. vendors.css
2. app.css
3. pages.css
   No duplicates should be present

[manniL]

@AndrewBogdanovTSS Any chance that you could track down the commit that broke it? 🤔

[AndrewBogdanovTSS]

@manniL I will look for it, though as far as I remember @pi0 was writing about some updates regarding mini-css-extract-plugin in the latest releases. I think it should definitely be related to mini-css-extract-plugin

[manniL]

@AndrewBogdanovTSS That'd be great!

We switched to https://github.com/webpack-contrib/extract-text-webpack-plugin in the mean time ☺️

And the fix came with one of the Vue release IIRC.

[manniL]

@AndrewBogdanovTSS maybe webpack-contrib/extract-text-webpack-plugin#586 🤔

[AndrewBogdanovTSS]

@manniL yes, it may be related as at least 5 more issues I saw when I was looking for some kind of a solution to this problem :)

[thomasaull]

Anything new to this problem?

[Everkers]

I have the same issue in production : (

[clarkdo]

@tegola I've looked into your repo, it looks the issue is related to vue-loader:

1. In dev mode, vue-loader will ignore styles returned from ssr and re-added them as components loading order (pages/index -> MyComponent) in browser side, so you can see correct background-color
2. In prod mode, vue-loader will attach style injecting to beforeCreate hook of vue component. In Vue, beforeCreate and created of the parent run first, so beforeCreate of pages/index will be executed before MyComponent and style of pages/index is injected before MyComponent

I found that there already has some discussions in vue-loader: vuejs/vue-loader#808 (comment) vuejs/vue-loader#521 , I'll talk to team and try to figure a proper solution for it.

[Everkers]

Fixed by updating our nuxtjs version to the latest one😃

[evgeniy-logvinov]

I have the same issue, and it is not solved by last version of nuxt js(2.13.3)

[tegola]

I've just upgraded the test case to nuxt 2.14 and I cannot confirm it's fixed. The issue is still there.

[devilstars]

up. same issue here. nuxt 2.14.1

[victorgarciaesgi]

When I set extractCss: true, all my css is deleted in production mode

[ghost]

I don't understand why this issue was closed despite all the reports of it still happening, after just one comment by someone whose project got fixed with no notes or reproduction example.

This is still a very real problem.

Would @Atinux or someone from the Nuxt team care to reopen this so it can be tracked and hopefully fixed?

[mjmnagy]

I don't understand why this issue was closed despite all the reports of it still happening, after just one comment by someone whose project got fixed with no notes or reproduction example.

This is still a very real problem.

Would @Atinux or someone from the Nuxt team care to reopen this so it can be tracked and hopefully fixed?

Unfortunately, it was @Atinux who closed it -- CSS is important and if it isn't right the entire app can be F'd. Renders nuxt irrelevant IMO. Can't get the basics right then it might be time to move on(2 year old problem is...)

[Atinux]

Can you please take a look at this answer: #4219 (comment)

And see if the issue does not come from this?

[kyriediculous]

@Atinux prod and dev should be deterministic for this specific case so no

[rwam]

Hi @Atinux, well it seems it's related with #4219 (comment) but the advice to increase the css specifity from vuejs/vue-loader#808 (comment) is about three and a half years old and there exists no other solution to fix that? Because vuejs/vue-loader#808 was closed and the issue exists furthermore.

[gmirmand]

Is there any news about this problem? I am in nuxt 2.14.12 and I still have the problem in production mode (run generate)

DEV

PRODUCTION

[darrenchiu]

I am still seeing this issue with nuxt 2.15.3, any workaround or quick fix that I can try?

[alexmalkin]

I have been trying to explain this issue to Vue developers for years.

I know this is Nuxt but the root issue comes from something in Vue's webpack setup.

The C is CSS stands for cascading, and order is important, so this is a big deal.

[alexmalkin]

I have this problem because I have a global CSS reset and plugin CSS which must come before any components/pages.

Example:

css: [
	// Reset, global properties etc.
	'@/assets/scss/main.scss',
	// Plugin CSS
	'croppie/croppie.css',
	'tippy.js/dist/tippy.css'
]

Expected output:

main.scss styles - **first**
plugin styles
component/page/layout styles (in any order)

The default nuxt setup with inline styles outputs the correct order, with these files getting output before my pages/layouts, but with extractCSS enabled, the order is very wrong, with pages CSS coming first.

I also hope no devs will reply with 'just use important' because that is not what you should be doing for resets and base CSS.

[AndrewBogdanovTSS]

@alexmalkin I can reply with "don't use extractCSS" 🙂 But I guess this is also not the thing you want to hear. Among other stuff, this issue with the order is what made me switch to TailwindCSS in my workflow and I don't regret it ever since. Maybe you should try it too?

[davidlung]

The issue with extractCSS -> wrong CSS order still exists and has not been fixed according to the last merge.
NUXT - v2.15.8

[dumptyd]

The issue still persists.

In my very specific case, this started happening when I used an auto-imported button component in my default layout. From that point onwards, all of my button styles were being imported before the normalize styles and this broke all the buttons in my app.

The solution was to add the button component (among others) to the components[].ignore option in my nuxt config and manually importing and registering them as global components. This fixes the issue because the ordering is defined predictably by you.

Relevant snippets

nuxt.config.js

 plugins: [
    '~/components/my-global-components/init.js',
  ],
  components: [
    {
      path: '~/components',
      ignore: ['./my-global-components/*/**.{vue,js}']
    }
  ],

/components/my-global-components/init.js

import Vue from 'vue';
import Button from './button';

export default (context, inject, ...args) => {
  Vue.component('my-button', Button);
};

[AndrewBogdanovTSS]

@dumptyd disabling nuxt/components is not a solution, maybe you could log a bug at https://github.com/nuxt/components/issues ?