CSS Order is different when extractCSS is used

AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 2 years 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 2 years 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 2 years 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 2 years ago

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

1
nmfzone
5
nmfzone
commented a year ago

Still..

0
manniL
7.1k
manniL
commented a year ago

@nmfzone even with latest nuxt-edge?

0
nmfzone
5
nmfzone
commented a year 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
7.1k
manniL
commented a year ago

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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year ago

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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year 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
7.1k
manniL
commented a year ago

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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year 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
7.1k
manniL
commented a year 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 a year 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 a year ago

Anything new to this problem?

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year 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 a year 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
7.1k
manniL
commented a year 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 a year ago

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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year 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
7.1k
manniL
commented a year ago

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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year ago

@manniL sure

0
manniL
7.1k
manniL
commented a year ago

Closing here as the initial issue seems to be gone.

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year 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 a year 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 a year ago

Any updates regarding this issue?

0
mrleblanc101
0
mrleblanc101
commented a year 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 a year 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 a year ago

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

0
poweron707
0
poweron707
commented a year 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 a year 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 a year 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
7.1k
manniL
commented a year ago
0
trylovetom
0
trylovetom
commented 10 months ago

@manniL same here,

0
ScriptedAlchemy
0
ScriptedAlchemy
commented 10 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 10 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 10 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 10 months ago

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

0
ScriptedAlchemy
0
ScriptedAlchemy
commented 10 months ago

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

0
rnenjoy
5
rnenjoy
commented 8 months 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
szafran89
0
szafran89
commented 7 months ago

I have the same issue, any solution? Thanks in advance!

0
trylovetom
0
trylovetom
commented 7 months ago

my workround, use node-sass, sass-loader replace extractCSS

Install Dep.
yarn add node-sass sass-loader --dev

Your Style

<style lang="scss">
...
</style>
0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 6 months ago

@trylovetom I don't understand how scss correlate with extractCSS? I use sass-loader and node-sass and still have same issue

0
ortonomy
0
ortonomy
commented 5 months ago

@trylovetom -- this isn't a solution.

How did you incorporate sass-loader? did you add a custom webpack config?

0
kirosc
0
kirosc
commented 4 months ago

@trylovetom I don't understand how scss correlate with extractCSS? I use sass-loader and node-sass and still have same issue

Same here. My mobile version scss code goes before the desktop version but the other way around in the development environment.

0
tegola
0
tegola
commented 4 months ago

Same issue here, using Next 2.10.2. I've read all threads related to this issue and I still don't understand what's causing the different extraction order.

I'm trying to keep 1-level selectors, and in the example below the component css is applied after the override in the page (thus is red) because the page css is loaded first.

// component.vue
<template>
    <div class="my-component">
    ...
    </div>
</template>

<style>
.my-component {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
// page.vue
<template>
    <div class="my-page">
        <my-component class="my-page__component" />
    </div>
</template>

<style>
.my-page__component {
    background-color: blue;
}
</style>
// build.css
.my-page__component {
    background-color: blue;
}
.my-component {
    width: 100px;
    height: 100px;
    background-color: red; /* winning rule (wrong) */
}
0
sanasus
0
sanasus
commented 4 months ago

Та же проблема здесь, используя Next 2.10.2. Я прочитал все темы, связанные с этой проблемой, и я до сих пор не понимаю, что вызывает другой порядок извлечения.

Я пытаюсь сохранить одноуровневые селекторы, и в приведенном ниже примере компонент css применяется после переопределения на странице (таким образом, красного цвета), потому что сначала загружается css страницы.

// component.vue
 < template > 
    < div  class = " my-component " >
    ...
    </ div > 
</ template >

< стиль > 
. my-component {
     ширина : 100 пикселей ;
    высота : 100 пикселей ;
    цвет фона : красный;
}
</ style >
// page.vue
 < template > 
    < div  class = " my-page " > 
        < my-component  class = " my-page__component " />
     </ div > 
</ template >

< стиль > 
. my-page__component {
     background-color : blue;
}
</ style >

I have exactly the same problem. The import order and so on do not affect this, if I extract everything in 1 css file, then there is no such error, but the console is full of warnings.

0
mateuszs
0
mateuszs
commented 4 months ago

up +1. Any solutions?

@sanasus @tegola

0
fvonellerts
0
fvonellerts
commented 4 months ago

I had the same issue when importing my global SCSS in layouts/default.vue instead of adding it to the css Array in nuxt.config.js.

0
tegola
0
tegola
commented 4 months ago

up +1. Any solutions?

I haven't found any except using page-scoped styles or two-level selectors.

0
fsumedia
0
fsumedia
commented 3 months ago

Same issue here - just leaving in dev mode for the time being

0
stouch
0
stouch
commented 2 months ago

Same here ….

0
p-moreira
0
p-moreira
commented 2 months ago

Same too.

  • import the global CSS in nuxtconfig.js

extractCSS = false:
- DEV mode: all is ok
- PRODUCTION mode: wrong styling is applied

extractCSS = true:
- all is ok in DEV and in PRODUCTION

0
mayurwish
0
mayurwish
commented a month ago

Same here
Development mode: Css & Scss loads well
Production mode: fail to load some css & scss even though package.json includes node-sass, sass-loader & @nuxtjs/style-resources

0
clarkdo
14.5k
clarkdo
commented a month ago

Can anyone who has the issue please provide minimum reproducible test repo?

We'll try to figure out what's root cause in extract-css-plugin.

0
tegola
0
tegola
commented a month ago

Can anyone who has the issue please provide minimum reproducible test repo?

Here you go:
https://github.com/tegola/nuxt-css-order-test-case

0
Informations
Bug ReportOpen
#c8052 - Created 2 years ago