yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Replace css-inline with @css-inline/css-inline-wasm (#6336)

Browse Source 
* chore: Replace `css-inline` with `@css-inline/css-inline-wasm`

Signed-off-by: Dmitry Dygalo <dmitry@dygalo.dev>

* Update yarn.lock

* Import order

* lint

---------

Signed-off-by: Dmitry Dygalo <dmitry@dygalo.dev>
Co-authored-by: Tom Moor <tom@getoutline.com>
This commit is contained in:
Dmitry Dygalo
2024-04-21 16:20:12 +02:00
committed by GitHub
parent 9f3dd51b48
commit ea2c7cfcd4
7 changed files with 54 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
server/emails/templates/CommentCreatedEmail.tsx
View File

@@ -82,7 +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 = HTMLHelper.inlineCSS(content);
body = await HTMLHelper.inlineCSS(content);
}
const isReply = !!comment.parentCommentId;

2
server/emails/templates/CommentMentionedEmail.tsx
View File

@@ -74,7 +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 = HTMLHelper.inlineCSS(content);
body = await HTMLHelper.inlineCSS(content);
}
return {

2
server/emails/templates/DocumentPublishedOrUpdatedEmail.tsx
View File

@@ -73,7 +73,7 @@ export default class DocumentPublishedOrUpdatedEmail extends BaseEmail<
});
// inline all css so that it works in as many email providers as possible.
body = content ? HTMLHelper.inlineCSS(content) : undefined;
body = content ? await HTMLHelper.inlineCSS(content) : undefined;
}
}

29
server/models/helpers/HTMLHelper.test.ts Normal file
View File

@@ -0,0 +1,29 @@
import HTMLHelper from "./HTMLHelper";
describe("HTMLHelper", () => {
const document = `<html>
<head>
<style>h1 { color:blue; }</style>
</head>
<body>
<h1>Big Text</h1>
</body>
</html>`;
describe("inlineCSS", () => {
it("should inline CSS from style tags", async () => {
const result = await HTMLHelper.inlineCSS(document);
expect(result).toBe(`<html><head>
</head>
<body>
<h1 style="color: blue;">Big Text</h1>
</body></html>`);
});
it("should initialize once", async () => {
const first = await HTMLHelper.inlineCSS(document);
const second = await HTMLHelper.inlineCSS(document);
expect(first).toBe(second);
});
});
});

22
server/models/helpers/HTMLHelper.ts
View File

@@ -1,6 +1,9 @@
import { inline } from "css-inline";
import { initWasm, inline } from "@css-inline/css-inline-wasm";
import fs from "fs-extra";
import env from "@server/env";
let initialized = false;
export default class HTMLHelper {
/**
* Move CSS styles from <style> tags to inline styles with default settings.
@@ -8,13 +11,18 @@ export default class HTMLHelper {
* @param html The HTML to inline CSS styles for.
* @returns The HTML with CSS styles inlined.
*/
public static inlineCSS(html: string): string {
public static async inlineCSS(html: string): Promise<string> {
if (!initialized) {
const path = require.resolve("@css-inline/css-inline-wasm/index_bg.wasm");
await initWasm(fs.readFileSync(path));
initialized = true;
}
return inline(html, {
base_url: env.URL,
inline_style_tags: true,
keep_link_tags: false,
keep_style_tags: false,
load_remote_stylesheets: false,
baseUrl: env.URL,
inlineStyleTags: true,
keepLinkTags: false,
keepStyleTags: false,
loadRemoteStylesheets: false,
});
}
}