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

package/src/components/tailwind/utils/css/strip-empty-tailwind-vars.spec.ts

@@ -0,0 +1,128 @@
+import {
+  type Atrule,
+  type Declaration,
+  generate,
+  parse,
+  type Rule,
+  type StyleSheet,
+  walk,
+} from 'css-tree';
+import { sanitizeStyleSheet } from '../../sanitize-stylesheet.js';
+import { setupTailwind } from '../tailwindcss/setup-tailwind.js';
+import { isRuleInlinable } from './is-rule-inlinable.js';
+import { sanitizeNonInlinableRules } from './sanitize-non-inlinable-rules.js';
+import { stripEmptyTailwindVars } from './strip-empty-tailwind-vars.js';
+
+describe('stripEmptyTailwindVars()', () => {
+  it('removes empty-fallback var(--tw-*,) refs from declaration values', () => {
+    const stylesheet = parse(`
+      .tabular-nums {
+        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,);
+      }
+    `) as StyleSheet;
+
+    const rule = stylesheet.children.first as Rule;
+    const declaration = rule.block.children.first as Declaration;
+    stripEmptyTailwindVars(declaration.value);
+
+    expect(generate(declaration.value)).toBe('tabular-nums');
+  });
+
+  it('does not remove var() refs with non-empty fallbacks or non --tw- names', () => {
+    const stylesheet = parse(`
+      .thing {
+        line-height: var(--tw-leading, var(--text-lg--line-height));
+        color: var(--my-color,);
+      }
+    `) as StyleSheet;
+
+    const rule = stylesheet.children.first as Rule;
+    const leading = rule.block.children.first as Declaration;
+    const color = rule.block.children.last as Declaration;
+
+    stripEmptyTailwindVars(leading.value);
+    stripEmptyTailwindVars(color.value);
+
+    expect(generate(leading.value)).toBe(
+      'var(--tw-leading, var(--text-lg--line-height))',
+    );
+    expect(generate(color.value)).toBe('var(--my-color,)');
+  });
+
+  it('does not remove --tw-* custom property declarations (only var() usages in values)', () => {
+    const stylesheet = parse(`
+      .print_border-solid {
+        @media print {
+          --tw-border-style: solid;
+          border-style: var(--tw-border-style,);
+        }
+      }
+    `) as StyleSheet;
+
+    const rule = stylesheet.children.first as Rule;
+    const atrule = rule.block.children.first as Atrule;
+    const twDeclaration = atrule.block!.children.first as Declaration;
+    const borderDeclaration = atrule.block!.children.last as Declaration;
+
+    stripEmptyTailwindVars(borderDeclaration.value);
+
+    expect(twDeclaration.property).toBe('--tw-border-style');
+    expect(generate(twDeclaration.value).trim()).toBe('solid');
+    expect(generate(borderDeclaration.value)).toBe('');
+    expect(generate(stylesheet)).toContain('--tw-border-style: solid');
+  });
+});
+
+describe('stripEmptyTailwindVars() with non-inlinable print: rules', () => {
+  it('print:border-solid still leaves --tw-* declarations if only stripEmptyTailwindVars runs', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities(['print:border-solid']);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeStyleSheet(stylesheet);
+
+    walkDeclarationsInNonInlinableRules(stylesheet, (declaration) => {
+      stripEmptyTailwindVars(declaration.value);
+    });
+
+    const result = generate(stylesheet);
+
+    expect(result).not.toMatch(/var\(--tw-[^,()]+,\s*\)/);
+    expect(result).toMatch(/--tw-[^:]+:/);
+  });
+
+  it('print:border-solid is clean after sanitizeNonInlinableRules removes resolved --tw-* declarations', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities(['print:border-solid']);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeStyleSheet(stylesheet);
+    sanitizeNonInlinableRules(stylesheet);
+    const result = generate(stylesheet);
+
+    expect(result).not.toMatch(/var\(--tw-[^,()]+,\s*\)/);
+    expect(result).not.toMatch(/--tw-[^:]+:/);
+    expect(result).toMatchInlineSnapshot(
+      `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer utilities{.print_border-solid{@media print{border-style:solid!important}}}"`,
+    );
+  });
+});
+
+function walkDeclarationsInNonInlinableRules(
+  node: StyleSheet,
+  onDeclaration: (declaration: Declaration) => void,
+) {
+  walk(node, {
+    visit: 'Rule',
+    enter(rule) {
+      if (!isRuleInlinable(rule)) {
+        walk(rule, {
+          visit: 'Declaration',
+          enter(declaration) {
+            onDeclaration(declaration);
+          },
+        });
+      }
+    },
+  });
+}

