CSS Order is different when extractCSS is used

AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year ago

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

bug
2
bjunc
114
bjunc
commented a year ago

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.

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year ago

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

0
nmfzone
5
nmfzone
commented a year ago

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

1
nmfzone
5
nmfzone
commented 10 months ago

Still..

0
manniL
6.4k
manniL
commented 10 months ago

@nmfzone even with latest nuxt-edge?

0
nmfzone
5
nmfzone
commented 10 months ago

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

0
manniL
6.4k
manniL
commented 10 months ago

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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 10 months ago

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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 9 months ago

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
0
manniL
6.4k
manniL
commented 9 months ago

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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 9 months ago

@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

0
manniL
6.4k
manniL
commented 9 months ago

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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 9 months ago

@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 :)

0
thomasaull
20
thomasaull
commented 9 months ago

Anything new to this problem?

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 8 months ago

I just upgraded my project to Nuxt 2.4.2 / Vue 2.6.2 and it seems that problem is fixed again. Although there is still one strange issue: http://take.ms/G6mzJ
as you can see there is 2 identical records for /_nuxt/app.87370d9c34e5a92a0fb0.css file, both for "preload" and regular link. There should be only 2 references, not 4

0
nmfzone
5
nmfzone
commented 8 months ago

@AndrewBogdanovTSS It's not duplicated, it's the correct behaviour. The first 2 css is preload-ed css. I think it's time to upgrade my Nuxt project 🎉

0
manniL
6.4k
manniL
commented 8 months ago

@nmfzone but it's the same CSS 2x in preload and 2x "normal"
@AndrewBogdanovTSS is it the exact same link?

0
nmfzone
5
nmfzone
commented 8 months ago

@manniL Whoops, my bad 😕 revert comment………..

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 8 months ago

@mannil of course it's exactly the same, that's what I wrote in my comment. Right now what I get in the dev tools is application of the same styles twice. It doesn't change visuals but slows down performance for no good reason

0
manniL
6.4k
manniL
commented 8 months ago

@AndrewBogdanovTSS Could you open file a dedicated issue for it?

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 8 months ago

@manniL sure

0
manniL
6.4k
manniL
commented 8 months ago

Closing here as the initial issue seems to be gone.

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 8 months ago

@manniL could you reopen this issue? I tried deploying several times and discovered that order is still random. Sometimes it works as expected, but other times it's not. The order I'm currently get is:

  1. vendors.css
  2. app.css
  3. pages.css
  4. app.css
    https://take.ms/hyZSH
    that last one shouldn't be there at all and brakes the whole sequence
0
LostCrew
0
LostCrew
commented 8 months ago

We also most certainly experienced the same issue on Nuxt 2.3.4 and nuxt-sass-resources-loader 2.0.5.

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 7 months ago

Any updates regarding this issue?

0
mrleblanc101
0
mrleblanc101
commented 6 months ago

I have this issue, sometime the scoped style are inlined before the Global CSS from nuxt.config.json sometime not.
Why mean selector with the same specificity are not in the same order so my ssr display a green button and my client a blue button.
Capture d’écran, le 2019-04-04 à 13 57 47
Capture d’écran, le 2019-04-04 à 13 57 56

0
poweron707
0
poweron707
commented 6 months ago

I also found similar issue:
In my case: I installed Nuxt v2.6.2 and Vuetify v1.5.12
Case 1: In nuxt.config.js, Add custom theme(theme.styl) and set "extractCSS: false"
case1_setting

Result is that theme.styl is loaded first, default buttons.styl loaded last, so custom style in theme.styl cannot override default button style ;
case1_result

Case 2: In nuxt.config.js, set "extractCSS: true"
case2_setting

case2_result
As you can see, the CSS load order is changed, the default button style can be override; I got confuse whether it is expected result when using extractCSS in build config

0
thomasaull
20
thomasaull
commented 5 months ago

@stale[bot] @poweron707 described a way to reproduce this issue

0
poweron707
0
poweron707
commented 5 months ago
  1. use nuxt with vuetify example https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify
  2. create one styl file like theme.styl and overwrite v-btn style like:
    .v-btn
    text-transform: lowercase
  3. load this file into nuxt.config.js as above captured screens
  4. switch the value of extractCSS
0
clementmas
10
clementmas
commented 5 months ago

I'm having the same issue. I described the problem here: https://github.com/nuxt/nuxt.js/issues/4204#issuecomment-497910208

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 4 months ago

@manniL please, reopen this issue since it's still not fixed.
The only workaround for this issue currently is to specify extractCSS as
extractCSS: process.env.NODE_ENV === 'production'

0
manniL
6.4k
manniL
commented 4 months ago
0
trylovetom
0
trylovetom
commented 3 months ago

@manniL same here,

0
ScriptedAlchemy
0
ScriptedAlchemy
commented 3 months ago

Do you get any order warning errors from webpack? I did see a PR which isn’t exactly related to this issue but does enhance how ordering is Forgive me for not reading the thread fully, is this a dev or production issue.

If development, then I have good news, an upcoming PR improves my work on HMR, specifically around injecting styles. Maybe this will resolve your issue? I can link you to the PR if anyone wants to take a peek

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 3 months ago

@ScriptedAlchemy yes, it's a dev issue. No - no webpack warnings and it's no more an ordering issue, right now the problem is that in DEV mode we got styles ejected from js into separate css files although it should be happening only in production. Please, link to the PR.

0
ScriptedAlchemy
0
ScriptedAlchemy
commented 3 months ago

mini-css HMR is designed to generate actual css files though, just like in production. Only difference is it can hmr those stylesheets.

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/188
https://github.com/webpack-contrib/mini-css-extract-plugin/pull/371

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 3 months ago

@ScriptedAlchemy maybe it can, but that doesn't happening, HMR is not triggering and sourcemaps are broken

0
ScriptedAlchemy
0
ScriptedAlchemy
commented 3 months ago

Hmmm ive seen heard of sourcemaps issue. Ill pull down your reproduction link and take a look.

0
rnenjoy
5
rnenjoy
commented 20 days ago

Im having this issue aswell with the same code ive had before working. Turning off extractCSS gives my css lowest priority vs vuetifys, so mine is overwritten. it has not been like this before."nuxt": "^2.9.2",

0
Informations
Bug ReportOpen
#c8052 - Created a year ago