From dbe5d43ba0f1d4e7a2fbe486889e1afbcfcfc84e Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Sun, 21 Mar 2021 15:45:15 +1000
Subject: [PATCH] bundle all Svelte css into separate file

- svelte compilation outputs a separate .css file for each component
- compilation also adds an "import foo.css" to the top of each generated
.mjs file
- when the .mjs files are bundled into app.js, esbuild creates an app.css
as well
- graphs.scss was renamed to graphs_shared.scss and imported in the
top level GraphsPage. Henrik's style refactoring would be a better path
forward, but I needed to make this change for now, as the filenames were
conflicting.
---
 ts/esbuild.bzl                                |  2 +-
 ts/graphs/BUILD.bazel                         |  6 ++++--
 ts/graphs/GraphsPage.svelte                   |  4 +---
 ts/graphs/{graphs.scss => graphs_shared.scss} |  0
 ts/svelte/BUILD.bazel                         |  1 +
 ts/svelte/svelte.ts                           | 14 +++++++++-----
 6 files changed, 16 insertions(+), 11 deletions(-)
 rename ts/graphs/{graphs.scss => graphs_shared.scss} (100%)

diff --git a/ts/esbuild.bzl b/ts/esbuild.bzl
index f878bba06..e0c3021b7 100644
--- a/ts/esbuild.bzl
+++ b/ts/esbuild.bzl
@@ -1,4 +1,4 @@
-load("@npm//@bazel/esbuild:index.bzl", _esbuild = "esbuild")
+load("//ts/esbuild:upstream.bzl", _esbuild = "esbuild_macro")
 
 def esbuild(name, **kwargs):
     _esbuild(
diff --git a/ts/graphs/BUILD.bazel b/ts/graphs/BUILD.bazel
index dfa909eb7..f33764193 100644
--- a/ts/graphs/BUILD.bazel
+++ b/ts/graphs/BUILD.bazel
@@ -6,8 +6,8 @@ load("//ts:esbuild.bzl", "esbuild")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 
 sass_binary(
-    name = "graphs_css",
-    src = "graphs.scss",
+    name = "graphs_shared",
+    src = "graphs_shared.scss",
     visibility = ["//visibility:public"],
     deps = [
         "//ts/sass:core_lib",
@@ -66,12 +66,14 @@ esbuild(
     external = [
         "protobufjs/light",
     ],
+    output_css = True,
     visibility = ["//visibility:public"],
     deps = [
         "//ts/lib",
         "//ts/lib:backend_proto",
         "//ts/lib:fluent_proto",
         "bootstrap",
+        "graphs_shared",
     ] + svelte_names,
 )
 
diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 05ade8f0b..b7eab4172 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -1,7 +1,5 @@
-<script context="module">
-</script>
-
 <script lang="typescript">
+    import "./graphs_shared.css";
     import type { SvelteComponent } from "svelte/internal";
     import type { I18n } from "anki/i18n";
     import type { PreferenceStore } from "./preferences";
diff --git a/ts/graphs/graphs.scss b/ts/graphs/graphs_shared.scss
similarity index 100%
rename from ts/graphs/graphs.scss
rename to ts/graphs/graphs_shared.scss
diff --git a/ts/svelte/BUILD.bazel b/ts/svelte/BUILD.bazel
index fdc33faf4..96e60e0fb 100644
--- a/ts/svelte/BUILD.bazel
+++ b/ts/svelte/BUILD.bazel
@@ -8,6 +8,7 @@ _deps = [
     "@npm//svelte-preprocess",
     "@npm//svelte2tsx",
     "@npm//typescript",
+    "@npm//@types/node",
 ]
 
 ts_library(
diff --git a/ts/svelte/svelte.ts b/ts/svelte/svelte.ts
index 7c06c51ca..b15de386a 100644
--- a/ts/svelte/svelte.ts
+++ b/ts/svelte/svelte.ts
@@ -2,6 +2,7 @@ const fs = require("fs");
 const worker = require("@bazel/worker");
 const svelte2tsx = require("svelte2tsx");
 const preprocess = require("svelte-preprocess");
+import { basename } from "path";
 import * as ts from "typescript";
 import * as svelte from "svelte/compiler.js";
 
@@ -150,9 +151,7 @@ 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,
+            css: false,
             generate: "dom",
             filename: outputJsPath,
         });
@@ -161,10 +160,15 @@ async function writeJs(
             console.log(`warnings during compile: ${result.warnings}`);
             return;
         }
-        const outputSource = result.js.code;
-        await writeFile(outputJsPath, outputSource);
+        // write out the css file
         const outputCss = result.css.code ?? "";
         await writeFile(outputCssPath, outputCss);
+        // if it was non-empty, prepend a reference to it in the js file, so that
+        // it's included in the bundled .css when bundling
+        const outputSource =
+            (outputCss ? `import "./${basename(outputCssPath)}";` : "") +
+            result.js.code;
+        await writeFile(outputJsPath, outputSource);
     } catch (err) {
         console.log(`compile failed: ${err}`);
         return;