CSS code splitting break scoped styles philosophy

[pavelda2]

Version

4.2.3

Reproduction link

https://github.com/pavelda2/vue-scoped-styles-issue

Environment info

System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.2.3
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.2.3
    @vue/cli-plugin-babel: 4.1.1 => 4.1.1
    @vue/cli-plugin-eslint: 4.1.1 => 4.1.1
    @vue/cli-plugin-router:  4.2.3
    @vue/cli-plugin-vuex:  4.2.3
    @vue/cli-service: 4.1.1 => 4.1.1
    @vue/cli-shared-utils:  4.2.3
    @vue/component-compiler-utils:  3.1.1
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^6.0.1 => 6.2.1
    vue: ^2.6.11 => 2.6.11
    vue-eslint-parser:  7.0.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.0
    vue-router: 3.1.6 => 3.1.6
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Click "red" link first (Correct, shows red box)
2. Then click "base" link (Correct, shows gray box)
3. Click "red" link again (Wrong, shows gray box instead of red one)

What is expected?

Show red background of the box

What is actually happening?

Show gray background of the box

---

Whole problem is in the packaging scoped CSS of BaseBox twice when build the application. Once for the BaseBoxPage and second time for the RedBoxPage.

When the RedBoxPage is loaded for the first time, styles are applied correctly (class .red-box over .base-box) . But when second route is opened BaseBox styles are downloaded for second time and gets priority over RedBox styles when switch back to the RedBoxPage (class .base-box over .red-box)

[LinusBorg]

This is the consequence of a known and documented shortcoming of the scoped style approach when nesting components and styles of both components get applied to the root element.

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

So

1. it's not caused by Vue CLI - it's inherent to the way scoped styles work
2. If it were to be solved it should be solved at the source. CSS insertion order due to lazy loading cased this specific case, but it not the only possible trigger.

I'll therefore close the issue for this repository as we can't solve the issue here.

The recommendation would be to namespace classes that you apply to root elements.

[zhaoyunyes]

This has always been a problem