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

package/src/components/tailwind/e2e/vite/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/src/components/tailwind/e2e/vite/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/src/components/tailwind/e2e/vite/vite.config.ts

@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});

package/src/components/tailwind/hooks/use-suspended-promise.ts

@@ -0,0 +1,34 @@
+interface PromiseState {
+  promise: Promise<unknown>;
+  error?: unknown;
+  result?: unknown;
+}
+
+const promiseStates = new Map<string, PromiseState>();
+
+export function useSuspensedPromise<Result>(
+  promiseFn: () => Promise<Result>,
+  key: string,
+) {
+  const previousState = promiseStates.get(key);
+  if (previousState) {
+    if ('error' in previousState) {
+      throw previousState.error;
+    }
+
+    if ('result' in previousState) {
+      return previousState.result as Result;
+    }
+
+    throw previousState.promise;
+  }
+
+  const state: PromiseState = {
+    promise: promiseFn()
+      .then((result) => (state.result = result))
+      .catch((error) => (state.error = error as unknown)),
+  };
+  promiseStates.set(key, state);
+
+  throw state.promise;
+}

package/src/components/tailwind/hooks/use-suspensed-promise.spec.ts

@@ -0,0 +1,263 @@
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: function is not a React hook */
+import { useSuspensedPromise } from './use-suspended-promise.js';
+
+describe('useSuspensedPromise', () => {
+  beforeEach(() => {});
+
+  it('suspends (throw promise) on first call', () => {
+    const mockPromise = Promise.resolve('test-result');
+    const promiseFn = vi.fn(() => mockPromise);
+    const key = 'test-key-1';
+
+    let thrownValue: any;
+    try {
+      useSuspensedPromise(promiseFn, key);
+    } catch (thrown) {
+      thrownValue = thrown;
+    }
+    expect(thrownValue).toBeInstanceOf(Promise);
+    expect(promiseFn).toHaveBeenCalledOnce();
+  });
+
+  it('returns cached result on subsequent calls after promise resolves', async () => {
+    const result = 'test-result';
+    const promiseFn = vi.fn(() => Promise.resolve(result));
+    const key = 'test-key-2';
+
+    let thrownPromise: Promise<any>;
+    try {
+      useSuspensedPromise(promiseFn, key);
+    } catch (promise) {
+      thrownPromise = promise as Promise<any>;
+    }
+
+    await thrownPromise!;
+
+    const cachedResult = useSuspensedPromise(promiseFn, key);
+    expect(cachedResult).toBe(result);
+    expect(promiseFn).toHaveBeenCalledOnce();
+  });
+
+  it('throws cached error on subsequent calls after promise rejects', async () => {
+    const error = new Error('test-error');
+    const promiseFn = vi.fn(() => Promise.reject(error));
+    const key = 'test-key-3';
+
+    let thrownPromise: Promise<any>;
+    try {
+      useSuspensedPromise(promiseFn, key);
+    } catch (promise) {
+      thrownPromise = promise as Promise<any>;
+    }
+
+    try {
+      await thrownPromise!;
+    } catch {}
+
+    let thrownError: any;
+    try {
+      useSuspensedPromise(promiseFn, key);
+    } catch (thrown) {
+      thrownError = thrown;
+    }
+    expect(thrownError).toBe(error);
+    expect(promiseFn).toHaveBeenCalledOnce();
+  });
+
+  it('handles different keys independently', async () => {
+    const result1 = 'result1';
+    const result2 = 'result2';
+    const promiseFn1 = vi.fn(() => Promise.resolve(result1));
+    const promiseFn2 = vi.fn(() => Promise.resolve(result2));
+    const key1 = 'test-key-4';
+    const key2 = 'test-key-5';
+
+    let promise1: Promise<any>;
+    let promise2: Promise<any>;
+
+    try {
+      useSuspensedPromise(promiseFn1, key1);
+    } catch (p) {
+      promise1 = p as Promise<any>;
+    }
+
+    try {
+      useSuspensedPromise(promiseFn2, key2);
+    } catch (p) {
+      promise2 = p as Promise<any>;
+    }
+
+    await Promise.all([promise1!, promise2!]);
+
+    expect(useSuspensedPromise(promiseFn1, key1)).toBe(result1);
+    expect(useSuspensedPromise(promiseFn2, key2)).toBe(result2);
+    expect(promiseFn1).toHaveBeenCalledOnce();
+    expect(promiseFn2).toHaveBeenCalledOnce();
+  });
+
+  it('handles the same key with different promise functions', async () => {
+    const result1 = 'result1';
+    const promiseFn1 = vi.fn(() => Promise.resolve(result1));
+    const promiseFn2 = vi.fn(() => Promise.resolve('result2'));
+    const key = 'test-key-6';
+
+    let promise1: Promise<any>;
+    try {
+      useSuspensedPromise(promiseFn1, key);
+    } catch (p) {
+      promise1 = p as Promise<any>;
+    }
+
+    await promise1!;
+
+    const cachedResult = useSuspensedPromise(promiseFn2, key);
+    expect(cachedResult).toBe(result1);
+    expect(promiseFn1).toHaveBeenCalledOnce();
+    expect(promiseFn2).not.toHaveBeenCalled();
+  });
+
+  it('handles promise that resolves to undefined', async () => {
+    const promiseFn = vi.fn(() => Promise.resolve(undefined));
+    const key = 'test-key-7';
+
+    let thrownPromise: Promise<any>;
+    try {
+      useSuspensedPromise(promiseFn, key);
+    } catch (promise) {
+      thrownPromise = promise as Promise<any>;
+    }
+
+    await thrownPromise!;
+
+    const result = useSuspensedPromise(promiseFn, key);
+    expect(result).toBeUndefined();
+  });
+
+  it('handles promise that resolves to null', async () => {
+    const promiseFn = vi.fn(() => Promise.resolve(null));
+    const key = 'test-key-8';
+
+    let thrownPromise: Promise<any>;
+    try {
+      useSuspensedPromise(promiseFn, key);
+    } catch (promise) {
+      thrownPromise = promise as Promise<any>;
+    }
+
+    await thrownPromise!;
+
+    const result = useSuspensedPromise(promiseFn, key);
+    expect(result).toBeNull();
+  });
+
+  it('handles promise that resolves to falsy values', async () => {
+    const falsyValues = [false, 0, '', null, undefined];
+
+    for (let i = 0; i < falsyValues.length; i++) {
+      const value = falsyValues[i];
+      const promiseFn = vi.fn(() => Promise.resolve(value));
+      const key = `test-key-falsy-${i}`;
+
+      let thrownPromise: Promise<any>;
+      try {
+        useSuspensedPromise(promiseFn, key);
+      } catch (promise) {
+        thrownPromise = promise as Promise<any>;
+      }
+
+      await thrownPromise!;
+
+      const result = useSuspensedPromise(promiseFn, key);
+      expect(result).toBe(value);
+    }
+  });
+
+  it('handles promise that rejects with non-Error values', async () => {
+    const rejectionValues = [
+      'string error',
+      42,
+      null,
+      undefined,
+      { message: 'object error' },
+    ];
+
+    for (let i = 0; i < rejectionValues.length; i++) {
+      const value = rejectionValues[i];
+      const promiseFn = vi.fn(() => Promise.reject(value));
+      const key = `test-key-rejection-${i}`;
+
+      let thrownPromise: Promise<any>;
+      try {
+        useSuspensedPromise(promiseFn, key);
+      } catch (promise) {
+        thrownPromise = promise as Promise<any>;
+      }
+
+      try {
+        await thrownPromise!;
+      } catch {}
+
+      let thrownError: any;
+      try {
+        useSuspensedPromise(promiseFn, key);
+      } catch (thrown) {
+        thrownError = thrown;
+      }
+      expect(thrownError).toBe(value);
+    }
+  });
+
+  it('works with generic types', async () => {
+    interface TestData {
+      id: number;
+      name: string;
+    }
+
+    const testData: TestData = { id: 1, name: 'test' };
+    const promiseFn = vi.fn(() => Promise.resolve(testData));
+    const key = 'test-key-9';
+
+    let thrownPromise: Promise<any>;
+    try {
+      useSuspensedPromise<TestData>(promiseFn, key);
+    } catch (promise) {
+      thrownPromise = promise as Promise<any>;
+    }
+
+    await thrownPromise!;
+
+    const result = useSuspensedPromise<TestData>(promiseFn, key);
+    expect(result).toEqual(testData);
+    expect(result.id).toBe(1);
+    expect(result.name).toBe('test');
+  });
+
+  it('maintains state across multiple calls with the same key', () => {
+    const promiseFn = vi.fn(() => Promise.resolve('test'));
+    const key = 'test-key-10';
+
+    let thrown1: any;
+    let thrown2: any;
+    let thrown3: any;
+    try {
+      useSuspensedPromise(promiseFn, key);
+    } catch (e) {
+      thrown1 = e;
+    }
+    try {
+      useSuspensedPromise(promiseFn, key);
+    } catch (e) {
+      thrown2 = e;
+    }
+    try {
+      useSuspensedPromise(promiseFn, key);
+    } catch (e) {
+      thrown3 = e;
+    }
+
+    expect(thrown1).toBeInstanceOf(Promise);
+    expect(thrown2).toBeInstanceOf(Promise);
+    expect(thrown3).toBeInstanceOf(Promise);
+    expect(promiseFn).toHaveBeenCalledOnce();
+  });
+});

