@depup/react-email 5.2.10-depup.1 → 6.9.1-depup.0

package/src/components/tailwind/utils/css/extract-rules-per-class.ts

@@ -0,0 +1,152 @@
+import {
+  type Atrule,
+  type CssNode,
+  clone,
+  List,
+  type Rule,
+  string,
+  walk,
+} from 'css-tree';
+import { NON_INLINABLE_ATRULES } from './constants.js';
+import { isRuleInlinable } from './is-rule-inlinable.js';
+import { splitMixedRule } from './split-mixed-rule.js';
+
+/**
+ * Re-nest the at-rule(s) back inside the rule so the pipeline stays
+ * version-agnostic across Tailwind's variant shape change.
+ * See https://github.com/resend/react-email/issues/3662
+ */
+function nestAtRulesInsideRule(rule: Rule, enclosingAtRules: Atrule[]): Rule {
+  const ruleClone = clone(rule) as Rule;
+  let children = ruleClone.block.children;
+
+  // Wrap from the innermost enclosing at-rule outward.
+  for (let i = enclosingAtRules.length - 1; i >= 0; i--) {
+    const atRule = enclosingAtRules[i]!;
+    const wrapped: Atrule = {
+      type: 'Atrule',
+      name: atRule.name,
+      prelude: atRule.prelude
+        ? (clone(atRule.prelude) as Atrule['prelude'])
+        : null,
+      block: {
+        type: 'Block',
+        children,
+      },
+    };
+    children = new List<CssNode>().fromArray([wrapped]);
+  }
+
+  return {
+    type: 'Rule',
+    prelude: clone(rule.prelude) as Rule['prelude'],
+    block: {
+      type: 'Block',
+      children,
+    },
+  };
+}
+
+export function extractRulesPerClass(root: CssNode, classes: string[]) {
+  const classSet = new Set(classes);
+
+  // A class can be defined by multiple rules (e.g. a preset and a child config
+  // override), so keep them all to merge instead of the last one clobbering.
+  const inlinableRules = new Map<string, Rule[]>();
+  const nonInlinableRules = new Map<string, Rule[]>();
+
+  const appendRule = (
+    map: Map<string, Rule[]>,
+    className: string,
+    rule: Rule,
+  ) => {
+    const existing = map.get(className);
+    if (existing) {
+      existing.push(rule);
+    } else {
+      map.set(className, [rule]);
+    }
+  };
+
+  // A plain-looking rule inside these wrappers is still conditional and must
+  // not be inlined. See https://github.com/resend/react-email/issues/3662
+  const enclosingAtRules: Atrule[] = [];
+
+  const handleRule = (rule: Rule) => {
+    // A nested rule (e.g. group/peer's `&:is(:where(.group):hover *)`) belongs
+    // to its parent utility; processing it standalone emits a bare, parentless
+    // `&` rule into the <style> block, so skip it here.
+    const firstSelector =
+      rule.prelude.type === 'SelectorList' ? rule.prelude.children.first : null;
+    if (
+      firstSelector?.type === 'Selector' &&
+      firstSelector.children.first?.type === 'NestingSelector'
+    ) {
+      return;
+    }
+
+    // Only the prelude names the class that owns the rule; classes referenced
+    // inside the block (e.g. `.group` in `:where(.group)`) must not key it.
+    const selectorClasses: string[] = [];
+    walk(rule.prelude, {
+      visit: 'ClassSelector',
+      enter(classSelector) {
+        selectorClasses.push(string.decode(classSelector.name));
+      },
+    });
+
+    if (enclosingAtRules.length > 0) {
+      const nonInlinablePart = nestAtRulesInsideRule(rule, enclosingAtRules);
+      for (const className of selectorClasses) {
+        if (classSet.has(className)) {
+          appendRule(nonInlinableRules, className, nonInlinablePart);
+        }
+      }
+      return;
+    }
+
+    if (isRuleInlinable(rule)) {
+      for (const className of selectorClasses) {
+        if (classSet.has(className)) {
+          appendRule(inlinableRules, className, rule);
+        }
+      }
+    } else {
+      const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
+      for (const className of selectorClasses) {
+        if (!classSet.has(className)) continue;
+        if (inlinablePart) {
+          appendRule(inlinableRules, className, inlinablePart);
+        }
+        if (nonInlinablePart) {
+          appendRule(nonInlinableRules, className, nonInlinablePart);
+        }
+      }
+    }
+  };
+
+  walk(root, {
+    enter(node) {
+      if (node.type === 'Atrule') {
+        if (NON_INLINABLE_ATRULES.has(node.name.toLowerCase())) {
+          enclosingAtRules.push(node);
+        }
+      } else if (node.type === 'Rule') {
+        handleRule(node);
+      }
+    },
+    leave(node) {
+      if (
+        node.type === 'Atrule' &&
+        NON_INLINABLE_ATRULES.has(node.name.toLowerCase())
+      ) {
+        enclosingAtRules.pop();
+      }
+    },
+  });
+
+  return {
+    inlinable: inlinableRules,
+    nonInlinable: nonInlinableRules,
+  };
+}

