npm - @maizzle/framework - Versions diffs - 6.0.0-rc.5 → 6.0.0-rc.7 - Mend

@maizzle/framework 6.0.0-rc.5 → 6.0.0-rc.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/dist/components/Body.vue +42 -0
package/dist/components/CodeBlock.vue +12 -19
package/dist/components/Column.vue +61 -0
package/dist/components/Container.vue +40 -0
package/dist/components/Head.vue +8 -0
package/dist/components/Html.vue +53 -0
package/dist/components/Image.vue +70 -0
package/dist/components/Markdown.vue +70 -0
package/dist/components/Overlap.vue +60 -0
package/dist/components/Row.vue +80 -0
package/dist/components/Spacer.vue +50 -7
package/dist/plugins/postcss/tailwindCleanup.mjs +22 -13
package/dist/plugins/postcss/tailwindCleanup.mjs.map +1 -1
package/dist/render/createRenderer.d.mts +2 -3
package/dist/render/createRenderer.d.mts.map +1 -1
package/dist/render/createRenderer.mjs +55 -4
package/dist/render/createRenderer.mjs.map +1 -1
package/dist/serve.d.mts.map +1 -1
package/dist/serve.mjs +83 -3
package/dist/serve.mjs.map +1 -1
package/dist/server/compatibility.d.mts +1 -2
package/dist/server/compatibility.d.mts.map +1 -1
package/dist/server/compatibility.mjs +15 -15
package/dist/server/compatibility.mjs.map +1 -1
package/dist/server/email.d.mts +17 -0
package/dist/server/email.d.mts.map +1 -0
package/dist/server/email.mjs +40 -0
package/dist/server/email.mjs.map +1 -0
package/dist/server/ui/App.vue +204 -68
package/dist/server/ui/components/ui/checkbox/Checkbox.vue +35 -0
package/dist/server/ui/components/ui/checkbox/index.ts +1 -0
package/dist/server/ui/components/ui/command/CommandDialog.vue +1 -1
package/dist/server/ui/components/ui/command/CommandInput.vue +19 -1
package/dist/server/ui/components/ui/command/CommandItem.vue +1 -1
package/dist/server/ui/components/ui/command/CommandList.vue +1 -1
package/dist/server/ui/components/ui/command/CommandShortcut.vue +1 -1
package/dist/server/ui/components/ui/dialog/DialogOverlay.vue +9 -1
package/dist/server/ui/components/ui/dropdown-menu/DropdownMenuItem.vue +1 -1
package/dist/server/ui/components/ui/scroll-area/ScrollBar.vue +1 -1
package/dist/server/ui/components/ui/sheet/SheetContent.vue +1 -1
package/dist/server/ui/components/ui/sheet/SheetOverlay.vue +9 -1
package/dist/server/ui/components/ui/sidebar/Sidebar.vue +8 -1
package/dist/server/ui/components/ui/sidebar/SidebarProvider.vue +1 -1
package/dist/server/ui/components/ui/sidebar/SidebarTrigger.vue +5 -4
package/dist/server/ui/components/ui/tags-input/TagsInput.vue +26 -0
package/dist/server/ui/components/ui/tags-input/TagsInputInput.vue +17 -0
package/dist/server/ui/components/ui/tags-input/TagsInputItem.vue +19 -0
package/dist/server/ui/components/ui/tags-input/TagsInputItemDelete.vue +22 -0
package/dist/server/ui/components/ui/tags-input/TagsInputItemText.vue +17 -0
package/dist/server/ui/components/ui/tags-input/index.ts +5 -0
package/dist/server/ui/components/ui/toggle/index.ts +3 -3
package/dist/server/ui/components/ui/toggle-group/ToggleGroup.vue +1 -1
package/dist/server/ui/components/ui/toggle-group/ToggleGroupItem.vue +2 -2
package/dist/server/ui/main.css +20 -20
package/dist/server/ui/pages/Home.vue +12 -5
package/dist/server/ui/pages/Preview.vue +369 -150
package/dist/transformers/inlineCSS.mjs +9 -0
package/dist/transformers/inlineCSS.mjs.map +1 -1
package/dist/transformers/purgeCSS.d.mts.map +1 -1
package/dist/transformers/purgeCSS.mjs +67 -1
package/dist/transformers/purgeCSS.mjs.map +1 -1
package/dist/transformers/tailwindcss.mjs +3 -7
package/dist/transformers/tailwindcss.mjs.map +1 -1
package/dist/types/config.d.mts +38 -4
package/dist/types/config.d.mts.map +1 -1
package/dist/types/index.d.mts +2 -2
package/package.json +7 -3
package/dist/server/ui/components/ui/resizable/ResizableHandle.vue +0 -30
package/dist/server/ui/components/ui/resizable/ResizablePanel.vue +0 -21
package/dist/server/ui/components/ui/resizable/ResizablePanelGroup.vue +0 -25
package/dist/server/ui/components/ui/resizable/index.ts +0 -3
/package/dist/components/{Preview.vue → Preheader.vue} +0 -0

