@depup/react-email 5.2.10-depup.1 → 6.9.0-depup.1

package/src/components/tailwind/utils/css/sanitize-declarations.ts

@@ -0,0 +1,443 @@
+import {
+  type CssNode,
+  type Declaration,
+  type FunctionNode,
+  generate,
+  List,
+  parse,
+  type Raw,
+  type Value,
+  walk,
+} from 'css-tree';
+
+function rgbNode(
+  r: number,
+  g: number,
+  b: number,
+  alpha?: number,
+): FunctionNode {
+  const children = new List<CssNode>();
+  children.appendData({
+    type: 'Number',
+    value: r.toFixed(0),
+  });
+  children.appendData({
+    type: 'Operator',
+    value: ',',
+  });
+  children.appendData({
+    type: 'Number',
+    value: g.toFixed(0),
+  });
+  children.appendData({
+    type: 'Operator',
+    value: ',',
+  });
+  children.appendData({
+    type: 'Number',
+    value: b.toFixed(0),
+  });
+  if (alpha !== 1 && alpha !== undefined) {
+    children.appendData({
+      type: 'Operator',
+      value: ',',
+    });
+    children.appendData({
+      type: 'Number',
+      value: alpha.toString(),
+    });
+  }
+
+  return {
+    type: 'Function',
+    name: 'rgb',
+    children,
+  };
+}
+
+const LAB_TO_LMS = {
+  l: [0.3963377773761749, 0.2158037573099136],
+  m: [-0.1055613458156586, -0.0638541728258133],
+  s: [-0.0894841775298119, -1.2914855480194092],
+};
+const LSM_TO_RGB = {
+  r: [4.0767416360759583, -3.3077115392580629, 0.2309699031821043],
+  g: [-1.2684379732850315, 2.6097573492876882, -0.341319376002657],
+  b: [-0.0041960761386756, -0.7034186179359362, 1.7076146940746117],
+};
+
+function lrgbToRgb(input: number) {
+  const absoluteNumber = Math.abs(input);
+  const sign = input < 0 ? -1 : 1;
+
+  if (absoluteNumber > 0.0031308) {
+    return sign * (absoluteNumber ** (1 / 2.4) * 1.055 - 0.055);
+  }
+
+  return input * 12.92;
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function oklchToOklab(oklch: { l: number; c: number; h: number }) {
+  return {
+    l: oklch.l,
+    a: oklch.c * Math.cos((oklch.h / 180) * Math.PI),
+    b: oklch.c * Math.sin((oklch.h / 180) * Math.PI),
+  };
+}
+
+/** Convert oklab to RGB */
+function oklchToRgb(oklch: { l: number; c: number; h: number }) {
+  const oklab = oklchToOklab(oklch);
+
+  const l =
+    (oklab.l + LAB_TO_LMS.l[0]! * oklab.a + LAB_TO_LMS.l[1]! * oklab.b) ** 3;
+  const m =
+    (oklab.l + LAB_TO_LMS.m[0]! * oklab.a + LAB_TO_LMS.m[1]! * oklab.b) ** 3;
+  const s =
+    (oklab.l + LAB_TO_LMS.s[0]! * oklab.a + LAB_TO_LMS.s[1]! * oklab.b) ** 3;
+
+  const r =
+    255 *
+    lrgbToRgb(
+      LSM_TO_RGB.r[0]! * l + LSM_TO_RGB.r[1]! * m + LSM_TO_RGB.r[2]! * s,
+    );
+  const g =
+    255 *
+    lrgbToRgb(
+      LSM_TO_RGB.g[0]! * l + LSM_TO_RGB.g[1]! * m + LSM_TO_RGB.g[2]! * s,
+    );
+  const b =
+    255 *
+    lrgbToRgb(
+      LSM_TO_RGB.b[0]! * l + LSM_TO_RGB.b[1]! * m + LSM_TO_RGB.b[2]! * s,
+    );
+
+  return {
+    r: clamp(r, 0, 255),
+    g: clamp(g, 0, 255),
+    b: clamp(b, 0, 255),
+  };
+}
+
+function separteShorthandDeclaration(
+  shorthandToReplace: Declaration,
+  [start, end]: [string, string],
+): Declaration {
+  shorthandToReplace.property = start;
+
+  const values =
+    shorthandToReplace.value.type === 'Value'
+      ? shorthandToReplace.value.children
+          .toArray()
+          // Count every real value component, not just numeric ones, so a
+          // two-value shorthand with `auto`/`var()`/`calc()` (e.g.
+          // `margin-inline: 1rem auto`) still splits into two longhands.
+          .filter(
+            (child) => child.type !== 'Operator' && child.type !== 'WhiteSpace',
+          )
+      : [shorthandToReplace.value];
+  let endValue = shorthandToReplace.value;
+  if (values.length === 2) {
+    endValue = {
+      type: 'Value',
+      children: new List<CssNode>().fromArray([values[1]!]),
+    };
+    shorthandToReplace.value = {
+      type: 'Value',
+      children: new List<CssNode>().fromArray([values[0]!]),
+    };
+  }
+
+  return {
+    type: 'Declaration',
+    property: end,
+    value: endValue,
+    important: shorthandToReplace.important,
+  };
+}
+
+/**
+ * Meant to do all the things necessary, in a per-declaration basis, to have the best email client
+ * support possible.
+ *
+ * Here's the transformations it does so far:
+ * - convert all `rgb` with space-based syntax into a comma based one;
+ * - convert all `oklch` values into `rgb`;
+ * - convert all hex values into `rgb`;
+ * - convert `padding-inline` into `padding-left` and `padding-right`;
+ * - convert `padding-block` into `padding-top` and `padding-bottom`;
+ * - convert `margin-inline` into `margin-left` and `margin-right`;
+ * - convert `margin-block` into `margin-top` and `margin-bottom`.
+ */
+export function sanitizeDeclarations(nodeContainingDeclarations: CssNode) {
+  walk(nodeContainingDeclarations, {
+    visit: 'Declaration',
+    enter(declaration, item, list) {
+      if (declaration.value.type === 'Raw') {
+        declaration.value = parse(declaration.value.value, {
+          context: 'value',
+        }) as Value | Raw;
+      }
+      if (
+        /border-(?:[a-z]+-){0,2}radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(
+          generate(declaration),
+        )
+      ) {
+        declaration.value = parse('9999px', { context: 'value' }) as Value;
+      }
+      walk(declaration, {
+        visit: 'Function',
+        enter(func, funcParentListItem) {
+          const children = func.children.toArray();
+          if (func.name === 'oklch') {
+            let l: number | undefined;
+            let c: number | undefined;
+            let h: number | undefined;
+            let a: number | undefined;
+            for (const child of children) {
+              if (child.type === 'Number') {
+                if (l === undefined) {
+                  l = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (c === undefined) {
+                  c = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (h === undefined) {
+                  h = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (a === undefined) {
+                  a = Number.parseFloat(child.value);
+                  continue;
+                }
+              }
+              if (child.type === 'Dimension' && child.unit === 'deg') {
+                if (h === undefined) {
+                  h = Number.parseFloat(child.value);
+                  continue;
+                }
+              }
+              if (child.type === 'Percentage') {
+                if (l === undefined) {
+                  l = Number.parseFloat(child.value) / 100;
+                  continue;
+                }
+                if (a === undefined) {
+                  a = Number.parseFloat(child.value) / 100;
+                }
+              }
+            }
+
+            if (l === undefined || c === undefined || h === undefined) {
+              throw new Error(
+                'Could not determine the parameters of an oklch() function.',
+                {
+                  cause: declaration,
+                },
+              );
+            }
+
+            const rgb = oklchToRgb({
+              l,
+              c,
+              h,
+            });
+
+            funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
+          }
+
+          if (func.name === 'rgb' || func.name === 'rgba') {
+            let r: number | undefined;
+            let g: number | undefined;
+            let b: number | undefined;
+            let a: number | undefined;
+            for (const child of children) {
+              if (child.type === 'Number') {
+                if (r === undefined) {
+                  r = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (g === undefined) {
+                  g = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (b === undefined) {
+                  b = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (a === undefined) {
+                  a = Number.parseFloat(child.value);
+                  continue;
+                }
+              }
+              if (child.type === 'Percentage') {
+                if (r === undefined) {
+                  r = (Number.parseFloat(child.value) * 255) / 100;
+                  continue;
+                }
+                if (g === undefined) {
+                  g = (Number.parseFloat(child.value) * 255) / 100;
+                  continue;
+                }
+                if (b === undefined) {
+                  b = (Number.parseFloat(child.value) * 255) / 100;
+                  continue;
+                }
+                if (a === undefined) {
+                  a = Number.parseFloat(child.value) / 100;
+                }
+              }
+            }
+
+            if (r === undefined || g === undefined || b === undefined) {
+              throw new Error(
+                'Could not determine the parameters of an rgb() function.',
+                {
+                  cause: declaration,
+                },
+              );
+            }
+
+            if (a === undefined || a === 1) {
+              funcParentListItem.data = rgbNode(r, g, b);
+            } else {
+              funcParentListItem.data = rgbNode(r, g, b, a);
+            }
+          }
+        },
+      });
+      walk(declaration, {
+        visit: 'Hash',
+        enter(hash, hashParentListItem) {
+          const hex = hash.value.trim();
+          if (hex.length === 3) {
+            const r = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
+            const g = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
+            const b = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+            hashParentListItem.data = rgbNode(r, g, b);
+            return;
+          }
+          if (hex.length === 4) {
+            const r = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
+            const g = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
+            const b = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+            const a = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255;
+            hashParentListItem.data = rgbNode(r, g, b, a);
+            return;
+          }
+          if (hex.length === 5) {
+            const r = Number.parseInt(hex.slice(0, 2), 16);
+            const g = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+            const b = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16);
+            const a = Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255;
+            hashParentListItem.data = rgbNode(r, g, b, a);
+            return;
+          }
+          if (hex.length === 6) {
+            const r = Number.parseInt(hex.slice(0, 2), 16);
+            const g = Number.parseInt(hex.slice(2, 4), 16);
+            const b = Number.parseInt(hex.slice(4, 6), 16);
+            hashParentListItem.data = rgbNode(r, g, b);
+            return;
+          }
+          if (hex.length === 7) {
+            const r = Number.parseInt(hex.slice(0, 2), 16);
+            const g = Number.parseInt(hex.slice(2, 4), 16);
+            const b = Number.parseInt(hex.slice(4, 6), 16);
+            const a = Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255;
+            hashParentListItem.data = rgbNode(r, g, b, a);
+            return;
+          }
+          const r = Number.parseInt(hex.slice(0, 2), 16);
+          const g = Number.parseInt(hex.slice(2, 4), 16);
+          const b = Number.parseInt(hex.slice(4, 6), 16);
+          const a = Number.parseInt(hex.slice(6, 8), 16) / 255;
+          hashParentListItem.data = rgbNode(r, g, b, a);
+        },
+      });
+
+      walk(declaration, {
+        visit: 'Function',
+        enter(func, parentListItem) {
+          if (func.name === 'color-mix') {
+            const children = func.children.toArray();
+            // We're expecting the children here to be something like:
+            // Identifier (in)
+            // Identifier (oklab)
+            // Operator (,)
+            // FunctionNode (rgb(...))
+            // Node (opacity)
+            // Operator (,)
+            // Identifier (transparent)
+            const color: CssNode | undefined = children[3];
+            const opacity: CssNode | undefined = children[4];
+            if (
+              func.children.last?.type === 'Identifier' &&
+              func.children.last.name === 'transparent' &&
+              color?.type === 'Function' &&
+              color?.name === 'rgb' &&
+              opacity
+            ) {
+              if (opacity.type === 'Percentage') {
+                const alpha = Number.parseFloat(opacity.value) / 100;
+                if (alpha < 1) {
+                  color.children.appendData({
+                    type: 'Operator',
+                    value: ',',
+                  });
+                  color.children.appendData({
+                    type: 'Number',
+                    value: alpha.toString(),
+                  });
+                }
+              } else {
+                color.children.appendData({
+                  type: 'Operator',
+                  value: ',',
+                });
+                color.children.appendData(opacity);
+              }
+              parentListItem.data = color;
+            }
+          }
+        },
+      });
+
+      if (declaration.property === 'padding-inline') {
+        const paddingRight = separteShorthandDeclaration(declaration, [
+          'padding-left',
+          'padding-right',
+        ]);
+        list.insertData(paddingRight, item);
+      }
+      if (declaration.property === 'padding-block') {
+        const paddingBottom = separteShorthandDeclaration(declaration, [
+          'padding-top',
+          'padding-bottom',
+        ]);
+        list.insertData(paddingBottom, item);
+      }
+      if (declaration.property === 'margin-inline') {
+        const marginRight = separteShorthandDeclaration(declaration, [
+          'margin-left',
+          'margin-right',
+        ]);
+        list.insertData(marginRight, item);
+      }
+      if (declaration.property === 'margin-block') {
+        const paddingBottom = separteShorthandDeclaration(declaration, [
+          'margin-top',
+          'margin-bottom',
+        ]);
+
+        list.insertData(paddingBottom, item);
+      }
+    },
+  });
+}

package/src/components/tailwind/utils/css/sanitize-non-inlinable-rules.spec.ts

@@ -0,0 +1,72 @@
+import { generate } from 'css-tree';
+import { sanitizeStyleSheet } from '../../sanitize-stylesheet.js';
+import { setupTailwind } from '../tailwindcss/setup-tailwind.js';
+import { sanitizeNonInlinableRules } from './sanitize-non-inlinable-rules.js';
+
+describe('sanitizeNonInlinableRules()', () => {
+  it('inlines rules that can be inlined', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities(['bg-gray-900', 'text-red-300', 'text-lg']);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeNonInlinableRules(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-300: oklch(80.8% 0.114 19.571)!important;--color-gray-900: oklch(21% 0.034 264.665)!important;--text-lg: 1.125rem!important;--text-lg--line-height: calc(1.75 / 1.125)!important}}@layer utilities{.bg-gray-900{background-color:var(--color-gray-900)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-red-300{color:var(--color-red-300)}}"`,
+    );
+  });
+
+  it('handles CSS nesting in hover pseudo styles', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities([
+      'hover:text-sky-600',
+      'sm:focus:outline-none',
+      'md:hover:bg-gray-100',
+      'lg:focus:underline',
+    ]);
+
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeNonInlinableRules(stylesheet);
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-sky-600: oklch(58.8% 0.158 241.966)!important;--color-gray-100: oklch(96.7% 0.003 264.542)!important}}@layer utilities{.hover_text-sky-600{&:hover{@media (hover:hover){color:var(--color-sky-600)!important}}}.sm_focus_outline-none{@media (width>=40rem){&:focus{outline-style:none!important}}}.md_hover_bg-gray-100{@media (width>=48rem){&:hover{@media (hover:hover){background-color:var(--color-gray-100)!important}}}}.lg_focus_underline{@media (width>=64rem){&:focus{text-decoration-line:underline!important}}}}"`,
+    );
+  });
+
+  it('strips Tailwind v4 variant-stacking var() refs with empty fallbacks inside print: media queries', async () => {
+    // Mirrors the inline-style behavior asserted in make-inline-styles-for.spec.ts.
+    // `print:invert` compiles to a filter value that is a chain of var(--tw-...,)
+    // with empty fallbacks. After resolveAllCssVariables the filter is concrete;
+    // sanitizeNonInlinableRules then drops the leftover --tw-* declarations and
+    // any remaining empty-fallback var() refs.
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities(['md:block', 'print:invert']);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeStyleSheet(stylesheet);
+    sanitizeNonInlinableRules(stylesheet);
+    const result = generate(stylesheet);
+
+    expect(result).not.toMatch(/var\(--tw-[^,()]+,\s*\)/);
+    expect(result).toMatchInlineSnapshot(
+      `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer utilities{.md_block{@media (width>=48rem){display:block!important}}.print_invert{@media print{filter:invert(100%)!important}}}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}"`,
+    );
+  });
+
+  it('supports basic media query rules', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities([
+      'sm:mx-auto',
+      'sm:max-w-lg',
+      'sm:rounded-lg',
+      'md:px-10',
+      'md:py-12',
+    ]);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeNonInlinableRules(stylesheet);
+
+    expect(generate(stylesheet)).toMatchInlineSnapshot(
+      `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--spacing: 0.25rem!important;--container-lg: 32rem!important;--radius-lg: 0.5rem!important}}@layer utilities{.sm_mx-auto{@media (width>=40rem){margin-inline:auto!important}}.sm_max-w-lg{@media (width>=40rem){max-width:var(--container-lg)!important}}.sm_rounded-lg{@media (width>=40rem){border-radius:var(--radius-lg)!important}}.md_px-10{@media (width>=48rem){padding-inline:calc(var(--spacing)*10)!important}}.md_py-12{@media (width>=48rem){padding-block:calc(var(--spacing)*12)!important}}}"`,
+    );
+  });
+});

