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

package/src/components/tailwind/tailwind.tsx

@@ -0,0 +1,178 @@
+import { type CssNode, generate, List, type StyleSheet } from 'css-tree';
+import * as React from 'react';
+import type { Config } from 'tailwindcss';
+import { useSuspensedPromise } from './hooks/use-suspended-promise.js';
+import { sanitizeStyleSheet } from './sanitize-stylesheet.js';
+import { downlevelForEmailClients } from './utils/css/downlevel-for-email-clients.js';
+import { extractRulesPerClass } from './utils/css/extract-rules-per-class.js';
+import { getCustomProperties } from './utils/css/get-custom-properties.js';
+import { sanitizeNonInlinableRules } from './utils/css/sanitize-non-inlinable-rules.js';
+import { mapReactTree } from './utils/react/map-react-tree.js';
+import { cloneElementWithInlinedStyles } from './utils/tailwindcss/clone-element-with-inlined-styles.js';
+import { setupTailwind } from './utils/tailwindcss/setup-tailwind.js';
+
+export type TailwindConfig = Omit<Config, 'content'>;
+
+export interface EmailElementProps {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const pixelBasedPreset: TailwindConfig = {
+  theme: {
+    extend: {
+      fontSize: {
+        xs: ['12px', { lineHeight: '16px' }],
+        sm: ['14px', { lineHeight: '20px' }],
+        base: ['16px', { lineHeight: '24px' }],
+        lg: ['18px', { lineHeight: '28px' }],
+        xl: ['20px', { lineHeight: '28px' }],
+        '2xl': ['24px', { lineHeight: '32px' }],
+        '3xl': ['30px', { lineHeight: '36px' }],
+        '4xl': ['36px', { lineHeight: '36px' }],
+        '5xl': ['48px', { lineHeight: '1' }],
+        '6xl': ['60px', { lineHeight: '1' }],
+        '7xl': ['72px', { lineHeight: '1' }],
+        '8xl': ['96px', { lineHeight: '1' }],
+        '9xl': ['144px', { lineHeight: '1' }],
+      },
+      spacing: {
+        px: '1px',
+        0: '0',
+        0.5: '2px',
+        1: '4px',
+        1.5: '6px',
+        2: '8px',
+        2.5: '10px',
+        3: '12px',
+        3.5: '14px',
+        4: '16px',
+        5: '20px',
+        6: '24px',
+        7: '28px',
+        8: '32px',
+        9: '36px',
+        10: '40px',
+        11: '44px',
+        12: '48px',
+        14: '56px',
+        16: '64px',
+        20: '80px',
+        24: '96px',
+        28: '112px',
+        32: '128px',
+        36: '144px',
+        40: '160px',
+        44: '176px',
+        48: '192px',
+        52: '208px',
+        56: '224px',
+        60: '240px',
+        64: '256px',
+        72: '288px',
+        80: '320px',
+        96: '384px',
+      },
+    },
+  },
+};
+
+export interface TailwindProps {
+  children: React.ReactNode;
+  config?: TailwindConfig;
+  theme?: string;
+  utility?: string;
+}
+
+export function Tailwind({ children, config, theme, utility }: TailwindProps) {
+  const twConfigData = {
+    config,
+    cssConfigs: {
+      theme,
+      utility,
+    },
+  };
+  const tailwindSetup = useSuspensedPromise(
+    () => setupTailwind(twConfigData),
+    JSON.stringify(twConfigData, (_key, value) =>
+      typeof value === 'function' ? value.toString() : value,
+    ),
+  );
+
+  let classesUsed: string[] = [];
+  let mappedChildren: React.ReactNode = mapReactTree(children, (node) => {
+    if (React.isValidElement<EmailElementProps>(node)) {
+      if (node.props.className) {
+        const classes = node.props.className?.split(/\s+/);
+        classesUsed = [...classesUsed, ...classes];
+        tailwindSetup.addUtilities(classes);
+      }
+    }
+
+    return node;
+  });
+
+  const styleSheet = tailwindSetup.getStyleSheet();
+  sanitizeStyleSheet(styleSheet);
+
+  const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } =
+    extractRulesPerClass(styleSheet, classesUsed);
+
+  const customProperties = getCustomProperties(styleSheet);
+
+  const nonInlineStyles: StyleSheet = {
+    type: 'StyleSheet',
+    children: new List<CssNode>().fromArray(
+      Array.from(nonInlinableRules.values()).flat(),
+    ),
+  };
+  sanitizeNonInlinableRules(nonInlineStyles);
+  downlevelForEmailClients(nonInlineStyles);
+
+  const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
+  let appliedNonInlineStyles = false as boolean;
+
+  mappedChildren = mapReactTree(mappedChildren, (node) => {
+    if (React.isValidElement<EmailElementProps>(node)) {
+      const elementWithInlinedStyles = cloneElementWithInlinedStyles(
+        node,
+        inlinableRules,
+        nonInlinableRules,
+        customProperties,
+      );
+
+      if (elementWithInlinedStyles.type === 'head') {
+        appliedNonInlineStyles = true;
+
+        const styleElement = (
+          <style
+            dangerouslySetInnerHTML={{ __html: generate(nonInlineStyles) }}
+          />
+        );
+
+        return React.cloneElement(
+          elementWithInlinedStyles,
+          elementWithInlinedStyles.props,
+          styleElement,
+          elementWithInlinedStyles.props.children,
+        );
+      }
+
+      return elementWithInlinedStyles;
+    }
+
+    return node;
+  });
+
+  if (hasNonInlineStylesToApply && !appliedNonInlineStyles) {
+    throw new Error(
+      `Tailwind: <head> not found inside <Tailwind>.
+Move <Head /> inside <Tailwind>, or remove these classes that require a <head>: ${Array.from(
+        nonInlinableRules.keys(),
+      ).join(' ')}.`,
+    );
+  }
+
+  return mappedChildren;
+}

