email-builder-utils 1.1.53 → 1.1.55

package/dist/types/Template.d.ts

@@ -33,6 +33,8 @@ interface IProps {
     shape?: string;
     hideOnDesktop?: boolean;
     hideOnMobile?: boolean;
+    cellWidthUnit?: 'px' | '%';
+    widthUnit?: 'px' | '%';
 }
 interface IStyle {
     [key: string]: any;

package/dist/types/Template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}
+{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,IAAI,GAAG,GAAG,CAAC;IAC3B,SAAS,CAAC,EAAE,IAAI,GAAG,GAAG,CAAC;CACxB;AAED,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}

package/dist/utils/blocks/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAMA,wBAAsB,gBAAgB,CACpC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBA0TtB;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GA0G5B"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAMA,wBAAsB,gBAAgB,CACpC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBA2TtB;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAwG5B"}

package/dist/utils/blocks/grid.js

@@ -9,7 +9,7 @@ const jsonToHTML_1 = require("../jsonToHTML");
 async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const { style = {}, childrenIds = [], props } = blockData.data;
     const { columns = 1, cellWidths = [], responsive = true } = props;
-    const { columnGap = 0, backgroundImage, backgroundColor, ...restStyle } = style;
+    const { columnGap = 0, backgroundImage, backgroundColor, cellWidthUnit, ...restStyle } = style;
     const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
     // Detect gradient — check both backgroundImage prop and customCss (gradient may land in
     // customCss when the block was built via CSS shorthand or custom CSS input).
@@ -64,6 +64,16 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         perChanges: [],
         pxChanges: buildStyles_1.allPxAttributes,
     });
+    // When cellWidthUnit is 'px', convert the stored pixel values to percentage ratios
+    // so the rest of the grid export logic (which works entirely in %) is unchanged.
+    const effectiveCellWidths = (cellWidthUnit || '%') === 'px'
+        ? (() => {
+            const total = cellWidths.reduce((s, w) => s + w, 0);
+            return total > 0
+                ? cellWidths.map((w) => Number(((w / total) * 100).toFixed(2)))
+                : cellWidths.map(() => 100 / columns);
+        })()
+        : cellWidths;
     const total = childrenIds.length;
     const visualRows = Math.ceil(total / columns);
     // OUTLOOK FIX: Use explicit pixel width for Old Outlook (Word engine)
