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

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

@@ -0,0 +1,236 @@
+import {
+  type CssNode,
+  type Declaration,
+  generate,
+  type List,
+  type ListItem,
+  parse,
+  type Raw,
+  type SelectorList,
+  type Value,
+  walk,
+} from 'css-tree';
+
+interface VariableUse {
+  declaration: Declaration;
+  path: CssNode[];
+  fallback?: string;
+  variableName: string;
+  raw: string;
+}
+
+export interface VariableDefinition {
+  declaration: Declaration;
+  path: CssNode[];
+  variableName: string;
+  definition: string;
+}
+
+function doSelectorsIntersect(
+  first: SelectorList | Raw,
+  second: SelectorList | Raw,
+): boolean {
+  const firstStringified = generate(first);
+  const secondStringified = generate(second);
+  if (firstStringified === secondStringified) {
+    return true;
+  }
+
+  let hasSomeUniversal = false;
+  const walker = (
+    node: CssNode,
+    _parentListItem: ListItem<CssNode>,
+    parentList: List<CssNode>,
+  ) => {
+    if (hasSomeUniversal) return;
+    if (node.type === 'PseudoClassSelector' && node.name === 'root') {
+      hasSomeUniversal = true;
+    }
+    if (
+      node.type === 'TypeSelector' &&
+      node.name === '*' &&
+      parentList.size === 1
+    ) {
+      hasSomeUniversal = true;
+    }
+  };
+  walk(first, walker);
+  walk(second, walker);
+
+  if (hasSomeUniversal) {
+    return true;
+  }
+
+  return false;
+}
+
+export function resolveAllCssVariables(node: CssNode) {
+  const variableDefinitions = new Set<VariableDefinition>();
+  const variableUses = new Set<VariableUse>();
+
+  const path: CssNode[] = [];
+
+  walk(node, {
+    leave() {
+      path.shift();
+    },
+    enter(node: CssNode) {
+      if (node.type === 'Declaration') {
+        const declaration = node;
+        // Ignores @layer (properties) { ... } to avoid variable resolution conflicts
+        if (
+          path.some(
+            (ancestor) =>
+              ancestor.type === 'Atrule' &&
+              ancestor.name === 'layer' &&
+              ancestor.prelude !== null &&
+              generate(ancestor.prelude).includes('properties'),
+          )
+        ) {
+          path.unshift(node);
+          return;
+        }
+
+        if (/--[\S]+/.test(declaration.property)) {
+          variableDefinitions.add({
+            declaration,
+            path: [...path],
+            variableName: declaration.property,
+            definition: generate(declaration.value),
+          });
+        } else {
+          function parseVariableUsesFrom(node: CssNode) {
+            walk(node, {
+              visit: 'Function',
+              enter(funcNode) {
+                if (funcNode.name === 'var') {
+                  const children = funcNode.children.toArray();
+                  const name = generate(children[0]!);
+                  const fallback =
+                    // The second argument should be an "," Operator Node,
+                    // such that the actual fallback is only in the third argument
+                    children[2] ? generate(children[2]) : undefined;
+
+                  variableUses.add({
+                    declaration,
+                    path: [...path],
+                    fallback,
+                    variableName: name,
+                    raw: generate(funcNode),
+                  });
+
+                  if (fallback?.includes('var(')) {
+                    const parsedFallback = parse(fallback, {
+                      context: 'value',
+                    });
+
+                    parseVariableUsesFrom(parsedFallback);
+                  }
+                }
+              },
+            });
+          }
+
+          parseVariableUsesFrom(declaration.value);
+        }
+      }
+      path.unshift(node);
+    },
+  });
+
+  for (const use of variableUses) {
+    let hasReplaced = false;
+
+    for (const definition of variableDefinitions) {
+      if (use.variableName !== definition.variableName) {
+        continue;
+      }
+
+      if (
+        use.path[0]?.type === 'Block' &&
+        use.path[1]?.type === 'Atrule' &&
+        use.path[2]?.type === 'Block' &&
+        use.path[3]?.type === 'Rule' &&
+        definition.path[0]!.type === 'Block' &&
+        definition.path[1]!.type === 'Rule' &&
+        doSelectorsIntersect(use.path[3].prelude, definition.path[1].prelude)
+      ) {
+        use.declaration.value = parse(
+          generate(use.declaration.value).replaceAll(
+            use.raw,
+            definition.definition,
+          ),
+          {
+            context: 'value',
+          },
+        ) as Raw | Value;
+        hasReplaced = true;
+        break;
+      }
+
+      if (
+        use.path[0]?.type === 'Block' &&
+        use.path[1]?.type === 'Rule' &&
+        definition.path[0]?.type === 'Block' &&
+        definition.path[1]?.type === 'Rule' &&
+        doSelectorsIntersect(use.path[1].prelude, definition.path[1].prelude)
+      ) {
+        use.declaration.value = parse(
+          generate(use.declaration.value).replaceAll(
+            use.raw,
+            definition.definition,
+          ),
+          {
+            context: 'value',
+          },
+        ) as Raw | Value;
+        hasReplaced = true;
+        break;
+      }
+
+      // Both use and definition live inside the same nested @media (or other
+      // at-rule) block of the same rule — e.g. Tailwind v4's
+      //   .print_invert { @media print { --tw-invert: invert(100%); filter: var(--tw-invert,) ... } }
+      // The previous two checks only cover a Rule directly containing the
+      // declaration; this one covers Rule → Block → Atrule → Block → Declaration
+      // on both sides.
+      if (
+        use.path[0]?.type === 'Block' &&
+        use.path[1]?.type === 'Atrule' &&
+        use.path[2]?.type === 'Block' &&
+        use.path[3]?.type === 'Rule' &&
+        definition.path[0]?.type === 'Block' &&
+        definition.path[1]?.type === 'Atrule' &&
+        definition.path[2]?.type === 'Block' &&
+        definition.path[3]?.type === 'Rule' &&
+        use.path[1].name === definition.path[1].name &&
+        (use.path[1].prelude
+          ? definition.path[1].prelude
+            ? generate(use.path[1].prelude) ===
+              generate(definition.path[1].prelude)
+            : false
+          : definition.path[1].prelude === null) &&
+        doSelectorsIntersect(use.path[3].prelude, definition.path[3].prelude)
+      ) {
+        use.declaration.value = parse(
+          generate(use.declaration.value).replaceAll(
+            use.raw,
+            definition.definition,
+          ),
+          {
+            context: 'value',
+          },
+        ) as Raw | Value;
+        hasReplaced = true;
+        break;
+      }
+    }
+
+    if (!hasReplaced && use.fallback) {
+      use.declaration.value = parse(
+        generate(use.declaration.value).replaceAll(use.raw, use.fallback),
+        { context: 'value' },
+      ) as Raw | Value;
+    }
+  }
+}

package/src/components/tailwind/utils/css/resolve-calc-expressions.spec.ts

@@ -0,0 +1,36 @@
+import { generate, parse } from 'css-tree';
+import { resolveCalcExpressions } from './resolve-calc-expressions.js';
+
+describe('resolveCalcExpressions()', () => {
+  it('resolves spacing calc expressions from tailwind v4', () => {
+    const root = parse(`
+.px-3{padding-inline:calc(0.25rem*3)}
+.py-2{padding-block:calc(0.25rem*2)}
+  `);
+    resolveCalcExpressions(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".px-3{padding-inline:0.75rem}.py-2{padding-block:0.5rem}"`,
+    );
+  });
+
+  it('resolves calc expressions repeating decimals', () => {
+    const root = parse(`
+      .w-1/3 { width: calc(0.3333333333333333*100%); }
+    `);
+    resolveCalcExpressions(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".w-1/3{width:33.33333333333333%}"`,
+    );
+  });
+
+  it('does not modify complex calc expressions', () => {
+    const root = parse(`
+.px-3{padding-inline:calc(0.25rem*(3 + 1px))}
+.py-2{padding-block:calc(0.25rem*(2 + 1px))}
+  `);
+    resolveCalcExpressions(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".px-3{padding-inline:calc(0.25rem*(3 + 1px))}.py-2{padding-block:calc(0.25rem*(2 + 1px))}"`,
+    );
+  });
+});

package/src/components/tailwind/utils/css/resolve-calc-expressions.ts

@@ -0,0 +1,147 @@
+import { type CssNode, walk } from 'css-tree';
+
+/**
+ * Intentionally only resolves `*` and `/` operations without dealing with parenthesis, because this is the only thing required to run Tailwind v4
+ */
+export function resolveCalcExpressions(node: CssNode) {
+  walk(node, {
+    visit: 'Function',
+    enter(func, funcListItem) {
+      if (func.name === 'calc') {
+        /*
+          [
+            { type: 'Dimension', loc: null, value: '0.25', unit: 'rem' },
+            { type: 'Operator', loc: null, value: '*' },
+            { type: 'Number', loc: null, value: '2' }
+            { type: 'Percentage', loc: null, value: '2' }
+          ]
+        */
+        func.children.forEach((child, item) => {
+          const left = item.prev;
+          const right = item.next;
+          if (
+            left &&
+            right &&
+            child.type === 'Operator' &&
+            (left.data.type === 'Dimension' ||
+              left.data.type === 'Number' ||
+              left.data.type === 'Percentage') &&
+            (right.data.type === 'Dimension' ||
+              right.data.type === 'Number' ||
+              right.data.type === 'Percentage')
+          ) {
+            if (child.value === '*' || child.value === '/') {
+              const value = (() => {
+                if (child.value === '*') {
+                  return String(
+                    Number.parseFloat(left.data.value) *
+                      Number.parseFloat(right.data.value),
+                  );
+                }
+                if (right.data.value === '0') {
+                  return '0';
+                }
+                return String(
+                  Number.parseFloat(left.data.value) /
+                    Number.parseFloat(right.data.value),
+                );
+              })();
+              if (
+                left.data.type === 'Dimension' &&
+                right.data.type === 'Number'
+              ) {
+                item.data = {
+                  type: 'Dimension',
+                  unit: left.data.unit,
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Number' &&
+                right.data.type === 'Dimension'
+              ) {
+                item.data = {
+                  type: 'Dimension',
+                  unit: right.data.unit,
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Number' &&
+                right.data.type === 'Number'
+              ) {
+                item.data = {
+                  type: 'Number',
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Dimension' &&
+                right.data.type === 'Dimension' &&
+                left.data.unit === right.data.unit
+              ) {
+                if (child.value === '/') {
+                  item.data = {
+                    type: 'Number',
+                    value,
+                  };
+                } else {
+                  item.data = {
+                    type: 'Dimension',
+                    unit: left.data.unit,
+                    value,
+                  };
+                }
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Percentage' &&
+                right.data.type === 'Number'
+              ) {
+                item.data = {
+                  type: 'Percentage',
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Number' &&
+                right.data.type === 'Percentage'
+              ) {
+                item.data = {
+                  type: 'Percentage',
+                  value,
+                };
+                func.children.remove(left);
+                func.children.remove(right);
+              } else if (
+                left.data.type === 'Percentage' &&
+                right.data.type === 'Percentage'
+              ) {
+                if (child.value === '/') {
+                  item.data = {
+                    type: 'Number',
+                    value,
+                  };
+                } else {
+                  item.data = {
+                    type: 'Percentage',
+                    value,
+                  };
+                }
+                func.children.remove(left);
+                func.children.remove(right);
+              }
+            }
+          }
+        });
+        if (func.children.size === 1 && func.children.first) {
+          funcListItem.data = func.children.first;
+        }
+      }
+    },
+  });
+}