package/src/components/tailwind/utils/__snapshots__/quick-safe-render-to-string.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`quick safe render to string 1`] = `"<div className="bg-red-500 text-gray-200"><h1><Component><div className="user-name flex text-2xl"></div></Component></h1><span className="dark:bg-green-500 hover:bg-green-800 transition-colors"></span></div><span className="dark:bg-green-500 hover:bg-green-800 transition-colors"></span>"`;

package/src/components/tailwind/utils/compatibility/escape-class-name.spec.ts

@@ -0,0 +1,17 @@
+import { escapeClassName } from './escape-class-name.js';
+
+describe('escapeClassName function', () => {
+  it('escapes the first character properly', () => {
+    expect(escapeClassName('[min-height-')).toBe('\\[min-height-');
+  });
+
+  it('does not escape an already escaped first-character', () => {
+    expect(escapeClassName('\\[min-height-')).toBe('\\[min-height-');
+  });
+
+  it('escapes `min-height-[calc(25px+100%-20%*2/4)]` correctly', () => {
+    expect(escapeClassName('min-height-[calc(25px+100%-20%*2/4)]')).toBe(
+      'min-height-\\[calc\\(25px\\+100\\%-20\\%\\*2\\/4\\)\\]',
+    );
+  });
+});

package/src/components/tailwind/utils/compatibility/escape-class-name.ts

@@ -0,0 +1,18 @@
+/**
+ * Escapes all characters that may not be accepted on
+ * CSS selectors by using the regex "[^a-zA-Z0-9\-_]".
+ *
+ * Also does a bit more trickery to avoid escaping already
+ * escaped characters.
+ */
+export function escapeClassName(className: string) {
+  return className.replace(
+    /*      we need this look ahead capturing group to avoid using negative look behinds */
+    /([^\\]|^)(?=([^a-zA-Z0-9\-_]))/g,
+    (match, prefixCharacter: string, characterToEscape: string) => {
+      if (prefixCharacter === '' && characterToEscape === '\\') return match;
+
+      return `${prefixCharacter}\\`;
+    },
+  );
+}

package/src/components/tailwind/utils/compatibility/get-react-property.ts

@@ -0,0 +1,15 @@
+import { fromDashCaseToCamelCase } from '../text/from-dash-case-to-camel-case.js';
+
+export function getReactProperty(prop: string) {
+  const modifiedProp = prop.toLowerCase();
+
+  if (modifiedProp.startsWith('--')) {
+    return modifiedProp;
+  }
+
+  if (modifiedProp.startsWith('-ms-')) {
+    return fromDashCaseToCamelCase(modifiedProp.slice(1));
+  }
+
+  return fromDashCaseToCamelCase(modifiedProp);
+}

package/src/components/tailwind/utils/compatibility/sanitize-class-name.spec.ts

@@ -0,0 +1,7 @@
+import { sanitizeClassName } from './sanitize-class-name.js';
+
+test('sanitizeClassName', () => {
+  expect(sanitizeClassName('min-height-[calc(25px+100%-20%*2/4)]')).toBe(
+    'min-height-calc25pxplus100pc-20pc_2_4',
+  );
+});

package/src/components/tailwind/utils/compatibility/sanitize-class-name.ts

