Outlook VML auto-generation for rounded corners and shadows

[Ouranos27]

Problem

Outlook (Classic) uses Microsoft Word as its rendering engine, which means CSS properties like border-radius and box-shadow are completely ignored. The standard workaround is VML (Vector Markup Language) — but writing VML by hand is painful and error-prone.

Proposal

Add a generateVml() function that automatically produces VML equivalents for common CSS patterns:

• border-radius → VML <v:roundrect>
• box-shadow → VML <v:shadow>
• background: linear-gradient(...) → VML <v:fill type="gradient">
• Combination of the above (e.g., a card with rounded corners + shadow)

The output should be wrapped in <!--[if mso]>...<![endif]--> conditional comments so it only applies in Outlook.

Example

import { generateVml } from "@emailens/engine";

const vml = generateVml({
  borderRadius: "8px",
  boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
  backgroundColor: "#ffffff",
  width: 600,
  height: 200,
});
// Returns VML markup wrapped in conditional comments

Context

This is on the roadmap. The engine already detects these unsupported properties and warns about them — this would close the loop by generating the fix automatically.

Acceptance Criteria

• generateVml() exported from @emailens/engine
• Supports border-radius, box-shadow, linear-gradient backgrounds
• Output wrapped in Outlook conditional comments
• Unit tests with real Outlook rendering validation
• Docs in API.md