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

@@ -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(

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",
+    name = "graphs_shared",
-    src = "graphs.scss",
+    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,
 )
 

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";

ts/svelte/BUILD.bazel

@@ -8,6 +8,7 @@ _deps = [
     "@npm//svelte-preprocess",
     "@npm//svelte2tsx",
     "@npm//typescript",
+    "@npm//@types/node",
 ]
 
 ts_library(

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
+            css: false,
-            // also include it in the resulting .js
-            css: true,
             generate: "dom",
             filename: outputJsPath,
         });
@@ -161,10 +160,15 @@ async function writeJs(
             console.log(`warnings during compile: ${result.warnings}`);
             return;
         }
-        const outputSource = result.js.code;
+        // write out the css file
-        await writeFile(outputJsPath, outputSource);
         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;