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;