package/src/components/tailwind/index.ts

@@ -0,0 +1,4 @@
+export * from './inline-styles.js';
+export * from './sanitize-stylesheet.js';
+export * from './tailwind.js';
+export * from './utils/tailwindcss/setup-tailwind.js';

package/src/components/tailwind/inline-styles.spec.ts

@@ -0,0 +1,49 @@
+import { parse, type StyleSheet } from 'css-tree';
+import { inlineStyles } from './inline-styles.js';
+
+describe('inlineStyles()', () => {
+  it('inlines a single rule for a class', () => {
+    const styleSheet = parse(`
+      .box { border-radius: 8px; background-color: white; padding: 16px; }
+    `) as StyleSheet;
+
+    expect(inlineStyles(styleSheet, ['box'])).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "white",
+        "borderRadius": "8px",
+        "padding": "16px",
+      }
+    `);
+  });
+
+  it('merges declarations when the same class is defined across multiple rules', () => {
+    // Regression for #3628: a Tailwind preset and a child config both defining `.box`.
+    const styleSheet = parse(`
+      .box { border-radius: 8px; background-color: white; padding: 16px; }
+      .box { background-color: red; }
+    `) as StyleSheet;
+
+    expect(inlineStyles(styleSheet, ['box'])).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red",
+        "borderRadius": "8px",
+        "padding": "16px",
+      }
+    `);
+  });
+
+  it("keeps a class's own cascade order when its rules are split by another class", () => {
+    const styleSheet = parse(`
+      .box { color: red; }
+      .other { font-weight: bold; }
+      .box { color: blue; }
+    `) as StyleSheet;
+
+    expect(inlineStyles(styleSheet, ['box', 'other'])).toMatchInlineSnapshot(`
+      {
+        "color": "blue",
+        "fontWeight": "bold",
+      }
+    `);
+  });
+});

