@lupinum/nuxt-email 0.1.0

package/dist/runtime/tailwind/engine/css/sanitize-declarations.js

@@ -0,0 +1,358 @@
+import {
+  generate,
+  List,
+  parse,
+  walk
+} from "css-tree";
+function rgbNode(r, g, b, alpha) {
+  const children = new List();
+  children.appendData({
+    type: "Number",
+    value: r.toFixed(0)
+  });
+  children.appendData({
+    type: "Operator",
+    value: ","
+  });
+  children.appendData({
+    type: "Number",
+    value: g.toFixed(0)
+  });
+  children.appendData({
+    type: "Operator",
+    value: ","
+  });
+  children.appendData({
+    type: "Number",
+    value: b.toFixed(0)
+  });
+  if (alpha !== 1 && alpha !== void 0) {
+    children.appendData({
+      type: "Operator",
+      value: ","
+    });
+    children.appendData({
+      type: "Number",
+      value: alpha.toString()
+    });
+  }
+  return {
+    type: "Function",
+    name: "rgb",
+    children
+  };
+}
+const LAB_TO_LMS = {
+  l: [0.3963377773761749, 0.2158037573099136],
+  m: [-0.1055613458156586, -0.0638541728258133],
+  s: [-0.0894841775298119, -1.2914855480194092]
+};
+const LSM_TO_RGB = {
+  r: [4.076741636075958, -3.307711539258063, 0.2309699031821043],
+  g: [-1.2684379732850315, 2.609757349287688, -0.341319376002657],
+  b: [-0.0041960761386756, -0.7034186179359362, 1.7076146940746117]
+};
+function lrgbToRgb(input) {
+  const absoluteNumber = Math.abs(input);
+  const sign = input < 0 ? -1 : 1;
+  if (absoluteNumber > 31308e-7) {
+    return sign * (absoluteNumber ** (1 / 2.4) * 1.055 - 0.055);
+  }
+  return input * 12.92;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function oklchToOklab(oklch) {
+  return {
+    l: oklch.l,
+    a: oklch.c * Math.cos(oklch.h / 180 * Math.PI),
+    b: oklch.c * Math.sin(oklch.h / 180 * Math.PI)
+  };
+}
+function oklchToRgb(oklch) {
+  const oklab = oklchToOklab(oklch);
+  const l = (oklab.l + LAB_TO_LMS.l[0] * oklab.a + LAB_TO_LMS.l[1] * oklab.b) ** 3;
+  const m = (oklab.l + LAB_TO_LMS.m[0] * oklab.a + LAB_TO_LMS.m[1] * oklab.b) ** 3;
+  const s = (oklab.l + LAB_TO_LMS.s[0] * oklab.a + LAB_TO_LMS.s[1] * oklab.b) ** 3;
+  const r = 255 * lrgbToRgb(
+    LSM_TO_RGB.r[0] * l + LSM_TO_RGB.r[1] * m + LSM_TO_RGB.r[2] * s
+  );
+  const g = 255 * lrgbToRgb(
+    LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s
+  );
+  const b = 255 * lrgbToRgb(
+    LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s
+  );
+  return {
+    r: clamp(r, 0, 255),
+    g: clamp(g, 0, 255),
+    b: clamp(b, 0, 255)
+  };
+}
+function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
+  shorthandToReplace.property = start;
+  const values = shorthandToReplace.value.type === "Value" ? shorthandToReplace.value.children.toArray().filter(
+    (child) => child.type !== "Operator" && child.type !== "WhiteSpace"
+  ) : [shorthandToReplace.value];
+  let endValue = shorthandToReplace.value;
+  if (values.length === 2) {
+    endValue = {
+      type: "Value",
+      children: new List().fromArray([values[1]])
+    };
+    shorthandToReplace.value = {
+      type: "Value",
+      children: new List().fromArray([values[0]])
+    };
+  }
+  return {
+    type: "Declaration",
+    property: end,
+    value: endValue,
+    important: shorthandToReplace.important
+  };
+}
+export function sanitizeDeclarations(nodeContainingDeclarations) {
+  walk(nodeContainingDeclarations, {
+    visit: "Declaration",
+    enter(declaration, item, list) {
+      if (declaration.value.type === "Raw") {
+        declaration.value = parse(declaration.value.value, {
+          context: "value"
+        });
+      }
+      if (/border-(?:[a-z]+-){0,2}radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(
+        generate(declaration)
+      )) {
+        declaration.value = parse("9999px", { context: "value" });
+      }
+      walk(declaration, {
+        visit: "Function",
+        enter(func, funcParentListItem) {
+          const children = func.children.toArray();
+          if (func.name === "oklch") {
+            let l;
+            let c;
+            let h;
+            let a;
+            for (const child of children) {
+              if (child.type === "Number") {
+                if (l === void 0) {
+                  l = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (c === void 0) {
+                  c = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (h === void 0) {
+                  h = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (a === void 0) {
+                  a = Number.parseFloat(child.value);
+                  continue;
+                }
+              }
+              if (child.type === "Dimension" && child.unit === "deg") {
+                if (h === void 0) {
+                  h = Number.parseFloat(child.value);
+                  continue;
+                }
+              }
+              if (child.type === "Percentage") {
+                if (l === void 0) {
+                  l = Number.parseFloat(child.value) / 100;
+                  continue;
+                }
+                if (a === void 0) {
+                  a = Number.parseFloat(child.value) / 100;
+                }
+              }
+            }
+            if (l === void 0 || c === void 0 || h === void 0) {
+              throw new Error(
+                "Could not determine the parameters of an oklch() function.",
+                {
+                  cause: declaration
+                }
+              );
+            }
+            const rgb = oklchToRgb({
+              l,
+              c,
+              h
+            });
+            funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
+          }
+          if (func.name === "rgb" || func.name === "rgba") {
+            let r;
+            let g;
+            let b;
+            let a;
+            for (const child of children) {
+              if (child.type === "Number") {
+                if (r === void 0) {
+                  r = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (g === void 0) {
+                  g = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (b === void 0) {
+                  b = Number.parseFloat(child.value);
+                  continue;
+                }
+                if (a === void 0) {
+                  a = Number.parseFloat(child.value);
+                  continue;
+                }
+              }
+              if (child.type === "Percentage") {
+                if (r === void 0) {
+                  r = Number.parseFloat(child.value) * 255 / 100;
+                  continue;
+                }
+                if (g === void 0) {
+                  g = Number.parseFloat(child.value) * 255 / 100;
+                  continue;
+                }
+                if (b === void 0) {
+                  b = Number.parseFloat(child.value) * 255 / 100;
+                  continue;
+                }
+                if (a === void 0) {
+                  a = Number.parseFloat(child.value) / 100;
+                }
+              }
+            }
+            if (r === void 0 || g === void 0 || b === void 0) {
+              throw new Error(
+                "Could not determine the parameters of an rgb() function.",
+                {
+                  cause: declaration
+                }
+              );
+            }
+            if (a === void 0 || a === 1) {
+              funcParentListItem.data = rgbNode(r, g, b);
+            } else {
+              funcParentListItem.data = rgbNode(r, g, b, a);
+            }
+          }
+        }
+      });
+      walk(declaration, {
+        visit: "Hash",
+        enter(hash, hashParentListItem) {
+          const hex = hash.value.trim();
+          if (hex.length === 3) {
+            const r2 = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
+            const g2 = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
+            const b2 = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+            hashParentListItem.data = rgbNode(r2, g2, b2);
+            return;
+          }
+          if (hex.length === 4) {
+            const r2 = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
+            const g2 = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
+            const b2 = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+            const a2 = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255;
+            hashParentListItem.data = rgbNode(r2, g2, b2, a2);
+            return;
+          }
+          if (hex.length === 5) {
+            const r2 = Number.parseInt(hex.slice(0, 2), 16);
+            const g2 = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
+            const b2 = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16);
+            const a2 = Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255;
+            hashParentListItem.data = rgbNode(r2, g2, b2, a2);
+            return;
+          }
+          if (hex.length === 6) {
+            const r2 = Number.parseInt(hex.slice(0, 2), 16);
+            const g2 = Number.parseInt(hex.slice(2, 4), 16);
+            const b2 = Number.parseInt(hex.slice(4, 6), 16);
+            hashParentListItem.data = rgbNode(r2, g2, b2);
+            return;
+          }
+          if (hex.length === 7) {
+            const r2 = Number.parseInt(hex.slice(0, 2), 16);
+            const g2 = Number.parseInt(hex.slice(2, 4), 16);
+            const b2 = Number.parseInt(hex.slice(4, 6), 16);
+            const a2 = Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255;
+            hashParentListItem.data = rgbNode(r2, g2, b2, a2);
+            return;
+          }
+          const r = Number.parseInt(hex.slice(0, 2), 16);
+          const g = Number.parseInt(hex.slice(2, 4), 16);
+          const b = Number.parseInt(hex.slice(4, 6), 16);
+          const a = Number.parseInt(hex.slice(6, 8), 16) / 255;
+          hashParentListItem.data = rgbNode(r, g, b, a);
+        }
+      });
+      walk(declaration, {
+        visit: "Function",
+        enter(func, parentListItem) {
+          if (func.name === "color-mix") {
+            const children = func.children.toArray();
+            const color = children[3];
+            const opacity = children[4];
+            if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && color?.type === "Function" && color?.name === "rgb" && opacity) {
+              if (opacity.type === "Percentage") {
+                const alpha = Number.parseFloat(opacity.value) / 100;
+                if (alpha < 1) {
+                  color.children.appendData({
+                    type: "Operator",
+                    value: ","
+                  });
+                  color.children.appendData({
+                    type: "Number",
+                    value: alpha.toString()
+                  });
+                }
+              } else {
+                color.children.appendData({
+                  type: "Operator",
+                  value: ","
+                });
+                color.children.appendData(opacity);
+              }
+              parentListItem.data = color;
+            }
+          }
+        }
+      });
+      if (declaration.property === "padding-inline") {
+        const paddingRight = separteShorthandDeclaration(declaration, [
+          "padding-left",
+          "padding-right"
+        ]);
+        list.insertData(paddingRight, item);
+      }
+      if (declaration.property === "padding-block") {
+        const paddingBottom = separteShorthandDeclaration(declaration, [
+          "padding-top",
+          "padding-bottom"
+        ]);
+        list.insertData(paddingBottom, item);
+      }
+      if (declaration.property === "margin-inline") {
+        const marginRight = separteShorthandDeclaration(declaration, [
+          "margin-left",
+          "margin-right"
+        ]);
+        list.insertData(marginRight, item);
+      }
+      if (declaration.property === "margin-block") {
+        const paddingBottom = separteShorthandDeclaration(declaration, [
+          "margin-top",
+          "margin-bottom"
+        ]);
+        list.insertData(paddingBottom, item);
+      }
+    }
+  });
+}

package/dist/runtime/tailwind/engine/css/sanitize-non-inlinable-rules.d.ts

@@ -0,0 +1,17 @@
+import { type CssNode } from 'css-tree';
+/**
+ * This function goes through a few steps to ensure the best email client support and
+ * to ensure that media queries and pseudo classes are applied correctly alongside
+ * the inline styles.
+ *
+ * What it does:
+ * 1. Converts all declarations in all rules into important ones
+ * 2. Sanitizes class selectors of all non-inlinable rules
+ * 3. Removes --tw-* custom property declarations — by this point all CSS
+ *    variables have been resolved, so these are dead weight in email HTML.
+ * 4. Strips empty-fallback var(--tw-*,) refs that Tailwind v4 emits for
+ *    variant-stacking idioms (filter, font-variant-numeric, etc.) — email
+ *    clients can't resolve CSS custom properties reliably, so any --tw-*
+ *    left as a bare empty-fallback ref would reach the client broken.
+ */
+export declare function sanitizeNonInlinableRules(node: CssNode): void;

package/dist/runtime/tailwind/engine/css/sanitize-non-inlinable-rules.js

@@ -0,0 +1,30 @@
+import { string, walk } from "css-tree";
+import { sanitizeClassName } from "../compatibility/sanitize-class-name.js";
+import { isRuleInlinable } from "./is-rule-inlinable.js";
+import { stripEmptyTailwindVars } from "./strip-empty-tailwind-vars.js";
+export function sanitizeNonInlinableRules(node) {
+  walk(node, {
+    visit: "Rule",
+    enter(rule) {
+      if (!isRuleInlinable(rule)) {
+        walk(rule.prelude, (node2) => {
+          if (node2.type === "ClassSelector") {
+            const unescapedClassName = string.decode(node2.name);
+            node2.name = sanitizeClassName(unescapedClassName);
+          }
+        });
+        walk(rule, {
+          visit: "Declaration",
+          enter(declaration, item, list) {
+            if (declaration.property.startsWith("--tw-")) {
+              list.remove(item);
+              return;
+            }
+            declaration.important = true;
+            stripEmptyTailwindVars(declaration.value);
+          }
+        });
+      }
+    }
+  });
+}

package/dist/runtime/tailwind/engine/css/split-mixed-rule.d.ts

@@ -0,0 +1,12 @@
+import { type Rule } from 'css-tree';
+/**
+ * Split a rule into inlinable and non-inlinable parts. Caller must only pass rules
+ * for which isRuleInlinable(rule) is false. Returns clones so the original stylesheet is never mutated.
+ *
+ * @returns inlinablePart: rule with only inlinable block children, or null if none.
+ *          nonInlinablePart: rule with only non-inlinable block children, or null if none.
+ */
+export declare function splitMixedRule(rule: Rule): {
+    inlinablePart: Rule | null;
+    nonInlinablePart: Rule | null;
+};

package/dist/runtime/tailwind/engine/css/split-mixed-rule.js

@@ -0,0 +1,37 @@
+import { clone, find, List } from "css-tree";
+import { isPartInlinable } from "./is-part-inlinable.js";
+export function splitMixedRule(rule) {
+  const selectorHasPseudo = rule.prelude !== null && find(
+    rule.prelude,
+    (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector"
+  ) !== null;
+  if (selectorHasPseudo) {
+    return { inlinablePart: null, nonInlinablePart: clone(rule) };
+  }
+  const ruleCloneInlinable = clone(rule);
+  const ruleCloneNonInlinable = clone(rule);
+  const inlinableParts = [];
+  const nonInlinableParts = [];
+  for (const part of ruleCloneInlinable.block.children.toArray()) {
+    if (isPartInlinable(part)) {
+      inlinableParts.push(part);
+    } else {
+      nonInlinableParts.push(part);
+    }
+  }
+  const inlinablePart = inlinableParts.length > 0 ? {
+    ...ruleCloneInlinable,
+    block: {
+      type: "Block",
+      children: new List().fromArray(inlinableParts)
+    }
+  } : null;
+  const nonInlinablePart = nonInlinableParts.length > 0 ? {
+    ...ruleCloneNonInlinable,
+    block: {
+      type: "Block",
+      children: new List().fromArray(nonInlinableParts)
+    }
+  } : null;
+  return { inlinablePart, nonInlinablePart };
+}

package/dist/runtime/tailwind/engine/css/strip-empty-tailwind-vars.d.ts

@@ -0,0 +1,19 @@
+import { type CssNode } 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 declare function stripEmptyTailwindVars(node: CssNode): void;

package/dist/runtime/tailwind/engine/css/strip-empty-tailwind-vars.js

@@ -0,0 +1,44 @@
+import { generate, walk } from "css-tree";
+export function stripEmptyTailwindVars(node) {
+  walk(node, {
+    visit: "Function",
+    leave(func, funcItem, funcList) {
+      if (func.name !== "var") {
+        return;
+      }
+      let variableName;
+      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/dist/runtime/tailwind/engine/css/unwrap-value.d.ts

@@ -0,0 +1,2 @@
+import type { Raw, Value } from 'css-tree';
+export declare function unwrapValue(value: Value | Raw): import("css-tree").CssNode;

package/dist/runtime/tailwind/engine/css/unwrap-value.js

@@ -0,0 +1,6 @@
+export function unwrapValue(value) {
+  if (value.type === "Value" && value.children.size === 1) {
+    return value.children.first ?? value;
+  }
+  return value;
+}

package/dist/runtime/tailwind/engine/index.d.ts

@@ -0,0 +1,63 @@
+import type { TailwindEngineOptions } from './types.js';
+/**
+ * A single element's inline styles as ordered kebab-case CSS declarations
+ * (`cssProperty -> value`). Insertion order matches React Email's object-spread
+ * serialization order; `Map.set` semantics (keep first position, overwrite
+ * value) mirror plain-object key assignment, so a consumer can replicate
+ * `{ ...twStyle, ...authorStyle }` author-wins merging exactly.
+ */
+export type InlineStyleMap = Map<string, string>;
+export interface ComputedStyles {
+    /**
+     * Per-class inline styles. Only classes that produced at least one inlinable
+     * declaration appear here. Keyed by the ORIGINAL (unsanitized) class name.
+     */
+    inlinable: Map<string, InlineStyleMap>;
+    /**
+     * The `<style>` body to inject into the first `<head>`: media-query and
+     * pseudo-class rules, unnested and downleveled for email clients, with class
+     * selectors sanitized. Empty string when there are no such rules.
+     */
+    nonInlinableCss: string;
+    /**
+     * Classes that must REMAIN on the element, mapped ORIGINAL -> OUTPUT:
+     *   - a non-inlinable class maps to its sanitized selector name
+     *     (matching the selectors emitted in {@link nonInlinableCss});
+     *   - an unknown class (no Tailwind rule at all) maps to itself.
+     * A class that only produced inlinable styles is absent — the consumer drops
+     * it from the `class` attribute. Mirrors React Email's residual-class logic in
+     * `clone-element-with-inlined-styles.ts`.
+     */
+    residualClassMap: Map<string, string>;
+    /**
+     * Original (unsanitized) names of every class that produced a non-inlinable
+     * rule, in stylesheet-emission order — the exact list React Email interpolates
+     * into its no-`<head>` error (`Array.from(nonInlinableRules.keys())`,
+     * tailwind.tsx). This order (breakpoint/variant emission order) differs from the
+     * authored class order, so it cannot be reconstructed from {@link residualClassMap}
+     * and must be carried canonically.
+     */
+    nonInlinableClassNames: string[];
+}
+export interface TailwindEngine {
+    /**
+     * Compute inline styles, injectable CSS, and residual classes for the given
+     * set of class names (collected across the whole `<Tailwind>` subtree).
+     *
+     * Should be called once per engine with the full class list, matching React
+     * Email's one-setup-per-`<Tailwind>` model. The underlying compiler only
+     * accumulates candidates, and each call re-parses a fresh stylesheet AST, so
+     * repeated calls never cross-contaminate — but a call only "sees" classes in
+     * its own argument.
+     */
+    computeStyles: (classNames: string[]) => ComputedStyles;
+}
+/**
+ * Framework-neutral Tailwind engine. Mirrors the CSS pipeline of React Email's
+ * `<Tailwind>` component (`tailwind.tsx`) without any view-layer coupling: a
+ * consumer collects the class names used in a rendered email, calls
+ * {@link TailwindEngine.computeStyles}, then applies the result to the HTML.
+ */
+export declare function createTailwindEngine(options?: TailwindEngineOptions): Promise<TailwindEngine>;
+export { pixelBasedPreset } from './pixel-based-preset.js';
+export type { TailwindConfig, TailwindEngineOptions } from './types.js';

package/dist/runtime/tailwind/engine/index.js

@@ -0,0 +1,53 @@
+import { generate, List } from "css-tree";
+import { downlevelForEmailClients } from "./css/downlevel-for-email-clients.js";
+import { extractRulesPerClass } from "./css/extract-rules-per-class.js";
+import { getCustomProperties } from "./css/get-custom-properties.js";
+import { makeInlineStylesFor } from "./css/make-inline-styles-for.js";
+import { sanitizeClassName } from "./compatibility/sanitize-class-name.js";
+import { sanitizeNonInlinableRules } from "./css/sanitize-non-inlinable-rules.js";
+import { sanitizeStyleSheet } from "./sanitize-stylesheet.js";
+import { setupTailwind } from "./setup-tailwind.js";
+export async function createTailwindEngine(options = {}) {
+  const { config, theme, utility } = options;
+  const tailwindSetup = await setupTailwind({
+    config,
+    cssConfigs: { theme, utility }
+  });
+  const computeStyles = (classNames) => {
+    tailwindSetup.addUtilities(classNames);
+    const styleSheet = tailwindSetup.getStyleSheet();
+    sanitizeStyleSheet(styleSheet);
+    const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classNames);
+    const customProperties = getCustomProperties(styleSheet);
+    const nonInlineStyles = {
+      type: "StyleSheet",
+      children: new List().fromArray(
+        Array.from(nonInlinableRules.values()).flat()
+      )
+    };
+    sanitizeNonInlinableRules(nonInlineStyles);
+    downlevelForEmailClients(nonInlineStyles);
+    const nonInlinableCss = nonInlinableRules.size > 0 ? generate(nonInlineStyles) : "";
+    const inlinable = /* @__PURE__ */ new Map();
+    for (const [className, rules] of inlinableRules) {
+      inlinable.set(className, makeInlineStylesFor(rules, customProperties));
+    }
+    const residualClassMap = /* @__PURE__ */ new Map();
+    for (const className of classNames) {
+      if (residualClassMap.has(className)) continue;
+      if (nonInlinableRules.has(className)) {
+        residualClassMap.set(className, sanitizeClassName(className));
+      } else if (!inlinableRules.has(className)) {
+        residualClassMap.set(className, className);
+      }
+    }
+    return {
+      inlinable,
+      nonInlinableCss,
+      residualClassMap,
+      nonInlinableClassNames: Array.from(nonInlinableRules.keys())
+    };
+  };
+  return { computeStyles };
+}
+export { pixelBasedPreset } from "./pixel-based-preset.js";

package/dist/runtime/tailwind/engine/pixel-based-preset.d.ts

@@ -0,0 +1,9 @@
+import type { TailwindConfig } from './types.js';
+/**
+ * A Tailwind config preset that redefines the default `rem`-based `fontSize` and
+ * `spacing` scales in pixels, since many email clients handle `px` more
+ * predictably than `rem`.
+ *
+ * Direct port of React Email's `pixelBasedPreset`.
+ */
+export declare const pixelBasedPreset: TailwindConfig;