fix: adding quotes when necessary for unquoted sources (#247)

Author: evilebottnawi

src/plugins/attribute-plugin.js

@@ -415,15 +415,20 @@ export default (options) =>
       {
         attributesMeta: {},
         onattribute(name, value) {
-          this.attributesMeta[name] = {
-            // eslint-disable-next-line no-underscore-dangle
-            startIndex: parser._tokenizer._index - value.length,
-          };
+          // eslint-disable-next-line no-underscore-dangle
+          const endIndex = parser._tokenizer._index;
+          const startIndex = endIndex - value.length;
+          const unquoted = html[endIndex] !== '"' && html[endIndex] !== "'";
+
+          this.attributesMeta[name] = { startIndex, unquoted };
         },
         onopentag(tag, attributes) {
           Object.keys(attributes).forEach((attribute) => {
             const value = attributes[attribute];
-            const valueStartIndex = this.attributesMeta[attribute].startIndex;
+            const {
+              startIndex: valueStartIndex,
+              unquoted,
+            } = this.attributesMeta[attribute];
 
             // TODO use code frame for errors
 
@@ -458,7 +463,7 @@ export default (options) =>
 
                 const startIndex = valueStartIndex + source.startIndex;
 
-                sources.push({ startIndex, value: source.value });
+                sources.push({ startIndex, value: source.value, unquoted });
               });
 
               return;
@@ -484,7 +489,7 @@ export default (options) =>
 
             const startIndex = valueStartIndex + source.startIndex;
 
-            sources.push({ startIndex, value: source.value });
+            sources.push({ startIndex, value: source.value, unquoted });
           });
 
           this.attributesMeta = {};
@@ -510,7 +515,8 @@ export default (options) =>
     let index = 0;
 
     for (const source of sources) {
-      const uri = parse(source.value);
+      const { value, startIndex, unquoted } = source;
+      const uri = parse(value);
 
       if (typeof uri.hash !== 'undefined') {
         uri.hash = null;
@@ -526,16 +532,17 @@ export default (options) =>
           type: 'attribute',
           replacementName,
           source: decodeURIComponent(source.value),
+          unquoted,
         },
       });
 
       // eslint-disable-next-line no-param-reassign
       html =
-        html.substr(0, source.startIndex + offset) +
+        html.substr(0, startIndex + offset) +
         replacementName +
-        html.substr(source.startIndex + source.value.length + offset);
+        html.substr(startIndex + value.length + offset);
 
-      offset += replacementName.length - source.value.length;
+      offset += replacementName.length - value.length;
       index += 1;
     }
 

src/runtime/getUrl.js

@@ -1,14 +1,14 @@
-module.exports = (url) => {
+module.exports = (url, maybeNeedQuotes) => {
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   url = url && url.__esModule ? url.default : url;
 
   if (typeof url !== 'string') {
     return url;
   }
 
-  // if (/[\t\n\f\r "'=<>`]/.test(url)) {
-  //  return `"${url}"`;
-  // }
+  if (maybeNeedQuotes && /[\t\n\f\r "'=<>`]/.test(url)) {
+    return `"${url}"`;
+  }
 
   return url;
 };

src/utils.js

@@ -71,11 +71,14 @@ export function getExportCode(html, replacers, options) {
   }
 
   for (const replacer of replacers) {
-    const { replacementName } = replacer;
+    const { replacementName, unquoted } = replacer;
 
     exportCode = exportCode.replace(
       new RegExp(replacementName, 'g'),
-      () => `" + ___HTML_LOADER_GET_URL_IMPORT___(${replacementName}) + "`
+      () =>
+        `" + ___HTML_LOADER_GET_URL_IMPORT___(${replacementName}${
+          unquoted ? ', true' : ''
+        }) + "`
     );
   }
 

test/__snapshots__/attributes-option.test.js.snap

@@ -210,3 +210,17 @@ <h2>An Ordered HTML List</h2>
 <script>
   function test() {}
 </script>
+
+<img src=image.png />
+<img src="image image.png" />
+<img src='image image.png' />
+<img src=~aliasImageWithSpace />
+<img srcset=image.png />
+<img srcset="image%20image.png" />
+<img srcset='image%20image.png' />
+<img srcset=~aliasImageWithSpace />
+<img srcset="image.png 480w, image%20image.png 640w, ~aliasImageWithSpace 800w" sizes="(max-width: 600px) 480px, 800px" src="image.png" alt="Elva dressed as a fairy">
+<img src      =       image.png />
+<img src      =      ~aliasImageWithSpace      />
+<img src      =      "~aliasImageWithSpace"      />
+<img src      =      '~aliasImageWithSpace'      />