fix: work around npm6/postcss8 hoisting issue

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

@@ -0,0 +1,31 @@
+const fs = require('fs')
+const path = require('path')
+
+const { semver } = require('@vue/cli-shared-utils')
+
+const cwd = process.cwd()
+
+const userAgent = process.env.npm_config_user_agent
+const usesNpm6 = userAgent && userAgent.startsWith('npm/6.')
+if (!usesNpm6) {
+  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) {
+  const hotfixPath = path.resolve(__dirname, '../generator/hotfix-npm6only.js')
+  const targetPath = path.resolve(__dirname, '../generator/hotfix.js')
+  fs.renameSync(hotfixPath, targetPath)
+}

packages/@vue/cli-service/generator/hotfix-npm6only.js

@@ -0,0 +1,8 @@
+// this file will be renamed to hotfix.js if the package is installed by npm 6
+module.exports = (api) => {
+  api.extendPackage({
+    dependencies: {
+      postcss: '^8.2.6'
+    }
+  })
+}

packages/@vue/cli-service/generator/index.js

@@ -1,3 +1,6 @@
+const fs = require('fs-extra')
+const path = require('path')
+
 module.exports = (api, options) => {
   api.render('./template', {
     doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
@@ -74,4 +77,8 @@ module.exports = (api, options) => {
   if (options.configs) {
     api.extendPackage(options.configs)
   }
+
+  if (fs.existsSync(path.resolve(__dirname, './hotfix.js'))) {
+    require('./hotfix')(api, options, options)
+  }
 }

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",