From 3390776cea20c82b2326fecb7e7253210c1dcef0 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 17 Mar 2021 09:12:14 +0800 Subject: [PATCH 1/3] fix: use a postinstall script to fix npm6/postcss8 hoisting issue Closes #6342 --- packages/@vue/cli-service/bin/postinstall.js | 34 ++++++++++++++++++++ packages/@vue/cli-service/package.json | 4 +++ 2 files changed, 38 insertions(+) create mode 100644 packages/@vue/cli-service/bin/postinstall.js diff --git a/packages/@vue/cli-service/bin/postinstall.js b/packages/@vue/cli-service/bin/postinstall.js new file mode 100644 index 0000000000..f82c4c0865 --- /dev/null +++ b/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']) +} diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json index 986a0f05c4..2ab793cc51 100644 --- a/packages/@vue/cli-service/package.json +++ b/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", From 42c450d50c1121aa3fd0a739abb86f54e188dd6b Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 18 Mar 2021 15:31:54 +0800 Subject: [PATCH 2/3] refactor: use npm_config_user_agent to tell the running package manager --- packages/@vue/cli-service/bin/postinstall.js | 11 +++-------- packages/@vue/cli-service/package.json | 1 - 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/@vue/cli-service/bin/postinstall.js b/packages/@vue/cli-service/bin/postinstall.js index f82c4c0865..71c061f3a4 100644 --- a/packages/@vue/cli-service/bin/postinstall.js +++ b/packages/@vue/cli-service/bin/postinstall.js @@ -1,18 +1,13 @@ 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')) { +const userAgent = process.env.npm_config_user_agent +const usesNpm6 = userAgent && userAgent.startsWith('npm/6.') +if (!usesNpm6) { process.exit() } diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json index 2ab793cc51..47e8a2ecb3 100644 --- a/packages/@vue/cli-service/package.json +++ b/packages/@vue/cli-service/package.json @@ -69,7 +69,6 @@ "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", From a8f99cb119a4ecd2a11d3e1d51a180a6f05e2154 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 18 Mar 2021 15:42:08 +0800 Subject: [PATCH 3/3] fix: don't install another package in the postinstall hook --- packages/@vue/cli-service/bin/postinstall.js | 6 ++++-- packages/@vue/cli-service/generator/hotfix-npm6only.js | 8 ++++++++ packages/@vue/cli-service/generator/index.js | 7 +++++++ 3 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 packages/@vue/cli-service/generator/hotfix-npm6only.js diff --git a/packages/@vue/cli-service/bin/postinstall.js b/packages/@vue/cli-service/bin/postinstall.js index 71c061f3a4..b134954d1c 100644 --- a/packages/@vue/cli-service/bin/postinstall.js +++ b/packages/@vue/cli-service/bin/postinstall.js @@ -1,7 +1,7 @@ const fs = require('fs') const path = require('path') -const { execa, semver } = require('@vue/cli-shared-utils') +const { semver } = require('@vue/cli-shared-utils') const cwd = process.cwd() @@ -25,5 +25,7 @@ if (deps.postcss) { } if (!hasPostCSS8) { - execa.sync('npm', ['install', '--save-dev', '--loglevel', 'error', 'postcss@8']) + const hotfixPath = path.resolve(__dirname, '../generator/hotfix-npm6only.js') + const targetPath = path.resolve(__dirname, '../generator/hotfix.js') + fs.renameSync(hotfixPath, targetPath) } diff --git a/packages/@vue/cli-service/generator/hotfix-npm6only.js b/packages/@vue/cli-service/generator/hotfix-npm6only.js new file mode 100644 index 0000000000..6141487f06 --- /dev/null +++ b/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' + } + }) +} diff --git a/packages/@vue/cli-service/generator/index.js b/packages/@vue/cli-service/generator/index.js index d5b1c8ae58..643f4abe0c 100644 --- a/packages/@vue/cli-service/generator/index.js +++ b/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) + } }