Further fixes for whitespace handling

Also added a test for srcset.

Author: AndreKR

lib/template-compiler/modules/transform-srcset.js

@@ -10,7 +10,7 @@ module.exports = function () {
 
 function transform (node) {
   const tags = ['img', 'source']
-  
+
   if (tags.indexOf(node.tag) !== -1 && node.attrs) {
     node.attrs.forEach(attr => {
       if (attr.name === 'srcset') {
@@ -22,12 +22,11 @@ function transform (node) {
         }
 
         // http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
-
-        const spaceCharacters = /[ \t\n\f\r]+/
-        const escapedSpaceCharacters = /^([ \t\n\f\r]|\\t|\\n|\\f|\\r)*/
+        const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
 
         const imageCandidates = value.substr(1, value.length - 2).split(',').map(s => {
-          const [url, descriptor] = s.replace(escapedSpaceCharacters, '').split(spaceCharacters, 2)
+          // The attribute value arrives here with all whitespace, except normal spaces, represented by escape sequences
+          const [url, descriptor] = s.replace(escapedSpaceCharacters, ' ').trim().split(' ', 2)
           return { require: urlToRequire(url), descriptor: descriptor }
         })
 
@@ -42,15 +41,14 @@ function transform (node) {
   }
 }
 
-  function urlToRequire (url) {
-  	// same logic as in transform-require.js
-    var firstChar = url.charAt(0)
-    if (firstChar === '.' || firstChar === '~') {
-      if (firstChar === '~') {
-        var secondChar = url.charAt(1)
-        url = '"' + url.slice(secondChar === '/' ? 2 : 1)
-      }
-      return `require("${url}")`
-
+function urlToRequire (url) {
+  // same logic as in transform-require.js
+  var firstChar = url.charAt(0)
+  if (firstChar === '.' || firstChar === '~') {
+    if (firstChar === '~') {
+      var secondChar = url.charAt(1)
+      url = '"' + url.slice(secondChar === '/' ? 2 : 1)
     }
+    return `require("${url}")`
   }
+}

test/fixtures/transform.vue

@@ -4,6 +4,14 @@
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
     <image xlink:href="./logo.png" />
   </svg>
+  <img src="./logo.png" srcset="./logo.png 2x">
+  <img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x">
+  <img
+    src="./logo.png"
+    srcset="
+      ./logo.png 2x,
+      ./logo.png 3x
+  ">
 </div>
 </template>
 

test/test.js

@@ -450,15 +450,25 @@ describe('vue-loader', function () {
         ]
       }
     }, (window, module) => {
-      function includeDataURL (s) {
-        return !!s.match(/\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*/i)
-      }
+	    function includeDataURL (s) {
+		    return !!s.match(/\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*/i)
+	    }
       var vnode = mockRender(module)
       // img tag
       expect(includeDataURL(vnode.children[0].data.attrs.src)).to.equal(true)
       // image tag (SVG)
       expect(includeDataURL(vnode.children[2].children[0].data.attrs['xlink:href'])).to.equal(true)
       var style = window.document.querySelector('style').textContent
+
+      let dataURL = vnode.children[0].data.attrs.src
+
+      // image tag with srcset
+	    expect(vnode.children[4].data.attrs.srcset).to.equal(dataURL + " 2x")
+	    // image tag with srcset with two candidates
+	    expect(vnode.children[6].data.attrs.srcset).to.equal(dataURL + " 2x, " + dataURL + " 3x")
+	    // image tag with multiline srcset
+	    expect(vnode.children[8].data.attrs.srcset).to.equal(dataURL + " 2x, " + dataURL + " 3x")
+
       // style
       expect(includeDataURL(style)).to.equal(true)
       done()