Email: Mark HTML comments as "safe" in email templates (#64546)

emails/Makefile

@@ -1,14 +1,18 @@
-build: build-html build-txt
+build: clean build-mjml build-grunt
 
-build-html:
+clean:
+	rm -rf dist/
+	mkdir dist/
+
+build-mjml:
 	npx mjml \
 		--config.beautify true \
 		--config.minify false \
 		--config.validationLevel=strict \
 		--config.keepComments=false \
-		./templates/*.mjml --output ../public/emails/
+		./templates/*.mjml --output ./dist/
 
-build-txt:
+build-grunt:
 	npx grunt
 
-.PHONY: build build-html build-txt
+.PHONY: clean build build-mjml build-grunt

emails/grunt/aliases.yaml

@@ -1,5 +1,4 @@
 default:
-  - 'clean'
   - 'assemble'
   - 'replace'
   - 'copy'

emails/grunt/clean.js

@@ -1,5 +0,0 @@
-module.exports = function (config) {
-  return {
-    dist: ['dist'],
-  };
-};

emails/grunt/copy.js

@@ -7,5 +7,11 @@ module.exports = function () {
       src: ['**.txt'],
       dest: '../public/emails/',
     },
+    html: {
+      expand: true,
+      cwd: 'dist',
+      src: ['**.html'],
+      dest: '../public/emails/',
+    },
   };
 };

emails/grunt/replace.js

@@ -1,16 +1,45 @@
-module.exports = {
-  dist: {
-    overwrite: true,
-    src: ['dist/*.txt'],
-    replacements: [
-      {
-        from: '[[',
-        to: '{{',
-      },
-      {
-        from: ']]',
-        to: '}}',
-      },
-    ],
-  },
+module.exports = function () {
+  'use strict';
+
+  return {
+    txt,
+    comments,
+  };
+};
+
+const txt = {
+  overwrite: true,
+  src: ['dist/*.txt'],
+  replacements: [
+    {
+      from: '[[',
+      to: '{{',
+    },
+    {
+      from: ']]',
+      to: '}}',
+    },
+  ],
+};
+
+/**
+ * Replace all instances of HTML comments with {{ __dangerouslyInjectHTML "<!-- my comment -->" }}.
+ *
+ * MJML will output <!--[if !mso]><!--> comments which are specific to MS Outlook.
+ *
+ * Go's template/html package will strip all HTML comments and we need them to be preserved
+ * to work with MS Outlook on the Desktop.
+ */
+const HTML_SAFE_FUNC = '__dangerouslyInjectHTML';
+const commentBlock = /(<!--[\s\S]*?-->)/g;
+
+const comments = {
+  overwrite: true,
+  src: ['dist/*.html'],
+  replacements: [
+    {
+      from: commentBlock,
+      to: `{{ ${HTML_SAFE_FUNC} \`$1\` }}`,
+    },
+  ],
 };

emails/package.json

@@ -7,7 +7,6 @@
     "grunt": "1.5.3",
     "grunt-assemble": "0.6.3",
     "grunt-cli": "^1.4.3",
-    "grunt-contrib-clean": "2.0.0",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-watch": "1.1.0",
     "grunt-text-replace": "0.4.0",