1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
// define `EXCALIDRAW_ASSET_PATH` as a SSOT
const OSS_FONTS_CDN = "/";
const OSS_FONTS_FALLBACK = "/";
/**
* Custom vite plugin for auto-prefixing `EXCALIDRAW_ASSET_PATH` woff2 fonts in `excalidraw-app`.
*
* @returns {import("vite").PluginOption}
*/
module.exports.woff2BrowserPlugin = () => {
let isDev;
return {
name: "woff2BrowserPlugin",
enforce: "pre",
config(_, { command }) {
isDev = command === "serve";
},
transform(code, id) {
// using copy / replace as fonts defined in the `.css` don't have to be manually copied over (vite/rollup does this automatically),
// but at the same time can't be easily prefixed with the `EXCALIDRAW_ASSET_PATH` only for the `excalidraw-app`
if (!isDev && id.endsWith("/excalidraw/fonts/fonts.css")) {
return `/* WARN: The following content is generated during excalidraw-app build */
@font-face {
font-family: "Assistant";
src: url(${OSS_FONTS_CDN}fonts/Assistant/Assistant-Regular.woff2)
format("woff2"),
url(./Assistant-Regular.woff2) format("woff2");
font-weight: 400;
style: normal;
display: swap;
}
@font-face {
font-family: "Assistant";
src: url(${OSS_FONTS_CDN}fonts/Assistant/Assistant-Medium.woff2)
format("woff2"),
url(./Assistant-Medium.woff2) format("woff2");
font-weight: 500;
style: normal;
display: swap;
}
@font-face {
font-family: "Assistant";
src: url(${OSS_FONTS_CDN}fonts/Assistant/Assistant-SemiBold.woff2)
format("woff2"),
url(./Assistant-SemiBold.woff2) format("woff2");
font-weight: 600;
style: normal;
display: swap;
}
@font-face {
font-family: "Assistant";
src: url(${OSS_FONTS_CDN}fonts/Assistant/Assistant-Bold.woff2)
format("woff2"),
url(./Assistant-Bold.woff2) format("woff2");
font-weight: 700;
style: normal;
display: swap;
}`;
}
if (!isDev && id.endsWith("excalidraw-app/index.html")) {
return code.replace(
"<!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->",
`<script>
// use app-relative asset paths in prod
window.EXCALIDRAW_ASSET_PATH = [
"${OSS_FONTS_CDN}",
"${OSS_FONTS_FALLBACK}",
];
</script>
<!-- Preload all default fonts to avoid swap on init -->
<link
rel="preload"
href="${OSS_FONTS_CDN}fonts/Excalifont/Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<!-- For Nunito only preload the latin range, which should be good enough for now -->
<link
rel="preload"
href="${OSS_FONTS_CDN}fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="${OSS_FONTS_CDN}fonts/ComicShanns/ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
`,
);
}
},
};
};
|