package/src/components/tailwind/utils/css/get-custom-properties.ts

@@ -0,0 +1,49 @@
+import { type CssNode, type Declaration, generate, walk } from 'css-tree';
+
+export interface CustomProperty {
+  syntax?: Declaration;
+  inherits?: Declaration;
+  initialValue?: Declaration;
+}
+
+export type CustomProperties = Map<string, CustomProperty>;
+
+export function getCustomProperties(node: CssNode) {
+  const customProperties = new Map<string, CustomProperty>();
+
+  walk(node, {
+    visit: 'Atrule',
+    enter(atrule) {
+      if (atrule.name === 'property' && atrule.prelude) {
+        const prelude = generate(atrule.prelude);
+        if (prelude.startsWith('--')) {
+          let syntax: Declaration | undefined;
+          let inherits: Declaration | undefined;
+          let initialValue: Declaration | undefined;
+          walk(atrule, {
+            visit: 'Declaration',
+            enter(declaration) {
+              if (declaration.property === 'syntax') {
+                syntax = declaration;
+              }
+              if (declaration.property === 'inherits') {
+                inherits = declaration;
+              }
+              if (declaration.property === 'initial-value') {
+                initialValue = declaration;
+              }
+            },
+          });
+
+          customProperties.set(prelude, {
+            syntax,
+            inherits,
+            initialValue,
+          });
+        }
+      }
+    },
+  });
+
+  return customProperties;
+}

package/src/components/tailwind/utils/css/is-part-inlinable.ts

@@ -0,0 +1,15 @@
+import { type CssNode, find } from 'css-tree';
+
+export function isPartInlinable(part: CssNode): boolean {
+  const hasAtRuleInside = find(part, (node) => node.type === 'Atrule') !== null;
+
+  const hasPseudoSelector =
+    find(
+      part,
+      (node) =>
+        node.type === 'PseudoClassSelector' ||
+        node.type === 'PseudoElementSelector',
+    ) !== null;
+
+  return !hasAtRuleInside && !hasPseudoSelector;
+}

package/src/components/tailwind/utils/css/is-rule-inlinable.ts

@@ -0,0 +1,15 @@
+import { find, type Rule } from 'css-tree';
+
+export function isRuleInlinable(rule: Rule): boolean {
+  const hasAtRuleInside = find(rule, (node) => node.type === 'Atrule') !== null;
+
+  const hasPseudoSelector =
+    find(
+      rule,
+      (node) =>
+        node.type === 'PseudoClassSelector' ||
+        node.type === 'PseudoElementSelector',
+    ) !== null;
+
+  return !hasAtRuleInside && !hasPseudoSelector;
+}

package/src/components/tailwind/utils/css/make-inline-styles-for.spec.ts

