Formatter: Respect Outlook Conditional HTML Comments

javascript/packages/formatter/src/format-printer.ts

@@ -1179,6 +1179,14 @@ export class FormatPrinter extends Printer {
         }
       }).join("")
 
+      const trimmedInner = inner.trim()
+
+      if (trimmedInner.startsWith('[if ') && trimmedInner.endsWith('<![endif]')) {
+        this.pushWithIndent(open + inner + close)
+
+        return
+      }
+
       const hasNewlines = inner.includes('\n')
 
       if (hasNewlines) {

javascript/packages/formatter/test/html/outlook-conditional-comments.test.ts

@@ -0,0 +1,65 @@
+import { describe, test, expect, beforeAll } from "vitest"
+import { Herb } from "@herb-tools/node-wasm"
+import { Formatter } from "../../src"
+import dedent from "dedent"
+
+let formatter: Formatter
+
+describe("Outlook conditional comments", () => {
+  beforeAll(async () => {
+    await Herb.load()
+
+    formatter = new Formatter(Herb, {
+      indentWidth: 2,
+      maxLineLength: 80
+    })
+  })
+
+  test("preserves conditional comment syntax on same line - issue #877", () => {
+    const source = dedent`
+      <!--[if mso]>
+      <center>
+      <![endif]-->
+    `
+    const result = formatter.format(source)
+    expect(result).toEqual(source)
+  })
+
+  test("handles conditional comment with content", () => {
+    const source = dedent`
+      <!--[if mso]>
+      <table width="100%" cellpadding="0" cellspacing="0">
+        <tr>
+          <td>Content</td>
+        </tr>
+      </table>
+      <![endif]-->
+    `
+    const result = formatter.format(source)
+    expect(result).toEqual(source)
+  })
+
+  test("handles negated conditional comment", () => {
+    const source = dedent`
+      <!--[if !mso]><!-->
+      <div>Not Outlook</div>
+      <!--<![endif]-->
+    `
+    const result = formatter.format(source)
+    expect(result).toEqual(source)
+  })
+
+  test("handles conditional comment with ERB interpolation", () => {
+    const source = dedent`
+      <!--[if mso]>
+      <table width="<%= width %>" cellpadding="0" cellspacing="0">
+        <tr>
+          <td><%= content %></td>
+        </tr>
+      </table>
+      <![endif]-->
+    `
+    const result = formatter.format(source)
+    expect(result).toEqual(source)
+  })
+})