package/src/components/tailwind/utils/css/strip-empty-tailwind-vars.ts

@@ -0,0 +1,70 @@
+import { type CssNode, generate, walk } from 'css-tree';
+
+/**
+ * Tailwind v4 emits variant-stacking idioms like
+ *   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,)
+ *   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-invert,) ...
+ * where each var() has an empty fallback so missing variants collapse to nothing.
+ * Tailwind deliberately leaves these variant vars undefined until used, so they
+ * stay in the output here and produce unresolvable custom properties in email HTML
+ * (no email client supports CSS custom properties reliably). Per the CSS spec
+ * (https://www.w3.org/TR/css-variables-1/#using-variables) an empty fallback means
+ * "use empty string if the variable is undefined", which is exactly what we want.
+ *
+ * Scoped to the `--tw-` prefix so any user-authored empty-fallback var() refs
+ * are left untouched.
+ *
+ * Uses post-order traversal so an outer var(--tw-X, var(--tw-Y,)) collapses
+ * correctly after the inner var() has been removed.
+ */
+export function stripEmptyTailwindVars(node: CssNode) {
+  walk(node, {
+    visit: 'Function',
+    leave(func, funcItem, funcList) {
+      if (func.name !== 'var') {
+        return;
+      }
+
+      let variableName: string | undefined;
+      walk(func, {
+        visit: 'Identifier',
+        enter(identifier) {
+          variableName = identifier.name;
+          return this.break;
+        },
+      });
+      if (!variableName?.startsWith('--tw-')) {
+        return;
+      }
+
+      let sawComma = false;
+      let hasFallbackContent = false;
+      func.children.forEach((child) => {
+        if (!sawComma) {
+          if (child.type === 'Operator' && child.value === ',') {
+            sawComma = true;
+          }
+          return;
+        }
+
+        let childValue = generate(child).trim();
+        if (child.type === 'Raw') {
+          const emptyTailwindVarPattern = /var\(--tw-[^,()]+,\s*\)/g;
+          childValue = childValue
+            .replaceAll(emptyTailwindVarPattern, '')
+            .trim();
+        }
+
+        if (childValue.length > 0) {
+          hasFallbackContent = true;
+        }
+      });
+
+      if (!sawComma || hasFallbackContent) {
+        return;
+      }
+
+      funcList.remove(funcItem);
+    },
+  });
+}

package/src/components/tailwind/utils/css/unwrap-value.ts

@@ -0,0 +1,9 @@
+import type { Raw, Value } from 'css-tree';
+
+export function unwrapValue(value: Value | Raw) {
+  if (value.type === 'Value' && value.children.size === 1) {
+    return value.children.first ?? value;
+  }
+
+  return value;
+}

package/src/components/tailwind/utils/react/is-component.ts

@@ -0,0 +1,12 @@
+import { elementMarker } from '../../../element-marker.js';
+
+export const isComponent = (
+  element: React.ReactElement,
+): element is React.ReactElement<unknown, React.FC<unknown>> => {
+  return (
+    (typeof element.type === 'function' ||
+      // @ts-expect-error - we know this is a component that may have a render function
+      element.type.render !== undefined) &&
+    !(elementMarker in (element.type as object))
+  );
+};

package/src/components/tailwind/utils/react/map-react-tree.spec.tsx

@@ -0,0 +1,58 @@
+import { render } from '@react-email/render';
+import { mapReactTree } from './map-react-tree.js';
+
+describe('mapReactTree()', () => {
+  it('process should be called for all normal elements', async () => {
+    const node = (
+      <>
+        <div>This is a div</div>
+        <span>Interesting span</span>
+        <h1>header 1</h1>
+      </>
+    );
+
+    const process = vi.fn((n: React.ReactNode) => n);
+
+    const result = mapReactTree(node, process);
+
+    await render(<>{result}</>);
+
+    expect(process).toHaveBeenCalledTimes(7);
+  });
+
+  it('process should be called for all elements with custom components', async () => {
+    const Custom = (props: { children: React.ReactNode }) => {
+      return (
+        <>
+          <div>
+            <span>
+              <h1>Testing heading</h1> surrounded span
+            </span>
+            surrounded by div
+          </div>
+
+          {props.children}
+        </>
+      );
+    };
+    const node = (
+      <>
+        <div>This is a div</div>
+        <span>Interesting span</span>
+        <h1>header 1</h1>
+
+        <Custom>
+          <h1>Well, hello friends!</h1>
+        </Custom>
+      </>
+    );
+
+    const process = vi.fn((n: React.ReactNode) => n);
+
+    const result = mapReactTree(node, process);
+
+    await render(<>{result}</>);
+
+    expect(process).toHaveBeenCalledTimes(17);
+  });
+});