package/src/components/tailwind/inline-styles.ts

@@ -0,0 +1,21 @@
+import type { StyleSheet } from 'css-tree';
+import { extractRulesPerClass } from './utils/css/extract-rules-per-class.js';
+import { getCustomProperties } from './utils/css/get-custom-properties.js';
+import { makeInlineStylesFor } from './utils/css/make-inline-styles-for.js';
+
+export function inlineStyles(
+  styleSheet: StyleSheet,
+  classes: string[],
+): Record<string, string> {
+  const { inlinable: inlinableRules } = extractRulesPerClass(
+    styleSheet,
+    classes,
+  );
+
+  const customProperties = getCustomProperties(styleSheet);
+
+  return makeInlineStylesFor(
+    Array.from(inlinableRules.values()).flat(),
+    customProperties,
+  );
+}

package/src/components/tailwind/sanitize-stylesheet.ts

@@ -0,0 +1,10 @@
+import type { StyleSheet } from 'css-tree';
+import { resolveAllCssVariables } from './utils/css/resolve-all-css-variables.js';
+import { resolveCalcExpressions } from './utils/css/resolve-calc-expressions.js';
+import { sanitizeDeclarations } from './utils/css/sanitize-declarations.js';
+
+export function sanitizeStyleSheet(styleSheet: StyleSheet) {
+  resolveAllCssVariables(styleSheet);
+  resolveCalcExpressions(styleSheet);
+  sanitizeDeclarations(styleSheet);
+}