From 99137d0895e2ee3f1694fdd4d074b7103337342c Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 23 Sep 2020 20:17:19 +0800
Subject: [PATCH 1/2] fix: shouldn't remove attribute quotes in HTML

Fixes #5896

It's also recommended to enable this option with caution in the
html-minifier documentation:
<http://perfectionkills.com/experimenting-with-html-minifier/#remove_attribute_quotes>
---
 packages/@vue/cli-service/lib/config/app.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@vue/cli-service/lib/config/app.js b/packages/@vue/cli-service/lib/config/app.js
index f940b4ad8c..08f4346806 100644
--- a/packages/@vue/cli-service/lib/config/app.js
+++ b/packages/@vue/cli-service/lib/config/app.js
@@ -121,7 +121,6 @@ module.exports = (api, options) => {
         minify: {
           removeComments: true,
           collapseWhitespace: true,
-          removeAttributeQuotes: true,
           collapseBooleanAttributes: true,
           removeScriptTypeAttributes: true
           // more options:

From 641ec1be83367e6ebee5917e84b082de777fced9 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 24 Sep 2020 15:02:22 +0800
Subject: [PATCH 2/2] test: update corresponding tests for attribute quotes

---
 .../__tests__/pwaPlugin.spec.js               | 10 +--
 .../@vue/cli-service/__tests__/build.spec.js  | 14 ++--
 .../@vue/cli-service/__tests__/cors.spec.js   |  6 +-
 .../cli-service/__tests__/modernMode.spec.js  | 28 ++++----
 .../cli-service/__tests__/multiPage.spec.js   | 68 +++++++++----------
 5 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js b/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
index 070be9e4a7..1f349b9416 100644
--- a/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
+++ b/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
@@ -30,16 +30,16 @@ test('pwa', async () => {
   const index = await project.read('dist/index.html')
 
   // should split and preload app.js & vendor.js
-  expect(index).toMatch(/<link [^>]+js\/app[^>]+\.js rel=preload as=script>/)
-  expect(index).toMatch(/<link [^>]+js\/chunk-vendors[^>]+\.js rel=preload as=script>/)
+  expect(index).toMatch(/<link [^>]+js\/app[^>]+\.js" rel="preload" as="script">/)
+  expect(index).toMatch(/<link [^>]+js\/chunk-vendors[^>]+\.js" rel="preload" as="script">/)
   // should preload css
-  expect(index).toMatch(/<link [^>]+app[^>]+\.css rel=preload as=style>/)
+  expect(index).toMatch(/<link [^>]+app[^>]+\.css" rel="preload" as="style">/)
 
   // PWA specific directives
-  expect(index).toMatch(`<link rel=manifest href=/manifest.json>`)
+  expect(index).toMatch(`<link rel="manifest" href="/manifest.json">`)
   // favicon is not minified because it's technically a comment
   expect(index).toMatch(`<!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->`)
-  expect(index).toMatch(`<meta name=apple-mobile-web-app-capable content=no>`)
+  expect(index).toMatch(`<meta name="apple-mobile-web-app-capable" content="no">`)
 
   // should import service worker script
   const main = await project.read('src/main.js')
diff --git a/packages/@vue/cli-service/__tests__/build.spec.js b/packages/@vue/cli-service/__tests__/build.spec.js
index 070d29a559..85948f1217 100644
--- a/packages/@vue/cli-service/__tests__/build.spec.js
+++ b/packages/@vue/cli-service/__tests__/build.spec.js
@@ -28,19 +28,19 @@ test('build', async () => {
 
   const index = await project.read('dist/index.html')
   // should split and preload app.js & vendor.js
-  expect(index).toMatch(/<link [^>]+js\/app[^>]+\.js rel=preload as=script>/)
-  expect(index).toMatch(/<link [^>]+js\/chunk-vendors[^>]+\.js rel=preload as=script>/)
+  expect(index).toMatch(/<link [^>]+js\/app[^>]+\.js" rel="preload" as="script">/)
+  expect(index).toMatch(/<link [^>]+js\/chunk-vendors[^>]+\.js" rel="preload" as="script">/)
   // should preload css
-  expect(index).toMatch(/<link [^>]+app[^>]+\.css rel=preload as=style>/)
+  expect(index).toMatch(/<link [^>]+app[^>]+\.css" rel="preload" as="style">/)
 
   // should inject scripts
-  expect(index).toMatch(/<script src=\/js\/chunk-vendors\.\w{8}\.js>/)
-  expect(index).toMatch(/<script src=\/js\/app\.\w{8}\.js>/)
+  expect(index).toMatch(/<script src="\/js\/chunk-vendors\.\w{8}\.js">/)
+  expect(index).toMatch(/<script src="\/js\/app\.\w{8}\.js">/)
   // should inject css
-  expect(index).toMatch(/<link href=\/css\/app\.\w{8}\.css rel=stylesheet>/)
+  expect(index).toMatch(/<link href="\/css\/app\.\w{8}\.css" rel="stylesheet">/)
 
   // should reference favicon with correct base URL
-  expect(index).toMatch(/<link rel=icon href=\/favicon.ico>/)
+  expect(index).toMatch(/<link rel="icon" href="\/favicon.ico">/)
 
   const port = await portfinder.getPortPromise()
   server = createServer({ root: path.join(project.dir, 'dist') })
diff --git a/packages/@vue/cli-service/__tests__/cors.spec.js b/packages/@vue/cli-service/__tests__/cors.spec.js
index 411cd2d2bd..9bd62d02d8 100644
--- a/packages/@vue/cli-service/__tests__/cors.spec.js
+++ b/packages/@vue/cli-service/__tests__/cors.spec.js
@@ -30,9 +30,9 @@ test('build', async () => {
   // expect(index).toMatch(/<link [^>]+app[^>]+\.css rel=preload as=style crossorigin>/)
 
   // should apply crossorigin and add integrity to scripts and css
-  expect(index).toMatch(/<script src=\/js\/chunk-vendors\.\w{8}\.js crossorigin integrity=sha384-.{64}\s?>/)
-  expect(index).toMatch(/<script src=\/js\/app\.\w{8}\.js crossorigin integrity=sha384-.{64}\s?>/)
-  expect(index).toMatch(/<link href=\/css\/app\.\w{8}\.css rel=stylesheet crossorigin integrity=sha384-.{64}\s?>/)
+  expect(index).toMatch(/<script src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
+  expect(index).toMatch(/<script src="\/js\/app\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
+  expect(index).toMatch(/<link href="\/css\/app\.\w{8}\.css" rel="stylesheet" crossorigin integrity="sha384-.{64}\s?">/)
 
   // verify integrity is correct by actually running it
   const port = await portfinder.getPortPromise()
diff --git a/packages/@vue/cli-service/__tests__/modernMode.spec.js b/packages/@vue/cli-service/__tests__/modernMode.spec.js
index c6b6d146da..96fe90edc6 100644
--- a/packages/@vue/cli-service/__tests__/modernMode.spec.js
+++ b/packages/@vue/cli-service/__tests__/modernMode.spec.js
@@ -31,17 +31,17 @@ test('modern mode', async () => {
   // assert correct asset links
   const index = await project.read('dist/index.html')
 
-  // should use <script type="module" crossorigin=use-credentials> for modern bundle
-  expect(index).toMatch(/<script type=module src=\/js\/chunk-vendors\.\w{8}\.js>/)
-  expect(index).toMatch(/<script type=module src=\/js\/app\.\w{8}\.js>/)
+  // should use <script type="module" crossorigin="use-credentials"> for modern bundle
+  expect(index).toMatch(/<script type="module" src="\/js\/chunk-vendors\.\w{8}\.js">/)
+  expect(index).toMatch(/<script type="module" src="\/js\/app\.\w{8}\.js">/)
 
-  // should use <link rel="modulepreload" crossorigin=use-credentials> for modern bundle
-  expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js rel=modulepreload as=script>/)
-  expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js rel=modulepreload as=script>/)
+  // should use <link rel="modulepreload" crossorigin="use-credentials"> for modern bundle
+  expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js" rel="modulepreload" as="script">/)
+  expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js" rel="modulepreload" as="script">/)
 
   // should use <script nomodule> for legacy bundle
-  expect(index).toMatch(/<script src=\/js\/chunk-vendors-legacy\.\w{8}\.js nomodule>/)
-  expect(index).toMatch(/<script src=\/js\/app-legacy\.\w{8}\.js nomodule>/)
+  expect(index).toMatch(/<script src="\/js\/chunk-vendors-legacy\.\w{8}\.js" nomodule>/)
+  expect(index).toMatch(/<script src="\/js\/app-legacy\.\w{8}\.js" nomodule>/)
 
   // should inject Safari 10 nomodule fix
   const { safariFix } = require('../lib/webpack/ModernModePlugin')
@@ -52,12 +52,12 @@ test('modern mode', async () => {
   const { stdout: stdout2 } = await project.run('vue-cli-service build --modern')
   expect(stdout2).toMatch('Build complete.')
   const index2 = await project.read('dist/index.html')
-  // should use <script type="module" crossorigin=use-credentials> for modern bundle
-  expect(index2).toMatch(/<script type=module src=\/js\/chunk-vendors\.\w{8}\.js crossorigin=use-credentials>/)
-  expect(index2).toMatch(/<script type=module src=\/js\/app\.\w{8}\.js crossorigin=use-credentials>/)
-  // should use <link rel="modulepreload" crossorigin=use-credentials> for modern bundle
-  expect(index2).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js rel=modulepreload as=script crossorigin=use-credentials>/)
-  expect(index2).toMatch(/<link [^>]*js\/app\.\w{8}\.js rel=modulepreload as=script crossorigin=use-credentials>/)
+  // should use <script type="module" crossorigin="use-credentials"> for modern bundle
+  expect(index2).toMatch(/<script type="module" src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin="use-credentials">/)
+  expect(index2).toMatch(/<script type="module" src="\/js\/app\.\w{8}\.js" crossorigin="use-credentials">/)
+  // should use <link rel="modulepreload" crossorigin="use-credentials"> for modern bundle
+  expect(index2).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js" rel="modulepreload" as="script" crossorigin="use-credentials">/)
+  expect(index2).toMatch(/<link [^>]*js\/app\.\w{8}\.js" rel="modulepreload" as="script" crossorigin="use-credentials">/)
 
   // start server and ensure the page loads properly
   const port = await portfinder.getPortPromise()
diff --git a/packages/@vue/cli-service/__tests__/multiPage.spec.js b/packages/@vue/cli-service/__tests__/multiPage.spec.js
index c85e2c4f65..eac322ed82 100644
--- a/packages/@vue/cli-service/__tests__/multiPage.spec.js
+++ b/packages/@vue/cli-service/__tests__/multiPage.spec.js
@@ -109,62 +109,62 @@ test('build w/ multi page', async () => {
 
   const assertSharedAssets = file => {
     // should split and preload vendor chunk
-    expect(file).toMatch(/<link [^>]*js\/chunk-vendors[^>]*\.js rel=preload as=script>/)
-    expect(file).toMatch(/<script [^>]*src=\/js\/chunk-vendors\.\w+\.js>/)
+    expect(file).toMatch(/<link [^>]*js\/chunk-vendors[^>]*\.js" rel="preload" as="script">/)
+    expect(file).toMatch(/<script [^>]*src="\/js\/chunk-vendors\.\w+\.js">/)
   }
 
   const index = await project.read('dist/index.html')
   assertSharedAssets(index)
   // should split and preload common js and css
-  expect(index).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js rel=preload as=script>/)
-  expect(index).toMatch(/<script [^>]*src=\/js\/chunk-common\.\w+\.js>/)
-  expect(index).toMatch(/<link href=\/css\/chunk-common\.\w+\.css rel=stylesheet>/)
-  expect(index).toMatch(/<link [^>]*chunk-common[^>]*\.css rel=preload as=style>/)
+  expect(index).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js" rel="preload" as="script">/)
+  expect(index).toMatch(/<script [^>]*src="\/js\/chunk-common\.\w+\.js">/)
+  expect(index).toMatch(/<link href="\/css\/chunk-common\.\w+\.css" rel="stylesheet">/)
+  expect(index).toMatch(/<link [^>]*chunk-common[^>]*\.css" rel="preload" as="style">/)
   // should preload correct page file
-  expect(index).toMatch(/<link [^>]*js\/index[^>]*\.js rel=preload as=script>/)
-  expect(index).not.toMatch(/<link [^>]*js\/foo[^>]*\.js rel=preload as=script>/)
-  expect(index).not.toMatch(/<link [^>]*js\/bar[^>]*\.js rel=preload as=script>/)
+  expect(index).toMatch(/<link [^>]*js\/index[^>]*\.js" rel="preload" as="script">/)
+  expect(index).not.toMatch(/<link [^>]*js\/foo[^>]*\.js" rel="preload" as="script">/)
+  expect(index).not.toMatch(/<link [^>]*js\/bar[^>]*\.js" rel="preload" as="script">/)
   // should prefetch async chunk js and css
-  expect(index).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css rel=prefetch>/)
-  expect(index).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js rel=prefetch>/)
+  expect(index).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
+  expect(index).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
   // should load correct page js
-  expect(index).toMatch(/<script [^>]*src=\/js\/index\.\w+\.js>/)
-  expect(index).not.toMatch(/<script [^>]*src=\/js\/foo\.\w+\.js>/)
-  expect(index).not.toMatch(/<script [^>]*src=\/js\/bar\.\w+\.js>/)
+  expect(index).toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
+  expect(index).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
+  expect(index).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js">/)
 
   const foo = await project.read('dist/foo.html')
   assertSharedAssets(foo)
   // should preload correct page file
-  expect(foo).not.toMatch(/<link [^>]*js\/index[^>]*\.js rel=preload as=script>/)
-  expect(foo).toMatch(/<link [^>]*js\/foo[^>]*\.js rel=preload as=script>/)
-  expect(foo).not.toMatch(/<link [^>]*js\/bar[^>]*\.js rel=preload as=script>/)
+  expect(foo).not.toMatch(/<link [^>]*js\/index[^>]*\.js" rel="preload" as="script">/)
+  expect(foo).toMatch(/<link [^>]*js\/foo[^>]*\.js" rel="preload" as="script">/)
+  expect(foo).not.toMatch(/<link [^>]*js\/bar[^>]*\.js" rel="preload" as="script">/)
   // should not prefetch async chunk js and css because it's not used by
   // this entry
-  expect(foo).not.toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css rel=prefetch>/)
-  expect(foo).not.toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js rel=prefetch>/)
+  expect(foo).not.toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
+  expect(foo).not.toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
   // should load correct page js
-  expect(foo).not.toMatch(/<script [^>]*src=\/js\/index\.\w+\.js>/)
-  expect(foo).toMatch(/<script [^>]*src=\/js\/foo\.\w+\.js>/)
-  expect(foo).not.toMatch(/<script [^>]*src=\/js\/bar\.\w+\.js>/)
+  expect(foo).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
+  expect(foo).toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
+  expect(foo).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js">/)
 
   const bar = await project.read('dist/bar.html')
   assertSharedAssets(bar)
   // bar & index have a shared common chunk (App.vue)
-  expect(bar).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js rel=preload as=script>/)
-  expect(bar).toMatch(/<script [^>]*src=\/js\/chunk-common\.\w+\.js>/)
-  expect(bar).toMatch(/<link href=\/css\/chunk-common\.\w+\.css rel=stylesheet>/)
-  expect(bar).toMatch(/<link [^>]*chunk-common[^>]*\.css rel=preload as=style>/)
+  expect(bar).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js" rel="preload" as="script">/)
+  expect(bar).toMatch(/<script [^>]*src="\/js\/chunk-common\.\w+\.js">/)
+  expect(bar).toMatch(/<link href="\/css\/chunk-common\.\w+\.css" rel="stylesheet">/)
+  expect(bar).toMatch(/<link [^>]*chunk-common[^>]*\.css" rel="preload" as="style">/)
   // should preload correct page file
-  expect(bar).not.toMatch(/<link [^>]*js\/index[^>]*\.js rel=preload as=script>/)
-  expect(bar).not.toMatch(/<link [^>]*js\/foo[^>]*\.js rel=preload as=script>/)
-  expect(bar).toMatch(/<link [^>]*js\/bar[^>]*\.js rel=preload as=script>/)
+  expect(bar).not.toMatch(/<link [^>]*js\/index[^>]*\.js" rel="preload" as="script">/)
+  expect(bar).not.toMatch(/<link [^>]*js\/foo[^>]*\.js" rel="preload" as="script">/)
+  expect(bar).toMatch(/<link [^>]*js\/bar[^>]*\.js" rel="preload" as="script">/)
   // should prefetch async chunk js and css
-  expect(bar).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css rel=prefetch>/)
-  expect(bar).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js rel=prefetch>/)
+  expect(bar).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
+  expect(bar).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
   // should load correct page js
-  expect(bar).not.toMatch(/<script [^>]*src=\/js\/index\.\w+\.js>/)
-  expect(bar).not.toMatch(/<script [^>]*src=\/js\/foo\.\w+\.js>/)
-  expect(bar).toMatch(/<script [^>]*src=\/js\/bar\.\w+\.js>/)
+  expect(bar).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
+  expect(bar).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
+  expect(bar).toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js">/)
 
   // assert pages work
   const port = await portfinder.getPortPromise()