Project on vue-cli with postcss-normalize doesn't work properly

[Yegorich555]

Version

3.8.4

Reproduction link

https://github.com/Yegorich555/FromScratch_VueJs/tree/feature/vuejs-cli/cli_test
The upper link contains a fixed (working) version. But below some explanations of the issue

Environment info

 System:
    OS: Windows 10
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Binaries:
    Node: 11.10.0 - C:\Program Files\nodejs\node.EXE      
    Yarn: Not Found
    npm: 6.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.8.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.8.0
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0
    @vue/cli-plugin-eslint: ^3.8.0 => 3.8.0
    @vue/cli-service: ^3.8.0 => 3.8.4
    @vue/cli-shared-utils:  3.8.0
    @vue/component-compiler-utils:  2.6.0
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-router: ^3.0.3 => 3.0.6
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Create the new default project with vue-cli (sass, postcss must be included)
2. Install postcss-normalize (npm)
3. Add config to postcss.config.js up to the following:

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-normalize": {
      forceImport: true
    }
  }
};

4. Update .browserslistrc to

> 1%
last 10 versions

5. build project

What is expected?

html { /*css-normalize at first */
       line-height: 1.15;
       -ms-text-size-adjust: 100%;
       -webkit-text-size-adjust: 100%
    }
/*there are no scope sections like html[data-v-78977f4a] */
    ...
#app { /*it is after the css-normalize*/
       font-family: Avenir, Helvetica, Arial, sans-serif;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       text-align: center;
       color: #2c3e50
    }

What is actually happening?

 #app {
       font-family: Avenir, Helvetica, Arial, sans-serif;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       text-align: center;
       color: #2c3e50
    }
    ...
    html[data-v-78977f4a] { /***this existense is wrong***/
       line-height: 1.15;
       -ms-text-size-adjust: 100%;
       -webkit-text-size-adjust: 100%
    }
    ...
    html {  /***this should be before #app***/
       line-height: 1.15;
       -ms-text-size-adjust: 100%;
       -webkit-text-size-adjust: 100%
    }
    ...

---

Removing any styles from App.vue fixes this issue - but it's not ok.
Using manual imports in main.js doesn't fix this issue - it's also wrong because the first line with 'import css' should be at first before others styles (after compilation)

Using of an additional style-block with

<style lang="postcss">
@import "normalize";
@import "sanitize";
</style>

(before any other style-blocks in App.vue) and removing forceImport from postcss.config.js
fixes this problem. But it's not ok.

[LinusBorg]

Please provide an runnable reproduction.

[LinusBorg]

From your description it seems the plugin conflicts with SFCs scoped.

Putting it into its own style tag works as you say. Why is that not an ok solution ?

[Yegorich555]

It's not ok solution because we have several ways for using postcss-normalize and just one works. It's not clear and even took me a lot of time for resolving this. I guess it real conflicts with 'scoped' but I can't figure out a perfect universal way for resolving this.

[Yegorich555]

What do you mean in 'runnable reproduction'? I provided link to my git where I tested this behaviour. Could you give me more details about this?

[LinusBorg]

You wrote that the git was "fixed" so it doesn't have the bug/problem, so I assumed I can't use it as a reproducfion of the described issue.

If it it does ahownthe problem when I clo e and run the repository it's fine.

However about my second comment: if you want non-scoped css, don't put your import into a style block that has a scoped attribute.

Put it into a second style block, or into a case file that you import into main.js

[Yegorich555]

Ok. I will provide runnable git link for this issue as soon as possible. But there is no 'scope' attributes at all... That's why I worry about such weird behaviour from postcss and default vue cli project. Putting the 'normalize css block' into main.js doesn't resolve this issue and contains the same bug: css result contains 'scoped' results from postcss-normalize and css-normalize is placed only after style-block from the App.vue.

[Yegorich555]

1. The first issue: https://github.com/Yegorich555/FromScratch_VueJs/tree/vue-postcss-bug
   There is forceImport: true options in postcss.config.js. As a result, we have css-ordering mentioned upper and 2 css-optimize results (scoped and none-scoped).
2. The second issue: https://github.com/Yegorich555/FromScratch_VueJs/tree/vue_postcss-bug2
   There is import "@csstools/normalize.css" (at first) in main.js. As a result, we have an additional file chunk-vendors.[hash].css that is placed in index.html after app.[hash].css. (expected result: chunk-vendors.css should be before app.css). It doesn't look like a bug, but it's not clear enough for me.

[Yegorich555]

I found: this is bug webpack & postcss. The same behavior when we import 2 CSS files into main.js (without any vue-loaders etc.). I'm going to report this to the postcss-team.

[Yegorich555]

The bug is reported: csstools/postcss-normalize#44