@maizzle/framework 6.0.0-rc.14 → 6.0.0-rc.16

package/README.md

@@ -7,7 +7,7 @@
       </picture>
     </a>
   </p>
-  <p>Quickly build HTML emails with Tailwind CSS</p>
+  <p>The modern email development framework</p>
   <div>
 
   [![Version][npm-version-shield]][npm]
@@ -20,9 +20,9 @@
 
 ## About
 
-> **Note:** This repository contains the core code of the Maizzle framework. If you want to build HTML emails using Maizzle, visit the [Starter repository](https://github.com/maizzle/maizzle).
+> **Note:** This repository contains the core code of the Maizzle framework. If you want to start building HTML emails using Maizzle, visit the [Starter repository](https://github.com/maizzle/maizzle).
 
-Maizzle is a framework that helps you quickly build HTML emails with [Tailwind CSS](https://tailwindcss.com/).
+Maizzle is a Vite-powered framework for building HTML emails with Vue and Tailwind CSS.
 
 ## Documentation
 

package/dist/components/Body.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { createStaticVNode, inject, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -65,9 +67,12 @@ const props = defineProps({
   ariaLabel: {
     type: String,
     default: undefined
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const htmlLang = inject<string>('htmlLang', 'en')
 
 const render = () => {
@@ -78,10 +83,12 @@ const render = () => {
   const lang = props.xmlLang ?? htmlLang
 
   const parts = [
-    `xml:lang="${lang}"`,
     `dir="${props.dir}"`,
     'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
   ]
+  if (outlookFallback) {
+    parts.unshift(`xml:lang="${lang}"`)
+  }
 
   if (extraAttrs) {
     parts.push(extraAttrs)

package/dist/components/Button.vue

@@ -3,6 +3,8 @@ import { computed, useAttrs } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import Outlook from './Outlook.vue'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -103,9 +105,12 @@ const props = defineProps({
   iconClass: {
     type: String,
     default: ''
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const parsedIconWidth = computed(() => parseInt(String(props.iconWidth), 10))
 
 const alignClass = computed(() => props.align ? ({
@@ -171,21 +176,21 @@ const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as
       :class="mergedClass"
     >
       <template v-if="!isLink">
-        <Outlook><i class="mso-font-width-[150%]" :style="`mso-text-raise: ${msoPb};`" hidden>&emsp;</i></Outlook>
+        <Outlook v-if="outlookFallback"><i class="mso-font-width-[150%]" :style="`mso-text-raise: ${msoPb};`" hidden>&emsp;</i></Outlook>
         <template v-if="icon && iconPosition === 'left'">
-          <span :style="`mso-text-raise: ${msoPt}`">
+          <span :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined">
             <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
           </span>
-          <Outlook><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
+          <Outlook v-if="outlookFallback"><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
         </template>
-        <span :class="icon ? (iconPosition === 'right' ? 'mr-2' : 'ml-2') : ''" :style="`mso-text-raise: ${msoPt}`"><slot /></span>
+        <span :class="icon ? (iconPosition === 'right' ? 'mr-2' : 'ml-2') : ''" :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined"><slot /></span>
         <template v-if="icon && iconPosition === 'right'">
-          <Outlook><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
-          <span :style="`mso-text-raise: ${msoPt}`">
+          <Outlook v-if="outlookFallback"><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
+          <span :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined">
             <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
           </span>
         </template>
-        <Outlook><i class="mso-font-width-[150%]" hidden>&emsp;&#8203;</i></Outlook>
+        <Outlook v-if="outlookFallback"><i class="mso-font-width-[150%]" hidden>&emsp;&#8203;</i></Outlook>
       </template>
       <template v-else>
         <slot />

package/dist/components/Column.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, createStaticVNode, inject, useAttrs } from 'vue'
 import type { ComputedRef } from 'vue'
-import { nextId, normalizeToPixels } from './utils.ts'
+import { twMerge } from 'tailwind-merge'
+import { nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -29,9 +31,12 @@ const props = defineProps({
   msoStyle: {
     type: String,
     default: undefined
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const columnCount = inject<ComputedRef<number> | null>('columnCount', null)
 
 const count = computed(() => columnCount?.value ?? 2)
@@ -49,9 +54,17 @@ const msoWidth = computed(() => {
   return `__MAIZZLE_COLW_${colId}__`
 })
 
-const styles = computed(() =>
-  `display: inline-block; min-width: ${minWidth.value}; font-size: 16px; vertical-align: top;`
-)
+/**
+ * Baseline display/typography lives in classes — not inline `:style` —
+ * so the user can override any of them via tailwind utilities. Inline
+ * `display: inline-block` would silently shadow a class like
+ * `inline-table` during CSS inlining; routing both through twMerge lets
+ * the user's utility cleanly replace ours instead of being dropped.
+ */
+const baseClass = 'inline-block align-top text-base'
+const mergedClass = computed(() => twMerge(baseClass, (attrs.class as string) ?? ''))
+
+const styles = computed(() => `min-width: ${minWidth.value};`)
 
 const tdStyle = computed(() => {
   const parts = [`width: ${msoWidth.value}`, 'vertical-align: top']
@@ -71,14 +84,15 @@ const MsoAfter = () => createStaticVNode(
 </script>
 
 <template>
-  <MsoBefore />
+  <MsoBefore v-if="outlookFallback" />
   <div
-    v-bind="attrs"
+    v-bind="{ ...attrs, class: undefined }"
+    :class="mergedClass"
     :style="styles"
     :data-maizzle-cw-id="colId"
     :data-maizzle-cw-count="useMarker ? count : null"
   >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

package/dist/components/Container.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, provide, createStaticVNode, useAttrs } from 'vue'
 import { twMerge } from 'tailwind-merge'
-import { hasWidthUtility, nextId, normalizeToPixels } from './utils.ts'
+import { hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -33,12 +34,15 @@ const props = defineProps({
   msoWidth: {
     type: [String, Number],
     default: null
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 provide('containerWidth', computed(() => props.width))
 
-const useMarker = props.width == null && props.msoWidth == null
+const useMarker = outlookFallback && props.width == null && props.msoWidth == null
 const msoId = useMarker ? nextId('c') : null
 
 const styles = computed(() => {
@@ -77,7 +81,7 @@ const MsoAfter = () => createStaticVNode(
 </script>
 
 <template>
-  <MsoBefore />
+  <MsoBefore v-if="outlookFallback" />
   <div
     v-bind="{ ...attrs, class: undefined }"
     :class="mergedClass"
@@ -87,5 +91,5 @@ const MsoAfter = () => createStaticVNode(
   >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

package/dist/components/Head.vue

@@ -6,7 +6,7 @@ const props = defineProps({
    * Render an empty `<head>` before the main head element.
    *
    * This is a workaround for Yahoo! Mail on Android, which
-   * strips styles from the first `<head>` element.
+   * strips the first `<head>` element it finds.
    *
    * @default false
    */

package/dist/components/Html.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { createStaticVNode, provide, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -65,9 +67,12 @@ const props = defineProps({
   xmlns: {
     type: [Boolean, String],
     default: true
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 provide('htmlLang', props.lang)
 
 const render = () => {
@@ -80,7 +85,7 @@ const render = () => {
     `dir="${props.dir}"`,
   ]
 
-  if (props.xmlns !== false && props.xmlns !== 'false') {
+  if (outlookFallback && props.xmlns !== false && props.xmlns !== 'false') {
     parts.push(
       'xmlns:v="urn:schemas-microsoft-com:vml"',
       'xmlns:o="urn:schemas-microsoft-com:office:office"',

package/dist/components/Layout.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { computed, useAttrs, type PropType } from 'vue'
+import { computed, useAttrs, createStaticVNode, type PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -30,6 +32,18 @@ const props = defineProps({
     type: String as PropType<'ltr' | 'rtl'>,
     default: 'ltr'
   },
+  /**
+   * Render an empty `<head>` before the main head element.
+   *
+   * This is a workaround for Yahoo! Mail on Android, which
+   * strips the first `<head>` element it finds.
+   *
+   * @default false
+   */
+  doubleHead: {
+    type: [Boolean, String],
+    default: false
+  },
   /**
    * Accessible label for the email article wrapper.
    *
@@ -40,24 +54,20 @@ const props = defineProps({
   ariaLabel: {
     type: String,
     default: undefined
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const attrs = useAttrs()
 const bodyMergedClass = computed(() => twMerge('m-0 p-0 size-full [word-break:break-word]', props.bodyClass))
 const articleMergedClass = computed(() => twMerge('[font-size:max(16px,1rem)] font-inter', attrs.class as string))
-</script>
 
-<template>
-  <html :lang="lang" :dir="dir" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
-  <head>
-    <meta charset="utf-8">
-    <meta name="x-apple-disable-message-reformatting">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
-    <meta name="color-scheme" content="light dark">
-    <meta name="supported-color-schemes" content="light dark">
-    <!--[if mso]>
+const EmptyHead = () => createStaticVNode('<head></head>', 1)
+
+const MsoHead = () => createStaticVNode(
+  `<!--[if mso]>
       <noscript>
         <xml>
           <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
@@ -69,7 +79,27 @@ const articleMergedClass = computed(() => twMerge('[font-size:max(16px,1rem)] fo
         td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
         .mso-break-all {word-break: break-all;}
       </style>
-      <![endif]-->
+      <![endif]-->`,
+  1
+)
+
+const htmlXmlns = computed(() => outlookFallback ? {
+  'xmlns:v': 'urn:schemas-microsoft-com:vml',
+  'xmlns:o': 'urn:schemas-microsoft-com:office:office',
+} : {})
+</script>
+
+<template>
+  <html :lang="lang" :dir="dir" v-bind="htmlXmlns">
+  <EmptyHead v-if="props.doubleHead === true || props.doubleHead === 'true'" />
+  <head>
+    <meta charset="utf-8">
+    <meta name="x-apple-disable-message-reformatting">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
+    <meta name="color-scheme" content="light dark">
+    <meta name="supported-color-schemes" content="light dark">
+    <MsoHead v-if="outlookFallback" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" media="screen">
@@ -81,7 +111,7 @@ const articleMergedClass = computed(() => twMerge('[font-size:max(16px,1rem)] fo
       }
     </style>
   </head>
-  <body :xml:lang="lang" :class="bodyMergedClass">
+  <body :xml:lang="outlookFallback ? lang : null" :class="bodyMergedClass">
     <div
       role="article"
       aria-roledescription="email"

package/dist/components/Outlook.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, createStaticVNode } from 'vue'
+import { computed, createStaticVNode, type PropType } from 'vue'
 
 const VERSION_MAP = {
   2003: 11,
@@ -10,7 +10,10 @@ const VERSION_MAP = {
   2019: 16
 }
 
-const toMso = (v: string) => VERSION_MAP[v]
+type Year = `${keyof typeof VERSION_MAP}`
+type YearList = Year | (string & {})
+
+const toMso = (v: string) => VERSION_MAP[v as unknown as keyof typeof VERSION_MAP]
 
 const parseList = (value: string) =>
   value
@@ -30,7 +33,7 @@ export default {
      * @example '2013'
      * @example '2013,2016'
      */
-    only: String,
+    only: String as PropType<YearList>,
     /**
      * Render content in all Outlook versions except the specified one(s).
      *
@@ -39,31 +42,55 @@ export default {
      * @example '2007'
      * @example '2007,2010'
      */
-    not: String,
+    not: String as PropType<YearList>,
     /**
      * Render content in Outlook versions lower than the specified year.
      *
      * @example '2013'
      */
-    lt: String,
+    lt: String as PropType<Year>,
     /**
      * Render content in Outlook versions lower than or equal to the specified year.
      *
      * @example '2013'
      */
-    lte: String,
+    lte: String as PropType<Year>,
     /**
      * Render content in Outlook versions greater than the specified year.
      *
      * @example '2010'
      */
-    gt: String,
+    gt: String as PropType<Year>,
     /**
      * Render content in Outlook versions greater than or equal to the specified year.
      *
      * @example '2010'
      */
-    gte: String
+    gte: String as PropType<Year>,
+    /**
+     * Raw HTML inserted at the start of the conditional comment, before the slot.
+     *
+     * Bypasses Vue's template parser, so unbalanced tags are preserved — useful
+     * for MSO ghost tables where the opening `<table><tr><td>` must live inside
+     * the conditional comment.
+     *
+     * @example '<table align="center" width="600"><tr><td>'
+     */
+    open: {
+      type: String,
+      default: ''
+    },
+    /**
+     * Raw HTML inserted at the end of the conditional comment, after the slot.
+     *
+     * Pair with `open` to close ghost-table tags inside the conditional.
+     *
+     * @example '</td></tr></table>'
+     */
+    close: {
+      type: String,
+      default: ''
+    }
   },
   setup(props, { slots }) {
     const condition = computed(() => {
@@ -97,13 +124,13 @@ export default {
       return 'mso'
     })
 
-    const start = computed(() => `<!--[if ${condition.value}]>`)
-    const end = `<![endif]-->`
+    const start = computed(() => `<!--[if ${condition.value}]>${props.open}`)
+    const end = computed(() => `${props.close}<![endif]-->`)
 
     return () => [
       createStaticVNode(start.value, 1),
       slots.default?.(),
-      createStaticVNode(end, 1),
+      createStaticVNode(end.value, 1),
     ]
   }
 }

package/dist/components/Overlap.vue

@@ -6,8 +6,10 @@ import {
   hasWidthInStyle,
   hasWidthUtility,
   nextId,
-  normalizeToPixels
+  normalizeToPixels,
+  outlookFallbackProp
 } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -60,8 +62,11 @@ const props = defineProps({
     type: String,
     default: '0,-60px,0,0'
   },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const userStyle = computed(() => {
   const s = attrs.style
   if (!s) return ''
@@ -132,9 +137,9 @@ const VmlAfter = () => createStaticVNode('<!--[if mso]></v:textbox></v:rect><![e
   <table style="max-height: 0; position: relative; opacity: 0.999;">
     <tr>
       <td :style="tdStyle">
-        <VmlBefore />
+        <VmlBefore v-if="outlookFallback" />
         <slot name="overlay" />
-        <VmlAfter />
+        <VmlAfter v-if="outlookFallback" />
       </td>
     </tr>
   </table>

package/dist/components/Raw.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+
+export default {
+  inheritAttrs: false,
+  props: {
+    /**
+     * Raw content to emit verbatim.
+     *
+     * Auto-populated from slot content by
+     * the `maizzle:raw-extract` Vite plugin
+     * before Vue compiles the template,
+     * so `{{ }}` and other Vue/ESP
+     * syntax pass through untouched.
+     */
+    content: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    if (!props.content) {
+      return () => createStaticVNode('', 0)
+    }
+    return () => createStaticVNode(props.content, 1)
+  },
+}
+</script>

package/dist/components/Row.vue

@@ -1,7 +1,14 @@
+<script lang="ts">
+const warnedLocations = new Set<string>()
+</script>
+
 <script setup lang="ts">
-import { Comment, computed, createStaticVNode, provide, useAttrs, useSlots, Fragment } from 'vue'
+import { Comment, Text, computed, createStaticVNode, provide, useAttrs, useSlots, Fragment } from 'vue'
 import type { VNode } from 'vue'
-import { hasWidthInStyle, hasWidthUtility, normalizeToPixels } from './utils.ts'
+import { twMerge } from 'tailwind-merge'
+import Column from './Column.vue'
+import { hasWidthInStyle, hasWidthUtility, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -30,9 +37,12 @@ const props = defineProps({
   cols: {
     type: Number,
     default: null
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const slots = useSlots()
 
 function countChildren(vnodes: VNode[]): number {
@@ -49,6 +59,41 @@ function countChildren(vnodes: VNode[]): number {
   return count
 }
 
+function hasColumnChild(vnodes: VNode[]): boolean {
+  for (const vnode of vnodes) {
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      if (hasColumnChild(vnode.children as VNode[])) return true
+    } else if (vnode.type === Column) {
+      return true
+    } else if (
+      typeof vnode.type === 'object'
+      && vnode.type !== null
+      && '__name' in vnode.type
+      && (vnode.type as { __name?: string }).__name === 'Column'
+    ) {
+      return true
+    }
+  }
+  return false
+}
+
+function hasMeaningfulContent(vnodes: VNode[]): boolean {
+  for (const vnode of vnodes) {
+    if (vnode.type === Comment) continue
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      if (hasMeaningfulContent(vnode.children as VNode[])) return true
+      continue
+    }
+    if (vnode.type === Text) {
+      if (typeof vnode.children === 'string' && vnode.children.trim()) return true
+      continue
+    }
+    if (typeof vnode.type === 'symbol') continue
+    return true
+  }
+  return false
+}
+
 const columnCount = computed(() => {
   if (props.cols) return props.cols
 
@@ -78,15 +123,20 @@ const colWidthSource = computed(() => {
 })
 
 const restAttrs = computed(() => {
-  const { style: _, ...rest } = attrs
+  const { style: _, class: __, 'data-maizzle-loc': ___, ...rest } = attrs
   return rest
 })
 
-const divStyle = computed(() => {
-  const parts: string[] = ['font-size: 0;']
-  if (userStyle.value) parts.push(userStyle.value)
-  return parts.join(' ')
-})
+/**
+ * `font-size: 0;` removes the whitespace gap between inline-block
+ * children. Lives in a class so users can override (e.g. via a custom
+ * `text-*`) and twMerge resolves the conflict cleanly instead of the
+ * inline declaration silently shadowing the user's class.
+ */
+const baseClass = 'text-0'
+const mergedClass = computed(() => twMerge(baseClass, (attrs.class as string) ?? ''))
+
+const divStyle = computed(() => userStyle.value || undefined)
 
 const MsoBefore = () => createStaticVNode(
   '<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: 100%"><tr><![endif]-->',
@@ -97,16 +147,27 @@ const MsoAfter = () => createStaticVNode(
   '<!--[if mso]></tr></table><![endif]-->',
   1
 )
+
+const initialChildren = slots.default?.() ?? []
+if (outlookFallback && hasMeaningfulContent(initialChildren) && !hasColumnChild(initialChildren)) {
+  const loc = (attrs['data-maizzle-loc'] as string | undefined) ?? '<unknown location>'
+  if (!warnedLocations.has(loc)) {
+    warnedLocations.add(loc)
+    const display = loc.split('/').pop() ?? loc
+    console.warn(`[maizzle] <Row> in ${display} has no <Column> inside it. Layout will break in Outlook.`)
+  }
+}
 </script>
 
 <template>
-  <MsoBefore />
+  <MsoBefore v-if="outlookFallback" />
   <div
     v-bind="restAttrs"
+    :class="mergedClass"
     :style="divStyle"
     :data-maizzle-cw="colWidthSource"
   >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>