@@ -0,0 +1,124 @@
+import { parse, type StyleSheet } from 'css-tree';
+import { getCustomProperties } from './get-custom-properties.js';
+import { makeInlineStylesFor } from './make-inline-styles-for.js';
+
+describe('makeInlineStylesFor()', async () => {
+  it('works in simple use case', () => {
+    const tailwindStyles = parse(`
+      .bg-red-500 { background-color: #f56565; }
+      .w-full { width: 100%; }
+    `) as StyleSheet;
+
+    expect(
+      makeInlineStylesFor(
+        tailwindStyles.children.toArray(),
+        getCustomProperties(tailwindStyles),
+      ),
+    ).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "#f56565",
+        "width": "100%",
+      }
+    `);
+  });
+
+  it('does basic local variable resolution', () => {
+    const tailwindStyles = parse(`
+      .btn {
+        --btn-bg: #3490dc;
+        --btn-text: #fff;
+        background-color: var(--btn-bg);
+        color: var(--btn-text);
+        padding: 0.5rem 1rem;
+        border-radius: 0.25rem;
+      }
+    `) as StyleSheet;
+
+    expect(
+      makeInlineStylesFor(
+        tailwindStyles.children.toArray(),
+        getCustomProperties(tailwindStyles),
+      ),
+    ).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "#3490dc",
+        "borderRadius": "0.25rem",
+        "color": "#fff",
+        "padding": "0.5rem 1rem",
+      }
+    `);
+  });
+
+  it('strips Tailwind v4 variant-stacking var() refs with empty fallbacks', () => {
+    // Tailwind v4 compiles `tabular-nums` to a font-variant-numeric value
+    // where every optional variant slot is represented by an unresolved
+    // var(--tw-..., ) with an empty fallback. Email clients do not support
+    // CSS custom properties reliably, so these must collapse at inline time
+    // (per CSS spec, an empty fallback resolves to empty string).
+    const tailwindStyles = parse(`
+      .tabular-nums {
+        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) tabular-nums var(--tw-numeric-fraction,);
+      }
+    `) as StyleSheet;
+
+    expect(
+      makeInlineStylesFor(
+        tailwindStyles.children.toArray(),
+        getCustomProperties(tailwindStyles),
+      ),
+    ).toMatchInlineSnapshot(`
+      {
+        "fontVariantNumeric": "tabular-nums",
+      }
+    `);
+  });
+
+  it('preserves user-authored empty-fallback var() refs (non --tw- prefix)', () => {
+    // The collapse is scoped to Tailwind's --tw-* variant-stacking idiom.
+    // A user-authored var(--my-color,) with an empty fallback must pass
+    // through unchanged even though it syntactically matches the idiom --
+    // the user opted into that semantic and the render target may define
+    // --my-color at a higher scope.
+    const userStyles = parse(`
+      .thing {
+        color: var(--my-color,);
+        background: var(--brand,) var(--tw-custom,);
+      }
+    `) as StyleSheet;
+
+    expect(
+      makeInlineStylesFor(
+        userStyles.children.toArray(),
+        getCustomProperties(userStyles),
+      ),
+    ).toMatchInlineSnapshot(`
+      {
+        "background": "var(--brand,)",
+        "color": "var(--my-color,)",
+      }
+    `);
+  });
+
+  it('collapses outer --tw-* var() that becomes empty after inner --tw-* var() collapses', () => {
+    // Regression test for cubic-dev-ai P2 review on PR #3359:
+    // pre-order traversal misses outer var(--tw-X, var(--tw-Y,)) because the
+    // outer's fallback only becomes empty AFTER the inner collapses. Post-order
+    // traversal fixes this.
+    const tailwindStyles = parse(`
+      .nested {
+        font-variant-numeric: var(--tw-outer, var(--tw-inner,)) tabular-nums;
+      }
+    `) as StyleSheet;
+
+    expect(
+      makeInlineStylesFor(
+        tailwindStyles.children.toArray(),
+        getCustomProperties(tailwindStyles),
+      ),
+    ).toMatchInlineSnapshot(`
+      {
+        "fontVariantNumeric": "tabular-nums",
+      }
+    `);
+  });
+});

package/src/components/tailwind/utils/css/make-inline-styles-for.ts

@@ -0,0 +1,73 @@
+import { type CssNode, type Declaration, generate, walk } from 'css-tree';
+import { getReactProperty } from '../compatibility/get-react-property.js';
+import type { CustomProperties } from './get-custom-properties.js';
+import { stripEmptyTailwindVars } from './strip-empty-tailwind-vars.js';
+import { unwrapValue } from './unwrap-value.js';
+
+export function makeInlineStylesFor(
+  inlinableRules: CssNode[],
+  customProperties: CustomProperties,
+) {
+  const styles: Record<string, string> = {};
+
+  const localVariableDeclarations = new Map<string, Declaration>();
+  for (const rule of inlinableRules) {
+    walk(rule, {
+      visit: 'Declaration',
+      enter(declaration) {
+        if (declaration.property.startsWith('--')) {
+          localVariableDeclarations.set(declaration.property, declaration);
+        }
+      },
+    });
+  }
+
+  for (const rule of inlinableRules) {
+    walk(rule, {
+      visit: 'Function',
+      enter(func, funcParentListItem) {
+        if (func.name === 'var') {
+          let variableName: string | undefined;
+          walk(func, {
+            visit: 'Identifier',
+            enter(identifier) {
+              variableName = identifier.name;
+              return this.break;
+            },
+          });
+          if (variableName) {
+            const definition = localVariableDeclarations.get(variableName);
+            if (definition) {
+              funcParentListItem.data = unwrapValue(definition.value);
+            } else {
+              // For most variables tailwindcss defines, they also define a custom
+              // property for them with an initial value that we can inline here
+              const customProperty = customProperties.get(variableName);
+              if (customProperty?.initialValue) {
+                funcParentListItem.data = unwrapValue(
+                  customProperty.initialValue.value,
+                );
+              }
+            }
+          }
+        }
+      },
+    });
+
+    walk(rule, {
+      visit: 'Declaration',
+      enter(declaration) {
+        if (declaration.property.startsWith('--')) {
+          return;
+        }
+        stripEmptyTailwindVars(declaration.value);
+
+        styles[getReactProperty(declaration.property)] =
+          generate(declaration.value).trim() +
+          (declaration.important ? '!important' : '');
+      },
+    });
+  }
+
+  return styles;
+}