Email Template Style Inliner

Build a utility that converts MJML email templates to HTML with CSS styles properly inlined into elements for email client compatibility.

Requirements

Create a function that processes MJML templates with custom CSS styles:

1. Accepts an MJML template string as input
2. Includes custom CSS styles that should be inlined into HTML elements
3. Returns HTML output with CSS converted to inline style attributes
4. Preserves template placeholders (like Handlebars syntax) during style processing

The function should use MJML's CSS inlining capabilities to ensure styles are applied directly to HTML elements as inline attributes rather than remaining in style tags.

@generates

Test Cases

• Given MJML with <mj-style inline="inline">.red { color: red; }</mj-style> and <mj-text mj-class="red">Hello</mj-text>, the output HTML contains an element with style="color:red" @test

• Given MJML with <mj-style inline="inline">.btn { background: blue; padding: 10px; }</mj-style>, the output HTML contains style attributes with both properties inlined @test

• Given MJML containing {{ username }} placeholder text and CSS to be inlined, the output HTML preserves the {{ username }} syntax exactly as written @test

API

/**
 * Converts MJML template to HTML with inlined CSS styles
 * @param {string} mjmlTemplate - The MJML template string
 * @returns {string} The HTML output with inlined styles
 */
function convertTemplate(mjmlTemplate) {
  // Implementation here
}

module.exports = { convertTemplate };

Dependencies { .dependencies }

mjml { .dependency }

Provides email template compilation and CSS inlining capabilities.

@satisfied-by