output embedded Svelte css into separate .css file for bundling

This commit is contained in:
Damien Elmes 2021-03-21 14:23:40 +10:00
parent 2658d9992e
commit e857aa2ea9
2 changed files with 9 additions and 3 deletions

View file

@ -9,12 +9,13 @@ def _svelte(ctx):
args.add(ctx.file.entry_point.path) args.add(ctx.file.entry_point.path)
args.add(ctx.outputs.mjs.path) args.add(ctx.outputs.mjs.path)
args.add(ctx.outputs.dts.path) args.add(ctx.outputs.dts.path)
args.add(ctx.outputs.css.path)
args.add_all(ctx.files._shims) args.add_all(ctx.files._shims)
ctx.actions.run( ctx.actions.run(
execution_requirements = {"supports-workers": "1"}, execution_requirements = {"supports-workers": "1"},
executable = ctx.executable._svelte_bin, executable = ctx.executable._svelte_bin,
outputs = [ctx.outputs.mjs, ctx.outputs.dts], outputs = [ctx.outputs.mjs, ctx.outputs.dts, ctx.outputs.css],
inputs = [ctx.file.entry_point] + ctx.files._shims, inputs = [ctx.file.entry_point] + ctx.files._shims,
mnemonic = "Svelte", mnemonic = "Svelte",
arguments = [args], arguments = [args],
@ -41,6 +42,7 @@ svelte = rule(
outputs = { outputs = {
"mjs": "%{name}.svelte.mjs", "mjs": "%{name}.svelte.mjs",
"dts": "%{name}.svelte.d.ts", "dts": "%{name}.svelte.d.ts",
"css": "%{name}.svelte.css",
}, },
) )

View file

@ -150,6 +150,9 @@ async function writeJs(
const processed = await svelte.preprocess(source, preprocessOptions); const processed = await svelte.preprocess(source, preprocessOptions);
const result = svelte.compile(processed.toString!(), { const result = svelte.compile(processed.toString!(), {
format: "esm", format: "esm",
// FIXME: once we're bundling .css separately, set this to false so we don't
// also include it in the resulting .js
css: true,
generate: "dom", generate: "dom",
filename: outputJsPath, filename: outputJsPath,
}); });
@ -160,6 +163,8 @@ async function writeJs(
} }
const outputSource = result.js.code; const outputSource = result.js.code;
await writeFile(outputJsPath, outputSource); await writeFile(outputJsPath, outputSource);
const outputCss = result.css.code ?? "";
await writeFile(outputCssPath, outputCss);
} catch (err) { } catch (err) {
console.log(`compile failed: ${err}`); console.log(`compile failed: ${err}`);
return; return;
@ -167,8 +172,7 @@ async function writeJs(
} }
async function compileSvelte(args) { async function compileSvelte(args) {
const [sveltePath, mjsPath, dtsPath, ...tsLibs] = args; const [sveltePath, mjsPath, dtsPath, cssPath, ...tsLibs] = args;
const cssPath = sveltePath + ".css";
const svelteSource = (await readFile(sveltePath)) as string; const svelteSource = (await readFile(sveltePath)) as string;
const mockTsPath = sveltePath + ".ts"; const mockTsPath = sveltePath + ".ts";