Description
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