Skip to content

Commit

Permalink
fix: shouldn't remove attribute quotes in HTML (#5899)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sodatea
sodatea committed Sep 27, 2020
1 parent 5b70fc2 commit eda18b0
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 64 deletions.
10 changes: 5 additions & 5 deletions packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
View file
Expand Up @@ -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')
Expand Down
14 changes: 7 additions & 7 deletions packages/@vue/cli-service/__tests__/build.spec.js
View file
Expand Up @@ -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') })
Expand Down
6 changes: 3 additions & 3 deletions packages/@vue/cli-service/__tests__/cors.spec.js
View file
Expand Up @@ -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()
Expand Down
28 changes: 14 additions & 14 deletions packages/@vue/cli-service/__tests__/modernMode.spec.js
View file
Expand Up @@ -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')
Expand All @@ -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()
Expand Down
68 changes: 34 additions & 34 deletions packages/@vue/cli-service/__tests__/multiPage.spec.js
View file
Expand Up @@ -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()
Expand Down
1 change: 0 additions & 1 deletion packages/@vue/cli-service/lib/config/app.js
View file
Expand Up @@ -121,7 +121,6 @@ module.exports = (api, options) => {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
collapseBooleanAttributes: true,
removeScriptTypeAttributes: true
// more options:
Expand Down

0 comments on commit eda18b0

Please sign in to comment.