package/dist/components/Body.vue ADDED Viewed

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+import type { PropType } from 'vue'
+export default {
+  name: 'Body',
+  inheritAttrs: false,
+  props: {
+    xmlLang: {
+      type: String,
+      default: 'en'
+    },
+    dir: {
+      type: String as PropType<'ltr' | 'rtl'>,
+      default: 'ltr'
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const extraAttrs = Object.entries(attrs)
+        .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+        .join(' ')
+      const parts = [
+        `xml:lang="${props.xmlLang}"`,
+        `dir="${props.dir}"`,
+        'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
+      ]
+      if (extraAttrs) {
+        parts.push(extraAttrs)
+      }
+      return [
+        createStaticVNode(`<body ${parts.join(' ')}>`, 1),
+        slots.default?.(),
+        createStaticVNode('</body>', 1),
+      ]
+    }
+  }
+}
+</script>

package/dist/components/CodeBlock.vue CHANGED Viewed

@@ -1,6 +1,6 @@
 <script lang="ts">
-import { createStaticVNode } from 'vue'
-import { codeToHtml, getSingletonHighlighter } from 'shiki'
+import { createStaticVNode, type PropType } from 'vue'
+import { codeToHtml, getSingletonHighlighter, type BundledLanguage, type BundledTheme } from 'shiki'
 export default {
   props: {
@@ -9,33 +9,26 @@ export default {
       type: String,
       default: ''
     },
-    /** Base64-encoded code, set by the Vite transform for slot content. */
-    encodedCode: {
-      type: String,
-      default: ''
-    },
-    /** The language for syntax highlighting. @default 'html' */
-    lang: {
-      type: String,
+/** The language for syntax highlighting. @default 'html' */
+    language: {
+      type: String as PropType<BundledLanguage>,
       default: 'html'
     },
     /** The shiki theme to use. @default 'github-light' */
     theme: {
-      type: String,
+      type: String as PropType<BundledTheme>,
       default: 'github-light'
     },
-    /** CSS class for the wrapping table cell. @default 'max-w-0 mso-padding-alt-6' */
+    /** CSS class for the wrapping table cell. @default 'max-w-0 mso-padding-alt-4' */
     tdClass: {
       type: String,
-      default: 'max-w-0 mso-padding-alt-6'
+      default: 'max-w-0 mso-padding-alt-4'
     }
   },
   inheritAttrs: false,
   async setup(props, { slots, attrs }) {
-    // Prefer encodedCode (from Vite transform) → code prop → slot text
-    let source = props.encodedCode
-      ? Buffer.from(props.encodedCode, 'base64').toString('utf-8')
-      : props.code
+    // Prefer code prop → slot text
+    let source = props.code
     if (!source) {
       const slotContent = slots.default?.()
@@ -51,7 +44,7 @@ export default {
     }
     const highlighted = await codeToHtml(source, {
-      lang: props.lang,
+      lang: props.language,
       theme: props.theme,
     })
@@ -64,7 +57,7 @@ export default {
       .replace(/<\/code><\/pre>$/, '')
     const classes = ['font-mono', attrs.class].filter(Boolean).join(' ')
-    const baseStyles = `background-color:${bg};padding:24px;overflow:auto;white-space:pre;word-wrap:normal;word-break:normal;word-spacing:normal`
+    const baseStyles = `background-color:${bg};padding:16px;overflow:auto;white-space:pre;word-wrap:normal;word-break:normal;word-spacing:normal`
     const styles = [baseStyles, attrs.style].filter(Boolean).join(';')
     const html = `<table class="w-full"><tr><td class="${props.tdClass}"><pre class="${classes}" style="${styles}"><code>${codeContent}</code></pre></td></tr></table>`

package/dist/components/Column.vue ADDED Viewed

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, createStaticVNode, inject, useAttrs } from 'vue'
+import type { ComputedRef } from 'vue'
+import { normalizeToPixels } from './utils.ts'
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const props = defineProps({
+  /** Override the auto-computed min-width. */
+  width: {
+    type: [String, Number],
+    default: null
+  }
+})
+const injectedMinWidth = inject<ComputedRef<string> | null>('columnMinWidth', null)
+const containerWidth = inject<ComputedRef<string | number> | null>('containerWidth', null)
+const injectedMsoWidth = inject<ComputedRef<string> | null>('columnMsoWidth', null)
+const minWidth = computed(() => {
+  if (props.width) return normalizeToPixels(props.width)
+  if (injectedMinWidth?.value) return injectedMinWidth.value
+  // Fallback: divide container width by 2 if available
+  if (containerWidth?.value) {
+    const val = containerWidth.value
+    if (typeof val === 'number') return `${val / 2}px`
+    const num = Number.parseFloat(val)
+    const unit = val.replace(String(num), '') || 'px'
+    return `${num / 2}${unit}`
+  }
+  return '18.75em'
+})
+const msoWidth = computed(() => injectedMsoWidth?.value ?? '50%')
+const styles = computed(() => {
+  return `display: inline-block; min-width: ${minWidth.value}; font-size: 16px; vertical-align: top;`
+})
+const MsoBefore = () => createStaticVNode(
+  `<!--[if mso]><td width="${msoWidth.value}" style="vertical-align:top"><![endif]-->`,
+  1
+)
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></td><![endif]-->',
+  1
+)
+</script>
+<template>
+  <MsoBefore />
+  <div v-bind="attrs" :style="styles">
+    <slot />
+  </div>
+  <MsoAfter />
+</template>

package/dist/components/Container.vue ADDED Viewed

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, provide, createStaticVNode, useAttrs } from 'vue'
+import { normalizeToPixels } from './utils.ts'
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const props = defineProps({
+  /** Max width of the container. */
+  width: {
+    type: [String, Number],
+    default: '37.5em'
+  }
+})
+provide('containerWidth', computed(() => props.width))
+const styles = computed(() => {
+  return `max-width: ${normalizeToPixels(props.width)}; margin: 0 auto;`
+})
+const MsoBefore = () => createStaticVNode(
+  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width:${normalizeToPixels(props.width)}" align="center"><tr><td><![endif]-->`,
+  1
+)
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></td></tr></table><![endif]-->',
+  1
+)
+</script>
+<template>
+  <MsoBefore />
+  <div v-bind="attrs" :style="styles">
+    <slot />
+  </div>
+  <MsoAfter />
+</template>

package/dist/components/Head.vue ADDED Viewed

@@ -0,0 +1,8 @@
+<template>
+  <head>
+    <meta charset="utf-8">
+    <meta name="x-apple-disable-message-reformatting">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <slot />
+  </head>
+</template>

package/dist/components/Html.vue ADDED Viewed

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+import type { PropType } from 'vue'
+export default {
+  name: 'Html',
+  inheritAttrs: false,
+  props: {
+    lang: {
+      type: String,
+      default: 'en'
+    },
+    dir: {
+      type: String as PropType<'ltr' | 'rtl'>,
+      default: 'ltr'
+    },
+    xmlns: {
+      type: String,
+      default: null
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const extraAttrs = Object.entries(attrs)
+        .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+        .join(' ')
+      const parts = [
+        `lang="${props.lang}"`,
+        `dir="${props.dir}"`,
+      ]
+      if (props.xmlns) {
+        parts.push(
+          `xmlns="${props.xmlns}"`,
+          'xmlns:v="urn:schemas-microsoft-com:vml"',
+          'xmlns:o="urn:schemas-microsoft-com:office:office"',
+        )
+      }
+      if (extraAttrs) {
+        parts.push(extraAttrs)
+      }
+      return [
+        createStaticVNode(`<html ${parts.join(' ')}>`, 1),
+        slots.default?.(),
+        createStaticVNode('</html>', 1),
+      ]
+    }
+  }
+}
+</script>

package/dist/components/Image.vue ADDED Viewed

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const props = defineProps({
+  /** The image source URL. When reducedMotionSrc is used, this becomes the static fallback. */
+  src: {
+    type: String,
+    required: true
+  },
+  /** Alt text for the image. */
+  alt: {
+    type: String,
+    default: ''
+  },
+  /** Image source for dark mode. */
+  darkSrc: {
+    type: String,
+    default: null
+  },
+  /** The width of the image, rendered without units. */
+  width: {
+    type: [String, Number],
+    required: true
+  },
+  /** Animated image source, shown when user has no reduced motion preference. */
+  reducedMotionSrc: {
+    type: String,
+    default: null
+  }
+})
+function mimeFromExtension(src: string): string {
+  const ext = src.split('.').pop()?.toLowerCase() ?? ''
+  const types: Record<string, string> = {
+    apng: 'image/apng',
+    avif: 'image/avif',
+    gif: 'image/gif',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    jfif: 'image/jpeg',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    webp: 'image/webp',
+  }
+  return types[ext] ?? ''
+}
+const reducedMotionType = computed(() => mimeFromExtension(props.reducedMotionSrc ?? ''))
+const imgWidth = computed(() => Number.parseInt(String(props.width), 10))
+const usePicture = computed(() => props.darkSrc || props.reducedMotionSrc)
+const imgStyle = 'max-width: 100%; vertical-align: middle;'
+</script>
+<template>
+  <picture v-if="usePicture">
+    <source v-if="darkSrc" :srcset="darkSrc" media="(prefers-color-scheme: dark)">
+    <source v-if="reducedMotionSrc" :srcset="reducedMotionSrc" :type="reducedMotionType || undefined" media="(prefers-reduced-motion: no-preference)">
+    <img v-bind="attrs" :src="src" :alt="alt" :width="imgWidth" :style="imgStyle">
+  </picture>
+  <img v-else v-bind="attrs" :src="src" :alt="alt" :width="imgWidth" :style="imgStyle">
+</template>

package/dist/components/Markdown.vue ADDED Viewed

@@ -0,0 +1,70 @@
+<script lang="ts">
+import { createStaticVNode, type PropType } from 'vue'
+import { createMarkdownExit } from 'markdown-exit'
+import { codeToHtml, type BundledTheme } from 'shiki'
+export default {
+  props: {
+    /** Markdown content string. Overrides slot content. */
+    content: {
+      type: String,
+      default: ''
+    },
+    /** Path to a markdown file to render. Resolved at build time. */
+    src: {
+      type: String,
+      default: ''
+    },
+    /** Shiki theme for fenced code blocks. @default 'github-dark-high-contrast' */
+    shikiTheme: {
+      type: String as PropType<BundledTheme>,
+      default: 'github-dark-high-contrast'
+    },
+    /** Wrap output in a div element. @default true */
+    wrapper: {
+      type: Boolean,
+      default: true
+    },
+  },
+  inheritAttrs: false,
+  async setup(props, { slots, attrs }) {
+    let source = props.content
+    if (!source) {
+      const slotContent = slots.default?.()
+      source = slotContent
+        ?.map((vnode: any) => (typeof vnode.children === 'string' ? vnode.children : ''))
+        .join('') ?? ''
+    }
+    source = source.trim()
+    if (!source) {
+      return () => createStaticVNode('', 0)
+    }
+    const md = createMarkdownExit({
+      html: true,
+      linkify: true,
+      typographer: true,
+      highlight: async (code, lang) => {
+        try {
+          return await codeToHtml(code, { lang, theme: props.shikiTheme })
+        } catch {
+          return ''
+        }
+      },
+    })
+    let html = await md.renderAsync(source)
+    if (props.wrapper) {
+      const classes = attrs.class ? ` class="${attrs.class}"` : ''
+      const style = attrs.style ? ` style="${attrs.style}"` : ''
+      html = `<div${classes}${style}>${html}</div>`
+    }
+    return () => createStaticVNode(html, 1)
+  }
+}
+</script>

package/dist/components/Overlap.vue ADDED Viewed

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, useAttrs, createStaticVNode } from 'vue'
+import { normalizeToPixels } from './utils.ts'
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const props = defineProps({
+  /** Max height of the overlapped (background) content. */
+  height: {
+    type: [String, Number],
+    required: true
+  },
+  /** Width of the overlay table and VML rect. */
+  width: {
+    type: [String, Number],
+    required: true
+  },
+  /** Height of the VML rect for Outlook. Defaults to height. */
+  msoHeight: {
+    type: [String, Number],
+    default: null
+  },
+  /** VML textbox inset value for Outlook positioning. */
+  msoInset: {
+    type: String,
+    default: '0,-60px,0,0'
+  },
+})
+const backgroundStyles = computed(() => {
+  return `max-height: ${normalizeToPixels(props.height)}; margin: 0 auto; text-align: center;`
+})
+const vmlOpen = computed(() => {
+  const w = normalizeToPixels(props.width)
+  const h = normalizeToPixels(props.msoHeight ?? props.height)
+  return `<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="f" filled="f" style="width:${w};height:${h};"><v:textbox inset="${props.msoInset}"><![endif]-->`
+})
+const VmlBefore = () => createStaticVNode(vmlOpen.value, 1)
+const VmlAfter = () => createStaticVNode('<!--[if mso]></v:textbox></v:rect><![endif]-->', 1)
+</script>
+<template>
+  <div v-bind="attrs" :style="backgroundStyles">
+    <slot />
+  </div>
+  <table style="max-height: 0; position: relative; opacity: 0.999;">
+    <tr>
+      <td :style="`width: ${normalizeToPixels(props.width)}; max-width: 100%; vertical-align: top;`">
+        <VmlBefore />
+        <slot name="overlay" />
+        <VmlAfter />
+      </td>
+    </tr>
+  </table>
+</template>

