fix: use a postinstall script to fix npm6/postcss8 hoisting issue

Closes vuejs#6342

packages/@vue/cli-service/bin/postinstall.js

@@ -0,0 +1,34 @@
+const fs = require('fs')
+const path = require('path')
+
+const stripAnsi = require('strip-ansi')
+const { execa, semver } = require('@vue/cli-shared-utils')
+
+const cwd = process.cwd()
+
+const usesNpm = fs.existsSync(path.resolve(cwd, './package-lock.json'))
+if (!usesNpm) {
+  process.exit()
+}
+
+const npmVersion = stripAnsi(execa.sync('npm', ['--version']).stdout)
+if (!semver.satisfies(npmVersion, '6.x')) {
+  process.exit()
+}
+
+const pkgPath = path.resolve(cwd, './package.json')
+const pkg = fs.existsSync(pkgPath) ? require(pkgPath) : {}
+const deps = {
+  ...pkg.dependencies,
+  ...pkg.devDependencies,
+  ...pkg.optionalDependencies
+}
+
+let hasPostCSS8 = false
+if (deps.postcss) {
+  hasPostCSS8 = semver.intersects(deps.postcss, '8.x')
+}
+
+if (!hasPostCSS8) {
+  execa.sync('npm', ['install', '--save-dev', '--loglevel', 'error', 'postcss@8'])
+}

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

@@ -7,6 +7,9 @@
   "bin": {
     "vue-cli-service": "bin/vue-cli-service.js"
   },
+  "scripts": {
+    "postinstall": "node bin/postinstall.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuejs/vue-cli.git",
@@ -66,6 +69,7 @@
     "postcss": "^8.2.6",
     "postcss-loader": "^5.0.0",
     "ssri": "^8.0.1",
+    "strip-ansi": "^6.0.0",
     "terser-webpack-plugin": "^5.1.1",
     "thread-loader": "^3.0.0",
     "url-loader": "^4.1.1",