Merge pull request #1122 from hgiesel/webviewcss2

Prefer SASS over including files

qt/aqt/data/web/css/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@bazel_skylib//rules:copy_file.bzl", "copy_file")
 load("//ts:copy.bzl", "copy_files_into_group")
-load("compile_sass.bzl", "compile_sass")
+load("//ts:compile_sass.bzl", "compile_sass")
 
 compile_sass(
     srcs = glob(
@@ -8,15 +8,15 @@ compile_sass(
         exclude = ["_*.scss"],
     ),
     group = "css_local",
+    deps = [
+        "//ts/sass:core_lib",
+        "//ts/sass:buttons_lib",
+        "//ts/sass:scrollbar_lib",
+        "//ts/sass:card_counts_lib",
+    ],
     visibility = ["//visibility:private"],
 )
 
-copy_file(
-    name = "core_css",
-    src = "//ts/sass:core.css",
-    out = "core.css",
-)
-
 copy_files_into_group(
     name = "editor",
     srcs = [
@@ -29,10 +29,8 @@ copy_files_into_group(
 filegroup(
     name = "css",
     srcs = [
-        "core.css",
         "css_local",
         "editor",
-        "//qt/aqt/data/web/css/vendor",
     ],
     visibility = ["//qt:__subpackages__"],
 )

qt/aqt/data/web/css/_card_counts.scss

@@ -1,34 +0,0 @@
-.review-count {
-  color: var(--review-count);
-}
-
-.new-count {
-  color: var(--new-count);
-}
-
-.learn-count {
-  color: var(--learn-count);
-}
-
-.zero-count {
-  color: var(--zero-count);
-}
-
-.nightMode {
-  .review-count {
-    color: var(--review-count);
-  }
-
-  .new-count {
-    color: var(--new-count);
-  }
-
-  .learn-count {
-    color: var(--learn-count);
-  }
-
-  .zero-count {
-    color: var(--zero-count);
-  }
-}
-

qt/aqt/data/web/css/deckbrowser.scss

@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'card_counts';
+@use 'ts/sass/card_counts';
 
 a.deck {
     color: var(--text-fg);

qt/aqt/data/web/css/overview.scss

@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'card_counts';
+@use 'ts/sass/card_counts';
 
 .smallLink {
     font-size: 10px;

qt/aqt/data/web/css/reviewer-bottom.scss

@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'card_counts';
+@use 'ts/sass/card_counts';
 
 body {
     margin: 0;

qt/aqt/data/web/css/vendor/BUILD.bazel

@@ -1,17 +0,0 @@
-load("//ts:vendor.bzl", "copy_bootstrap_css")
-
-copy_bootstrap_css(name = "bootstrap")
-
-files = [
-    "bootstrap",
-]
-
-directories = []
-
-filegroup(
-    name = "vendor",
-    srcs = glob(["*.css"]) +
-           ["//qt/aqt/data/web/css/vendor:{}".format(file) for file in files] +
-           ["//qt/aqt/data/web/css/vendor/{}".format(dir) for dir in directories],
-    visibility = ["//qt:__subpackages__"],
-)

qt/aqt/data/web/pages/BUILD.bazel

@@ -3,6 +3,7 @@ load("//ts:copy.bzl", "copy_files_into_group")
 copy_files_into_group(
     name = "graphs_page",
     srcs = [
+        "graphs-base.css",
         "graphs.css",
         "graphs.html",
         "graphs.js",
@@ -13,6 +14,7 @@ copy_files_into_group(
 copy_files_into_group(
     name = "congrats_page",
     srcs = [
+        "congrats-base.css",
         "congrats.css",
         "congrats.html",
         "congrats.js",

qt/aqt/editor.py

@@ -232,15 +232,14 @@ class Editor:
         self.web.stdHtml(
             _html % (bgcol, topbuts, tr.editing_show_duplicates()),
             css=[
-                "css/vendor/bootstrap.min.css",
                 "css/editor.css",
             ],
             js=[
                 "js/vendor/jquery.min.js",
-                "js/vendor/bootstrap.bundle.min.js",
                 "js/editor.js",
             ],
             context=self,
+            default_css=False,
         )
         self.web.eval("preventButtonFocus();")
 

qt/aqt/webview.py

@@ -456,13 +456,15 @@ body {{ zoom: {zoom}; background: {background}; direction: {lang_dir}; {font} }}
         js: Optional[List[str]] = None,
         head: str = "",
         context: Optional[Any] = None,
+        default_css: bool = True,
     ) -> None:
 
         web_content = WebContent(
             body=body,
             head=head,
             js=["js/webview.js"] + (["js/vendor/jquery.min.js"] if js is None else js),
-            css=["css/webview.css"] + ([] if css is None else css),
+            css=(["css/webview.css"] if default_css else [])
+            + ([] if css is None else css),
         )
 
         gui_hooks.webview_will_set_content(web_content, context)

ts/compile_sass.bzl

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 
-def compile_sass(group, srcs, visibility):
+def compile_sass(group, srcs, visibility, deps):
     css_files = []
     for scss_file in srcs:
         base = scss_file.replace(".scss", "")
@@ -12,7 +12,8 @@ def compile_sass(group, srcs, visibility):
             name = name,
             src = scss_file,
             sourcemap = False,
-            deps = ["//ts/sass:core_lib"],
+            deps = deps,
+            visibility = visibility,
         )
 
     native.filegroup(

ts/congrats/BUILD.bazel

@@ -3,12 +3,24 @@ 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("//ts:compile_sass.bzl", "compile_sass")
+
+compile_sass(
+    group = "base_css",
+    srcs = ["congrats-base.scss"],
+    deps = [
+        "//ts/sass:base_lib",
+        "//ts/sass:scrollbar_lib",
+    ],
+    visibility = ["//visibility:public"],
+)
 
 svelte(
     name = "CongratsPage",
     entry_point = "CongratsPage.svelte",
 )
 
+
 ts_library(
     name = "index",
     srcs = ["index.ts"],
@@ -16,6 +28,7 @@ ts_library(
         "CongratsPage",
         "lib",
         "//ts/lib",
+        "@npm//svelte",
         "@npm//svelte2tsx",
     ],
 )
@@ -47,11 +60,11 @@ esbuild(
     output_css = True,
     visibility = ["//visibility:public"],
     deps = [
-        "CongratsPage",
-        "index",
         "//ts/lib",
         "//ts/lib:backend_proto",
-        "//ts/sass:core_css",
+        "CongratsPage",
+        ":index",
+        ":base_css",
     ],
 )
 

ts/congrats/CongratsPage.svelte

@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import "../sass/core.css";
-
     import type pb from "anki/backend_proto";
     import { buildNextLearnMsg } from "./lib";
     import { bridgeLink } from "anki/bridgecommand";

ts/congrats/congrats-base.scss

@@ -0,0 +1,6 @@
+@use 'ts/sass/core';
+@use 'ts/sass/scrollbar';
+
+.night-mode {
+    @include scrollbar.night-mode;
+}

ts/congrats/congrats.html

@@ -3,6 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" id="viewport" content="width=device-width" />
+        <link href="congrats-base.css" rel="stylesheet" />
         <link href="congrats.css" rel="stylesheet" />
         <script src="../js/vendor/protobuf.min.js"></script>
         <script src="congrats.js"></script>

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(
+compile_sass(
-    name = "editor_css",
+    group = "base_css",
-    src = "editor.scss",
+    srcs = ["editor.scss", "editable.scss"],
-    visibility = ["//visibility:public"],
+    deps = [
-)
+        "//ts/sass:base_lib",
-
+        "//ts/sass:buttons_lib",
-sass_binary(
+        "//ts/sass:scrollbar_lib",
-    name = "editable_css",
+    ],
-    src = "editable.scss",
     visibility = ["//visibility:public"],
 )
 
@@ -42,8 +41,9 @@ esbuild(
     entry_point = "index_wrapper.ts",
     visibility = ["//visibility:public"],
     deps = [
-        "bootstrap-icons",
+        ":bootstrap-icons",
-        "editor_ts",
+        ":editor_ts",
+        "base_css",
     ],
 )
 

ts/editor/editable.scss

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

ts/editor/editor.scss

@@ -1,9 +1,12 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-body {
+@use 'ts/sass/base';
-    color: var(--text-fg);
+@use 'ts/sass/buttons';
-    background-color: var(--bg-color);
+@use 'ts/sass/scrollbar';
+
+.nightMode {
+    @include scrollbar.night-mode;
 }
 
 #fields {

ts/graphs/BUILD.bazel

@@ -3,6 +3,17 @@ 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("//ts:compile_sass.bzl", "compile_sass")
+
+compile_sass(
+    group = "base_css",
+    srcs = ["graphs-base.scss"],
+    deps = [
+        "//ts/sass:base_lib",
+        "//ts/sass:scrollbar_lib",
+    ],
+    visibility = ["//visibility:public"],
+)
 
 svelte_files = glob(["*.svelte"])
 
@@ -67,7 +78,7 @@ esbuild(
         "//ts/lib",
         "//ts/lib:backend_proto",
         ":index",
-        "//ts/sass:core_css",
+        ":base_css",
     ] + svelte_names,
 )
 

ts/graphs/Graph.svelte

@@ -57,6 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         text-align: center;
         margin-bottom: 0.25em;
         margin-top: 1.5em;
+        font-weight: bold;
     }
 
     .subtitle {

ts/graphs/GraphsPage.svelte

@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import "../sass/core.css";
-
     import type { SvelteComponent } from "svelte/internal";
     import { writable } from "svelte/store";
 

ts/graphs/graphs-base.scss

@@ -0,0 +1,6 @@
+@use 'ts/sass/base';
+@use 'ts/sass/scrollbar';
+
+.night-mode {
+    @include scrollbar.night-mode;
+}

ts/graphs/graphs.html

@@ -3,6 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" id="viewport" content="width=device-width" />
+        <link href="graphs-base.css" rel="stylesheet" />
         <link href="graphs.css" rel="stylesheet" />
         <script src="../js/vendor/protobuf.min.js"></script>
         <script src="graphs.js"></script>

ts/sass/BUILD.bazel

@@ -1,12 +1,29 @@
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_library")
 
-sass_binary(
+sass_library(
-    name = "core_css",
+    name = "base_lib",
-    src = "core.scss",
+    srcs = [
-    visibility = ["//visibility:public"],
+        "_vars.scss",
-    deps = [
+        "base.scss",
-        ":core_lib",
     ],
+    visibility = ["//visibility:public"],
+)
+
+sass_library(
+    name = "buttons_lib",
+    srcs = [
+        "_fusion_vars.scss",
+        "buttons.scss",
+    ],
+    visibility = ["//visibility:public"],
+)
+
+sass_library(
+    name = "card_counts_lib",
+    srcs = [
+        "card_counts.scss",
+    ],
+    visibility = ["//visibility:public"],
 )
 
 sass_library(
@@ -18,8 +35,16 @@ sass_library(
     visibility = ["//visibility:public"],
 )
 
+sass_library(
+    name = "scrollbar_lib",
+    srcs = [
+        "scrollbar.scss",
+    ],
+    visibility = ["//visibility:public"],
+)
+
 # qt package extracts colours from source file
 exports_files(
-    ["_vars.scss"],
+    ["_vars.scss"] + glob(["*.scss"], exclude = ["_*.scss"]),
-    visibility = ["//qt:__subpackages__"],
+    visibility = ["//qt:__subpackages__", "//ts:__subpackages__"],
 )

ts/sass/_fusion_vars.scss

@@ -0,0 +1,7 @@
+/* night-mode-specific colours */
+$button-gradient-start: #555555;
+$button-gradient-end: #656565;
+$button-outline: #222222;
+$button-hover-bg: #656565;
+$button-border: #646464;
+$button-base-bg: #454545;

ts/sass/base.scss

@@ -0,0 +1,14 @@
+@use 'vars';
+
+$body-color: var(--text-fg);
+$body-bg: var(--window-bg);
+
+$link-hover-color: var(--link);
+$link-hover-decoration: none;
+
+@import "ts/node_modules/bootstrap/scss/bootstrap-reboot";
+@import "ts/node_modules/bootstrap/scss/bootstrap-utilities";
+
+body {
+    overscroll-behavior: none;
+}

ts/sass/buttons.scss

@@ -1,10 +1,4 @@
-/* night-mode-specific colours */
+@use 'fusion_vars';
-$fusion-button-gradient-start: #555555;
-$fusion-button-gradient-end: #656565;
-$fusion-button-outline: #222222;
-$fusion-button-hover-bg: #656565;
-$fusion-button-border: #646464;
-$fusion-button-base-bg: #454545;
 
 .isWin {
     button {
@@ -37,11 +31,11 @@ $fusion-button-base-bg: #454545;
         /* match the fusion button gradient */
         background: linear-gradient(
             0deg,
-            $fusion-button-gradient-start 0%,
+            fusion_vars.$button-gradient-start 0%,
-            $fusion-button-gradient-end 100%
+            fusion_vars.$button-gradient-end 100%
         );
-        box-shadow: 0 0 3px $fusion-button-outline;
+        box-shadow: 0 0 3px fusion_vars.$button-outline;
-        border: 1px solid $fusion-button-border;
+        border: 1px solid fusion_vars.$button-border;
 
         border-radius: 2px;
         padding: 10px;
@@ -50,7 +44,7 @@ $fusion-button-base-bg: #454545;
     }
 
     button:hover {
-        background: $fusion-button-hover-bg;
+        background: fusion_vars.$button-hover-bg;
     }
 }
 

ts/sass/card_counts.scss

@@ -0,0 +1,15 @@
+.review-count {
+    color: var(--review-count);
+}
+
+.new-count {
+    color: var(--new-count);
+}
+
+.learn-count {
+    color: var(--learn-count);
+}
+
+.zero-count {
+    color: var(--zero-count);
+}

ts/sass/scrollbar.scss

@@ -2,7 +2,7 @@
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
 @use 'vars';
-@use 'buttons';
+@use 'fusion_vars';
 
 @mixin night-mode {
     &::-webkit-scrollbar {
@@ -18,7 +18,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-        background: buttons.$fusion-button-hover-bg;
+        background: fusion_vars.$button-hover-bg;
         border-radius: 8px;
 
         &:horizontal {