build throws "PostCSS plugin autoprefixer requires PostCSS 8" (alpha.6 regression)

[cexbrayat]

Version

5.0.0-alpha.6

Reproduction link

https://github.com/cexbrayat/alpha6-postcss8

Environment info

System:
    OS: macOS 11.2.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.20.1/bin/npm
  Browsers:
    Chrome: 89.0.4389.82
    Edge: Not Found
    Firefox: 85.0.2
    Safari: 14.0.3
  npmPackages:
    @vue/cli-overlay:  5.0.0-alpha.6
    @vue/cli-plugin-router:  5.0.0-alpha.6
    @vue/cli-plugin-unit-jest: ~5.0.0-alpha.6 => 5.0.0-alpha.6
    @vue/cli-plugin-vuex:  5.0.0-alpha.6
    @vue/cli-service: ~5.0.0-alpha.6 => 5.0.0-alpha.6
    @vue/cli-shared-utils:  5.0.0-alpha.6
    @vue/compiler-core:  3.0.7
    @vue/compiler-dom:  3.0.7
    @vue/compiler-sfc: ^3.0.4 => 3.0.7
    @vue/compiler-ssr:  3.0.7
    @vue/component-compiler-utils:  3.2.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.0.7
    @vue/runtime-core:  3.0.7
    @vue/runtime-dom:  3.0.7
    @vue/shared:  3.0.7
    @vue/test-utils: ^2.0.0-0 => 2.0.0-rc.3
    @vue/web-component-wrapper:  1.3.0
    jest-serializer-vue:  2.0.2
    typescript: ~4.1.2 => 4.1.5
    vue: ^3.0.4 => 3.0.7
    vue-hot-reload-api:  2.3.4
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.8 (4.0.1)
    vue-loader:  16.1.2 (15.9.6)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Create a new application with v5.0.0-alpha.6 (or use https://github.com/cexbrayat/alpha6-postcss8)

npx @vue/cli@next create alpha6-postcss8 -m npm --inlinePreset '{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-unit-jest": {}},"vueVersion":"3"}'

Then try to build it

What is expected?

The app builds properly

What is actually happening?

ERROR  Failed to compile with 1 error                                                                                              

 error  in ./src/App.vue?vue&type=style&index=0&id=1de185ca&lang=css

Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

It looks like postcss v8 is not properly installed

npm list postcss

alpha6-postcss8@0.1.0 /Users/ced-pro/Code/test/vue-cli-tests/alpha6-postcss8
├─┬ @vue/cli-service@5.0.0-alpha.6
│ ├─┬ @vue/component-compiler-utils@3.2.0
│ │ └── postcss@7.0.35
│ ├─┬ css-loader@5.1.2
│ │ └── UNMET PEER DEPENDENCY postcss@8.2.8
│ ├─┬ cssnano@4.1.10
│ │ ├─┬ cssnano-preset-default@4.0.7
│ │ │ ├─┬ css-declaration-sorter@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ cssnano-util-raw-cache@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-calc@7.0.5
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-colormin@4.0.3
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-convert-values@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-discard-comments@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-discard-duplicates@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-discard-empty@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-discard-overridden@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-merge-longhand@4.0.11
│ │ │ │ ├── postcss@7.0.35  deduped
│ │ │ │ └─┬ stylehacks@4.0.3
│ │ │ │   └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-merge-rules@4.0.3
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-minify-font-values@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-minify-gradients@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-minify-params@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-minify-selectors@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-charset@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-display-values@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-positions@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-repeat-style@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-string@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-timing-functions@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-unicode@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-url@4.0.1
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-normalize-whitespace@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-ordered-values@4.1.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-reduce-initial@4.0.3
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-reduce-transforms@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ ├─┬ postcss-svgo@4.0.2
│ │ │ │ └── postcss@7.0.35  deduped
│ │ │ └─┬ postcss-unique-selectors@4.0.1
│ │ │   └── postcss@7.0.35  deduped
│ │ └── postcss@7.0.35  deduped
│ └── UNMET PEER DEPENDENCY postcss@8.2.8
└─┬ @vue/compiler-sfc@3.0.7
  └── UNMET PEER DEPENDENCY postcss@8.2.8

npm ERR! peer dep missing: postcss@^8.1.0, required by autoprefixer@10.2.5
npm ERR! peer dep missing: postcss@^8.1.0, required by icss-utils@5.1.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-extract-imports@3.0.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-local-by-default@4.0.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-scope@3.0.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-values@4.0.0
npm ERR! peer dep missing: postcss@^8.0.0, required by postcss-modules@4.0.0

[haoqunjiang]

Looks like an npm 6 package hoisting bug (works in npm 7).

Because postcss 8 is listed as a dependency of @vue/cli-serivce, at the same level as autoprefixer.

vue-cli/packages/@vue/cli-service/package.json

Line 67 in 40e3de2

"postcss": "^8.2.6",

[haoqunjiang]

Workaround: npm i postcss@8

[haoqunjiang]

Seems fixable by bumping cssnano version to v5.0.0-rc.1

[cexbrayat]

@sodatea It looks like, despite the fix, alpha.7 has the same issue with the exact same repro.

npm list poscss gives:

alpha7-postcss8@0.1.0 /Users/ced-pro/Code/test/vue-cli-tests/alpha7-postcss8
├─┬ @vue/cli-service@5.0.0-alpha.7
│ ├─┬ @vue/component-compiler-utils@3.2.0
│ │ └── postcss@7.0.35
│ ├─┬ css-loader@5.1.2
│ │ └── UNMET PEER DEPENDENCY postcss@8.2.8
│ ├─┬ css-minimizer-webpack-plugin@1.2.0
│ │ └─┬ cssnano@4.1.10
│ │   ├─┬ cssnano-preset-default@4.0.7
│ │   │ ├─┬ css-declaration-sorter@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ cssnano-util-raw-cache@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-calc@7.0.5
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-colormin@4.0.3
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-convert-values@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-discard-comments@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-discard-duplicates@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-discard-empty@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-discard-overridden@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-merge-longhand@4.0.11
│ │   │ │ ├── postcss@7.0.35  deduped
│ │   │ │ └─┬ stylehacks@4.0.3
│ │   │ │   └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-merge-rules@4.0.3
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-minify-font-values@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-minify-gradients@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-minify-params@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-minify-selectors@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-charset@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-display-values@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-positions@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-repeat-style@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-string@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-timing-functions@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-unicode@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-url@4.0.1
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-normalize-whitespace@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-ordered-values@4.1.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-reduce-initial@4.0.3
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-reduce-transforms@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ ├─┬ postcss-svgo@4.0.2
│ │   │ │ └── postcss@7.0.35  deduped
│ │   │ └─┬ postcss-unique-selectors@4.0.1
│ │   │   └── postcss@7.0.35  deduped
│ │   └── postcss@7.0.35  deduped
│ └── UNMET PEER DEPENDENCY postcss@8.2.8
└─┬ @vue/compiler-sfc@3.0.7
  └── UNMET PEER DEPENDENCY postcss@8.2.8

and npm list cssnano gives:

alpha7-postcss8@0.1.0 /Users/ced-pro/Code/test/vue-cli-tests/alpha7-postcss8
└─┬ @vue/cli-service@5.0.0-alpha.7
  ├─┬ css-minimizer-webpack-plugin@1.2.0
  │ └── cssnano@4.1.10
  └── cssnano@5.0.0-rc.1

[haoqunjiang]

🤯 It was fixed when I tried that PR locally…

Maybe we do need a postcss dependency in the project root at the moment.