@@ -0,0 +1,36 @@
+const digitToNameMap = {
+  '0': 'zero',
+  '1': 'one',
+  '2': 'two',
+  '3': 'three',
+  '4': 'four',
+  '5': 'five',
+  '6': 'six',
+  '7': 'seven',
+  '8': 'eight',
+  '9': 'nine',
+} as const;
+
+/**
+ * Replaces special characters to avoid problems on email clients.
+ *
+ * @param className - This should not come with any escaped charcters, it should come the same
+ * as is on the `className` attribute on React elements.
+ */
+export function sanitizeClassName(className: string) {
+  return className
+    .replaceAll('+', 'plus')
+    .replaceAll('[', '')
+    .replaceAll('%', 'pc')
+    .replaceAll(']', '')
+    .replaceAll('(', '')
+    .replaceAll(')', '')
+    .replaceAll('!', 'imprtnt')
+    .replaceAll('>', 'gt')
+    .replaceAll('<', 'lt')
+    .replaceAll('=', 'eq')
+    .replace(/^[0-9]/, (digit) => {
+      return digitToNameMap[digit as keyof typeof digitToNameMap];
+    })
+    .replace(/[^a-zA-Z0-9\-_]/g, '_');
+}

package/src/components/tailwind/utils/compatibility/unescape-class.ts

@@ -0,0 +1,3 @@
+export function unescapeClass(singleClass: string) {
+  return singleClass.replaceAll(/\\[0-9]|\\/g, '');
+}

package/src/components/tailwind/utils/css/__snapshots__/extract-rules-matching-classes.spec.ts.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`extractRulesMatchingClasses() > should work just inlinable utilities 1`] = `
+{
+  "bg-red-500": ".bg-red-500{background-color:rgb(250.6,43.8,54.3)}",
+  "text-center": ".text-center{text-align:center}",
+}
+`;
+
+exports[`extractRulesMatchingClasses() > should work with a mix of inlinable and non-inlinable utilities 1`] = `
+{
+  "bg-red-500": ".bg-red-500{background-color:rgb(250.6,43.8,54.3)}",
+  "lg:w-1/2": ".lg_w-1_2{@media (width>=64rem){width:calc(0.5*100%)!important}}",
+  "text-center": ".text-center{text-align:center}",
+  "w-full": ".w-full{width:100%}",
+}
+`;
+
+exports[`extractRulesMatchingClasses() > should work with non-inlinable utilities 1`] = `
+{
+  "lg:w-1/2": ".lg_w-1_2{@media (width>=64rem){width:calc(0.5*100%)!important}}",
+}
+`;

package/src/components/tailwind/utils/css/__snapshots__/remove-rule-duplicates-from-root.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`removeRuleDuplicatesFromRoot 1`] = `".a{color:red}.b{color:blue}"`;

