@useinsider/guido 3.9.0-beta.7791f66 → 3.9.0-beta.f67c6c8

package/dist/config/compiler/recommendationCompilerRules.js

@@ -1,16 +1,16 @@
-import { useRecommendation as h } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as N, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as A, CONDITIONS as y, HTML as C } from "../../enums/recommendation.js";
-import { prepareRecommendationBlocks as x } from "./utils/recommendationCompilerUtils.js";
-const w = [
+import { useRecommendation as N } from "../../composables/useRecommendation.js";
+import { DUMMY_IMAGE_MAPPINGS as M, REGEX as d, VerticalOrientation as $, CSS as n, ATTRIBUTES as p, CONDITIONS as T, HTML as g } from "../../enums/recommendation.js";
+import { prepareRecommendationBlocks as O } from "./utils/recommendationCompilerUtils.js";
+const U = [
   {
     id: "replace-images-with-variable-names",
     description: "Replacing dummy images with variable names in recommendation module",
     type: "custom",
-    processor: (c) => {
-      let e = c;
-      return Object.entries(N).forEach(([, l]) => {
-        Object.entries(l).forEach(([n, s]) => {
-          e = e.replaceAll(s, `{{${n}}}`);
+    processor: (o) => {
+      let e = o;
+      return Object.entries(M).forEach(([, r]) => {
+        Object.entries(r).forEach(([t, i]) => {
+          e = e.replaceAll(i, `{{${t}}}`);
         });
       }), e;
     },
@@ -41,21 +41,21 @@ const w = [
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
-    processor: (c) => {
-      const { calculateCardWidth: e, getRecommendationCampaignData: l } = h();
-      let n = c;
-      const s = n.match(T.ID);
-      if (s) {
-        const a = [];
-        if (s.forEach((i) => {
-          const u = /recommendation-id="(.*?)"/i.exec(i), _ = u ? u[1].trim() : "", R = l(_);
-          R.textTrimming && R.orientation === M && a.push(e(R));
-        }), a.length) {
-          const i = `width:${Math.min(...a)}px!important;`;
-          n = n.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
+    processor: (o) => {
+      const { calculateCardWidth: e, getRecommendationCampaignData: r } = N();
+      let t = o;
+      const i = t.match(d.ID);
+      if (i) {
+        const s = [];
+        if (i.forEach((c) => {
+          const m = /recommendation-id="(.*?)"/i.exec(c), E = m ? m[1].trim() : "", u = r(E);
+          u.textTrimming && u.orientation === $ && s.push(e(u));
+        }), s.length) {
+          const c = `width:${Math.min(...s)}px!important;`;
+          t = t.replace(n.REGULAR_NAME_HEIGHT, `${n.TRIMMED_NAME_HEIGHT} ${c} ${n.ELLIPSIS}`).replace(n.REGULAR_NAME_CONTAINER_HEIGHT, n.TRIMMED_NAME_CONTAINER_CSS).replace(n.RESPONSIVE_NAME_SIZE, `${n.RESPONSIVE_NAME_HEIGHT} ${c} ${n.ELLIPSIS}`).replace(n.RESPONSIVE_NAME_CONTAINER_HEIGHT, n.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
         }
       }
-      return n;
+      return t;
     },
     priority: 52
   },
@@ -63,34 +63,34 @@ const w = [
     id: "prepare-recommendations",
     description: "Replacing product data with template variables in recommendation blocks",
     type: "custom",
-    processor: (c) => x(c),
+    processor: (o) => O(o),
     priority: 48
   },
   {
     id: "add-discount-conditions",
     description: "Adding discount conditions to the recommendation block",
     type: "custom",
-    processor: (c) => {
-      let e = c;
-      const l = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = h();
-      return l !== null && l.forEach((s) => {
-        const a = s.match(T.CUSTOM_FIELD);
-        if (!a)
+    processor: (o) => {
+      let e = o;
+      const r = e.match(d.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: t } = N();
+      return r !== null && r.forEach((i) => {
+        const s = i.match(d.CUSTOM_FIELD);
+        if (!s)
           return;
-        const [i] = a, u = i.match(T.CUSTOM_FIELD_INDEXES_PART), _ = i.match(T.CUSTOM_FIELD_NAME_PART), R = s.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
-        if (!u || !_ || !R)
+        const [c] = s, m = c.match(d.CUSTOM_FIELD_INDEXES_PART), E = c.match(d.CUSTOM_FIELD_NAME_PART), u = i.match(d.ATTRIBUTE_PARAGRAPH_START_TAG);
+        if (!m || !E || !u)
           return;
-        const [b] = u, [I] = _, [d] = R, o = I.substring(1, I.length - 2), r = d.match(T.COMPOSITION) !== null;
-        let t = i;
-        if (r) {
-          const S = b.substring(2, b.length - 3), m = n(S);
-          o === A.OMNIBUS_PRICE && (m.priceBeforeTextValue && (t = `${m.priceBeforeTextValue}${t}`), m.priceAfterTextValue && (t = `${t}${m.priceAfterTextValue}`)), o === A.OMNIBUS_DISCOUNT && (m.discountBeforeTextValue && (t = `${m.discountBeforeTextValue}${t}`), m.discountAfterTextValue && (t = `${t}${m.discountAfterTextValue}`));
+        const [A] = m, [I] = E, [R] = u, b = I.substring(1, I.length - 2), S = R.match(d.COMPOSITION) !== null;
+        let a = c;
+        if (S) {
+          const f = A.substring(2, A.length - 3), l = t(f);
+          b === p.OMNIBUS_PRICE && (l.priceBeforeTextValue && (a = `${l.priceBeforeTextValue}${a}`), l.priceAfterTextValue && (a = `${a}${l.priceAfterTextValue}`)), b === p.OMNIBUS_DISCOUNT && (l.discountBeforeTextValue && (a = `${l.discountBeforeTextValue}${a}`), l.discountAfterTextValue && (a = `${a}${l.discountAfterTextValue}`));
         }
-        const p = b.substring(2);
-        let f = "";
-        o in y.IF && (f = y.IF[o].replaceAll(`{${A.DISCOUNT}}`, `${p}${A.DISCOUNT}`).replaceAll(`{${A.OMNIBUS_DISCOUNT}}`, `${p}${A.OMNIBUS_DISCOUNT}`).replaceAll(`{${A.OMNIBUS_PRICE}}`, `${p}${A.OMNIBUS_PRICE}`));
-        const g = `${d}${t}${C.PARAGRAPH_END_TAG}`, $ = `${f}${r ? g : s}${y.ELSE}${d}${C.PARAGRAPH_END_TAG}${y.END_IF}`;
-        e = e.replace(s, $);
+        const _ = A.substring(2);
+        let y = "";
+        b in T.IF && (y = T.IF[b].replaceAll(`{${p.DISCOUNT}}`, `${_}${p.DISCOUNT}`).replaceAll(`{${p.OMNIBUS_DISCOUNT}}`, `${_}${p.OMNIBUS_DISCOUNT}`).replaceAll(`{${p.OMNIBUS_PRICE}}`, `${_}${p.OMNIBUS_PRICE}`));
+        const C = `${R}${a}${g.PARAGRAPH_END_TAG}`, h = `${y}${S ? C : i}${T.ELSE}${R}${g.PARAGRAPH_END_TAG}${T.END_IF}`;
+        e = e.replace(i, h);
       }), e;
     },
     priority: 53
@@ -110,11 +110,11 @@ const w = [
     type: "custom",
     // Scoped to REC_START/REC_END markers so it cannot strip `product-attr`
     // from Items block elements, which the items compiler rule depends on.
-    processor: (c) => {
-      const e = /\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"/g;
-      return c.replace(
+    processor: (o) => {
+      const e = /\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|data-same-price|product-attr|composition)="[^"]*"/g;
+      return o.replace(
         /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
-        (l, n) => `<!--REC_START-->${n.replace(e, "")}<!--REC_END-->`
+        (r, t) => `<!--REC_START-->${t.replace(e, "")}<!--REC_END-->`
       );
     },
     priority: 55
@@ -123,8 +123,8 @@ const w = [
     id: "strip-unused-recommendation-classes",
     description: "Remove CSS classes not referenced by any style rule from recommendation elements",
     type: "custom",
-    processor: (c) => {
-      let e = c.replace(
+    processor: (o) => {
+      let e = o.replace(
         / class="(?:product-card-segment|attribute-cell|recommendation-attribute-row|product-image|product-name|product-price|product-old-price|product-omnibus-price|product-omnibus-discount|product-button|recommendation-product-row|product-card-wrapper)"/g,
         ""
       );
@@ -136,8 +136,8 @@ const w = [
     id: "remove-empty-mobile-layout-artifacts",
     description: "Remove empty mobile container rows and unused mobile layout CSS",
     type: "custom",
-    processor: (c) => {
-      let e = c;
+    processor: (o) => {
+      let e = o;
       return e = e.replace(
         /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
         ""
@@ -146,75 +146,50 @@ const w = [
         ""
       ), e = e.replace(
         /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
-        (l, n) => {
-          const s = n.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
-          return s.every((u) => a.test(u)) ? "" : l;
+        (r, t) => {
+          const i = t.match(/[^{}]+\{[^{}]*\}/g) || [], s = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
+          return i.every((m) => s.test(m)) ? "" : r;
         }
       )), e;
     },
     priority: 57
   },
   {
-    id: "deduplicate-inline-styles",
-    description: "Replace repeated inline styles with CSS class references within recommendation blocks",
+    id: "protect-gmail-button-link-color",
+    // Gmail overrides link colors with `.ii a[href] { color: #15c }`. Force
+    // `!important` on es-button anchor colors so the intended button text color
+    // wins. Kept INLINE (never moved into a <style> class) so it survives Gmail's
+    // clipping — "view entire message" strips <style> blocks but keeps inline styles.
+    // (SD-142395: split out of the removed deduplicate-inline-styles rule.)
+    description: "Force !important on es-button link color to defeat Gmail link-color override",
     type: "custom",
-    processor: (c) => {
-      const e = c.replace(
-        /<a\b[^>]*\bes-button\b[^>]*>/g,
-        (o) => o.replace(
-          /([;"]color:)([^;"]+)/g,
-          (r, t, p) => p.includes("!important") ? r : `${t}${p} !important`
-        )
-      ), l = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, n = / style="([^"]*)"/g, s = /* @__PURE__ */ new Map();
-      let a = l.exec(e);
-      for (; a !== null; ) {
-        let o = n.exec(a[1]);
-        for (; o !== null; ) {
-          const [, r] = o;
-          s.set(r, (s.get(r) || 0) + 1), o = n.exec(a[1]);
-        }
-        n.lastIndex = 0, a = l.exec(e);
-      }
-      const i = /* @__PURE__ */ new Map(), u = [];
-      let _ = 0;
-      if (s.forEach((o, r) => {
-        if (!r.includes("v-text-anchor") && o >= 6) {
-          const t = `rc${_++}`, p = r.endsWith(";") ? r : `${r};`;
-          i.set(r, t), u.push(`.${t}{${p}}`);
-        }
-      }), i.size === 0) {
-        let o = e;
-        return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
-      }
-      const R = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = (o, r) => `${o.slice(0, -1)} ${r}"`, I = /* @__PURE__ */ new Map();
-      i.forEach((o, r) => {
-        const t = R(r);
-        I.set(r, {
-          caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
-          caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
-        });
-      });
-      let d = e.replace("</style>", `${u.join("")}</style>`);
-      return d = d.replace(
-        /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
-        (o, r) => {
-          let t = r;
-          return i.forEach((p, f) => {
-            const g = I.get(f);
-            t = t.replace(
-              g.caseA,
-              ($, S, m) => b(S, p) + m
-            ), t = t.replace(
-              g.caseB,
-              ($, S, m) => S + b(m, p)
-            ), t = t.replaceAll(` style="${f}"`, ` class="${p}"`);
-          }), t;
-        }
-      ), d = d.replaceAll("<!--REC_START-->", ""), d = d.replaceAll("<!--REC_END-->", ""), d;
-    },
+    processor: (o) => o.replace(
+      /<a\b[^>]*\bes-button\b[^>]*>/g,
+      (e) => e.replace(
+        /([;"]color:)([^;"]+)/g,
+        (r, t, i) => i.includes("!important") ? r : `${t}${i} !important`
+      )
+    ),
     priority: 58
+  },
+  {
+    id: "minify-recommendation-whitespace",
+    // SD-142395: shrink the compiled recommendation block to keep emails under
+    // Gmail's ~102KB clip threshold. The editor templates emit deeply-indented
+    // markup that the P48 DOMParser round-trip preserves, and nothing else in the
+    // pipeline minifies it. Scoped to REC_START/REC_END so it only touches
+    // recommendation markup, and strips those markers last (relocated here from the
+    // removed deduplicate-inline-styles rule). Render-critical styles are left inline
+    // rather than classed, so they survive Gmail clipping.
+    description: "Collapse whitespace inside recommendation blocks and strip boundary markers",
+    type: "custom",
+    processor: (o) => {
+      const e = (r) => r.replace(/>\s+</g, "><").replace(/<[^>]+>/g, (t) => t.replace(/\s+/g, " "));
+      return o.replace(/<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, (r, t) => e(t)).replaceAll("<!--REC_START-->", "").replaceAll("<!--REC_END-->", "");
+    },
+    priority: 99
   }
 ];
 export {
-  w as recommendationCompilerRules
+  U as recommendationCompilerRules
 };

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -3,171 +3,183 @@ import { useRecommendation as g } from "../../../composables/useRecommendation.j
 import { CSS_CLASS_RECO_BUTTON as q } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
 import { useRecommendationExtensionStore as C } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
 import { isIgnoredRecommendationBlock as w } from "./recommendationIgnoreUtils.js";
-function h(r, n, e, o, c = "") {
-  const i = `{{${c}${r}_${n}_${e}}}`, t = `{{${c}${r}_${n}_currency}}`;
-  return o === "before" ? `${t} ${i}` : `${i} ${t}`;
+function f(t, o, e, n, s = "") {
+  const i = `{{${s}${t}_${o}_${e}}}`, r = `{{${s}${t}_${o}_currency}}`;
+  return n === "before" ? `${r} ${i}` : `${i} ${r}`;
 }
-function f(r) {
-  let n = r;
-  for (; n.children.length === 1; )
-    [n] = n.children;
-  return n;
+function m(t) {
+  let o = t;
+  for (; o.children.length === 1; )
+    [o] = o.children;
+  return o;
 }
-function A(r, n, e, o, c, i) {
-  switch (n) {
+function h(t, o, e, n, s, i) {
+  switch (o) {
     case "productImage": {
-      const t = r.querySelector("img");
-      t && (t.setAttribute("src", `{{${i}${e}_${o}_image_url}}`), t.setAttribute("alt", `{{${i}${e}_${o}_name}}`));
-      const s = r.querySelector("a");
-      s && (s.setAttribute("href", `{{${i}${e}_${o}_url}}`), s.classList.add(q));
+      const r = t.querySelector("img");
+      r && (r.setAttribute("src", `{{${i}${e}_${n}_image_url}}`), r.setAttribute("alt", `{{${i}${e}_${n}_name}}`));
+      const c = t.querySelector("a");
+      c && (c.setAttribute("href", `{{${i}${e}_${n}_url}}`), c.classList.add(q));
       break;
     }
     case "productName": {
-      const t = r.querySelector("p");
-      t && (f(t).textContent = `{{${i}${e}_${o}_name}}`);
+      const r = t.querySelector("p");
+      r && (m(r).textContent = `{{${i}${e}_${n}_name}}`);
       break;
     }
     case "productPrice": {
-      const t = r.querySelector("p");
-      t && (f(t).textContent = h(
+      const r = t.querySelector(".product-price p") ?? t.querySelector("p");
+      r && (m(r).textContent = f(
         e,
-        o,
+        n,
         "price",
-        c,
+        s,
+        i
+      ));
+      const c = t.querySelector(".product-old-price p");
+      c && (m(c).textContent = f(
+        e,
+        n,
+        "original_price",
+        s,
         i
       ));
       break;
     }
     case "productOldPrice": {
-      const t = r.querySelector("p");
-      t && (f(t).textContent = h(
+      const r = t.querySelector("p");
+      r && (m(r).textContent = f(
         e,
-        o,
+        n,
         "original_price",
-        c,
+        s,
         i
-      ), t.setAttribute("product-attr", "discount"));
+      ));
       break;
     }
     case "productButton": {
-      const t = r.querySelector("a");
-      t && t.setAttribute("href", `{{${i}${e}_${o}_url}}`);
+      const r = t.querySelector("a");
+      r && r.setAttribute("href", `{{${i}${e}_${n}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
-      const t = r.querySelector(".omnibus-price-value");
-      if (t) {
-        t.textContent = `{{${i}${e}_${o}_omnibus_price}}`;
-        const s = t.closest("p");
-        s && (s.setAttribute("product-attr", "omnibus_price"), s.setAttribute("composition", "true"));
+      const r = t.querySelector(".omnibus-price-value");
+      if (r) {
+        r.textContent = `{{${i}${e}_${n}_omnibus_price}}`;
+        const c = r.closest("p");
+        c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
       }
       break;
     }
     case "productOmnibusDiscount": {
-      const t = r.querySelector(".omnibus-discount-value");
-      if (t) {
-        t.textContent = `{{${i}${e}_${o}_omnibus_discount}}`;
-        const s = t.closest("p");
-        s && (s.setAttribute("product-attr", "omnibus_discount"), s.setAttribute("composition", "true"));
+      const r = t.querySelector(".omnibus-discount-value");
+      if (r) {
+        r.textContent = `{{${i}${e}_${n}_omnibus_discount}}`;
+        const c = r.closest("p");
+        c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
       }
       break;
     }
     default: {
-      const t = r.getAttribute("product-attr") ? r : r.querySelector("[product-attr]");
-      if (t) {
-        const s = t.getAttribute("product-attr"), a = t.querySelector("p");
-        a && (f(a).textContent = `{{${i}${e}_${o}_${s}}}`);
+      const r = t.getAttribute("product-attr") ? t : t.querySelector("[product-attr]");
+      if (r) {
+        const c = r.getAttribute("product-attr"), l = r.querySelector("p");
+        l && (m(l).textContent = `{{${i}${e}_${n}_${c}}}`);
       }
       break;
     }
   }
 }
-function E(r, n, e, o) {
-  r.querySelectorAll(".recommendation-product-row").forEach((i, t) => {
-    i.querySelectorAll("[data-attribute-type]").forEach((a) => {
-      const u = a.getAttribute("data-attribute-type") || "", p = a.querySelectorAll(".attribute-cell");
-      p.length > 0 ? p.forEach((l) => {
-        A(l, u, n, t, e, o);
-      }) : A(a, u, n, t, e, o);
+function E(t, o, e, n) {
+  t.querySelectorAll(".recommendation-product-row").forEach((i, r) => {
+    i.querySelectorAll("[data-attribute-type]").forEach((l) => {
+      const u = l.getAttribute("data-attribute-type") || "", p = l.querySelectorAll(".attribute-cell");
+      p.length > 0 ? p.forEach((a) => {
+        h(a, u, o, r, e, n);
+      }) : h(l, u, o, r, e, n);
     });
   });
 }
-function R(r, n, e, o) {
-  const c = r.querySelectorAll(".recommendation-product-row");
-  if (!c.length)
+function P(t, o, e, n) {
+  const s = t.querySelectorAll(".recommendation-product-row");
+  if (!s.length)
     return;
-  const [i] = c, t = i.querySelector("[data-attribute-type]"), s = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  c.forEach((a, u) => {
-    a.querySelectorAll("[data-attribute-type]").forEach((l) => {
-      const m = l.getAttribute("data-attribute-type") || "";
-      l.querySelectorAll(".attribute-cell").forEach((y, $) => {
-        const S = u * s + $;
-        A(y, m, n, S, e, o);
+  const [i] = s, r = i.querySelector("[data-attribute-type]"), c = r ? r.querySelectorAll(".attribute-cell").length : 1;
+  s.forEach((l, u) => {
+    l.querySelectorAll("[data-attribute-type]").forEach((a) => {
+      const d = a.getAttribute("data-attribute-type") || "";
+      a.querySelectorAll(".attribute-cell").forEach((A, $) => {
+        const S = u * c + $;
+        h(A, d, o, S, e, n);
       });
     });
   });
 }
-function P(r, n, e, o) {
-  r.querySelectorAll(".ins-recommendation-product-container").forEach((i) => {
-    R(i, n, e, o);
+function R(t, o, e, n) {
+  t.querySelectorAll(".ins-recommendation-product-container").forEach((i) => {
+    P(i, o, e, n);
   });
 }
-function T(r, n, e) {
-  const o = r.getAttribute("data-layout") || "grid", c = r.getAttribute("currency-alignment") || "after";
-  o === "list" ? E(r, n, c, e) : P(r, n, c, e);
+function v(t, o, e) {
+  const n = t.getAttribute("data-layout") || "grid", s = t.getAttribute("currency-alignment") || "after";
+  n === "list" ? E(t, o, s, e) : R(t, o, s, e);
+}
+function b(t, o, e) {
+  const n = new RegExp(`${o}\\s*:\\s*(\\d+)\\s*px`, "i"), s = t.match(n);
+  return s ? parseInt(s[1]) : e;
 }
-function b(r, n, e) {
-  const o = new RegExp(`${n}\\s*:\\s*(\\d+)\\s*px`, "i"), c = r.match(o);
-  return c ? parseInt(c[1]) : e;
+function O(t) {
+  const o = t.trim();
+  return o.endsWith("%") ? parseFloat(o) < 100 : /^\d+(?:px)?$/.test(o) && parseInt(o) > 0;
 }
-function v(r, n) {
-  let e = r.parentElement;
-  for (; e && e !== n; ) {
+function T(t, o) {
+  let e = t.parentElement;
+  for (; e && e !== o; ) {
     if (e.tagName === "TD") {
-      const o = e.getAttribute("width");
-      if (o && o.endsWith("%") && parseFloat(o) < 100)
+      const n = e.getAttribute("width");
+      if (n && O(n))
         return e;
     }
     e = e.parentElement;
   }
   return null;
 }
-function O(r) {
-  const n = r.getAttribute("style") || "", e = b(n, "width", 600), o = b(n, "padding", 0) * 2, c = Math.max(0, e - o);
-  c !== 0 && r.querySelectorAll("img.adapt-img").forEach((i) => {
+function W(t) {
+  const o = t.getAttribute("style") || "", e = b(o, "width", 600), n = b(o, "padding", 0) * 2, s = Math.max(0, e - n);
+  s !== 0 && t.querySelectorAll("img.adapt-img").forEach((i) => {
     if (i.hasAttribute("width"))
       return;
-    const t = v(i, r);
-    if (!t)
+    const r = T(i, t);
+    if (!r)
       return;
-    const s = t.getAttribute("width"), a = parseFloat(s), u = b(t.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(c * a / 100), l = Math.max(1, p - u);
-    i.setAttribute("width", String(l));
-    const m = i.getAttribute("style") || "";
-    if (!/\bwidth\s*:\s*\d/i.test(m)) {
-      const d = m && !m.trim().endsWith(";") ? "; " : "";
-      i.setAttribute("style", `${m}${d}width: ${l}px`);
+    const c = r.getAttribute("width"), l = b(r.getAttribute("style") || "", "padding", 0) * 2, u = c.trim().endsWith("%") ? Math.floor(s * parseFloat(c) / 100) : parseInt(c), p = Math.max(1, u - l);
+    i.setAttribute("width", String(p));
+    const a = i.getAttribute("style") || "";
+    if (!/\bwidth\s*:\s*\d/i.test(a)) {
+      const d = a && !a.trim().endsWith(";") ? "; " : "";
+      i.setAttribute("style", `${a}${d}width: ${p}px`);
     }
   });
 }
-function W(r, n) {
-  const e = r.match(/<!DOCTYPE[^>]*>/i);
+function B(t, o) {
+  const e = t.match(/<!DOCTYPE[^>]*>/i);
   return (e ? `${e[0]}
-` : "") + n.documentElement.outerHTML;
+` : "") + o.documentElement.outerHTML;
 }
-function F(r) {
-  const n = r.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(n, "text/html"), o = e.querySelectorAll(".recommendation-block-v2");
-  if (!o.length)
-    return r;
-  const { buildCampaignUrl: c } = g(), i = C();
+function G(t) {
+  const o = t.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(o, "text/html"), n = e.querySelectorAll(".recommendation-block-v2");
+  if (!n.length)
+    return t;
+  const { buildCampaignUrl: s } = g(), i = C();
   i.recommendationCampaignUrls = {};
-  const { isFeatureEnabled: t } = _(), s = t("liquidSyntax") ? "reco_" : "";
-  return o.forEach((u) => {
-    var l, m;
+  const { isFeatureEnabled: r } = _(), c = r("liquidSyntax") ? "reco_" : "";
+  return n.forEach((u) => {
+    var a, d;
     const p = u.getAttribute("recommendation-id");
-    p && ((l = u.parentNode) == null || l.insertBefore(e.createComment("REC_START"), u), (m = u.parentNode) == null || m.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((d) => d.remove()), c(p), w(u) || T(u, p, s), O(u));
-  }), W(n, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+    p && ((a = u.parentNode) == null || a.insertBefore(e.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((y) => y.remove()), s(p), w(u) || v(u, p, c), W(u));
+  }), B(o, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
-  h as formatPriceVariable,
-  F as prepareRecommendationBlocks
+  f as formatPriceVariable,
+  G as prepareRecommendationBlocks
 };