fix(compiler-sfc): fix missing whitespace issue in srcsets (#3132)

fix #3069

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
index 377d6a38763c7fa2b8adc613af880d8dca100176..52e8140c7f3d3189e7ab5b6b475b2ded30333cba 100644 (file)
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
@@ -6,13 +6,13 @@ import _imports_0 from './logo.png'
 
 
 const _hoisted_1 = _imports_0
-const _hoisted_2 = _imports_0 + '2x'
-const _hoisted_3 = _imports_0 + '2x'
-const _hoisted_4 = _imports_0 + ', ' + _imports_0 + '2x'
-const _hoisted_5 = _imports_0 + '2x, ' + _imports_0
-const _hoisted_6 = _imports_0 + '2x, ' + _imports_0 + '3x'
-const _hoisted_7 = _imports_0 + ', ' + _imports_0 + '2x, ' + _imports_0 + '3x'
-const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + '2x'
+const _hoisted_2 = _imports_0 + ' 2x'
+const _hoisted_3 = _imports_0 + ' 2x'
+const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
+const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
+const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
+const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
+const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + ' 2x'
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(_Fragment, null, [
@@ -132,16 +132,16 @@ import _imports_1 from '/logo.png'
 
 
 const _hoisted_1 = _imports_0
-const _hoisted_2 = _imports_0 + '2x'
-const _hoisted_3 = _imports_0 + '2x'
-const _hoisted_4 = _imports_0 + ', ' + _imports_0 + '2x'
-const _hoisted_5 = _imports_0 + '2x, ' + _imports_0
-const _hoisted_6 = _imports_0 + '2x, ' + _imports_0 + '3x'
-const _hoisted_7 = _imports_0 + ', ' + _imports_0 + '2x, ' + _imports_0 + '3x'
-const _hoisted_8 = _imports_1 + ', ' + _imports_1 + '2x'
-const _hoisted_9 = \\"https://example.com/logo.png\\" + ', ' + \\"https://example.com/logo.png\\" + '2x'
-const _hoisted_10 = _imports_1 + ', ' + _imports_0 + '2x'
-const _hoisted_11 = \\"data:image/png;base64,i\\" + '1x, ' + \\"data:image/png;base64,i\\" + '2x'
+const _hoisted_2 = _imports_0 + ' 2x'
+const _hoisted_3 = _imports_0 + ' 2x'
+const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
+const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
+const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
+const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
+const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
+const _hoisted_9 = \\"https://example.com/logo.png\\" + ', ' + \\"https://example.com/logo.png\\" + ' 2x'
+const _hoisted_10 = _imports_1 + ', ' + _imports_0 + ' 2x'
+const _hoisted_11 = \\"data:image/png;base64,i\\" + ' 1x, ' + \\"data:image/png;base64,i\\" + ' 2x'
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(_Fragment, null, [

diff --git a/packages/compiler-sfc/src/templateTransformSrcset.ts b/packages/compiler-sfc/src/templateTransformSrcset.ts
index ae7ad55005e4d9adf6633e2b2bde521b4aaa7024..91b5e4767f2bd5d3e5270e27c3dfeaa4adf8ea2b 100644 (file)
--- a/packages/compiler-sfc/src/templateTransformSrcset.ts
+++ b/packages/compiler-sfc/src/templateTransformSrcset.ts
@@ -131,9 +131,9 @@ export const transformSrcset: NodeTransform = (
             }
             const isNotLast = imageCandidates.length - 1 > index
             if (descriptor && isNotLast) {
-              compoundExpression.children.push(` + '${descriptor}, ' + `)
+              compoundExpression.children.push(` + ' ${descriptor}, ' + `)
             } else if (descriptor) {
-              compoundExpression.children.push(` + '${descriptor}'`)
+              compoundExpression.children.push(` + ' ${descriptor}'`)
             } else if (isNotLast) {
               compoundExpression.children.push(` + ', ' + `)
             }