package/src/components/tailwind/utils/css/__snapshots__/sanitize-non-inlinable-classes.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`sanitizeNonInlinableClasses() > should css nesting in hover pseudo styles 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-sky-600: oklch(58.8% 0.158 241.966)!important;--color-gray-100: oklch(96.7% 0.003 264.542)!important}}@layer utilities{.hover_text-sky-600{&:hover{@media (hover:hover){color:var(--color-sky-600)!important}}}.sm_focus_outline-none{@media (width>=40rem){&:focus{--tw-outline-style: none!important;outline-style:none!important}}}.md_hover_bg-gray-100{@media (width>=48rem){&:hover{@media (hover:hover){background-color:var(--color-gray-100)!important}}}}.lg_focus_underline{@media (width>=64rem){&:focus{text-decoration-line:underline!important}}}}"`;
+
+exports[`sanitizeNonInlinableClasses() > should handle rules that can be inlined 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-300: oklch(80.8% 0.114 19.571)!important;--color-gray-900: oklch(21% 0.034 264.665)!important;--text-lg: 1.125rem!important;--text-lg--line-height: calc(1.75 / 1.125)!important}}@layer utilities{.bg-gray-900{background-color:var(--color-gray-900)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-red-300{color:var(--color-red-300)}}"`;
+
+exports[`sanitizeNonInlinableClasses() > shuold work with basic media query rules 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--spacing: 0.25rem!important;--container-lg: 32rem!important;--radius-lg: 0.5rem!important}}@layer utilities{.sm_mx-auto{@media (width>=40rem){margin-inline:auto!important}}.sm_max-w-lg{@media (width>=40rem){max-width:var(--container-lg)!important}}.sm_rounded-lg{@media (width>=40rem){border-radius:var(--radius-lg)!important}}.md_px-10{@media (width>=48rem){padding-inline:calc(var(--spacing)*10)!important}}.md_py-12{@media (width>=48rem){padding-block:calc(var(--spacing)*12)!important}}}"`;

package/src/components/tailwind/utils/css/downlevel-for-email-clients.spec.ts

@@ -0,0 +1,119 @@
+import { generate, parse, type StyleSheet } from 'css-tree';
+import { downlevelForEmailClients } from './downlevel-for-email-clients.js';
+
+function transform(css: string): string {
+  const ast = parse(css) as StyleSheet;
+  downlevelForEmailClients(ast);
+  return generate(ast);
+}
+
+describe('downlevelForEmailClients', () => {
+  describe('range syntax', () => {
+    it('converts width>= to min-width', () => {
+      expect(transform('@media (width>=40rem){.sm_p-4{padding:1rem}}')).toBe(
+        '@media (min-width:40rem){.sm_p-4{padding:1rem}}',
+      );
+    });
+
+    it('converts width<= to max-width', () => {
+      expect(
+        transform('@media (width<=40rem){.max-sm_p-4{padding:1rem}}'),
+      ).toBe('@media (max-width:40rem){.max-sm_p-4{padding:1rem}}');
+    });
+
+    it('converts width< to max-width', () => {
+      expect(
+        transform('@media (width<40rem){.max-sm_text-red{color:red}}'),
+      ).toBe('@media (max-width:40rem){.max-sm_text-red{color:red}}');
+    });
+
+    it('converts width> to min-width', () => {
+      expect(transform('@media (width>40rem){.sm_p-4{padding:1rem}}')).toBe(
+        '@media (min-width:40rem){.sm_p-4{padding:1rem}}',
+      );
+    });
+
+    it('does not affect non-range media queries', () => {
+      expect(
+        transform('@media (prefers-color-scheme:dark){.dark{color:white}}'),
+      ).toBe('@media (prefers-color-scheme:dark){.dark{color:white}}');
+    });
+  });
+
+  describe('unnesting', () => {
+    it('unnests @media from inside a selector', () => {
+      expect(
+        transform(
+          '.sm_bg-red{@media (min-width:40rem){background-color:red!important}}',
+        ),
+      ).toBe(
+        '@media (min-width:40rem){.sm_bg-red{background-color:red!important}}',
+      );
+    });
+
+    it('handles combined range syntax + nesting', () => {
+      expect(
+        transform(
+          '.sm_bg-red{@media (width>=40rem){background-color:rgb(255,162,162)!important}}',
+        ),
+      ).toBe(
+        '@media (min-width:40rem){.sm_bg-red{background-color:rgb(255,162,162)!important}}',
+      );
+    });
+
+    it('handles multiple concatenated rules', () => {
+      const input =
+        '.sm_bg-red{@media (width>=40rem){background-color:red!important}}' +
+        '.md_bg-blue{@media (width>=48rem){background-color:blue!important}}';
+
+      const result = transform(input);
+
+      expect(result).toContain(
+        '@media (min-width:40rem){.sm_bg-red{background-color:red!important}}',
+      );
+      expect(result).toContain(
+        '@media (min-width:48rem){.md_bg-blue{background-color:blue!important}}',
+      );
+    });
+
+    it('unnests dark mode media queries', () => {
+      expect(
+        transform(
+          '.dark_text-white{@media (prefers-color-scheme:dark){color:rgb(255,255,255)!important}}',
+        ),
+      ).toBe(
+        '@media (prefers-color-scheme:dark){.dark_text-white{color:rgb(255,255,255)!important}}',
+      );
+    });
+
+    it('preserves rules without nested @media', () => {
+      expect(transform('.bg-red{background-color:red}')).toBe(
+        '.bg-red{background-color:red}',
+      );
+    });
+
+    it('preserves already top-level @media rules', () => {
+      expect(
+        transform('@media (min-width:40rem){.sm_p-4{padding:1rem!important}}'),
+      ).toBe('@media (min-width:40rem){.sm_p-4{padding:1rem!important}}');
+    });
+
+    it('handles multiple @media nested in one selector', () => {
+      const input =
+        '.multi{@media (width>=40rem){color:red!important}@media (width>=48rem){color:blue!important}}';
+
+      const result = transform(input);
+
+      expect(result).toContain(
+        '@media (min-width:40rem){.multi{color:red!important}}',
+      );
+      expect(result).toContain(
+        '@media (min-width:48rem){.multi{color:blue!important}}',
+      );
+    });
+
+    it('handles empty stylesheet', () => {
+      expect(transform('')).toBe('');
+    });
+  });
+});