Create explicit dependencies for the congrats,editor,graphs scss files

ts/compile_sass.bzl

@@ -13,6 +13,7 @@ def compile_sass(group, srcs, visibility, deps):
             src = scss_file,
             sourcemap = False,
             deps = deps,
+            visibility = visibility,
         )
 
     native.filegroup(

ts/congrats/BUILD.bazel

@@ -3,11 +3,15 @@ load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts/svelte:svelte.bzl", "svelte", "svelte_check")
 load("//ts:esbuild.bzl", "esbuild")
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//ts:compile_sass.bzl", "compile_sass")
 
-sass_binary(
-    name = "base_css",
-    src = "congrats-base.scss",
+compile_sass(
+    group = "base_css",
+    srcs = ["congrats-base.scss"],
+    deps = [
+        "//ts/sass:base_lib",
+        "//ts/sass:scrollbar_lib",
+    ],
     visibility = ["//visibility:public"],
 )
 

ts/editor/BUILD.bazel

@@ -3,17 +3,16 @@ load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
 load("//ts:vendor.bzl", "copy_bootstrap_icons")
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//ts:compile_sass.bzl", "compile_sass")
 
-sass_binary(
-    name = "editor_css",
-    src = "editor.scss",
-    visibility = ["//visibility:public"],
-)
-
-sass_binary(
-    name = "editable_css",
-    src = "editable.scss",
+compile_sass(
+    group = "base_css",
+    srcs = ["editor.scss", "editable.scss"],
+    deps = [
+        "//ts/sass:base_lib",
+        "//ts/sass:buttons_lib",
+        "//ts/sass:scrollbar_lib",
+    ],
     visibility = ["//visibility:public"],
 )
 
@@ -42,8 +41,9 @@ esbuild(
     entry_point = "index_wrapper.ts",
     visibility = ["//visibility:public"],
     deps = [
-        "bootstrap-icons",
-        "editor_ts",
+        ":bootstrap-icons",
+        ":editor_ts",
+        "base_css",
     ],
 )
 

ts/editor/editable.scss

@@ -1,4 +1,4 @@
-@use '../sass/scrollbar';
+@use 'ts/sass/scrollbar';
 
 anki-editable {
     display: block;

ts/graphs/BUILD.bazel

@@ -3,11 +3,15 @@ load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//ts:compile_sass.bzl", "compile_sass")
 
-sass_binary(
-    name = "base_css",
-    src = "graphs-base.scss",
+compile_sass(
+    group = "base_css",
+    srcs = ["graphs-base.scss"],
+    deps = [
+        "//ts/sass:base_lib",
+        "//ts/sass:scrollbar_lib",
+    ],
     visibility = ["//visibility:public"],
 )
 

ts/sass/BUILD.bazel

@@ -1,5 +1,14 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_library")
 
+sass_library(
+    name = "base_lib",
+    srcs = [
+        "_vars.scss",
+        "base.scss",
+    ],
+    visibility = ["//visibility:public"],
+)
+
 sass_library(
     name = "buttons_lib",
     srcs = [
@@ -36,6 +45,6 @@ sass_library(
 
 # qt package extracts colours from source file
 exports_files(
-    ["_vars.scss"],
-    visibility = ["//qt:__subpackages__"],
+    ["_vars.scss"] + glob(["*.scss"], exclude = ["_*.scss"]),
+    visibility = ["//qt:__subpackages__", "//ts:__subpackages__"],
 )