@lupinum/nuxt-email 0.1.1 → 1.0.0-beta.2

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

@@ -1,41 +1,12 @@
 /**
- * Downlevels modern CSS features that email clients don't support,
- * operating on a css-tree StyleSheet AST.
- *
- * 1. CSS Nesting: unnests @media rules from inside selectors
- *    `.sm_p-4{@media (min-width:40rem){padding:1rem!important}}`
- *    → `@media (min-width:40rem){.sm_p-4{padding:1rem!important}}`
- *
- * 2. Media Queries Level 4 range syntax → legacy min-width/max-width
- *    `(width>=40rem)` → `(min-width:40rem)`
- *
- * Gmail, Outlook, Yahoo, and most email clients don't support either feature.
- * See: https://www.caniemail.com/features/css-at-media/
- *      https://www.caniemail.com/features/css-nesting/
+ * Downlevel the modern CSS emitted by Tailwind to shapes that email clients
+ * can parse. The transform is deliberately strict: leaving one nested rule in
+ * the output is worse than failing the render with an actionable error.
  */
-import { type StyleSheet } from 'css-tree';
+import { type StyleSheet } from '../../css-tree.js';
 /**
- * css-tree 3.x introduced new AST node types for query-related at-rules that
- * `@types/css-tree` (still on 2.x at the time of writing) doesn't expose.
- * Augmenting the module here lets the rest of this file work with strong
- * types instead of scattering `as` casts everywhere.
- *
- * - `FeatureRange` is what the parser emits for Media Queries Level 4 range
- *   syntax: `(width >= 40rem)`.
- * - `Feature` is the legacy form (`(min-width: 40rem)`) we construct as the
- *   downleveled output.
- *
- * Note: we cannot extend the `CssNode` union itself (it's a `type` alias, not
- * an interface), so two narrow casts remain in this file:
- *   1. Widening `node` inside `walk()` so we can narrow against
- *      `FeatureRange.type` (`CssNode` doesn't list `'FeatureRange'`).
- *   2. Assigning a constructed `Feature` back to `ListItem<CssNode>.data`.
- *
- * Both are flagged inline and reference back to this block.
- *
- * See:
- *   https://github.com/csstree/csstree/blob/master/lib/syntax/node/FeatureRange.js
- *   https://github.com/csstree/csstree/blob/master/lib/syntax/node/Feature.js
+ * css-tree 3.x parses media range syntax, but the currently published type
+ * package does not expose the corresponding nodes yet.
  */
 declare module 'css-tree' {
     interface FeatureRange extends CssNodeCommon {
@@ -55,9 +26,8 @@ declare module 'css-tree' {
     }
 }
 /**
- * Unnest @media at-rules from inside regular rules, and downlevel
- * range media query syntax to legacy min-width/max-width.
- *
+ * Recursively flatten selector nesting and nested @media/@supports rules,
+ * then convert media range syntax such as `(width >= 40rem)` to `min-width`.
  * Mutates the stylesheet in place.
  */
 export declare function downlevelForEmailClients(styleSheet: StyleSheet): void;

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

@@ -1,75 +1,171 @@
 import {
   clone,
+  generate,
   List,
+  parse,
   walk
-} from "css-tree";
+} from "../../css-tree.js";
 export function downlevelForEmailClients(styleSheet) {
-  unnestMediaQueries(styleSheet);
+  styleSheet.children = flattenStyleSheet(styleSheet);
   downlevelRangeMediaQueries(styleSheet);
+  walk(styleSheet, (node) => {
+    if (node.type === "NestingSelector") {
+      throw new TypeError(
+        "Unable to render Tailwind CSS: an unsupported nesting selector remained after downleveling."
+      );
+    }
+  });
 }
-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
-        });
-      }
+function flattenStyleSheet(styleSheet) {
+  const output = new List();
+  styleSheet.children.forEach((node) => {
+    if (node.type === "Rule") {
+      flattenRule(node, null, [], output);
+      return;
+    }
+    if (node.type === "Atrule" && isConditionalAtrule(node)) {
+      flattenConditionalAtrule(node, null, [], output);
+      return;
     }
+    output.appendData(clone(node));
   });
-  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
+  return output;
+}
+function flattenRule(rule, parentSelectors, wrappers, output) {
+  const selectors = resolveSelectors(rule, parentSelectors);
+  flattenBlock(rule.block.children, selectors, wrappers, output);
+}
+function flattenBlock(children, selectors, wrappers, output) {
+  let declarations = new List();
+  const flushDeclarations = () => {
+    if (declarations.isEmpty) return;
+    if (!selectors) {
+      throw new TypeError(
+        "Unable to render Tailwind CSS: declarations were found outside a selector."
       );
-      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);
+    appendWrappedRule(selectors, declarations, wrappers, output);
+    declarations = new List();
+  };
+  children.forEach((node) => {
+    if (node.type === "Raw") {
+      throw new TypeError(
+        `Unable to render Tailwind CSS: an unparsed nested CSS shape was encountered (${node.value}).`
+      );
+    }
+    if (node.type === "Rule") {
+      flushDeclarations();
+      flattenRule(node, selectors, wrappers, output);
+      return;
+    }
+    if (node.type === "Atrule") {
+      flushDeclarations();
+      if (!isConditionalAtrule(node)) {
+        throw new TypeError(
+          `Unable to render Tailwind CSS: nested @${node.name} rules are not supported.`
+        );
+      }
+      flattenConditionalAtrule(node, selectors, wrappers, output);
+      return;
     }
-    parentList.replace(parentItem, replacements);
+    declarations.appendData(clone(node));
+  });
+  flushDeclarations();
+}
+function flattenConditionalAtrule(atrule, selectors, wrappers, output) {
+  if (!atrule.block) {
+    throw new TypeError(
+      `Unable to render Tailwind CSS: @${atrule.name} has no rule block.`
+    );
+  }
+  flattenBlock(
+    atrule.block.children,
+    selectors,
+    [
+      ...wrappers,
+      { name: atrule.name, prelude: clonePrelude(atrule.prelude) }
+    ],
+    output
+  );
+}
+function appendWrappedRule(selectors, declarations, wrappers, output) {
+  let node = {
+    type: "Rule",
+    prelude: clone(selectors),
+    block: { type: "Block", children: declarations }
+  };
+  for (let index = wrappers.length - 1; index >= 0; index--) {
+    const wrapper = wrappers[index];
+    node = {
+      type: "Atrule",
+      name: wrapper.name,
+      prelude: clonePrelude(wrapper.prelude),
+      block: {
+        type: "Block",
+        children: new List().fromArray([node])
+      }
+    };
+  }
+  output.appendData(node);
+}
+function resolveSelectors(rule, parentSelectors) {
+  if (rule.prelude.type !== "SelectorList") {
+    throw new TypeError(
+      "Unable to render Tailwind CSS: raw selectors cannot be downleveled safely."
+    );
+  }
+  if (!parentSelectors) {
+    assertNoNestingSelector(rule.prelude);
+    return clone(rule.prelude);
   }
+  const resolved = new List();
+  const nestedSelectors = rule.prelude;
+  parentSelectors.children.forEach((parentNode) => {
+    const parent = parentNode;
+    nestedSelectors.children.forEach((nestedNode) => {
+      const nested = nestedNode;
+      if (containsNestingSelector(nested)) {
+        const selector = clone(nested);
+        walk(selector, {
+          enter(node, item, list) {
+            if (node.type === "NestingSelector") {
+              list.replace(item, clone(parent).children);
+            }
+          }
+        });
+        resolved.appendData(selector);
+      } else {
+        const selector = parse(
+          `${generate(parent)} ${generate(nested)}`,
+          { context: "selector" }
+        );
+        resolved.appendData(selector);
+      }
+    });
+  });
+  return { type: "SelectorList", children: resolved };
+}
+function containsNestingSelector(selector) {
+  let found = false;
+  walk(selector, (node) => {
+    if (node.type === "NestingSelector") found = true;
+  });
+  return found;
+}
+function assertNoNestingSelector(selectors) {
+  walk(selectors, (node) => {
+    if (node.type === "NestingSelector") {
+      throw new TypeError(
+        "Unable to render Tailwind CSS: a top-level nesting selector has no parent selector."
+      );
+    }
+  });
+}
+function isConditionalAtrule(atrule) {
+  return atrule.name === "media" || atrule.name === "supports";
+}
+function clonePrelude(prelude) {
+  return prelude ? clone(prelude) : null;
 }
 function downlevelRangeMediaQueries(styleSheet) {
   const replacements = [];
@@ -77,10 +173,7 @@ function downlevelRangeMediaQueries(styleSheet) {
     enter(originalNode, item) {
       const node = originalNode;
       if (item && node.type === "FeatureRange") {
-        const replacement = downlevelFeatureRange(node);
-        if (replacement) {
-          replacements.push({ item, replacement });
-        }
+        replacements.push({ item, replacement: downlevelFeatureRange(node) });
       }
     }
   });
@@ -89,19 +182,40 @@ function downlevelRangeMediaQueries(styleSheet) {
   }
 }
 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-";
+  const source = generate(range);
+  if (range.rightComparison !== null || range.right !== null) {
+    throw new TypeError(
+      `Unable to render Tailwind CSS: unsupported two-sided media range ${source}.`
+    );
+  }
+  let name;
+  let value;
+  let direct;
+  if (range.left.type === "Identifier") {
+    name = range.left.name;
+    value = range.middle;
+    direct = true;
+  } else if (range.middle.type === "Identifier") {
+    name = range.middle.name;
+    value = range.left;
+    direct = false;
   } else {
-    return null;
+    throw new TypeError(
+      `Unable to render Tailwind CSS: unsupported media range ${source}.`
+    );
+  }
+  const comparison = range.leftComparison;
+  const minimum = direct ? comparison === ">=" || comparison === ">" : comparison === "<=" || comparison === "<";
+  const maximum = direct ? comparison === "<=" || comparison === "<" : comparison === ">=" || comparison === ">";
+  if (!minimum && !maximum) {
+    throw new TypeError(
+      `Unable to render Tailwind CSS: unsupported media range ${source}.`
+    );
   }
   return {
     type: "Feature",
     kind: "media",
-    name: `${prefix}${range.left.name}`,
-    value: range.middle
+    name: `${minimum ? "min-" : "max-"}${name}`,
+    value
   };
 }

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

@@ -1,6 +1,8 @@
-import { type CssNode, type Rule } from 'css-tree';
+import { type CssNode, type Rule } from '../../css-tree.js';
 export interface ExtractedRules {
     inlinable: Map<string, Rule[]>;
     nonInlinable: Map<string, Rule[]>;
+    /** Canonical non-inlinable rules, once each and in stylesheet order. */
+    orderedNonInlinable: Rule[];
 }
 export declare function extractRulesPerClass(root: CssNode, classes: string[]): ExtractedRules;

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

@@ -1,10 +1,11 @@
-import { string, walk } from "css-tree";
+import { string, walk } from "../../css-tree.js";
 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 orderedNonInlinableRules = [];
   const appendRule = (map, className, rule) => {
     const existing = map.get(className);
     if (existing) {
@@ -35,8 +36,10 @@ export function extractRulesPerClass(root, classes) {
         }
       } else {
         const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
+        let includesRequestedClass = false;
         for (const className of selectorClasses) {
           if (!classSet.has(className)) continue;
+          includesRequestedClass = true;
           if (inlinablePart) {
             appendRule(inlinableRules, className, inlinablePart);
           }
@@ -44,11 +47,15 @@ export function extractRulesPerClass(root, classes) {
             appendRule(nonInlinableRules, className, nonInlinablePart);
           }
         }
+        if (includesRequestedClass && nonInlinablePart) {
+          orderedNonInlinableRules.push(nonInlinablePart);
+        }
       }
     }
   });
   return {
     inlinable: inlinableRules,
-    nonInlinable: nonInlinableRules
+    nonInlinable: nonInlinableRules,
+    orderedNonInlinable: orderedNonInlinableRules
   };
 }

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

@@ -1,4 +1,4 @@
-import { type CssNode, type Declaration } from 'css-tree';
+import { type CssNode, type Declaration } from '../../css-tree.js';
 export interface CustomProperty {
     syntax?: Declaration;
     inherits?: Declaration;

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

@@ -1,4 +1,4 @@
-import { generate, walk } from "css-tree";
+import { generate, walk } from "../../css-tree.js";
 export function getCustomProperties(node) {
   const customProperties = /* @__PURE__ */ new Map();
   walk(node, {

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

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

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

@@ -1,4 +1,4 @@
-import { find } from "css-tree";
+import { find } from "../../css-tree.js";
 export function isPartInlinable(part) {
   const hasAtRuleInside = find(part, (node) => node.type === "Atrule") !== null;
   const hasPseudoSelector = find(

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

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

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

@@ -1,4 +1,4 @@
-import { find } from "css-tree";
+import { find } from "../../css-tree.js";
 export function isRuleInlinable(rule) {
   const hasAtRuleInside = find(rule, (node) => node.type === "Atrule") !== null;
   const hasPseudoSelector = find(

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

@@ -1,4 +1,4 @@
-import { type CssNode } from 'css-tree';
+import { type CssNode } from '../../css-tree.js';
 import type { CustomProperties } from './get-custom-properties.js';
 /**
  * Adapted from React Email's `make-inline-styles-for.ts`.

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

@@ -1,4 +1,4 @@
-import { generate, walk } from "css-tree";
+import { generate, walk } from "../../css-tree.js";
 import { getCssProperty } from "./get-css-property.js";
 import { stripEmptyTailwindVars } from "./strip-empty-tailwind-vars.js";
 import { unwrapValue } from "./unwrap-value.js";

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

@@ -1,4 +1,4 @@
-import { type CssNode, type Declaration } from 'css-tree';
+import { type CssNode, type Declaration } from '../../css-tree.js';
 export interface VariableDefinition {
     declaration: Declaration;
     path: CssNode[];

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

@@ -2,7 +2,7 @@ import {
   generate,
   parse,
   walk
-} from "css-tree";
+} from "../../css-tree.js";
 function doSelectorsIntersect(first, second) {
   const firstStringified = generate(first);
   const secondStringified = generate(second);

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

@@ -1,4 +1,4 @@
-import { type CssNode } from 'css-tree';
+import { type CssNode } from '../../css-tree.js';
 /**
  * Intentionally only resolves `*` and `/` operations without dealing with parenthesis, because this is the only thing required to run Tailwind v4
  */

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

@@ -1,4 +1,4 @@
-import { walk } from "css-tree";
+import { walk } from "../../css-tree.js";
 export function resolveCalcExpressions(node) {
   walk(node, {
     visit: "Function",

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

@@ -1,4 +1,4 @@
-import { type CssNode } from 'css-tree';
+import { type CssNode } from '../../css-tree.js';
 /**
  * Meant to do all the things necessary, in a per-declaration basis, to have the best email client
  * support possible.

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

@@ -3,7 +3,7 @@ import {
   List,
   parse,
   walk
-} from "css-tree";
+} from "../../css-tree.js";
 function rgbNode(r, g, b, alpha) {
   const children = new List();
   children.appendData({

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

@@ -1,4 +1,4 @@
-import { type CssNode } from 'css-tree';
+import { type CssNode } from '../../css-tree.js';
 /**
  * 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

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

@@ -1,4 +1,4 @@
-import { string, walk } from "css-tree";
+import { string, walk } from "../../css-tree.js";
 import { sanitizeClassName } from "../compatibility/sanitize-class-name.js";
 import { isRuleInlinable } from "./is-rule-inlinable.js";
 import { stripEmptyTailwindVars } from "./strip-empty-tailwind-vars.js";

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

@@ -1,4 +1,4 @@
-import { type Rule } from 'css-tree';
+import { type Rule } from '../../css-tree.js';
 /**
  * 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.

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

@@ -1,4 +1,4 @@
-import { clone, find, List } from "css-tree";
+import { clone, find, List } from "../../css-tree.js";
 import { isPartInlinable } from "./is-part-inlinable.js";
 export function splitMixedRule(rule) {
   const selectorHasPseudo = rule.prelude !== null && find(

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

@@ -1,4 +1,4 @@
-import { type CssNode } from 'css-tree';
+import { type CssNode } from '../../css-tree.js';
 /**
  * Tailwind v4 emits variant-stacking idioms like
  *   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,)

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

@@ -1,4 +1,4 @@
-import { generate, walk } from "css-tree";
+import { generate, walk } from "../../css-tree.js";
 export function stripEmptyTailwindVars(node) {
   walk(node, {
     visit: "Function",

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

@@ -30,12 +30,12 @@ export interface ComputedStyles {
      */
     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.
+     * Original (unsanitized) names of classes that need the generated `<head>`
+     * CSS: non-inlinable rules and animation declarations with referenced
+     * keyframes. Non-inlinable rules keep stylesheet-emission order; animation-only
+     * classes follow in authored order. This list drives the missing-`<head>` error
+     * and cannot be reconstructed from {@link residualClassMap}, because an
+     * animation declaration itself can still be inlined.
      */
     nonInlinableClassNames: string[];
 }