@lupinum/nuxt-email 0.1.0

package/dist/runtime/tailwind/engine/css/downlevel-for-email-clients.js

@@ -0,0 +1,107 @@
+import {
+  clone,
+  List,
+  walk
+} from "css-tree";
+export function downlevelForEmailClients(styleSheet) {
+  unnestMediaQueries(styleSheet);
+  downlevelRangeMediaQueries(styleSheet);
+}
+function unnestMediaQueries(styleSheet) {
+  const transforms = [];
+  walk(styleSheet, {
+    visit: "Rule",
+    enter(rule, item, list) {
+      if (!rule.block || !item) return;
+      const nestedAtrules = [];
+      const remainingChildren = [];
+      rule.block.children.forEach((child) => {
+        if (child.type === "Atrule" && (child.name === "media" || child.name === "supports")) {
+          nestedAtrules.push(child);
+        } else {
+          remainingChildren.push(child);
+        }
+      });
+      if (nestedAtrules.length > 0) {
+        transforms.push({
+          parentRule: rule,
+          parentItem: item,
+          parentList: list,
+          nestedAtrules,
+          remainingChildren
+        });
+      }
+    }
+  });
+  for (let i = transforms.length - 1; i >= 0; i--) {
+    const {
+      parentRule,
+      parentItem,
+      parentList,
+      nestedAtrules,
+      remainingChildren
+    } = transforms[i];
+    const replacements = new List();
+    if (remainingChildren.length > 0) {
+      parentRule.block.children = new List().fromArray(
+        remainingChildren
+      );
+      replacements.appendData(parentRule);
+    }
+    for (const atrule of nestedAtrules) {
+      const wrappedRule = {
+        type: "Rule",
+        prelude: clone(parentRule.prelude),
+        block: {
+          type: "Block",
+          children: atrule.block ? atrule.block.children : new List()
+        }
+      };
+      const newAtrule = {
+        type: "Atrule",
+        name: atrule.name,
+        prelude: atrule.prelude,
+        block: {
+          type: "Block",
+          children: new List().fromArray([wrappedRule])
+        }
+      };
+      replacements.appendData(newAtrule);
+    }
+    parentList.replace(parentItem, replacements);
+  }
+}
+function downlevelRangeMediaQueries(styleSheet) {
+  const replacements = [];
+  walk(styleSheet, {
+    enter(originalNode, item) {
+      const node = originalNode;
+      if (item && node.type === "FeatureRange") {
+        const replacement = downlevelFeatureRange(node);
+        if (replacement) {
+          replacements.push({ item, replacement });
+        }
+      }
+    }
+  });
+  for (const { item, replacement } of replacements) {
+    item.data = replacement;
+  }
+}
+function downlevelFeatureRange(range) {
+  if (range.left.type !== "Identifier") return null;
+  let prefix;
+  if (range.leftComparison === ">=" || range.leftComparison === ">") {
+    prefix = "min-";
+  } else if (range.leftComparison === "<=" || range.leftComparison === "<") {
+    prefix = "max-";
+  } else {
+    return null;
+  }
+  return {
+    type: "Feature",
+    kind: "media",
+    name: `${prefix}${range.left.name}`,
+    value: range.middle
+  };
+}

package/dist/runtime/tailwind/engine/css/extract-rules-per-class.d.ts

@@ -0,0 +1,6 @@
+import { type CssNode, type Rule } from 'css-tree';
+export interface ExtractedRules {
+    inlinable: Map<string, Rule[]>;
+    nonInlinable: Map<string, Rule[]>;
+}
+export declare function extractRulesPerClass(root: CssNode, classes: string[]): ExtractedRules;

package/dist/runtime/tailwind/engine/css/extract-rules-per-class.js

