Merge pull request #1471 from maizzle/fix-baseurl-mso

fix: skip vml tags when replacing sources inside mso comments

Author: cossssmin

src/transformers/baseUrl.js

@@ -103,12 +103,16 @@ const rewriteVMLs = (html, url) => {
    * Handle other sources inside MSO comments
    */
 
-  // Make a | pipe-separated list of all the default tags and use it to create a regex
+  // Make a pipe-separated list of all the default tags and use it to create a regex
   const uniqueSourceAttributes = [
     ...new Set(Object.values(defaultTags).flatMap(Object.keys))
   ].join('|')
 
-  const sourceAttrRegex = new RegExp(`\\b(${uniqueSourceAttributes})="([^"]+)"`, 'g')
+  /**
+   * This regex uses a negative lookbehind to avoid matching VML elements
+   * like <v:image> and <v:fill>, which are already handled above.
+   */
+  const sourceAttrRegex = new RegExp(`(?<!<v:image|fill[^>]*]*)\\b(${uniqueSourceAttributes})="([^"]+)"`, 'g')
 
   // Replace all the source attributes inside MSO comments
   html = html.replace(/<!--\[if [^\]]+\]>[\s\S]*?<!\[endif\]-->/g, (msoBlock) => {

test/expected/base-url.html

@@ -97,7 +97,9 @@
     <![endif]-->
 
     <!--[if mso]>
+    <v:image src="https://example.com/image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
     <v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="f" filled="f" style="mso-width-percent: 1000; position: absolute; top: 256px; left: 128x;">
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
       <v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
         <video src="https://example.com/video.mp4" poster="https://example.com/example.png"></video>
         <div>

test/fixtures/base-url.html

@@ -99,7 +99,9 @@
     <![endif]-->
 
     <!--[if mso]>
+    <v:image src="image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
     <v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="f" filled="f" style="mso-width-percent: 1000; position: absolute; top: 256px; left: 128x;">
+      <v:fill type="tile" src="image.png" color="#7bceeb" />
       <v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
         <video src="video.mp4" poster="example.png"></video>
         <div>