Merge pull request #1917 from maizzle/fix/warn-tailwind-failures

fix: warn when a style tag fails to compile

Author: cossssmin

src/tests/transformers/tailwindcss.test.ts

@@ -224,6 +224,28 @@ describe('tailwindcss', () => {
       expect(result).toContain('@import "./nonexistent.css"')
       expect(result).not.toContain('"')
     })
+
+    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 {
+        // 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> #4 in /path/to/emails/welcome.vue')
+        expect(warnings[0]).toContain('nonexistent.css')
+      } finally {
+        console.warn = warn
+        console.error = error
+      }
+    })
   })
 
   describe('short-circuit', () => {

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 —
@@ -259,7 +261,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> #${position} 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.