From d88bcfac6001de7c9f392c05c37feda7e29d2512 Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Thu, 8 Oct 2026 15:25:48 +0300
Subject: [PATCH 1/2] fix: warn when a style tag fails to compile

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/tests/transformers/tailwindcss.test.ts | 20 ++++++++++++++++++++
 src/transformers/tailwindcss.ts            |  4 +++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/tests/transformers/tailwindcss.test.ts b/src/tests/transformers/tailwindcss.test.ts
index a9e21387..fd3c4f28 100644
--- a/src/tests/transformers/tailwindcss.test.ts
+++ b/src/tests/transformers/tailwindcss.test.ts
@@ -222,6 +222,26 @@ describe('tailwindcss', () => {
       expect(result).toContain('@import "./nonexistent.css"')
       expect(result).not.toContain('&quot;')
     })
+
+    it('warns when a style tag fails to compile', async () => {
+      const { warn, error } = console
+      const warnings: string[] = []
+      console.warn = (message: string) => warnings.push(message)
+      console.error = () => {}
+
+      try {
+        const result = await run('<style>.ok { color: red }</style><style>@import "./nonexistent.css";</style>', '/path/to/emails/welcome.vue')
+
+        expect(result).toContain('@import "./nonexistent.css"')
+        expect(warnings).toHaveLength(1)
+        expect(warnings[0]).toContain('[maizzle]')
+        expect(warnings[0]).toContain('<style> #2 in /path/to/emails/welcome.vue')
+        expect(warnings[0]).toContain('nonexistent.css')
+      } finally {
+        console.warn = warn
+        console.error = error
+      }
+    })
   })
 
   describe('short-circuit', () => {
diff --git a/src/transformers/tailwindcss.ts b/src/transformers/tailwindcss.ts
index 0a916bcd..a58f0761 100644
--- a/src/transformers/tailwindcss.ts
+++ b/src/transformers/tailwindcss.ts
@@ -259,7 +259,9 @@ export async function tailwindcss(dom: ChildNode[], config: MaizzleConfig, fileP
         data: optimized,
         parent: node,
       } as any]
-    } catch {
+    } catch (error) {
+      console.warn(`[maizzle] Failed to compile <style> #${i + 1} in ${filePath ?? 'a string template'}, it was left uncompiled: ${(error as Error)?.message ?? error}`)
+
       /**
        * If CSS processing fails, still replace with decoded content
        * so HTML entities don't break the CSS.

From 31b6e6572fdca752451d328ce96328bd50bf89bf Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Thu, 8 Oct 2026 15:32:36 +0300
Subject: [PATCH 2/2] fix: report the style tag's position in the document

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/tests/transformers/tailwindcss.test.ts |  6 ++++--
 src/transformers/tailwindcss.ts            | 10 ++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/tests/transformers/tailwindcss.test.ts b/src/tests/transformers/tailwindcss.test.ts
index fd3c4f28..602584b4 100644
--- a/src/tests/transformers/tailwindcss.test.ts
+++ b/src/tests/transformers/tailwindcss.test.ts
@@ -230,12 +230,14 @@ describe('tailwindcss', () => {
       console.error = () => {}
 
       try {
-        const result = await run('<style>.ok { color: red }</style><style>@import "./nonexistent.css";</style>', '/path/to/emails/welcome.vue')
+        // Raw and empty tags aren't compiled but still count towards the position
+        const html = '<style raw>.r { color: red }</style><style></style><style>.ok { color: red }</style><style>@import "./nonexistent.css";</style>'
+        const result = await run(html, '/path/to/emails/welcome.vue')
 
         expect(result).toContain('@import "./nonexistent.css"')
         expect(warnings).toHaveLength(1)
         expect(warnings[0]).toContain('[maizzle]')
-        expect(warnings[0]).toContain('<style> #2 in /path/to/emails/welcome.vue')
+        expect(warnings[0]).toContain('<style> #4 in /path/to/emails/welcome.vue')
         expect(warnings[0]).toContain('nonexistent.css')
       } finally {
         console.warn = warn
diff --git a/src/transformers/tailwindcss.ts b/src/transformers/tailwindcss.ts
index a58f0761..eac5192c 100644
--- a/src/transformers/tailwindcss.ts
+++ b/src/transformers/tailwindcss.ts
@@ -183,11 +183,13 @@ export function rewriteImportsSourceNone(css: string): string {
  * transformers (inliner, purge, etc.) work with fully compiled CSS.
  */
 export async function tailwindcss(dom: ChildNode[], config: MaizzleConfig, filePath?: string, sourceFiles?: string[]): Promise<ChildNode[]> {
-  const styleTags: { node: Element; cssContent: string }[] = []
+  const styleTags: { node: Element; cssContent: string; position: number }[] = []
+  let styleCount = 0
 
   walk(dom, (node) => {
     if ((node as Element).name !== 'style') return
 
+    styleCount++
     const el = node as Element
     const attrs = el.attribs
 
@@ -210,7 +212,7 @@ export async function tailwindcss(dom: ChildNode[], config: MaizzleConfig, fileP
 
     if (!rawContent.trim()) return
 
-    styleTags.push({ node: el, cssContent: decodeStyleEntities(rawContent) })
+    styleTags.push({ node: el, cssContent: decodeStyleEntities(rawContent), position: styleCount })
   })
 
   if (!styleTags.length) return dom
@@ -236,7 +238,7 @@ export async function tailwindcss(dom: ChildNode[], config: MaizzleConfig, fileP
   const firstTailwindStyle = styleTags.findIndex(({ cssContent }) => usesTailwind(cssContent))
 
   for (let i = 0; i < styleTags.length; i++) {
-    const { node, cssContent } = styleTags[i]
+    const { node, cssContent, position } = styleTags[i]
 
     /**
      * Only add source directives to style tags that import Tailwind —
@@ -260,7 +262,7 @@ export async function tailwindcss(dom: ChildNode[], config: MaizzleConfig, fileP
         parent: node,
       } as any]
     } catch (error) {
-      console.warn(`[maizzle] Failed to compile <style> #${i + 1} in ${filePath ?? 'a string template'}, it was left uncompiled: ${(error as Error)?.message ?? error}`)
+      console.warn(`[maizzle] Failed to compile <style> #${position} in ${filePath ?? 'a string template'}, it was left uncompiled: ${(error as Error)?.message ?? error}`)
 
       /**
        * If CSS processing fails, still replace with decoded content