package/src/components/tailwind/utils/react/map-react-tree.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { isComponent } from './is-component.js';
+
+/**
+ * A function made for deep mapping a React tree from a node, even through its components.
+ * For all the components it finds, it renders them by directly calling them. This has a few issues
+ * with hooks, and the only solution is `renderAsync` here, which will probably be done in the future.
+ *
+ * @param process - The callback that will be called every time a new element has been reached.
+ *
+ * For components, this is going to be called, most of the time, two times. This is because the best
+ * approach is to process *both* before rendering the components (i.e. on the props.children of a component element)
+ * and after rendering them because the children themselves might have been modified in the component's
+ * rendering.
+ */
+export function mapReactTree(
+  value: React.ReactNode,
+  process: (node: React.ReactNode) => React.ReactNode,
+): React.ReactNode {
+  const mapped = React.Children.map(value, (node) => {
+    if (React.isValidElement<{ children?: React.ReactNode }>(node)) {
+      const newProps = { ...node.props };
+
+      if (node.props.children && !isComponent(node)) {
+        newProps.children = mapReactTree(node.props.children, process);
+      }
+
+      const processed = process(
+        React.cloneElement(node, newProps, newProps.children),
+      );
+
+      if (
+        React.isValidElement<{ children?: React.ReactNode }>(processed) &&
+        isComponent(processed)
+      ) {
+        const OriginalComponent =
+          typeof processed.type === 'object'
+            ? // @ts-expect-error - we know this is a component with a render function
+              (processed.type.render as React.FC)
+            : (processed.type as React.FC);
+
+        const rendered = OriginalComponent(processed.props);
+        const mappedRenderedNode = mapReactTree(
+          rendered as React.ReactNode,
+          process,
+        );
+
+        return mappedRenderedNode;
+      }
+
+      return processed;
+    }
+
+    return process(node);
+  });
+
+  return mapped && mapped.length === 1 ? mapped[0] : mapped;
+}

package/src/components/tailwind/utils/tailwindcss/clone-element-with-inlined-styles.ts

@@ -0,0 +1,61 @@
+import type { Rule } from 'css-tree';
+import React from 'react';
+import type { EmailElementProps } from '../../tailwind.js';
+import { sanitizeClassName } from '../compatibility/sanitize-class-name.js';
+import type { CustomProperties } from '../css/get-custom-properties.js';
+import { makeInlineStylesFor } from '../css/make-inline-styles-for.js';
+import { isComponent } from '../react/is-component.js';
+
+export function cloneElementWithInlinedStyles(
+  element: React.ReactElement<EmailElementProps>,
+  inlinableRules: Map<string, Rule[]>,
+  nonInlinableRules: Map<string, Rule[]>,
+  customProperties: CustomProperties,
+) {
+  const propsToOverwrite: Partial<EmailElementProps> = {};
+
+  if (element.props.className && !isComponent(element)) {
+    const classes = element.props.className.trim().split(/\s+/);
+
+    const residualClasses: string[] = [];
+
+    const rules: Rule[] = [];
+    for (const className of classes) {
+      const classRules = inlinableRules.get(className);
+      if (classRules) {
+        rules.push(...classRules);
+      }
+      if (nonInlinableRules.has(className)) {
+        residualClasses.push(className);
+      } else if (!classRules) {
+        residualClasses.push(className);
+      }
+    }
+
+    const styles = makeInlineStylesFor(rules, customProperties);
+    propsToOverwrite.style = {
+      ...styles,
+      ...element.props.style,
+    };
+
+    if (residualClasses.length > 0) {
+      propsToOverwrite.className = residualClasses
+        .map((className) => {
+          if (nonInlinableRules.has(className)) {
+            return sanitizeClassName(className);
+          }
+          return className;
+        })
+        .join(' ');
+    } else {
+      propsToOverwrite.className = undefined;
+    }
+  }
+
+  const newProps = {
+    ...element.props,
+    ...propsToOverwrite,
+  };
+
+  return React.cloneElement(element, newProps, newProps.children);
+}

package/src/components/tailwind/utils/tailwindcss/setup-tailwind.spec.ts

