chore: Move from inline-css -> css-inline (#6252)

server/emails/templates/CommentCreatedEmail.tsx

@@ -1,10 +1,9 @@
-import inlineCss from "inline-css";
 import * as React from "react";
 import { NotificationEventType } from "@shared/types";
 import { Day } from "@shared/utils/time";
-import env from "@server/env";
 import { Collection, Comment, Document } from "@server/models";
 import DocumentHelper from "@server/models/helpers/DocumentHelper";
+import HTMLHelper from "@server/models/helpers/HTMLHelper";
 import NotificationSettingsHelper from "@server/models/helpers/NotificationSettingsHelper";
 import ProsemirrorHelper from "@server/models/helpers/ProsemirrorHelper";
 import BaseEmail, { EmailProps } from "./BaseEmail";
@@ -83,12 +82,7 @@ export default class CommentCreatedEmail extends BaseEmail<
 
     if (content) {
       // inline all css so that it works in as many email providers as possible.
-      body = await inlineCss(content, {
-        url: env.URL,
-        applyStyleTags: true,
-        applyLinkTags: false,
-        removeStyleTags: true,
-      });
+      body = HTMLHelper.inlineCSS(content);
     }
 
     const isReply = !!comment.parentCommentId;

server/emails/templates/CommentMentionedEmail.tsx

@@ -1,10 +1,9 @@
-import inlineCss from "inline-css";
 import * as React from "react";
 import { NotificationEventType } from "@shared/types";
 import { Day } from "@shared/utils/time";
-import env from "@server/env";
 import { Collection, Comment, Document } from "@server/models";
 import DocumentHelper from "@server/models/helpers/DocumentHelper";
+import HTMLHelper from "@server/models/helpers/HTMLHelper";
 import NotificationSettingsHelper from "@server/models/helpers/NotificationSettingsHelper";
 import ProsemirrorHelper from "@server/models/helpers/ProsemirrorHelper";
 import BaseEmail, { EmailProps } from "./BaseEmail";
@@ -75,12 +74,7 @@ export default class CommentMentionedEmail extends BaseEmail<
 
     if (content) {
       // inline all css so that it works in as many email providers as possible.
-      body = await inlineCss(content, {
-        url: env.URL,
-        applyStyleTags: true,
-        applyLinkTags: false,
-        removeStyleTags: true,
-      });
+      body = HTMLHelper.inlineCSS(content);
     }
 
     return {

server/emails/templates/DocumentPublishedOrUpdatedEmail.tsx

@@ -1,10 +1,9 @@
-import inlineCss from "inline-css";
 import * as React from "react";
 import { NotificationEventType } from "@shared/types";
 import { Day } from "@shared/utils/time";
-import env from "@server/env";
 import { Document, Collection, Revision } from "@server/models";
 import DocumentHelper from "@server/models/helpers/DocumentHelper";
+import HTMLHelper from "@server/models/helpers/HTMLHelper";
 import NotificationSettingsHelper from "@server/models/helpers/NotificationSettingsHelper";
 import SubscriptionHelper from "@server/models/helpers/SubscriptionHelper";
 import BaseEmail, { EmailProps } from "./BaseEmail";
@@ -73,14 +72,7 @@ export default class DocumentPublishedOrUpdatedEmail extends BaseEmail<
         });
 
         // inline all css so that it works in as many email providers as possible.
-        body = content
-          ? await inlineCss(content, {
-              url: env.URL,
-              applyStyleTags: true,
-              applyLinkTags: false,
-              removeStyleTags: true,
-            })
-          : undefined;
+        body = content ? HTMLHelper.inlineCSS(content) : undefined;
       }
     }
 

server/models/helpers/HTMLHelper.ts

@@ -0,0 +1,20 @@
+import { inline } from "css-inline";
+import env from "@server/env";
+
+export default class HTMLHelper {
+  /**
+   * Move CSS styles from <style> tags to inline styles with default settings.
+   *
+   * @param html The HTML to inline CSS styles for.
+   * @returns The HTML with CSS styles inlined.
+   */
+  public static inlineCSS(html: string): string {
+    return inline(html, {
+      base_url: env.URL,
+      inline_style_tags: true,
+      keep_link_tags: false,
+      keep_style_tags: false,
+      load_remote_stylesheets: false,
+    });
+  }
+}