@@ -0,0 +1,54 @@
+import { string, walk } from "css-tree";
+import { isRuleInlinable } from "./is-rule-inlinable.js";
+import { splitMixedRule } from "./split-mixed-rule.js";
+export function extractRulesPerClass(root, classes) {
+  const classSet = new Set(classes);
+  const inlinableRules = /* @__PURE__ */ new Map();
+  const nonInlinableRules = /* @__PURE__ */ new Map();
+  const appendRule = (map, className, rule) => {
+    const existing = map.get(className);
+    if (existing) {
+      existing.push(rule);
+    } else {
+      map.set(className, [rule]);
+    }
+  };
+  walk(root, {
+    visit: "Rule",
+    enter(rule) {
+      const firstSelector = rule.prelude.type === "SelectorList" ? rule.prelude.children.first : null;
+      if (firstSelector?.type === "Selector" && firstSelector.children.first?.type === "NestingSelector") {
+        return;
+      }
+      const selectorClasses = [];
+      walk(rule.prelude, {
+        visit: "ClassSelector",
+        enter(classSelector) {
+          selectorClasses.push(string.decode(classSelector.name));
+        }
+      });
+      if (isRuleInlinable(rule)) {
+        for (const className of selectorClasses) {
+          if (classSet.has(className)) {
+            appendRule(inlinableRules, className, rule);
+          }
+        }
+      } else {
+        const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
+        for (const className of selectorClasses) {
+          if (!classSet.has(className)) continue;
+          if (inlinablePart) {
+            appendRule(inlinableRules, className, inlinablePart);
+          }
+          if (nonInlinablePart) {
+            appendRule(nonInlinableRules, className, nonInlinablePart);
+          }
+        }
+      }
+    }
+  });
+  return {
+    inlinable: inlinableRules,
+    nonInlinable: nonInlinableRules
+  };
+}

package/dist/runtime/tailwind/engine/css/get-css-property.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Adapted from React Email's `get-react-property.ts`.
+ *
+ * React Email converts a css-tree declaration property (already kebab-case CSS,
+ * e.g. `background-color`) into a React DOM style key (`backgroundColor`) so it
+ * can spread it onto a React element's `style` object. Its `-ms-` special case
+ * exists purely because React's camelCase convention is `msTransform` (lowercase
+ * `m`) unlike every other vendor prefix (`WebkitTransform`).
+ *
+ * This engine emits inline styles as real CSS `property: value` pairs, not React
+ * DOM keys, so no camelCase conversion is wanted. css-tree already yields the
+ * canonical kebab-case property name; we only lowercase it to match React Email's
+ * behavior (it lowercases before converting). Custom properties (`--tw-*`) never
+ * reach this function — `makeInlineStylesFor` skips `--` declarations — so the
+ * historical lowercasing of custom-property names is a non-issue here.
+ */
+export declare function getCssProperty(prop: string): string;

package/dist/runtime/tailwind/engine/css/get-css-property.js

@@ -0,0 +1,3 @@
+export function getCssProperty(prop) {
+  return prop.toLowerCase();
+}

package/dist/runtime/tailwind/engine/css/get-custom-properties.d.ts

@@ -0,0 +1,8 @@
+import { type CssNode, type Declaration } from 'css-tree';
+export interface CustomProperty {
+    syntax?: Declaration;
+    inherits?: Declaration;
+    initialValue?: Declaration;
+}
+export type CustomProperties = Map<string, CustomProperty>;
+export declare function getCustomProperties(node: CssNode): CustomProperties;

package/dist/runtime/tailwind/engine/css/get-custom-properties.js

@@ -0,0 +1,37 @@
+import { generate, walk } from "css-tree";
+export function getCustomProperties(node) {
+  const customProperties = /* @__PURE__ */ new Map();
+  walk(node, {
+    visit: "Atrule",
+    enter(atrule) {
+      if (atrule.name === "property" && atrule.prelude) {
+        const prelude = generate(atrule.prelude);
+        if (prelude.startsWith("--")) {
+          let syntax;
+          let inherits;
+          let initialValue;
+          walk(atrule, {
+            visit: "Declaration",
+            enter(declaration) {
+              if (declaration.property === "syntax") {
+                syntax = declaration;
+              }
+              if (declaration.property === "inherits") {
+                inherits = declaration;
+              }
+              if (declaration.property === "initial-value") {
+                initialValue = declaration;
+              }
+            }
+          });
+          customProperties.set(prelude, {
+            syntax,
+            inherits,
+            initialValue
+          });
+        }
+      }
+    }
+  });
+  return customProperties;
+}

package/dist/runtime/tailwind/engine/css/is-part-inlinable.d.ts

@@ -0,0 +1,2 @@
+import { type CssNode } from 'css-tree';
+export declare function isPartInlinable(part: CssNode): boolean;

package/dist/runtime/tailwind/engine/css/is-part-inlinable.js

@@ -0,0 +1,9 @@
+import { find } from "css-tree";
+export function isPartInlinable(part) {
+  const hasAtRuleInside = find(part, (node) => node.type === "Atrule") !== null;
+  const hasPseudoSelector = find(
+    part,
+    (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector"
+  ) !== null;
+  return !hasAtRuleInside && !hasPseudoSelector;
+}

package/dist/runtime/tailwind/engine/css/is-rule-inlinable.d.ts

@@ -0,0 +1,2 @@
+import { type Rule } from 'css-tree';
+export declare function isRuleInlinable(rule: Rule): boolean;

package/dist/runtime/tailwind/engine/css/is-rule-inlinable.js

@@ -0,0 +1,9 @@
+import { find } from "css-tree";
+export function isRuleInlinable(rule) {
+  const hasAtRuleInside = find(rule, (node) => node.type === "Atrule") !== null;
+  const hasPseudoSelector = find(
+    rule,
+    (node) => node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector"
+  ) !== null;
+  return !hasAtRuleInside && !hasPseudoSelector;
+}

package/dist/runtime/tailwind/engine/css/make-inline-styles-for.d.ts

@@ -0,0 +1,21 @@
+import { type CssNode } from 'css-tree';
+import type { CustomProperties } from './get-custom-properties.js';
+/**
+ * Adapted from React Email's `make-inline-styles-for.ts`.
+ *
+ * The algorithm (local-variable resolution, custom-property fallbacks,
+ * empty-`--tw-*`-var stripping) is a faithful port. The only difference is the
+ * return shape: React Email produces `Record<reactStyleKey, value>` to spread
+ * onto a React element's `style` prop; this engine produces an ordered
+ * `Map<cssProperty, value>` of real kebab-case CSS declarations for a
+ * post-render HTML transform.
+ *
+ * A `Map` (rather than a joined string) is used because it preserves both:
+ *   - insertion order — matching React's object-spread serialization order, and
+ *   - per-property granularity — so the consumer can replicate React's
+ *     `{ ...twStyle, ...authorStyle }` author-wins merge exactly (author overrides
+ *     a tw property in place, appends new ones), which a flat string cannot
+ *     express without re-parsing. Its `set` semantics (keep first position,
+ *     overwrite value) match plain-object key assignment 1:1.
+ */
+export declare function makeInlineStylesFor(inlinableRules: CssNode[], customProperties: CustomProperties): Map<string, string>;

package/dist/runtime/tailwind/engine/css/make-inline-styles-for.js

@@ -0,0 +1,62 @@
+import { generate, walk } from "css-tree";
+import { getCssProperty } from "./get-css-property.js";
+import { stripEmptyTailwindVars } from "./strip-empty-tailwind-vars.js";
+import { unwrapValue } from "./unwrap-value.js";
+export function makeInlineStylesFor(inlinableRules, customProperties) {
+  const styles = /* @__PURE__ */ new Map();
+  const localVariableDeclarations = /* @__PURE__ */ new Map();
+  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;
+          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 {
+              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.set(
+          getCssProperty(declaration.property),
+          generate(declaration.value).trim() + (declaration.important ? "!important" : "")
+        );
+      }
+    });
+  }
+  return styles;
+}

package/dist/runtime/tailwind/engine/css/resolve-all-css-variables.d.ts

@@ -0,0 +1,8 @@
+import { type CssNode, type Declaration } from 'css-tree';
+export interface VariableDefinition {
+    declaration: Declaration;
+    path: CssNode[];
+    variableName: string;
+    definition: string;
+}
+export declare function resolveAllCssVariables(node: CssNode): void;

package/dist/runtime/tailwind/engine/css/resolve-all-css-variables.js

@@ -0,0 +1,138 @@
+import {
+  generate,
+  parse,
+  walk
+} from "css-tree";
+function doSelectorsIntersect(first, second) {
+  const firstStringified = generate(first);
+  const secondStringified = generate(second);
+  if (firstStringified === secondStringified) {
+    return true;
+  }
+  let hasSomeUniversal = false;
+  const walker = (node, _parentListItem, parentList) => {
+    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) {
+  const variableDefinitions = /* @__PURE__ */ new Set();
+  const variableUses = /* @__PURE__ */ new Set();
+  const path = [];
+  walk(node, {
+    leave() {
+      path.shift();
+    },
+    enter(node2) {
+      if (node2.type === "Declaration") {
+        const declaration = node2;
+        if (path.some(
+          (ancestor) => ancestor.type === "Atrule" && ancestor.name === "layer" && ancestor.prelude !== null && generate(ancestor.prelude).includes("properties")
+        )) {
+          path.unshift(node2);
+          return;
+        }
+        if (/--\S+/.test(declaration.property)) {
+          variableDefinitions.add({
+            declaration,
+            path: [...path],
+            variableName: declaration.property,
+            definition: generate(declaration.value)
+          });
+        } else {
+          const parseVariableUsesFrom = (fromNode) => {
+            walk(fromNode, {
+              visit: "Function",
+              enter(funcNode) {
+                if (funcNode.name === "var") {
+                  const children = funcNode.children.toArray();
+                  const name = generate(children[0]);
+                  const fallback = children[2] ? generate(children[2]) : void 0;
+                  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(node2);
+    }
+  });
+  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"
+          }
+        );
+        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"
+          }
+        );
+        hasReplaced = true;
+        break;
+      }
+      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"
+          }
+        );
+        hasReplaced = true;
+        break;
+      }
+    }
+    if (!hasReplaced && use.fallback) {
+      use.declaration.value = parse(
+        generate(use.declaration.value).replaceAll(use.raw, use.fallback),
+        { context: "value" }
+      );
+    }
+  }
+}

package/dist/runtime/tailwind/engine/css/resolve-calc-expressions.d.ts

@@ -0,0 +1,5 @@
+import { type CssNode } from 'css-tree';
+/**
+ * Intentionally only resolves `*` and `/` operations without dealing with parenthesis, because this is the only thing required to run Tailwind v4
+ */
+export declare function resolveCalcExpressions(node: CssNode): void;

package/dist/runtime/tailwind/engine/css/resolve-calc-expressions.js

@@ -0,0 +1,101 @@
+import { walk } from "css-tree";
+export function resolveCalcExpressions(node) {
+  walk(node, {
+    visit: "Function",
+    enter(func, funcListItem) {
+      if (func.name === "calc") {
+        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;
+        }
+      }
+    }
+  });
+}

package/dist/runtime/tailwind/engine/css/sanitize-declarations.d.ts

@@ -0,0 +1,15 @@
+import { type CssNode } from 'css-tree';
+/**
+ * Meant to do all the things necessary, in a per-declaration basis, to have the best email client
+ * support possible.
+ *
+ * Here's the transformations it does so far:
+ * - convert all `rgb` with space-based syntax into a comma based one;
+ * - convert all `oklch` values into `rgb`;
+ * - convert all hex values into `rgb`;
+ * - convert `padding-inline` into `padding-left` and `padding-right`;
+ * - convert `padding-block` into `padding-top` and `padding-bottom`;
+ * - convert `margin-inline` into `margin-left` and `margin-right`;
+ * - convert `margin-block` into `margin-top` and `margin-bottom`.
+ */
+export declare function sanitizeDeclarations(nodeContainingDeclarations: CssNode): void;