@@ -0,0 +1,25 @@
+import { generate } from 'css-tree';
+import { setupTailwind } from './setup-tailwind.js';
+
+test('setupTailwind() and addUtilities()', async () => {
+  const { addUtilities, getStyleSheet } = await setupTailwind({});
+
+  addUtilities(['text-red-500', 'sm:bg-blue-300', 'bg-slate-900']);
+
+  expect(generate(getStyleSheet())).toMatchInlineSnapshot(
+    `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}"`,
+  );
+
+  addUtilities(['bg-red-100']);
+
+  expect(generate(getStyleSheet())).toMatchInlineSnapshot(
+    `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-100: oklch(93.6% 0.032 17.717);--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-red-100{background-color:var(--color-red-100)}.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}"`,
+  );
+});
+
+test('setupTailwind() throws on legacy positional config shape', async () => {
+  await expect(
+    // @ts-expect-error — intentionally calling with the old shape to verify the guard
+    setupTailwind({ plugins: [], theme: { extend: {} } }),
+  ).rejects.toThrowError(/setupTailwind now takes \{ config, cssConfigs \}/);
+});

package/src/components/tailwind/utils/tailwindcss/setup-tailwind.ts

@@ -0,0 +1,121 @@
+import { parse, type StyleSheet } from 'css-tree';
+import { compile } from 'tailwindcss';
+import type { TailwindConfig } from '../../tailwind.js';
+import indexCss from './tailwind-stylesheets/index.js';
+import preflightCss from './tailwind-stylesheets/preflight.js';
+import themeCss from './tailwind-stylesheets/theme.js';
+import utilitiesCss from './tailwind-stylesheets/utilities.js';
+
+export type TailwindSetup = Awaited<ReturnType<typeof setupTailwind>>;
+
+interface CSSConfigs {
+  theme?: string;
+  utility?: string;
+}
+
+interface SetupTailwindProps {
+  config?: TailwindConfig;
+  cssConfigs?: CSSConfigs;
+}
+
+const SETUP_TAILWIND_KEYS = new Set(['config', 'cssConfigs']);
+
+export async function setupTailwind(props: SetupTailwindProps = {}) {
+  const stray = Object.keys(props).filter((k) => !SETUP_TAILWIND_KEYS.has(k));
+  if (stray.length > 0) {
+    throw new Error(
+      `setupTailwind now takes { config, cssConfigs } — received unexpected keys: ${stray.join(', ')}. ` +
+        'If you used to call setupTailwind(config), wrap it: setupTailwind({ config }).',
+    );
+  }
+  const { config, cssConfigs } = props;
+  const baseCss = `
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+${cssConfigs?.theme ? '@import "custom-theme.css" layer(theme);' : ''}
+${cssConfigs?.utility ? '@import "custom-utilities.css" layer(utilities);' : ''}
+@config;
+`;
+
+  const compiler = await compile(baseCss, {
+    async loadModule(id, base, resourceHint) {
+      if (resourceHint === 'config') {
+        return {
+          path: id,
+          base: base,
+          module: config ?? {},
+        };
+      }
+
+      throw new Error(
+        `NO-OP: should we implement support for ${resourceHint}?`,
+      );
+    },
+    polyfills: 0, // All
+    async loadStylesheet(id, base) {
+      if (id === 'tailwindcss') {
+        return {
+          base,
+          path: 'tailwindcss/index.css',
+          content: indexCss,
+        };
+      }
+
+      if (id === 'tailwindcss/preflight.css') {
+        return {
+          base,
+          path: id,
+          content: preflightCss,
+        };
+      }
+
+      if (id === 'tailwindcss/theme.css') {
+        return {
+          base,
+          path: id,
+          content: themeCss,
+        };
+      }
+
+      if (id === 'tailwindcss/utilities.css') {
+        return {
+          base,
+          path: id,
+          content: utilitiesCss,
+        };
+      }
+
+      if (id === 'custom-theme.css') {
+        return {
+          base,
+          path: id,
+          content: cssConfigs?.theme ?? '',
+        };
+      }
+
+      if (id === 'custom-utilities.css') {
+        return {
+          base,
+          path: id,
+          content: cssConfigs?.utility ?? '',
+        };
+      }
+
+      throw new Error(
+        'stylesheet not supported, you can only import the ones from tailwindcss',
+      );
+    },
+  });
+
+  let css: string = baseCss;
+
+  return {
+    addUtilities: function addUtilities(candidates: string[]): void {
+      css = compiler.build(candidates);
+    },
+    getStyleSheet: function getCss() {
+      return parse(css) as StyleSheet;
+    },
+  };
+}