fix parsing error. sveltejs/svelte#4282

Author: jiangfengming

README.md

@@ -120,7 +120,7 @@ filter(path) -> Boolean
 Filter the path. Return `true` to transform, or return `false` to skip the path.
 
 
-### Transform css url()
+## Transform css url()
 Use https://github.com/canadaduane/snowpack-plugin-relative-css-urls
 
 ## License

index.js

@@ -108,46 +108,54 @@ module.exports = ({ rules, filter } = {}) => {
 
   return {
     markup({ content }) {
-      const ast = svelte.parse(content);
-
-      if (ast.html) {
-        let offset = 0;
-
-        svelte.walk(ast.html, {
-          enter(node) {
-            if (node.type === 'Element') {
-              const rulesOfTag = rules.filter(rule => rule.tag === node.name);
-
-              if (rulesOfTag.length) {
-                node.attributes.forEach(attr => {
-                  const rule = rulesOfTag.find(rule => rule.attribute === attr.name);
-
-                  if (
-                    rule &&
-                    attr.value instanceof Array &&
-                    attr.value.length === 1 &&
-                    attr.value[0].type === 'Text'
-                  ) {
-                    const val = attr.value[0];
-
-                    if (rule.type === 'src') {
-                      if (isLocalPath(val.data)) {
-                        ({ content, offset } = replace(content, offset, val.start, val.end, transform(val.data)));
-                      }
-                    } else {
-                      ({ content, offset } = replaceSrcset(content, offset, val.start, val.end, val.data));
-                    }
+      const regex = new RegExp(`<(${[...new Set(rules.map(rule => rule.tag))].join('|')})\\s+[^>]+>`, 'gi');
+      const copy = content;
+      let match;
+      let offset = 0;
+
+      while ((match = regex.exec(copy)) !== null) {
+        const tag = match[0];
+        const base = match.index;
+
+        try {
+          const ast = svelte.parse(tag);
+          const node = ast.html.children[0];
+          const rulesOfTag = rules.filter(rule => rule.tag === node.name);
+
+          if (rulesOfTag.length) {
+            node.attributes.forEach(attr => {
+              const rule = rulesOfTag.find(rule => rule.attribute === attr.name);
+
+              if (
+                rule &&
+                attr.value instanceof Array &&
+                attr.value.length === 1 &&
+                attr.value[0].type === 'Text'
+              ) {
+                const val = attr.value[0];
+
+                if (rule.type === 'src') {
+                  if (isLocalPath(val.data)) {
+                    ({ content, offset } = replace(
+                      content,
+                      offset,
+                      val.start + base,
+                      val.end + base,
+                      transform(val.data))
+                    );
                   }
-                });
+                } else {
+                  ({ content, offset } = replaceSrcset(content, offset, val.start + base, val.end + base, val.data));
+                }
               }
-            }
+            });
           }
-        });
+        } catch (e) {
+          // nop
+        }
       }
 
-      return {
-        code: content
-      };
+      return { code: content };
     }
   };
 };

test.js

@@ -3,6 +3,27 @@ const preprocessor = require('./index.js');
 const content = `
 <img src="./1.png">
 <img src="/2.png">
+
+<img srcset="elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 600px) 480px,
+            800px"
+     src="elva-fairy-800w.jpg"
+     alt="Elva dressed as a fairy">
+
+<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+
+<style>
+p {
+  & b {
+    color: red;
+  }
+}
+</style>
 `;
 
 console.log(preprocessor().markup({ content }).code);