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

fix #3069

Author: JonasKruckenberg

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

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(` + ', ' + `)
             }