Move ticks.scss directly into Graph.svelte

ts/graphs/BUILD.bazel

@@ -3,12 +3,6 @@ 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")
-
-sass_binary(
-    name = "ticks",
-    src = "ticks.scss",
-)
 
 svelte_files = glob(["*.svelte"])
 
@@ -69,7 +63,6 @@ esbuild(
         "//ts/lib:backend_proto",
         "//ts/lib:fluent_proto",
         ":index",
-        ":ticks",
         "//ts/sass:core_css",
     ] + svelte_names,
 )

ts/graphs/Graph.svelte

@@ -1,10 +1,3 @@
-<script context="module">
-    // custom tick styling
-    import "./ticks.css";
-
-    // see graph-style.ts for constants referencing global styles
-</script>
-
 <script lang="typescript">
     export let title: string;
     export let subtitle: string | null = null;
@@ -16,6 +9,39 @@
         margin-right: auto;
         max-width: 60em;
         page-break-inside: avoid;
+
+        :global(.graph-element-clickable) {
+            cursor: pointer;
+        }
+
+        /* Customizing the standard x and y tick markers and text on the graphs.
+         * The `tick` class is automatically added by d3. */
+        :global(.tick) {
+            :global(line) {
+                opacity: 0.1;
+            }
+
+            :global(text) {
+                opacity: 0.5;
+                font-size: 10px;
+
+                @media only screen and (max-width: 800px) {
+                    font-size: 13px;
+                }
+
+                @media only screen and (max-width: 600px) {
+                    font-size: 16px;
+                }
+            }
+        }
+
+        :global(.tick-odd) {
+            @media only screen and (max-width: 600px) {
+                /* on small screens, hide every second row on graphs that have
+                 * marked the ticks as odd */
+                display: none;
+            }
+        }
     }
 
     h1 {
@@ -28,9 +54,6 @@
         text-align: center;
         margin-bottom: 1em;
     }
-    .graph :global(.graph-element-clickable) {
-        cursor: pointer;
-    }
 </style>
 
 <div class="graph">

ts/graphs/ticks.scss

@@ -1,40 +0,0 @@
-/* Copyright: Ankitects Pty Ltd and contributors
- * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
-
-// Customizing the standard x and y tick markers and text on the graphs. The `tick`
-// class is automatically added by d3. We apply our custom ticks only to ticks
-// that are nested under a Graph component.
-
-.graph {
-    .tick {
-        line {
-            opacity: 0.1;
-        }
-
-        text {
-            opacity: 0.5;
-            font-size: 10px;
-        }
-    }
-
-    @media only screen and (max-width: 800px) {
-        .tick {
-            text {
-                font-size: 13px;
-            }
-        }
-    }
-
-    @media only screen and (max-width: 600px) {
-        .tick {
-            text {
-                font-size: 16px;
-                // on small screens, hide every second row on graphs that have
-                // marked the ticks as odd
-                &.tick-odd {
-                    display: none;
-                }
-            }
-        }
-    }
-}