From e857aa2ea92c83607c2d2c5e4a2f9b7e8c56b963 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Sun, 21 Mar 2021 14:23:40 +1000
Subject: [PATCH] output embedded Svelte css into separate .css file for
 bundling

---
 ts/svelte/svelte.bzl | 4 +++-
 ts/svelte/svelte.ts  | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ts/svelte/svelte.bzl b/ts/svelte/svelte.bzl
index 4cafddec1..90de9bbe0 100644
--- a/ts/svelte/svelte.bzl
+++ b/ts/svelte/svelte.bzl
@@ -9,12 +9,13 @@ def _svelte(ctx):
     args.add(ctx.file.entry_point.path)
     args.add(ctx.outputs.mjs.path)
     args.add(ctx.outputs.dts.path)
+    args.add(ctx.outputs.css.path)
     args.add_all(ctx.files._shims)
 
     ctx.actions.run(
         execution_requirements = {"supports-workers": "1"},
         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,
         mnemonic = "Svelte",
         arguments = [args],
@@ -41,6 +42,7 @@ svelte = rule(
     outputs = {
         "mjs": "%{name}.svelte.mjs",
         "dts": "%{name}.svelte.d.ts",
+        "css": "%{name}.svelte.css",
     },
 )
 
diff --git a/ts/svelte/svelte.ts b/ts/svelte/svelte.ts
index 5de568e3c..48851b24f 100644
--- a/ts/svelte/svelte.ts
+++ b/ts/svelte/svelte.ts
@@ -150,6 +150,9 @@ async function writeJs(
         const processed = await svelte.preprocess(source, preprocessOptions);
         const result = svelte.compile(processed.toString!(), {
             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",
             filename: outputJsPath,
         });
@@ -160,6 +163,8 @@ async function writeJs(
         }
         const outputSource = result.js.code;
         await writeFile(outputJsPath, outputSource);
+        const outputCss = result.css.code ?? "";
+        await writeFile(outputCssPath, outputCss);
     } catch (err) {
         console.log(`compile failed: ${err}`);
         return;
@@ -167,8 +172,7 @@ async function writeJs(
 }
 
 async function compileSvelte(args) {
-    const [sveltePath, mjsPath, dtsPath, ...tsLibs] = args;
-    const cssPath = sveltePath + ".css";
+    const [sveltePath, mjsPath, dtsPath, cssPath, ...tsLibs] = args;
     const svelteSource = (await readFile(sveltePath)) as string;
 
     const mockTsPath = sveltePath + ".ts";