AsyncBanana / rollup-plugin-mjml-inline

Compile MJML templates with Rollup and automatically inline them in your bundle

rollup-plugin-mjml-inline is a fork of rollup-plugin-mjml that directly inlines the output HTML rather than separating it into a file. It also includes TypeScript types and guarantees Vite support.

Install

npm install rollup-plugin-mjml-inline --save-dev

Usage

Add mjml() to your rollup.config.js file.

// rollup.config.js
import mjml from "rollup-plugin-mjml-inline";

export default {
  //...
  plugins: [mjml()],
};

After configuring this plugin, imported .mjml files will automatically be compiled to HTML and returned as a string default export.

import template from "./template.mjml";
console.log(typeof template); // returns "string"

Options

Options can be added as parameters to the plugin, for example:

// rollup.config.js
export default {
  //...
  plugins: [
    mjml({
      outputDir: "dist/mail",
      mjmlOptions: {
        validationLevel: "strict",
      },
    }),
  ],
};

exclude

Type: String | Array[...String]
Default: null

A minimatch pattern or array of patterns that specify the files in the build the plugin should ignore. By default no files are ignored.

include

Type: String | Array[...String]
Default: null

A minimatch pattern or array patterns that specify the files in the build the plugin should operate on. By default all files are targeted.

MJML Options

MJML options can be added to the mjmlOptions in the configuration object. More information can be found in the MJML Documentation or the config TypeScript type.

TypeScript

This module includes TypeScript types for the configuration by default. However, if you want imports of .mjml files to be typed, you must add the following to an ambient declaration file (if you add a file ending in .d.ts to the project, TypeScript should find it).

declare module "*.mjml" {
  const template: string;
  export default template;
}