Prevent multiple inclusion of variables in CSS files

qt/aqt/BUILD.bazel

@@ -14,7 +14,7 @@ genrule(
 genrule(
     name = "extract_sass_vars",
     srcs = [
-        "//sass:_vars.css",
+        "//sass:_root-vars.css",
     ],
     outs = [
         "colors.py",

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

@@ -9,7 +9,7 @@ compile_sass(
     group = "css_local",
     visibility = ["//visibility:private"],
     deps = [
-        "//sass:vars_lib",
+        "//sass:base_lib",
         "//sass:buttons_lib",
         "//sass:card_counts_lib",
         "//sass:scrollbar_lib",

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

@@ -1,11 +1,11 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
-
+@use "sass/base";
-@use "sass/vars";
+@use "sass/vars" as *;
 @use "sass/card-counts";
 
 a.deck {
-    color: var(--fg);
+    color: color(fg);
     text-decoration: none;
     min-width: 5em;
     display: inline-block;
@@ -16,7 +16,7 @@ a.deck:hover {
 }
 
 tr.deck td {
-    border-bottom: 1px solid var(--border-subtle);
+    border-bottom: 1px solid color(border-subtle);
 }
 
 tr.top-level-drag-row td {
@@ -28,7 +28,7 @@ td {
 }
 
 tr.drag-hover td {
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid color(border);
 }
 
 body {
@@ -37,7 +37,7 @@ body {
 }
 
 .current {
-    background-color: var(--shadow-subtle);
+    background-color: color(shadow-subtle);
 }
 
 .decktd {
@@ -56,14 +56,14 @@ body {
 }
 
 .collapse {
-    color: var(--fg);
+    color: color(fg);
     text-decoration: none;
     display: inline-block;
     width: 1em;
 }
 
 .filtered {
-    color: var(--accent-link) !important;
+    color: color(accent-link) !important;
 }
 
 .gears {
@@ -81,7 +81,7 @@ body {
 }
 
 .callout {
-    background: var(--border);
+    background: color(border);
     padding: 1em;
     margin: 1em;
 

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

@@ -1,11 +1,12 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
+@use "sass/base";
 @use "vars";
 @use "sass/card-counts";
 
 :root {
-    --focus-color: #{vars.palette-of(button-focus)};
+    --focus-color: #{vars.palette-of(border-focus)};
 
     .isMac {
         --focus-color: rgba(0 103 244 / 0.247);

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

@@ -1,6 +1,8 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
+@use "sass/base";
+
 #header {
     padding: 3px;
     font-weight: bold;

qt/tools/extract_sass_vars.py

@@ -7,7 +7,7 @@ import re
 import sys
 
 # bazel genrule "srcs"
-vars_css = sys.argv[1]
+root_vars_css = sys.argv[1]
 
 # bazel genrule "outs"
 colors_py = sys.argv[2]
@@ -17,7 +17,7 @@ colors = {}
 props = {}
 reached_props = False
 
-for line in re.split(r"[;\{\}]", open(vars_css).read()):
+for line in re.split(r"[;\{\}]", open(root_vars_css).read()):
     line = line.strip()
 
     if not line:
@@ -54,7 +54,7 @@ copyright_notice = """\
 
 with open(colors_py, "w") as buf:
     buf.write(copyright_notice)
-    buf.write("# this file is auto-generated from _vars.scss and _colors.scss\n")
+    buf.write("# this file is auto-generated from _root-vars.scss\n")
 
     for color, val in colors.items():
         day = val[0]
@@ -66,7 +66,7 @@ with open(colors_py, "w") as buf:
 
 with open(props_py, "w") as buf:
     buf.write(copyright_notice)
-    buf.write("# this file is auto-generated from _vars.scss\n")
+    buf.write("# this file is auto-generated from _root-vars.scss\n")
 
     for prop, val in props.items():
         day = val[0]

sass/BUILD.bazel

@@ -17,7 +17,7 @@ sass_library(
 sass_library(
     name = "vars_lib",
     srcs = [
-        "_colors.scss",
+        "_color-palette.scss",
         "_functions.scss",
         "_vars.scss",
     ],
@@ -103,7 +103,7 @@ sass_library(
 )
 
 compile_sass(
-    srcs = ["_vars.scss"],
+    srcs = ["_root-vars.scss"],
     group = "vars_css",
     visibility = ["//visibility:public"],
 )

sass/_color-palette.scss

@@ -5,7 +5,7 @@
  * custom gray, rest from Tailwind CSS v3 palette
  * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 
-$colors: (
+$color-palette: (
     lightgray: (
         0: #fcfcfc,
         1: #fafafa,

sass/_root-vars.scss

@@ -0,0 +1,34 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */
+
+@use "sass:map";
+@use "vars" as *;
+@use "functions" as *;
+
+/*! colors */
+:root {
+    $colors: map.get($vars, colors);
+    @each $name, $val in create-vars-from-map($colors, light) {
+        #{$name}: #{$val};
+    }
+    color-scheme: light;
+    &.night-mode {
+        @each $name, $val in create-vars-from-map($colors, dark) {
+            #{$name}: #{$val};
+        }
+        color-scheme: dark;
+    }
+}
+
+/*! props */
+:root {
+    $props: map.get($vars, props);
+    @each $name, $val in create-vars-from-map($props, light) {
+        #{$name}: #{$val}; /*! #{$name} */
+    }
+    &.night-mode {
+        @each $name, $val in create-vars-from-map($props, dark) {
+            #{$name}: #{$val};
+        }
+    }
+}

sass/_vars.scss

@@ -4,10 +4,10 @@
 @use "sass:map";
 @use "sass:color";
 @use "functions" as *;
-@use "colors" as *;
+@use "color-palette" as *;
 
 @function palette($key, $shade) {
-    $color: map.get($colors, $key);
+    $color: map.get($color-palette, $key);
     @return map.get($color, $shade);
 }
 
@@ -290,6 +290,10 @@ $vars: (
     ),
 );
 
+@function prop($keyword) {
+    @return var(--#{$keyword});
+}
+
 @function color($keyword) {
     @return var(--#{$keyword});
 }
@@ -298,41 +302,3 @@ $vars: (
     $colors: map.get($vars, colors);
     @return get-value-from-map($colors, $keyword, $theme);
 }
-
-@function prop($keyword) {
-    @return var(--#{$keyword});
-}
-
-/*! colors */
-:root {
-    $colors: map.get($vars, colors);
-    @each $name, $val in create-vars-from-map($colors, light) {
-        #{$name}: #{$val};
-    }
-    color-scheme: light;
-    &.night-mode {
-        @each $name, $val in create-vars-from-map($colors, dark) {
-            #{$name}: #{$val};
-        }
-        color-scheme: dark;
-    }
-}
-
-/*! props */
-:root {
-    $props: map.get($vars, props);
-    @each $name, $val in create-vars-from-map($props, default) {
-        #{$name}: #{$val};
-    }
-    @each $name, $val in create-vars-from-map($props, light) {
-        #{$name}: #{$val};
-    }
-    &.night-mode {
-        @each $name, $val in create-vars-from-map($props, default) {
-            #{$name}: #{$val};
-        }
-        @each $name, $val in create-vars-from-map($props, dark) {
-            #{$name}: #{$val};
-        }
-    }
-}

sass/base.scss

@@ -1,11 +1,12 @@
-@use "vars";
+@use "vars" as *;
+@use "root-vars";
 @use "scrollbar";
 @use "button-mixins" as button;
 
-$body-color: var(--fg);
+$body-color: color(fg);
-$body-bg: var(--canvas);
+$body-bg: color(canvas);
 
-$link-hover-color: var(--accent-link);
+$link-hover-color: color(accent-link);
 $link-hover-decoration: none;
 
 $utilities: (
@@ -53,6 +54,7 @@ body {
 button {
     /* override transition for instant hover response */
     transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
+    border-radius: prop(border-radius);
 }
 
 pre,
@@ -82,12 +84,12 @@ samp {
 }
 .form-select:focus {
     outline: none;
-    border: 1px solid var(--border-focus);
+    border: 1px solid color(border-focus);
     box-shadow: none !important;
 }
 
 .night-mode .form-select:disabled {
-    background-color: var(--fg-disabled);
+    background-color: color(fg-disabled);
 }
 
 .reduced-motion * {
@@ -104,10 +106,10 @@ select {
 
     &:focus,
     &.focus {
-        border: 1px solid var(--border-focus);
+        border: 1px solid color(border-focus);
     }
     option {
-        background: var(--canvas-elevated);
+        background: color(canvas-elevated);
-        color: var(--fg);
+        color: color(fg);
     }
 }

ts/change-notetype/change-notetype-base.scss

@@ -1,4 +1,3 @@
-@use "sass/vars";
 @use "sass/bootstrap-dark";
 
 @import "sass/base";

ts/components/Popover.svelte

@@ -20,10 +20,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    @use "sass/vars";
+    @use "sass/vars" as *;
     .popover {
         border-radius: 5px;
-        background-color: var(--canvas-elevated);
+        background-color: color(canvas-elevated);
         min-width: var(--popover-width, 1rem);
         max-width: 95vw;
 
@@ -31,20 +31,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         padding: var(--popover-padding-block, 6px) var(--popover-padding-inline, 6px);
 
         font-size: 1rem;
-        color: var(--fg);
+        color: color(fg);
 
         /* outer border */
-        border: 1px solid vars.palette(lightgray, 6);
+        border: 1px solid palette(lightgray, 6);
 
         &.dark {
-            border-color: vars.palette(darkgray, 9);
+            border-color: palette(darkgray, 9);
         }
 
         /* inner border */
-        box-shadow: inset 0 0 0 1px vars.palette(lightgray, 3);
+        box-shadow: inset 0 0 0 1px palette(lightgray, 3);
 
         &.dark {
-            box-shadow: inset 0 0 0 1px vars.palette(darkgray, 2);
+            box-shadow: inset 0 0 0 1px palette(darkgray, 2);
         }
         &.scrollable {
             max-height: 80vh;

ts/editor/legacy.scss

@@ -1,6 +1,5 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
-@use "sass/vars";
 @use "sass:color";
 @use "sass/button-mixins" as button;
 

ts/fields/fields-base.scss

@@ -1,4 +1,3 @@
-@use "sass/vars";
 @use "sass/bootstrap-dark";
 
 @import "sass/base";

ts/import-csv/import-csv-base.scss

@@ -1,4 +1,3 @@
-@use "sass/vars";
 @use "sass/bootstrap-dark";
 
 @import "sass/base";

ts/tag-editor/AutocompleteItem.svelte

@@ -33,7 +33,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
-    @use "sass/vars";
     @use "sass/button-mixins" as button;
 
     .autocomplete-item {