package/src/components/tailwind/utils/css/sanitize-non-inlinable-rules.ts

@@ -0,0 +1,48 @@
+import { type CssNode, string, walk } from 'css-tree';
+import { sanitizeClassName } from '../compatibility/sanitize-class-name.js';
+import { isRuleInlinable } from './is-rule-inlinable.js';
+import { stripEmptyTailwindVars } from './strip-empty-tailwind-vars.js';
+
+/**
+ * This function goes through a few steps to ensure the best email client support and
+ * to ensure that media queries and pseudo classes are applied correctly alongside
+ * the inline styles.
+ *
+ * What it does:
+ * 1. Converts all declarations in all rules into important ones
+ * 2. Sanitizes class selectors of all non-inlinable rules
+ * 3. Removes --tw-* custom property declarations — by this point all CSS
+ *    variables have been resolved, so these are dead weight in email HTML.
+ * 4. Strips empty-fallback var(--tw-*,) refs that Tailwind v4 emits for
+ *    variant-stacking idioms (filter, font-variant-numeric, etc.) — email
+ *    clients can't resolve CSS custom properties reliably, so any --tw-*
+ *    left as a bare empty-fallback ref would reach the client broken.
+ */
+export function sanitizeNonInlinableRules(node: CssNode) {
+  walk(node, {
+    visit: 'Rule',
+    enter(rule) {
+      if (!isRuleInlinable(rule)) {
+        walk(rule.prelude, (node) => {
+          if (node.type === 'ClassSelector') {
+            const unescapedClassName = string.decode(node.name);
+            node.name = sanitizeClassName(unescapedClassName);
+          }
+        });
+
+        walk(rule, {
+          visit: 'Declaration',
+          enter(declaration, item, list) {
+            if (declaration.property.startsWith('--tw-')) {
+              list.remove(item);
+              return;
+            }
+
+            declaration.important = true;
+            stripEmptyTailwindVars(declaration.value);
+          },
+        });
+      }
+    },
+  });
+}