package/dist/components/Row.vue ADDED Viewed

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { Comment, computed, createStaticVNode, inject, provide, useAttrs, useSlots, Fragment } from 'vue'
+import type { ComputedRef, VNode } from 'vue'
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const props = defineProps({
+  /** Override the inherited container width. */
+  width: {
+    type: [String, Number],
+    default: null
+  },
+  /** Override the auto-detected column count. */
+  cols: {
+    type: Number,
+    default: null
+  }
+})
+const slots = useSlots()
+function countChildren(vnodes: VNode[]): number {
+  let count = 0
+  for (const vnode of vnodes) {
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      count += countChildren(vnode.children as VNode[])
+    } else if (vnode.type !== Comment && typeof vnode.type !== 'symbol') {
+      count++
+    }
+  }
+  return count
+}
+const columnCount = computed(() => {
+  if (props.cols) return props.cols
+  const children = slots.default?.() ?? []
+  return countChildren(children) || 1
+})
+const containerWidth = inject<ComputedRef<string | number> | null>('containerWidth', null)
+const rowWidth = computed(() => props.width ?? containerWidth?.value ?? '37.5em')
+function divideValue(value: string | number, divisor: number): string {
+  if (typeof value === 'number') {
+    return `${value / divisor}px`
+  }
+  const num = Number.parseFloat(value)
+  const unit = value.replace(String(num), '') || 'px'
+  return `${num / divisor}${unit}`
+}
+provide('columnMinWidth', computed(() => divideValue(rowWidth.value, columnCount.value)))
+provide('columnMsoWidth', computed(() => `${Math.round(100 / columnCount.value)}%`))
+const MsoBefore = () => createStaticVNode(
+  '<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" width="100%"><tr><![endif]-->',
+  1
+)
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></tr></table><![endif]-->',
+  1
+)
+</script>
+<template>
+  <MsoBefore />
+  <div v-bind="attrs" style="width: 100%; font-size: 0;">
+    <slot />
+  </div>
+  <MsoAfter />
+</template>