@@ -129,7 +139,7 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         const cellWidthPercents = [];
         for (let c = 0; c < columns; c++) {
             const id = rowIds[c];
-            let widthPercent = cellWidths[c] ?? safeWidth;
+            let widthPercent = effectiveCellWidths[c] ?? safeWidth;
             if (widthPercent <= 0 || widthPercent > 100) {
                 widthPercent = safeWidth;
             }
@@ -157,16 +167,10 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 const visibilityClass = (0, common_1.getVisibilityClass)(childProps);
                 if (childVisible) {
                     const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth, Boolean(divBorderStyle));
-                    // bgcolor on the cell <td> for Old Outlook (Word engine).
-                    // When the cell has no border-radius and the grid has no border, use the grid's
-                    // backgroundColor as the fallback so the grid background shows through empty cells.
-                    // Skipped for border-radius cells — bgcolor is rectangular and would bleed through
-                    // the div's rounded-corner clip in CSS-capable clients (corner squares).
+                    // bgcolor on the cell <td> ensures background-color survives Outlook
+                    // compose paste (Word/Web editors strip CSS but keep bgcolor attribute).
                     const cellBgColor = cellStyle.backgroundColor || '';
-                    const cellHasBorderRadius = Boolean(cellStyle.borderRadius);
-                    const canApplyGridBgFallback = !cellHasBorderRadius && !divBorderStyle;
-                    const effectiveCellBg = cellBgColor || (canApplyGridBgFallback ? msoBgColor : '');
-                    const cellBgAttr = (0, common_1.buildOutlookBgAttr)(effectiveCellBg);
+                    const cellBgAttr = (0, common_1.buildOutlookBgAttr)(cellBgColor);
                     html += `
           <td
             width="${Math.max(1, Math.round(widthPercent))}%"${cellBgAttr}
@@ -179,22 +183,18 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                     // Outlook mobile (which strips <style>) treats it proportionally, not as a fixed blocker.
                     // col-gap-spacer class hides it when columns stack via CSS media query.
                     if (columnGap > 0 && c !== lastVisibleCol) {
-                        const gapBgAttr = divBorderStyle ? '' : (0, common_1.buildOutlookBgAttr)(msoBgColor);
-                        html += `<td width="${columnGap}"${gapBgAttr} class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
+                        html += `<td width="${columnGap}" class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
                     }
                 }
             }
             else {
-                const emptyBgAttr = divBorderStyle ? '' : (0, common_1.buildOutlookBgAttr)(msoBgColor);
                 html += `
         <td width="${Math.max(1, Math.round(widthPercent))}%"
-            ${emptyBgAttr}
             ${responsive ? 'class="stack-column"' : ""}
             style="width:${widthPercent}%;vertical-align:top;">
         </td>`;
                 if (columnGap > 0 && c !== lastVisibleCol) {
-                    const gapBgAttr = divBorderStyle ? '' : (0, common_1.buildOutlookBgAttr)(msoBgColor);
-                    html += `<td width="${columnGap}"${gapBgAttr} class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
+                    html += `<td width="${columnGap}" class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
                 }
             }
         }
@@ -320,7 +320,7 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
         }
     }
     const borderRadius = cellBorderRadius || 0;
-    const bgColor = styleWithoutBorder?.backgroundColor || "";
+    const bgColor = styleWithoutBorder?.backgroundColor || "transparent";
     // Build border CSS for the div wrapper.
     // When the parent grid already has a divBorderStyle wrapper (border + border-radius +
     // overflow:hidden), the cell must NOT duplicate the same border/radius — that causes
@@ -342,10 +342,8 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
     }
     const cellDivBorderStyle = cellDivBorderParts.join(' ');
     // Unconditional div — visible to all clients (Gmail, Outlook new/old, Apple Mail).
-    // background-color on the div covers modern clients when a real color is set.
-    // When no color is set, omit the property entirely — writing background-color:transparent
-    // defeats the bgcolor attribute on the parent <td> in Old Outlook's Word engine.
-    const divStyleParts = bgColor ? [`background-color:${bgColor};`] : [];
+    // background-color on the div covers modern clients; bgcolor on <td> covers Old Outlook.
+    const divStyleParts = [`background-color:${bgColor};`];
     const formatPad = (value) => (typeof value === 'number' ? `${value}px` : (value || '0'));
     const cellPadTop = formatPad(cellPad.top);
     const cellPadBottom = formatPad(cellPad.bottom);

package/dist/utils/blocks/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/image.ts"],"names":[],"mappings":"AAIA,wBAAsB,uBAAuB,CAC3C,QAAQ,EAAE,MAAM,EAChB,mBAAmB,EAAE,MAAM;;;;;GAoB5B;AAED,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiH5E"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/image.ts"],"names":[],"mappings":"AAIA,wBAAsB,uBAAuB,CAC3C,QAAQ,EAAE,MAAM,EAChB,mBAAmB,EAAE,MAAM;;;;;GAoB5B;AAED,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAyH5E"}

package/dist/utils/blocks/image.js

@@ -28,24 +28,31 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const { altText, imageUrl, navigateToUrl } = props;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
+    const { width, widthUnit, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
     // Add border styles to container for fallback clients
     const containerStyles = (0, buildStyles_1.buildStyles)({
         ...containerStyle,
     }, { perChanges: [], pxChanges: buildStyles_1.addPxToAttributes });
     // OUTLOOK FIX: Ensure cellWidthInPx never exceeds 600px
     const safeCellWidth = Math.min(cellWidthInPx, 600);
-    // Parse width percentage (default 100%)
-    const widthPercent = typeof width === "string" && width.includes("%")
-        ? parseInt(width.replace("%", ""))
-        : typeof width === "number"
-            ? width
-            : 100;
     // OUTLOOK FIX: Calculate inner container width based on safe cell width
     const paddingLeft = style?.padding?.left || 0;
     const paddingRight = style?.padding?.right || 0;
     const availableWidth = safeCellWidth - paddingLeft - paddingRight;
-    const innerContainerWidth = Math.round((widthPercent / 100) * availableWidth);
+    // Resolve inner container width — px values are capped to the available space;
+    // % values are a fraction of available space.
+    let innerContainerWidth;
+    if ((widthUnit || '%') === 'px') {
+        innerContainerWidth = Math.min(Math.round(Number(width) || availableWidth), availableWidth);
+    }
+    else {
+        const widthPercent = typeof width === "string" && width.includes("%")
+            ? parseInt(width.replace("%", ""))
+            : typeof width === "number"
+                ? width
+                : 100;
+        innerContainerWidth = Math.round((widthPercent / 100) * availableWidth);
+    }
     // Get image dimensions and calculate scaled sizes
     const { originalWidth, originalHeight, scaledWidth, scaledHeight } = await computeScaledDimensions(imageUrl, innerContainerWidth);
     // OUTLOOK FIX: For Outlook, we need exact pixel dimensions
@@ -71,11 +78,13 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     // -ms-interpolation-mode       → inline fallback; the <style> block is stripped by
     //                                Outlook during forward/reply MIME rewriting
     const imageElement = `<img src="${imageUrl}" alt="${altText || "Image"}" border="0" width="${finalWidth}" height="${finalHeight}" style="${imageTagStyles}; display:block; width:${finalWidth}px; height:${finalHeight}px; max-width:100%; line-height:0; -ms-interpolation-mode:bicubic;" />`;
-    const percentWidth = typeof width === "string" && width.endsWith("%")
-        ? width
-        : typeof width === "number"
-            ? `${width}%`
-            : "100%";
+    const percentWidth = (widthUnit || '%') === 'px'
+        ? `${innerContainerWidth}px`
+        : typeof width === "string" && width.endsWith("%")
+            ? width
+            : typeof width === "number"
+                ? `${width}%`
+                : "100%";
     // Non-MSO wrapper: display:block removes the phantom inline-baseline gap that
     // display:inline-block creates in Gmail / Apple Mail / Yahoo between images.
     // margin handles alignment since text-align won't move block elements.

package/dist/utils/blocks/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UAqLtE"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UAsKtE"}

package/dist/utils/blocks/text.js

@@ -13,24 +13,22 @@ function convertTextBlock(blockData, cellWidthInPx) {
     // Detect background image or gradient (may live in backgroundImage or customCss).
     // Same multi-client approach as Grid block: outer wrapper <td> carries the background
     // via CSS (Gmail/New Outlook), background attribute (Yahoo), and VML (Old Outlook).
-    const bgImageStr = typeof backgroundImage === "string" ? backgroundImage : "";
-    const customCssStr = rest.customCss || "";
-    const gradientInCustomCss = !bgImageStr.includes("gradient(") && customCssStr.includes("gradient(")
-        ? customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || ""
-        : "";
-    const effectiveGradient = bgImageStr.includes("gradient(")
-        ? bgImageStr
-        : gradientInCustomCss;
+    const bgImageStr = typeof backgroundImage === 'string' ? backgroundImage : '';
+    const customCssStr = rest.customCss || '';
+    const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
+        ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
+        : '';
+    const effectiveGradient = bgImageStr.includes('gradient(') ? bgImageStr : gradientInCustomCss;
     const isGradient = Boolean(effectiveGradient);
     const parsedGradient = isGradient ? (0, gradientUtils_1.parseGradient)(effectiveGradient) : null;
     const rawBgImageUrl = !isGradient && bgImageStr
-        ? bgImageStr.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
+        ? bgImageStr.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '')
         : null;
     const hasBgImage = Boolean(rawBgImageUrl || isGradient);
     const fallbackBgColor = textContainerBackgroundColor ||
         parsedGradient?.fallback ||
         (0, gradientUtils_1.extractCssFallbackColor)(customCssStr) ||
-        "#ffffff";
+        '#ffffff';
     // Text box decoration styles (border, background, padding) — no width
     const textBoxStyle = {
         backgroundColor,
@@ -46,11 +44,9 @@ function convertTextBlock(blockData, cellWidthInPx) {
     });
     // Strip gradient from customCss when it is hoisted to the outer bg wrapper.
     const innerCustomCss = gradientInCustomCss
-        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, "").trim()
+        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
         : customCssStr;
-    const restForStyles = gradientInCustomCss
-        ? { ...rest, customCss: innerCustomCss }
-        : rest;
+    const restForStyles = gradientInCustomCss ? { ...rest, customCss: innerCustomCss } : rest;
     // Outer td styles: strip container background when a bg-image wrapper is present
     // so the outer wrapper's background is not double-applied.
     const styles = (0, buildStyles_1.buildStyles)({
@@ -62,57 +58,53 @@ function convertTextBlock(blockData, cellWidthInPx) {
         pxChanges: buildStyles_1.allPxAttributes,
     });
     const sanitizedText = (props.text ?? "")
-        .replace(/<p(\s[^>]*)?>/gi, (_, attrs) => `<div${attrs || ""}>`)
+        .replace(/<p(\s[^>]*)?>/gi, (_, attrs = "") => `<div${attrs || ""}>`)
         .replace(/<\/p>/gi, "</div>");
     const navigateToUrl = props.navigateToUrl || "";
     const fontSizeStyle = fontSize != null ? `font-size:${fontSize}px;` : "";
-    // Email clients apply `a { color: blue }` which overrides inherited color.
-    // Inject the block color directly onto <a> tags that don't already have one.
+    // Links default to standard link blue + underline. Preserve any color or
+    // text-decoration the user explicitly set; only inject what is missing.
     const blockTextColor = rest.color;
-    const processedText = blockTextColor
-        ? sanitizedText.replace(/<a(\s[^>]*)?>/gi, (match, attrs = "") => {
-            if (/style\s*=\s*["'][^"']*\bcolor\s*:/i.test(attrs))
-                return match;
-            if (/\bstyle\s*=/i.test(attrs)) {
-                return `<a${attrs.replace(/(\bstyle\s*=\s*["'])/, `$1color:${blockTextColor};`)}>`;
-            }
-            return `<a${attrs} style="color:${blockTextColor};">`;
-        })
-        : sanitizedText;
-    const colorStyle = blockTextColor ? `color:${blockTextColor};` : "";
+    const processedText = sanitizedText.replace(/<a(\s[^>]*)?>/gi, (_match, attrs = '') => {
+        const hasExistingColor = /style\s*=\s*["'][^"']*\bcolor\s*:/i.test(attrs);
+        const hasExistingDecoration = /style\s*=\s*["'][^"']*\btext-decoration\s*:/i.test(attrs);
+        const colorPart = hasExistingColor ? '' : 'color:#0066CC;';
+        const decorationPart = hasExistingDecoration ? '' : 'text-decoration:underline;';
+        const injected = `${colorPart}${decorationPart}`;
+        if (!injected)
+            return `<a${attrs}>`;
+        if (/\bstyle\s*=/i.test(attrs)) {
+            return `<a${attrs.replace(/(\bstyle\s*=\s*["'])/, `$1${injected}`)}>`;
+        }
+        return `<a${attrs} style="${injected}">`;
+    });
+    const colorStyle = blockTextColor ? `color:${blockTextColor};` : '';
     // Use display:block + width:100% so text fills the column naturally.
     // display:inline-block with a pixel width (e.g. 400px) breaks narrow grid cells.
     const convertedTextBox = `<div style="display:block; width:100%; box-sizing:border-box; ${colorStyle}${fontSizeStyle}${convertedTextStyle}">${processedText.replaceAll(/\n/g, "<br>")}</div>`;
-    const safeCellWidth = cellWidthInPx
-        ? Math.min(cellWidthInPx, 600)
-        : undefined;
+    const safeCellWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : undefined;
     // When a bg-image wrapper is present, visibilityClass moves to the outer table.
-    const textContent = (0, outlookSupport_1.appendOutlookSupport)(convertedTextBox, styles, hasBgImage ? "" : visibilityClass, safeCellWidth);
-    const linkColorStyle = blockTextColor
-        ? `color:${blockTextColor};`
-        : "color:inherit;";
+    const textContent = (0, outlookSupport_1.appendOutlookSupport)(convertedTextBox, styles, hasBgImage ? '' : visibilityClass, safeCellWidth);
+    const linkColorStyle = blockTextColor ? `color:${blockTextColor};` : 'color:inherit;';
     if (hasBgImage) {
         const msoWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : 600;
         const vmlFill = isGradient
             ? (() => {
                 const vmlAngle = (0, gradientUtils_1.cssAngleToVml)(parsedGradient?.angle || 180);
-                const c1 = parsedGradient?.fallback || "#ffffff";
+                const c1 = parsedGradient?.fallback || '#ffffff';
                 const c2 = parsedGradient?.colors[parsedGradient.colors.length - 1] || c1;
                 return `<v:fill type="gradient" color="${c1}" color2="${c2}" angle="${vmlAngle}" />`;
             })()
             : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
-        const bgPosition = rest.backgroundPosition || 'center center';
-        const bgSize = rest.backgroundSize || 'cover';
-        const bgRepeat = rest.backgroundRepeat || 'no-repeat';
         const bgCss = isGradient
             ? `background:${effectiveGradient};`
-            : `background-image:url('${rawBgImageUrl}'); background-position:${bgPosition}; background-size:${bgSize}; background-repeat:${bgRepeat};`;
+            : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`;
         const wrappedContent = `
 <table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation"
   style="border-collapse:collapse;width:100%;max-width:${msoWidth}px;" class="${visibilityClass}">
   <tr>
     <td width="100%"${(0, common_1.buildOutlookBgAttr)(fallbackBgColor)} valign="top"
-      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ""}
+      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ''}
       style="width:100%;max-width:${msoWidth}px;background-color:${fallbackBgColor};${bgCss}">
 
       <!--[if gte mso 9]>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "email-builder-utils",
-  "version": "1.1.53",
+  "version": "1.1.55",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [