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

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

@@ -1,4 +1,9 @@
-import { generate, List } from "css-tree";
+import {
+  clone,
+  generate,
+  List,
+  walk
+} from "../css-tree.js";
 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";
@@ -7,6 +12,35 @@ 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";
+function collectKeyframesDefinitions(styleSheet) {
+  const definitions = [];
+  styleSheet.children.forEach((node) => {
+    if (node.type === "Atrule" && (node.name === "keyframes" || node.name === "-webkit-keyframes") && node.prelude) {
+      definitions.push({ name: generate(node.prelude).trim(), node });
+    }
+  });
+  return definitions;
+}
+function collectReferencedKeyframes(rulesByClass, knownNames) {
+  const references = /* @__PURE__ */ new Map();
+  for (const [className, rules] of rulesByClass) {
+    const classReferences = /* @__PURE__ */ new Set();
+    for (const rule of rules) {
+      walk(rule, {
+        visit: "Declaration",
+        enter(declaration) {
+          if (declaration.property !== "animation" && declaration.property !== "animation-name") return;
+          walk(declaration.value, (node) => {
+            const name = node.type === "Identifier" ? node.name : node.type === "String" ? node.value : null;
+            if (name && knownNames.has(name)) classReferences.add(name);
+          });
+        }
+      });
+    }
+    if (classReferences.size > 0) references.set(className, classReferences);
+  }
+  return references;
+}
 export async function createTailwindEngine(options = {}) {
   const { config, theme, utility } = options;
   const tailwindSetup = await setupTailwind({
@@ -17,17 +51,42 @@ export async function createTailwindEngine(options = {}) {
     tailwindSetup.addUtilities(classNames);
     const styleSheet = tailwindSetup.getStyleSheet();
     sanitizeStyleSheet(styleSheet);
-    const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classNames);
+    const {
+      inlinable: inlinableRules,
+      nonInlinable: nonInlinableRules,
+      orderedNonInlinable
+    } = extractRulesPerClass(styleSheet, classNames);
     const customProperties = getCustomProperties(styleSheet);
+    const keyframesDefinitions = collectKeyframesDefinitions(styleSheet);
+    const knownKeyframeNames = new Set(
+      keyframesDefinitions.map((definition) => definition.name)
+    );
+    const animationReferences = /* @__PURE__ */ new Map();
+    for (const rules of [inlinableRules, nonInlinableRules]) {
+      for (const [className, names] of collectReferencedKeyframes(
+        rules,
+        knownKeyframeNames
+      )) {
+        const existing = animationReferences.get(className) ?? /* @__PURE__ */ new Set();
+        for (const name of names) existing.add(name);
+        animationReferences.set(className, existing);
+      }
+    }
+    const referencedKeyframeNames = new Set(
+      Array.from(animationReferences.values()).flatMap((names) => [...names])
+    );
     const nonInlineStyles = {
       type: "StyleSheet",
-      children: new List().fromArray(
-        Array.from(nonInlinableRules.values()).flat()
-      )
+      children: new List().fromArray(orderedNonInlinable)
     };
     sanitizeNonInlinableRules(nonInlineStyles);
+    for (const definition of keyframesDefinitions) {
+      if (referencedKeyframeNames.has(definition.name)) {
+        nonInlineStyles.children.appendData(clone(definition.node));
+      }
+    }
     downlevelForEmailClients(nonInlineStyles);
-    const nonInlinableCss = nonInlinableRules.size > 0 ? generate(nonInlineStyles) : "";
+    const nonInlinableCss = nonInlineStyles.children.isEmpty ? "" : generate(nonInlineStyles);
     const inlinable = /* @__PURE__ */ new Map();
     for (const [className, rules] of inlinableRules) {
       inlinable.set(className, makeInlineStylesFor(rules, customProperties));
@@ -41,11 +100,15 @@ export async function createTailwindEngine(options = {}) {
         residualClassMap.set(className, className);
       }
     }
+    const nonInlinableClassNames = new Set(nonInlinableRules.keys());
+    for (const className of classNames) {
+      if (animationReferences.has(className) && !nonInlinableRules.has(className)) nonInlinableClassNames.add(className);
+    }
     return {
       inlinable,
       nonInlinableCss,
       residualClassMap,
-      nonInlinableClassNames: Array.from(nonInlinableRules.keys())
+      nonInlinableClassNames: [...nonInlinableClassNames]
     };
   };
   return { computeStyles };

package/dist/runtime/tailwind/engine/setup-tailwind.d.ts

@@ -1,4 +1,4 @@
-import { type StyleSheet } from 'css-tree';
+import { type StyleSheet } from '../css-tree.js';
 import type { TailwindConfig } from './types.js';
 export type TailwindSetup = Awaited<ReturnType<typeof setupTailwind>>;
 interface CSSConfigs {

package/dist/runtime/tailwind/engine/setup-tailwind.js

@@ -1,4 +1,4 @@
-import { parse } from "css-tree";
+import { parse } from "../css-tree.js";
 import { compile } from "tailwindcss";
 import {
   indexCss,

package/dist/runtime/tailwind/post-render.js

@@ -1,4 +1,4 @@
-import { generate, parse, walk } from "css-tree";
+import { generate, parse, walk } from "./css-tree.js";
 import { Parser } from "htmlparser2";
 import { classTokens, mergeInlinableStyle, residualClasses } from "./inline-utils.js";
 import { TailwindMissingHeadError } from "./errors.js";
@@ -63,12 +63,7 @@ function rewriteOpenTag(openTag, newClass, newStyle) {
   }
   return tag;
 }
-function inlinePlainElements(fragment, region) {
-  const hits = collectElements(fragment);
-  for (const hit of hits) {
-    region.classNames.push(...classTokens(hit.classValue));
-  }
-  const computed = region.engine.computeStyles(region.classNames);
+function inlinePlainElements(fragment, hits, computed) {
   const edits = [];
   for (const hit of hits) {
     const tokens = classTokens(hit.classValue);
@@ -131,8 +126,12 @@ function processRegion(html, region) {
   if (startIndex === -1 || endIndex === -1) return html;
   const fragmentStart = startIndex + startComment.length;
   const fragment = html.slice(fragmentStart, endIndex);
-  const inlined = inlinePlainElements(fragment, region);
+  const hits = collectElements(fragment);
+  for (const hit of hits) {
+    region.classNames.push(...classTokens(hit.classValue));
+  }
   const computed = region.engine.computeStyles(region.classNames);
+  const inlined = inlinePlainElements(fragment, hits, computed);
   if (inlined.includes(region.placeholder)) {
     const completed = inlined.replace(region.placeholder, computed.nonInlinableCss);
     return html.slice(0, startIndex) + completed + html.slice(endIndex + endComment.length);

package/dist/shared/nuxt-email.B5ux0eBv.mjs

@@ -0,0 +1,133 @@
+import { relative, isAbsolute, sep } from 'node:path';
+import { resolveFiles } from '@nuxt/kit';
+
+class DuplicateEmailTemplateError extends Error {
+  templateName;
+  sourcePaths;
+  constructor(templateName, sourcePaths) {
+    const sortedSourcePaths = [...sourcePaths].sort();
+    super(`Duplicate email template name "${templateName}" from: ${sortedSourcePaths.join(", ")}`);
+    this.name = "DuplicateEmailTemplateError";
+    this.templateName = templateName;
+    this.sourcePaths = sortedSourcePaths;
+  }
+}
+class EmailTemplateDiscoveryError extends Error {
+  sourcePath;
+  constructor(sourcePath, cause) {
+    super(`Failed to discover email templates under ${sourcePath}`, { cause });
+    this.name = "EmailTemplateDiscoveryError";
+    this.sourcePath = sourcePath;
+  }
+}
+
+function compareCodePoints(left, right) {
+  return left < right ? -1 : left > right ? 1 : 0;
+}
+function normalizeSeparators(value) {
+  return value.split(sep).join("/").replaceAll("\\", "/");
+}
+function templatesFromSourcePaths(emailDirectory, sourcePaths) {
+  const templates = sourcePaths.map((sourcePath) => {
+    const relativePath = normalizeSeparators(relative(emailDirectory, sourcePath));
+    if (relativePath.startsWith("../") || relativePath === ".." || isAbsolute(relativePath)) {
+      throw new EmailTemplateDiscoveryError(sourcePath, new TypeError("Template path is outside app/emails"));
+    }
+    return {
+      name: relativePath.slice(0, -".vue".length),
+      sourcePath: normalizeSeparators(sourcePath)
+    };
+  }).sort((left, right) => {
+    return compareCodePoints(left.name, right.name) || compareCodePoints(left.sourcePath, right.sourcePath);
+  });
+  const pathsByName = /* @__PURE__ */ new Map();
+  for (const template of templates) {
+    const paths = pathsByName.get(template.name) ?? [];
+    paths.push(template.sourcePath);
+    pathsByName.set(template.name, paths);
+  }
+  const duplicate = [...pathsByName.entries()].filter(([, paths]) => paths.length > 1).sort(([left], [right]) => compareCodePoints(left, right))[0];
+  if (duplicate) {
+    throw new DuplicateEmailTemplateError(duplicate[0], duplicate[1]);
+  }
+  return templates;
+}
+async function discoverEmailTemplates(emailDirectory) {
+  let sourcePaths;
+  try {
+    sourcePaths = await resolveFiles(emailDirectory, "**/*.vue", {
+      followSymbolicLinks: false,
+      ignore: ["components/**"]
+    });
+  } catch (error) {
+    throw new EmailTemplateDiscoveryError(emailDirectory, error);
+  }
+  return templatesFromSourcePaths(emailDirectory, sourcePaths);
+}
+
+function importPath(path) {
+  return JSON.stringify(path.replaceAll("\\", "/"));
+}
+function generateEmailRegistry(templates, runtimePaths) {
+  const entries = templates.map((template) => {
+    const fixture = template.fixturePath ? `
+    fixture: () => import(${importPath(template.fixturePath)}),` : "";
+    return `  [${JSON.stringify(template.name)}]: {
+    component: () => import(${importPath(template.sourcePath)}),${fixture}
+  },`;
+  });
+  return `import { EmailRenderError } from ${importPath(runtimePaths.emailRenderError)}
+import { renderEmailComponent } from ${importPath(runtimePaths.renderEmailComponent)}
+import { UnknownEmailTemplateError } from ${importPath(runtimePaths.templateRegistryErrors)}
+
+export const emailTemplates = Object.freeze({
+${entries.join("\n")}
+})
+
+export async function renderEmail(name, props) {
+  const loader = typeof name === 'string' && Object.hasOwn(emailTemplates, name)
+    ? emailTemplates[name]
+    : undefined
+  if (!loader) {
+    throw new UnknownEmailTemplateError(String(name), Object.keys(emailTemplates))
+  }
+
+  try {
+    const templateModule = await loader.component()
+    return await renderEmailComponent(templateModule.default, props)
+  }
+  catch (error) {
+    throw new EmailRenderError(name, error instanceof EmailRenderError ? error.cause : error)
+  }
+}
+`;
+}
+function generateEmailTypes(templates, typePaths) {
+  const entries = templates.map((template) => {
+    const fixture = template.fixturePath ? `
+    fixture: () => Promise<typeof import(${importPath(template.fixturePath)})>` : "";
+    return `  ${JSON.stringify(template.name)}: {
+    component: () => Promise<typeof import(${importPath(template.sourcePath)})>${fixture}
+  }`;
+  });
+  return `export const emailTemplates: Readonly<{
+${entries.join("\n")}
+}>
+
+export type EmailTemplateName = keyof typeof emailTemplates
+type _EmailProps<Component> = keyof import(${importPath(typePaths.renderedEmail)}).EmailComponentProps<Component> extends never
+  ? Record<string, never>
+  : import(${importPath(typePaths.renderedEmail)}).EmailComponentProps<Component>
+
+export type EmailTemplateProps = {
+  [Name in EmailTemplateName]: _EmailProps<Awaited<ReturnType<(typeof emailTemplates)[Name]['component']>>['default']>
+}
+
+export function renderEmail<Name extends EmailTemplateName>(
+  name: Name,
+  props: NoInfer<EmailTemplateProps[Name]>,
+): Promise<import(${importPath(typePaths.renderedEmail)}).RenderedEmail>
+`;
+}
+
+export { generateEmailTypes as a, discoverEmailTemplates as d, generateEmailRegistry as g };

package/dist/types.d.mts

@@ -1,4 +1,4 @@
-export { type RenderedEmail } from '../dist/runtime/render/types.js'
+export { type EmailComponentProps, type RenderedEmail } from '../dist/runtime/render/types.js'
 
 export { default } from './module.mjs'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lupinum/nuxt-email",
-  "version": "0.1.1",
+  "version": "1.0.0-beta.2",
   "description": "Typed transactional email for Nuxt with email-safe Tailwind v4",
   "keywords": [
     "email",
@@ -27,6 +27,14 @@
     "node": "^22.18.0 || ^24.11.0 || ^26.0.0"
   },
   "exports": {
+    "./build": {
+      "types": "./dist/build.d.mts",
+      "import": "./dist/build.mjs"
+    },
+    "./render": {
+      "types": "./dist/runtime/render/index.d.ts",
+      "import": "./dist/runtime/render/index.js"
+    },
     ".": {
       "types": "./dist/module.d.mts",
       "import": "./dist/module.mjs"
@@ -62,12 +70,15 @@
     "@shikijs/langs": "4.3.1",
     "@shikijs/themes": "4.3.1",
     "css-tree": "3.2.1",
+    "esbuild": "0.28.1",
     "h3": "1.15.11",
     "html-to-text": "9.0.5",
     "htmlparser2": "^10.1.0",
     "marked": "15.0.12",
     "tailwindcss": "4.1.18",
-    "unplugin-vue": "7.2.0"
+    "typescript": "~5.9.3",
+    "unplugin-vue": "7.2.0",
+    "vue-tsc": "^3.3.3"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^1.15.2",
@@ -89,10 +100,9 @@
     "react-dom": "19.2.7",
     "react-email": "6.9.0",
     "tsx": "4.23.1",
-    "typescript": "~5.9.3",
     "vitest": "^4.1.8",
-    "vue": "3.5.40",
-    "vue-tsc": "^3.3.3"
+    "vue": "3.5.42",
+    "yaml": "2.9.0"
   },
   "scripts": {
     "changelog": "changelogen --no-output",
@@ -105,7 +115,8 @@
     "oracle:check": "node --import tsx test/conformance/tooling/generate-react-oracle.ts --check",
     "oracle:write": "node --import tsx test/conformance/tooling/generate-react-oracle.ts --write",
     "performance:measure": "node --expose-gc --import tsx test/performance/measure.ts",
-    "docs:build": "nuxt-module-build prepare && pnpm prepack && pnpm --dir docs build",
+    "docs:build": "pnpm docs:theme && nuxt-module-build prepare && pnpm prepack && pnpm --dir docs build",
+    "docs:theme": "node scripts/check-docs-theme.mjs",
     "proofs:generate": "node --import tsx scripts/proofs/generate.ts",
     "proofs:send": "node --import tsx scripts/proofs/send.ts",
     "repo:check": "node scripts/check-repository-policy.mjs",
@@ -113,7 +124,7 @@
     "release:prepare": "changelogen --bump --clean --hideAuthorEmail",
     "release:artifact": "pnpm release:verify --output .release/lupinum-nuxt-email.tgz && node scripts/write-release-manifest.mjs",
     "lint": "eslint .",
-    "test": "vitest run --exclude test/preview.test.ts && pnpm test:preview",
+    "test": "pnpm prepack && vitest run --exclude test/preview.test.ts && pnpm test:preview",
     "test:preview": "vitest run test/preview.test.ts",
     "test:conformance": "vitest run test/conformance",
     "test:watch": "vitest watch",