package/dist/components/Spacer.vue CHANGED Viewed

@@ -3,11 +3,21 @@ import { computed } from 'vue'
 import { normalizeToPixels } from './utils.ts'
 const props = defineProps({
-  /** The height of the spacer. */
-  size: {
+  /** The type of spacer. */
+  type: {
+    type: String as () => 'vertical' | 'horizontal',
+    default: 'vertical'
+  },
+  /** The height of the spacer (vertical). */
+  height: {
     type: [String, Number],
     default: null
   },
+  /** The width of the spacer (horizontal). */
+  width: {
+    type: [String, Number],
+    default: 16
+  },
   /** The alternative height to use in Outlook. */
   msoHeight: {
     type: [String, Number],
@@ -15,11 +25,16 @@ const props = defineProps({
   }
 })
-const styles = computed(() => {
+function parsePixelValue(value: string | number): number {
+  if (typeof value === 'number') return value
+  return Number.parseFloat(value) || 0
+}
+const verticalStyles = computed(() => {
   const s = []
-  if (props.size) {
-    s.push(`line-height: ${normalizeToPixels(props.size)};`)
+  if (props.height) {
+    s.push(`line-height: ${normalizeToPixels(props.height)};`)
   }
   if (props.msoHeight) {
@@ -28,9 +43,37 @@ const styles = computed(() => {
   return s.join('')
 })
+const horizontalStyles = computed(() => {
+  return `display:inline-block; width: ${normalizeToPixels(props.width)}; font-size: 16px;${msoFontWidth.value}`
+})
+const msoFontWidth = computed(() => {
+  const widthPx = parsePixelValue(props.width)
+  const emspBase = 16
+  const maxPercent = 500
+  const maxPerEmsp = emspBase * (maxPercent / 100)
+  const numEmsps = Math.ceil(widthPx / maxPerEmsp)
+  const percent = Math.round((widthPx / (numEmsps * emspBase)) * 100)
+  return ` mso-font-width:${percent}%;`
+})
+const emspCount = computed(() => {
+  const widthPx = parsePixelValue(props.width)
+  const maxPerEmsp = 16 * 5
+  return Math.ceil(widthPx / maxPerEmsp)
+})
+const emsps = computed(() => '\u2003'.repeat(emspCount.value))
 </script>
 <template>
-  <div v-if="size" role="separator" :style="styles">&zwj;</div>
-  <div v-else role="separator">&zwj;</div>
+  <template v-if="type === 'horizontal'">
+    <i :style="horizontalStyles">{{ emsps }}</i>
+  </template>
+  <template v-else>
+    <div v-if="height" role="separator" :style="verticalStyles">&zwj;</div>
+    <div v-else role="separator">&zwj;</div>
+  </template>
 </template>

package/dist/plugins/postcss/tailwindCleanup.mjs CHANGED Viewed

@@ -14,20 +14,29 @@ const DEFAULT_AT_RULES = ["layer", "property"];
 function tailwindCleanup(config) {
 	const selectors = config.postcss?.removeSelectors ?? DEFAULT_SELECTORS;
 	const atRules = config.postcss?.removeAtRules ?? DEFAULT_AT_RULES;
-	return [{
-		postcssPlugin: "tailwind-cleanup-selectors",
-		Rule(rule) {
-			const parts = rule.selector.split(",").map((s) => s.trim());
-			const kept = parts.filter((p) => !selectors.some((s) => p === s || p.startsWith(`${s}(`)));
-			if (kept.length === 0) rule.remove();
-			else if (kept.length < parts.length) rule.selector = kept.join(", ");
+	return [
+		{
+			postcssPlugin: "tailwind-cleanup-selectors",
+			Rule(rule) {
+				const parts = rule.selector.split(",").map((s) => s.trim());
+				const kept = parts.filter((p) => !selectors.some((s) => p === s || p.startsWith(`${s}(`)));
+				if (kept.length === 0) rule.remove();
+				else if (kept.length < parts.length) rule.selector = kept.join(", ");
+			}
+		},
+		{
+			postcssPlugin: "tailwind-cleanup-at-rules",
+			AtRule(rule) {
+				if (atRules.includes(rule.name)) rule.remove();
+			}
+		},
+		{
+			postcssPlugin: "tailwind-cleanup-text-decoration",
+			Declaration(decl) {
+				if (decl.prop === "text-decoration-line") decl.prop = "text-decoration";
+			}
 		}
-	}, {
-		postcssPlugin: "tailwind-cleanup-at-rules",
-		AtRule(rule) {
-			if (atRules.includes(rule.name)) rule.remove();
-		}
-	}];
+	];
 }
 //#endregion