package/src/components/tailwind/utils/css/split-mixed-rule.ts

@@ -0,0 +1,68 @@
+import { type CssNode, clone, find, List, type Rule } from 'css-tree';
+import { isPartInlinable } from './is-part-inlinable.js';
+
+/**
+ * Split a rule into inlinable and non-inlinable parts. Caller must only pass rules
+ * for which isRuleInlinable(rule) is false. Returns clones so the original stylesheet is never mutated.
+ *
+ * @returns inlinablePart: rule with only inlinable block children, or null if none.
+ *          nonInlinablePart: rule with only non-inlinable block children, or null if none.
+ */
+export function splitMixedRule(rule: Rule): {
+  inlinablePart: Rule | null;
+  nonInlinablePart: Rule | null;
+} {
+  // If the selector itself contains pseudo-selectors, every declaration in the
+  // block only applies in that pseudo context — splitting would incorrectly
+  // inline them as base styles. Return the whole rule as non-inlinable.
+  const selectorHasPseudo =
+    rule.prelude !== null &&
+    find(
+      rule.prelude,
+      (node) =>
+        node.type === 'PseudoClassSelector' ||
+        node.type === 'PseudoElementSelector',
+    ) !== null;
+
+  if (selectorHasPseudo) {
+    return { inlinablePart: null, nonInlinablePart: clone(rule) as Rule };
+  }
+
+  const ruleCloneInlinable = clone(rule) as Rule;
+  const ruleCloneNonInlinable = clone(rule) as Rule;
+
+  const inlinableParts: CssNode[] = [];
+  const nonInlinableParts: CssNode[] = [];
+
+  for (const part of ruleCloneInlinable.block.children.toArray()) {
+    if (isPartInlinable(part)) {
+      inlinableParts.push(part);
+    } else {
+      nonInlinableParts.push(part);
+    }
+  }
+
+  const inlinablePart =
+    inlinableParts.length > 0
+      ? {
+          ...ruleCloneInlinable,
+          block: {
+            type: 'Block' as const,
+            children: new List<CssNode>().fromArray(inlinableParts),
+          },
+        }
+      : null;
+
+  const nonInlinablePart =
+    nonInlinableParts.length > 0
+      ? {
+          ...ruleCloneNonInlinable,
+          block: {
+            type: 'Block' as const,
+            children: new List<CssNode>().fromArray(nonInlinableParts),
+          },
+        }
+      : null;
+
+  return { inlinablePart, nonInlinablePart };
+}