Inconsistent css ordering between dev and build

[favoyang]

• I confirm that this is an issue rather than a question.

Bug report

This issue is similar to #643, when overriding default theme, the css order is inconsistent between dev and build. However #643 is solved and closed. So this may be a new issue.

Steps to reproduce

https://github.com/favoyang/netlify-vuepress-test

I've made a minimal reproduced repo

• Create a local theme, which extends from default theme.
• Create a styles/index.styl, which styles paragraph to red.
• Create a styles/custom.scss, which styes paragraph to blue.
• Create a layouts/Layout.vue, which overrides @parent-theme/layouts/Layout.vue, and loads styles/custom.scss in a style tag.
• Create a home page with a few paragraphs for testing.

That's it. Let's try compare yarn docs:dev with yarn docs:build

What is expected?

I would expect in such setup the css order as below (higher overrides lower)

↑ custom.scss (load from layouts/Layout.vue's style tag)
↑ @theme/styles/index.styl
↑ @parent-theme/styles/index.styl

Then in either dev or build, the paragraph will be blue.

What is actually happening?

In dev, the paragraph is blue.

In build, the paragraph is red. (you can also check on https://netlify-vuepress-test.netlify.com/)

It actually doesn't matter which order is correct, but it should be consistent.

Other relevant information

• Then reason to load custom.scss is that I intended to load a 3rd-party css framework in scss format, and use it to override default theme styling.
• Output of npx vuepress info in my VuePress project:

$ npx vuepress info

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-2635QM CPU @ 2.00GHz
  Binaries:
    Node: 10.16.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.329.0
  npmPackages:
    @vuepress/core:  1.1.0
    @vuepress/theme-default:  1.1.0
    vuepress: ^1.1.0 => 1.1.0
  npmGlobalPackages:
    vuepress: Not Found

[favoyang]

Update,

I tried the GlobalLayout approach (code available in the globallayout branch)

• Removed layouts/Layout.vue
• Added layouts/GlobalLayout.vue (copied from official docs), then append the custom.scss at the end.
• Config the layouts/GlobalLayout.vue in theme/index.js as globalLayout.

Try both dev and build, show me a consistent output

Which means the css order as below,

↑ @theme/styles/index.styl
↑ @parent-theme/styles/index.styl
↑ custom.scss (load from layouts/GlobalLayout.vue's style tag)

Well, at least it was consistent this time, but I'm looking for a way to load scss after (override) @theme/styles/index.styl

[favoyang]

Update,

I tried another test, this time even simpler. (code available at no-custom-layout branch)

• No custom layout
• Just one line in styles/index.styl to change navbar title to red.

.navbar .site-name
    color red

In dev mode, the navbar is black, means component style (even it's a component @parent-theme), overrides local theme index.styl, css order as below,

↑ navbar component style (located at @parent-theme/components/Navbar.vue)
↑ @theme/styles/index.styl

In build mode, the navbar is red, means local theme index.style overrides component style @parent-theme, css order as below.

↑ @theme/styles/index.styl
↑ navbar component style (located at @parent-theme/components/Navbar.vue)

The behaviour is inconsistent between dev and build.

[kefranabg]

Not sure, but seems to be a mini-css-extract-plugin bug.

[billyc]

This is hitting me as well; not sure what to add beyond the "me too".

I encounter this with both nodejs 10 and nodejs 12. They layout problems show up for me both in the top nav bar as well as the sidebar background color, which makes the site unreadable. All my style changes are in .vuepress/styles/palette.styl and some of them do get picked up correctly, while others don't.

Here's my vuepress info results (note this is on top of WSL on Windows 10):

Environment Info:

  System:
    OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 12.11.1 - /usr/bin/node
    Yarn: 1.19.1 - /usr/bin/yarn
    npm: 6.11.3 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vuepress/core:  1.2.0
    @vuepress/theme-default:  1.2.0
    vuepress: ^1.2.0 => 1.2.0
  npmGlobalPackages:
    vuepress: Not Found

[ptandler]

I just encounter this as well. I'm glad to see other face this issue as well.

I didn't dig deep into this yet, however it seems that the CSS output is rearanged during build somehow, so @kefranabg assumption could be true.

Is there a way to disable this CSS plugin for a test?
(see my question at https://stackoverflow.com/questions/58977014/how-can-i-disable-the-mini-css-extract-plugin-in-vuepress)

[ptandler]

I tried upgrading mini-css-extract-plugin to the current version 0.8.0, but this didn't change anything.

[pisandelli]

Still a (big) problem... any hope to see a fix for this soon?
I have plenty of !importants in my sass code...

Environment Info:

System:
    OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 13.7.0 - /usr/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.13.6 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 72.0.2
  npmPackages:
    @vuepress/core:  1.2.0 
    @vuepress/theme-default:  1.2.0 
    vuepress: ^1.2.0 => 1.2.0 
  npmGlobalPackages:
    vuepress: Not Found