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

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;
+}

package/src/components/tailwind/utils/css/resolve-all-css-variables.spec.ts

@@ -0,0 +1,296 @@
+import { generate, parse } from 'css-tree';
+import { resolveAllCssVariables } from './resolve-all-css-variables.js';
+
+describe('resolveAllCSSVariables', () => {
+  it('ignores @layer (properties) defined for browser compatibility', () => {
+    const root =
+      parse(`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --radius-md: 0.375rem;
+  }
+}
+@layer utilities {
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-\\\\[14px\\\\] {
+    font-size: 14px;
+  }
+  .leading-\\\\[24px\\\\] {
+    --tw-leading: 24px;
+    line-height: 24px;
+  }
+  .text-black {
+    color: var(--color-black);
+  }
+  .text-blue-400 {
+    color: var(--color-blue-400);
+  }
+  .text-blue-600 {
+    color: var(--color-blue-600);
+  }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-leading: initial;
+    }
+  }
+}
+`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-400: oklch(70.7% 0.165 254.624);--color-blue-600: oklch(54.6% 0.245 262.881);--color-gray-200: oklch(92.8% 0.006 264.531);--color-black: #000;--color-white: #fff;--spacing: 0.25rem;--text-sm: 0.875rem;--text-sm--line-height: calc(1.25 / 0.875);--radius-md: 0.375rem}}@layer utilities{.mt-8{margin-top:calc(0.25rem*8)}.rounded-md{border-radius:0.375rem}.bg-blue-600{background-color:oklch(54.6%0.245 262.881)}.bg-red-500{background-color:oklch(63.7%0.237 25.331)}.bg-white{background-color:#fff}.p-4{padding:calc(0.25rem*4)}.px-3{padding-inline:calc(0.25rem*3)}.py-2{padding-block:calc(0.25rem*2)}.text-sm{font-size:0.875rem;line-height:calc(1.25/0.875)}.text-\\\\[14px\\\\]{font-size:14px}.leading-\\\\[24px\\\\]{--tw-leading: 24px;line-height:24px}.text-black{color:#000}.text-blue-400{color:oklch(70.7%0.165 254.624)}.text-blue-600{color:oklch(54.6%0.245 262.881)}.text-gray-200{color:oklch(92.8%0.006 264.531)}.no-underline{text-decoration-line:none}}@property --tw-leading{syntax:"*";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::before,::after,::backdrop{--tw-leading: initial}}}"`,
+    );
+  });
+
+  it('works with simple css variables on a :root', () => {
+    const root = parse(`:root {
+  --width: 100px;
+}
+
+.box {
+  width: var(--width);
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `":root{--width: 100px}.box{width:100px}"`,
+    );
+  });
+
+  it('works for variables across different CSS layers', () => {
+    const root = parse(`@layer base {
+      :root {
+        --width: 100px;
+      }
+    }
+
+    @layer utilities {
+      .box {
+        width: var(--width);
+      }
+    }`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `"@layer base{:root{--width: 100px}}@layer utilities{.box{width:100px}}"`,
+    );
+  });
+
+  it('works with multiple variables in the same declaration', () => {
+    const root = parse(`:root {
+      --top: 101px;
+      --bottom: 102px;
+      --right: 103px;
+      --left: 104px;
+    }
+
+    .box {
+      margin: var(--top) var(--right) var(--bottom) var(--left);
+    }`);
+
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `":root{--top: 101px;--bottom: 102px;--right: 103px;--left: 104px}.box{margin:101px 103px 102px 104px}"`,
+    );
+  });
+
+  it('keeps variable usages if it cant find their declaration', () => {
+    const root = parse(`.box {
+  width: var(--width);
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(`".box{width:var(--width)}"`);
+  });
+
+  it('works with variables set in the same rule', () => {
+    const root = parse(`.box {
+  --width: 200px;
+  width: var(--width);
+}
+
+@media (min-width: 1280px) {
+  .xl\\\\:bg-green-500 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(34 197 94 / var(--tw-bg-opacity))
+  }
+}
+`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{--width: 200px;width:200px}@media (min-width:1280px){.xl\\\\:bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94/1)}}"`,
+    );
+  });
+
+  it('works with a variable set in a layer, and used in another through a media query', () => {
+    const root = parse(`@layer theme {
+  :root {
+    --color-blue-300: blue;
+  }
+}
+
+@layer utilities {
+  .sm\\\\:bg-blue-300 {
+    @media (width >= 40rem) {
+      background-color: var(--color-blue-300);
+    }
+  }
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `"@layer theme{:root{--color-blue-300: blue}}@layer utilities{.sm\\\\:bg-blue-300{@media (width>=40rem){background-color:blue}}}"`,
+    );
+  });
+
+  it('uses fallback values when variable definition is not found', () => {
+    const root = parse(`.box {
+  width: var(--undefined-width, 150px);
+  height: var(--undefined-height, 200px);
+  margin: var(--undefined-margin, 10px 20px);
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".box{width:150px;height:200px;margin:10px 20px}"`,
+    );
+  });
+
+  it('handles nested var() functions in fallbacks', () => {
+    const root = parse(`:root {
+  --fallback-width: 300px;
+}
+
+.box {
+  width: var(--undefined-width, var(--fallback-width));
+  height: var(--undefined-height, var(--also-undefined, 250px));
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `":root{--fallback-width: 300px}.box{width:300px;height:250px}"`,
+    );
+  });
+
+  it('handles deeply nested var() functions with complex parentheses', () => {
+    const root = parse(`:root {
+  --primary: blue;
+  --secondary: red;
+  --fallback: green;
+  --size: 20px;
+}
+
+.box {
+  color: var(--primary, var(--secondary, var(--fallback)));
+  width: var(--size, calc(100px + var(--size, 20px)));
+  border: var(--border-width, var(--border-style, var(--border-color, 1px solid black)));
+  --r: 100;
+  --b: 10;
+  background: var(--bg-color, rgb(var(--r, 255), var(--g, 0), var(--b, 0)));
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `":root{--primary: blue;--secondary: red;--fallback: green;--size: 20px}.box{color:blue;width:20px;border:1px solid black;--r: 100;--b: 10;background:rgb(100,0,10)}"`,
+    );
+  });
+
+  it('does not leak variables across sibling nested at-rules within the same rule', () => {
+    const root = parse(`.print_invert {
+  @media print {
+    --tw-invert: invert(100%);
+    filter: var(--tw-invert, none);
+  }
+  @media screen {
+    filter: var(--tw-invert, none);
+  }
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".print_invert{@media print{--tw-invert: invert(100%);filter:invert(100%)}@media screen{filter:none}}"`,
+    );
+  });
+
+  it('handles selectors with asterisks in attribute selectors and pseudo-functions', () => {
+    const root = parse(`* {
+  --global-color: red;
+}
+
+input[type="*"]:hover {
+  color: var(--global-color);
+}
+
+div:nth-child(2*n+1) {
+  background: var(--global-color);
+}
+
+.test[data-attr="value*test"] {
+  border-color: var(--global-color);
+}
+
+.universal-with-class-* {
+  --class-color: blue;
+  text-decoration: var(--class-color);
+}
+
+.normal {
+  color: var(--class-color);
+}`);
+
+    resolveAllCssVariables(root);
+    const result = generate(root);
+
+    // Variables from universal selector (*) should resolve to other selectors with actual universal selector
+    expect(result).toContain('input[type="*"]:hover{color:red}');
+    expect(result).toContain('div:nth-child(2*n+1){background:red}');
+    expect(result).toContain('.test[data-attr="value*test"]{border-color:red}');
+
+    // Variables from *.universal-with-class should resolve within the same selector and to .normal
+    expect(result).toContain(
+      '.universal-with-class-*{--class-color: blue;text-decoration:blue}',
+    );
+    expect(result).toContain('.normal{color:var(--class-color)}');
+  });
+});