Open Fil opened 4 months ago
Here's a way to fix this:
--- a/src/rollup.ts
+++ b/src/rollup.ts
@@ -25,6 +25,7 @@ function rewriteInputsNamespace(code: string) {
export async function bundleStyles({path, theme}: {path?: string; theme?: string[]}): Promise<string> {
const result = await build({
bundle: true,
+ loader: {".svg": "dataurl", ".eot": "dataurl", ".otf": "dataurl", ".woff": "dataurl"},
...(path ? {entryPoints: [path]} : {stdin: {contents: renderTheme(theme!), loader: "css"}}),
write: false,
alias: STYLE_MODULES
I don't know enough yet about esbuild: do we really have to explicitly list all the resource types that we may want to inline as css data-urls? If so, which ones should we include? (above, I've included 3 typical font formats + svg; this probably needs more image formats (at least png?), woff2, ttf…).
Another method would be to add these references to _import/ but it seems like a tall order.
While I'm in this section… shouldn't we minify on build? → this point is discussed in #787
Ref. esbuild’s on-resolve callback: https://esbuild.github.io/plugins/#on-resolve
following https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face I create a style.css file with:
the css bundling crashes with recommendations to "mark paths as external" (unhelpful, since this is commandeered by framework, not by the user), reference: