Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
cexbrayat opened this issue Mar 10, 2021 · 9 comments · Fixed by #6343 or #6358
Closed

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

cexbrayat opened this issue Mar 10, 2021 · 9 comments · Fixed by #6343 or #6358
Labels
bug has workaround upstream

Comments

@cexbrayat
Copy link
Member

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
Copy link
Member

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
Copy link
Member

Workaround: npm i postcss@8

@haoqunjiang
Copy link
Member

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

haoqunjiang added a commit to haoqunjiang/vue-cli that referenced this issue Mar 11, 2021
@haoqunjiang
fix: use cssnano v5.0.0-rc.1, work around a npm 6 hoisting bug
891462d 
Fixes vuejs#6342
@haoqunjiang haoqunjiang mentioned this issue Mar 11, 2021
Merged
9 tasks
haoqunjiang added a commit that referenced this issue Mar 11, 2021
@haoqunjiang
fix: use cssnano v5.0.0-rc.1, work around a npm 6 hoisting bug (#6343)
83de3d8 
Fixes #6342
@cexbrayat
Copy link
Member Author

@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
Copy link
Member

🤯 It was fixed when I tried that PR locally…

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

@haoqunjiang haoqunjiang reopened this Mar 15, 2021
haoqunjiang added a commit to haoqunjiang/vue-cli that referenced this issue Mar 17, 2021
@haoqunjiang
fix: use a postinstall script to fix npm6/postcss8 hoisting issue
3390776 
Closes vuejs#6342
@haoqunjiang haoqunjiang mentioned this issue Mar 17, 2021
Merged
9 tasks
@frankyeyq
Copy link

how to use postcss8 in vue cli 4.5.x?

@haoqunjiang
Copy link
Member

how to use postcss8 in vue cli 4.5.x?

No easy way. I would recommend against doing so.

@samuveth
Copy link

No easy way. I would recommend against doing so.

@sodatea Is there any timeline on when we'll have postcss8 support?

@haoqunjiang
Copy link
Member

haoqunjiang commented Mar 23, 2021 •
edited
Loading

@sodatea Is there any timeline on when we'll have postcss8 support?

Vue CLI v5 alpha has already supported PostCSS 8.

haoqunjiang added a commit that referenced this issue Mar 24, 2021
@haoqunjiang
fix: work around npm6/postcss8 hoisting issue (#6358)
27b4263 
Closes #6342
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug has workaround upstream
Projects
None yet
Milestone
No milestone
4 participants
@cexbrayat @haoqunjiang @frankyeyq @samuveth