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
package.json
View File

@@ -56,6 +56,7 @@
"@benrbray/prosemirror-math": "^0.2.2", "@benrbray/prosemirror-math": "^0.2.2",
"@bull-board/api": "^4.2.2", "@bull-board/api": "^4.2.2",
"@bull-board/koa": "^4.12.2", "@bull-board/koa": "^4.12.2",
"@css-inline/css-inline-wasm": "^0.14.0",
"@dnd-kit/core": "^6.1.0", "@dnd-kit/core": "^6.1.0",
"@dnd-kit/modifiers": "^6.0.1", "@dnd-kit/modifiers": "^6.0.1",
"@dnd-kit/sortable": "^7.0.2", "@dnd-kit/sortable": "^7.0.2",
@@ -98,7 +99,6 @@
"copy-to-clipboard": "^3.3.3", "copy-to-clipboard": "^3.3.3",
"core-js": "^3.36.0", "core-js": "^3.36.0",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"css-inline": "^0.11.2",
"datadog-metrics": "^0.11.1", "datadog-metrics": "^0.11.1",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"dd-trace": "^3.51.0", "dd-trace": "^3.51.0",

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

@@ -82,7 +82,7 @@ export default class CommentCreatedEmail extends BaseEmail<
if (content) { if (content) {
// inline all css so that it works in as many email providers as possible. // 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; const isReply = !!comment.parentCommentId;

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

@@ -74,7 +74,7 @@ export default class CommentMentionedEmail extends BaseEmail<
if (content) { if (content) {
// inline all css so that it works in as many email providers as possible. // inline all css so that it works in as many email providers as possible.
body = HTMLHelper.inlineCSS(content); body = await HTMLHelper.inlineCSS(content);
} }
return { 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. // 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"; import env from "@server/env";
let initialized = false;
export default class HTMLHelper { export default class HTMLHelper {
/** /**
* Move CSS styles from <style> tags to inline styles with default settings. * 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. * @param html The HTML to inline CSS styles for.
* @returns The HTML with CSS styles inlined. * @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, { return inline(html, {
base_url: env.URL, baseUrl: env.URL,
inline_style_tags: true, inlineStyleTags: true,
keep_link_tags: false, keepLinkTags: false,
keep_style_tags: false, keepStyleTags: false,
load_remote_stylesheets: false, loadRemoteStylesheets: false,
}); });
} }
} }

12
yarn.lock
View File

@@ -233,7 +233,7 @@
"@babel/helper-wrap-function" "^7.18.9" "@babel/helper-wrap-function" "^7.18.9"
"@babel/types" "^7.18.9" "@babel/types" "^7.18.9"
"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7", "@babel/helper-replace-supers@^7.22.20", "@babel/helper-replace-supers@^7.24.1": "@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7", "@babel/helper-replace-supers@^7.22.20", "@babel/helper-replace-supers@^7.22.9", "@babel/helper-replace-supers@^7.24.1":
version "7.24.1" version "7.24.1"
resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz#7085bd19d4a0b7ed8f405c1ed73ccb70f323abc1" resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz#7085bd19d4a0b7ed8f405c1ed73ccb70f323abc1"
integrity sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ== integrity sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==
@@ -1184,6 +1184,11 @@
resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9" resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
integrity "sha1-u1BFecHK6SPmV2pPXaQ9Jfl729k= sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==" integrity "sha1-u1BFecHK6SPmV2pPXaQ9Jfl729k= sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ=="
"@css-inline/css-inline-wasm@^0.14.0":
version "0.14.0"
resolved "https://registry.yarnpkg.com/@css-inline/css-inline-wasm/-/css-inline-wasm-0.14.0.tgz#8ea69759a280315615d18f6a0bcd477c79237b09"
integrity sha512-C8bZ4HZl5LerGzUFR9IsOfPg8iBHWsfG8jbYILKGvs1Ny5R9+j8NJnDdTwGgi+INFEzYlhhhXt7GknaNclRYiw==
"@dabh/diagnostics@^2.0.2": "@dabh/diagnostics@^2.0.2":
version "2.0.2" version "2.0.2"
resolved "https://registry.yarnpkg.com/@dabh/diagnostics/-/diagnostics-2.0.2.tgz#290d08f7b381b8f94607dc8f471a12c675f9db31" resolved "https://registry.yarnpkg.com/@dabh/diagnostics/-/diagnostics-2.0.2.tgz#290d08f7b381b8f94607dc8f471a12c675f9db31"
@@ -5532,11 +5537,6 @@ css-color-keywords@^1.0.0:
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
integrity "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" integrity "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
css-inline@^0.11.2:
version "0.11.2"
resolved "https://registry.yarnpkg.com/css-inline/-/css-inline-0.11.2.tgz#02cb4e0d4ca04d731a21e438c02b3ff11b0a1034"
integrity "sha1-AstODUygTXMaIeQ4wCs/8RsKEDQ= sha512-c/oie5Yqa2lVRwUO7A8nd3c3r0x7yE6MQH2PPB/R1LaUb6ohZD7vNXj23fod5y4QNsNhsQi98/AWfUwo1K6R7g=="
css-select@^5.1.0: css-select@^5.1.0:
version "5.1.0" version "5.1.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6" resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"