From 8e79498d49900df67de36f66eae6da17482e44a2 Mon Sep 17 00:00:00 2001
From: Damien Elmes <dae@users.noreply.github.com>
Date: Mon, 6 Sep 2021 21:10:27 +1000
Subject: [PATCH] Merge pull request #1332 from hgiesel/svelteexportcontext

Shorten CSS references for `@import` or `@use`
---
 ts/change-notetype/change-notetype-base.scss | 20 ++++++-------
 ts/compile_sass.bzl                          |  5 +++-
 ts/components/DropdownItem.svelte            |  2 +-
 ts/components/IconButton.svelte              |  2 +-
 ts/components/LabelButton.svelte             |  2 +-
 ts/components/SelectButton.svelte            |  2 +-
 ts/congrats/congrats-base.scss               |  4 +--
 ts/deck-options/EnumSelector.svelte          |  4 +--
 ts/deck-options/SpinBox.svelte               |  2 +-
 ts/deck-options/SpinBoxFloat.svelte          |  2 +-
 ts/deck-options/StepsInput.svelte            |  2 +-
 ts/deck-options/TextInputModal.svelte        |  2 +-
 ts/deck-options/deck-options-base.scss       | 30 ++++++++++----------
 ts/editor/bootstrap.scss                     | 12 ++++----
 ts/editor/editable.scss                      |  8 +++---
 ts/editor/fields.scss                        |  4 +--
 ts/graphs/graphs-base.scss                   |  4 +--
 ts/sass/anki                                 |  1 +
 ts/sass/base.scss                            |  4 +--
 ts/sass/bootstrap/BUILD.bazel                |  1 -
 ts/sass/button-mixins.scss                   |  4 +--
 ts/svelte/svelte.bzl                         |  2 +-
 ts/svelte/svelte.ts                          | 11 +++----
 23 files changed, 67 insertions(+), 63 deletions(-)
 create mode 120000 ts/sass/anki

diff --git a/ts/change-notetype/change-notetype-base.scss b/ts/change-notetype/change-notetype-base.scss
index b39c636e7..eb4d1c866 100644
--- a/ts/change-notetype/change-notetype-base.scss
+++ b/ts/change-notetype/change-notetype-base.scss
@@ -1,15 +1,15 @@
-@use "ts/sass/vars";
-@use "ts/sass/scrollbar";
-@use "ts/sass/bootstrap-dark";
+@use "vars";
+@use "scrollbar";
+@use "bootstrap-dark";
 
-@import "ts/sass/base";
+@import "base";
 
-@import "ts/sass/bootstrap/alert";
-@import "ts/sass/bootstrap/forms";
-@import "ts/sass/bootstrap/buttons";
-@import "ts/sass/bootstrap/button-group";
-@import "ts/sass/bootstrap/close";
-@import "ts/sass/bootstrap/grid";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/grid";
 
 .night-mode {
     @include scrollbar.night-mode;
diff --git a/ts/compile_sass.bzl b/ts/compile_sass.bzl
index 7ab1aba6a..82676dabb 100644
--- a/ts/compile_sass.bzl
+++ b/ts/compile_sass.bzl
@@ -14,7 +14,10 @@ def compile_sass(group, srcs, deps = [], visibility = ["//visibility:private"]):
             sourcemap = False,
             deps = deps,
             visibility = visibility,
-            include_paths = ["external/ankidesktop"],
+            include_paths = [
+                "ts/sass",
+                "external/ankidesktop/ts/sass",
+            ],
         )
 
     native.filegroup(
diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte
index 5a2cedc58..e535720f1 100644
--- a/ts/components/DropdownItem.svelte
+++ b/ts/components/DropdownItem.svelte
@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
-    @use 'ts/sass/button-mixins' as button;
+    @use 'button-mixins' as button;
 
     button {
         display: flex;
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 300a551eb..e23a4d5d3 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -48,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
-    @use "ts/sass/button-mixins" as button;
+    @use "button-mixins" as button;
 
     button {
         padding: 0;
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index 3a26df785..b001513a2 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -49,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
-    @use "ts/sass/button-mixins" as button;
+    @use "button-mixins" as button;
 
     button {
         padding: 0 calc(var(--buttons-size) / 3);
diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index 09c2ae8e0..ed8e21ddd 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -39,7 +39,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </select>
 
 <style lang="scss">
-    @use "ts/sass/button-mixins" as button;
+    @use "button-mixins" as button;
 
     select {
         height: var(--buttons-size);
diff --git a/ts/congrats/congrats-base.scss b/ts/congrats/congrats-base.scss
index af870f3a1..8f04bfc51 100644
--- a/ts/congrats/congrats-base.scss
+++ b/ts/congrats/congrats-base.scss
@@ -1,5 +1,5 @@
-@use 'ts/sass/core';
-@use 'ts/sass/scrollbar';
+@use 'core';
+@use 'scrollbar';
 
 .night-mode {
     @include scrollbar.night-mode;
diff --git a/ts/deck-options/EnumSelector.svelte b/ts/deck-options/EnumSelector.svelte
index 0473dbf55..16c77ce4d 100644
--- a/ts/deck-options/EnumSelector.svelte
+++ b/ts/deck-options/EnumSelector.svelte
@@ -24,8 +24,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </select>
 
 <style lang="scss">
-    @use "ts/sass/night-mode" as nightmode;
-    @use "ts/sass/button-mixins" as button;
+    @use "night-mode" as nightmode;
+    @use "button-mixins" as button;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deck-options/SpinBox.svelte b/ts/deck-options/SpinBox.svelte
index 505420c33..6611cd28f 100644
--- a/ts/deck-options/SpinBox.svelte
+++ b/ts/deck-options/SpinBox.svelte
@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <style lang="scss">
-    @use "ts/sass/night-mode" as nightmode;
+    @use "night-mode" as nightmode;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deck-options/SpinBoxFloat.svelte b/ts/deck-options/SpinBoxFloat.svelte
index 6f5bbebf5..6667a7f45 100644
--- a/ts/deck-options/SpinBoxFloat.svelte
+++ b/ts/deck-options/SpinBoxFloat.svelte
@@ -32,7 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <style lang="scss">
-    @use "ts/sass/night-mode" as nightmode;
+    @use "night-mode" as nightmode;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deck-options/StepsInput.svelte b/ts/deck-options/StepsInput.svelte
index 16877bd77..3e830339b 100644
--- a/ts/deck-options/StepsInput.svelte
+++ b/ts/deck-options/StepsInput.svelte
@@ -28,7 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <style lang="scss">
-    @use "ts/sass/night-mode" as nightmode;
+    @use "night-mode" as nightmode;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deck-options/TextInputModal.svelte b/ts/deck-options/TextInputModal.svelte
index e8cde4f94..2c769a69f 100644
--- a/ts/deck-options/TextInputModal.svelte
+++ b/ts/deck-options/TextInputModal.svelte
@@ -96,7 +96,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    @use "ts/sass/night-mode" as nightmode;
+    @use "night-mode" as nightmode;
 
     .nightMode {
         @include nightmode.input;
diff --git a/ts/deck-options/deck-options-base.scss b/ts/deck-options/deck-options-base.scss
index 89636f3bb..879f55426 100644
--- a/ts/deck-options/deck-options-base.scss
+++ b/ts/deck-options/deck-options-base.scss
@@ -2,22 +2,22 @@ $tooltip-padding-y: 0.45rem;
 $tooltip-padding-x: 0.65rem;
 $tooltip-max-width: 300px;
 
-@use "ts/sass/vars";
-@use "ts/sass/scrollbar";
+@use "vars";
+@use "scrollbar";
 
-@import "ts/sass/base";
-@import "ts/sass/bootstrap/containers";
-@import "ts/sass/bootstrap/grid";
-@import "ts/sass/bootstrap/dropdown";
-@import "ts/sass/bootstrap/forms";
-@import "ts/sass/bootstrap/buttons";
-@import "ts/sass/bootstrap/button-group";
-@import "ts/sass/bootstrap/transitions";
-@import "ts/sass/bootstrap/modal";
-@import "ts/sass/bootstrap/close";
-@import "ts/sass/bootstrap/alert";
-@import "ts/sass/bootstrap/tooltip";
-@import "ts/sass/bootstrap/badge";
+@import "base";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/badge";
 
 .night-mode {
     @include scrollbar.night-mode;
diff --git a/ts/editor/bootstrap.scss b/ts/editor/bootstrap.scss
index ce3c5287e..535c83560 100644
--- a/ts/editor/bootstrap.scss
+++ b/ts/editor/bootstrap.scss
@@ -1,9 +1,9 @@
-@import "ts/sass/bootstrap/functions";
-@import "ts/sass/bootstrap/variables";
-@import "ts/sass/bootstrap/mixins";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
 
 $btn-disabled-opacity: 0.4;
 
-@import "ts/sass/bootstrap/buttons";
-@import "ts/sass/bootstrap/button-group";
-@import "ts/sass/bootstrap/dropdown";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/dropdown";
diff --git a/ts/editor/editable.scss b/ts/editor/editable.scss
index 0f01da597..1d43d9d00 100644
--- a/ts/editor/editable.scss
+++ b/ts/editor/editable.scss
@@ -1,4 +1,4 @@
-@use 'ts/sass/scrollbar';
+@use 'scrollbar';
 
 anki-editable {
     display: block;
@@ -42,9 +42,9 @@ img.drawing {
     display: none;
 }
 
-@import "ts/sass/codemirror/lib/codemirror";
-@import "ts/sass/codemirror/theme/monokai";
-@import "ts/sass/codemirror/addon/fold/foldgutter";
+@import "codemirror/lib/codemirror";
+@import "codemirror/theme/monokai";
+@import "codemirror/addon/fold/foldgutter";
 
 .CodeMirror {
     height: auto;
diff --git a/ts/editor/fields.scss b/ts/editor/fields.scss
index 141af04f6..1d0e34920 100644
--- a/ts/editor/fields.scss
+++ b/ts/editor/fields.scss
@@ -1,8 +1,8 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'ts/sass/base';
-@use 'ts/sass/scrollbar';
+@use 'base';
+@use 'scrollbar';
 
 .nightMode {
     @include scrollbar.night-mode;
diff --git a/ts/graphs/graphs-base.scss b/ts/graphs/graphs-base.scss
index f85f0c898..acdf1c368 100644
--- a/ts/graphs/graphs-base.scss
+++ b/ts/graphs/graphs-base.scss
@@ -1,5 +1,5 @@
-@use 'ts/sass/base';
-@use 'ts/sass/scrollbar';
+@use 'base';
+@use 'scrollbar';
 
 .night-mode {
     @include scrollbar.night-mode;
diff --git a/ts/sass/anki b/ts/sass/anki
new file mode 120000
index 000000000..945c9b46d
--- /dev/null
+++ b/ts/sass/anki
@@ -0,0 +1 @@
+.
\ No newline at end of file
diff --git a/ts/sass/base.scss b/ts/sass/base.scss
index 5139aebeb..b7b511c6b 100644
--- a/ts/sass/base.scss
+++ b/ts/sass/base.scss
@@ -19,8 +19,8 @@ $utilities: (
     ),
 );
 
-@import "ts/sass/bootstrap/bootstrap-reboot";
-@import "ts/sass/bootstrap/bootstrap-utilities";
+@import "bootstrap/scss/bootstrap-reboot";
+@import "bootstrap/scss/bootstrap-utilities";
 
 /* Bootstrap "extensions" */
 .flex-basis-100 {
diff --git a/ts/sass/bootstrap/BUILD.bazel b/ts/sass/bootstrap/BUILD.bazel
index 54062b233..5dda9e78d 100644
--- a/ts/sass/bootstrap/BUILD.bazel
+++ b/ts/sass/bootstrap/BUILD.bazel
@@ -9,7 +9,6 @@ vendor_js_lib(
     ],
     base = "external/npm/node_modules/bootstrap/",
     pkg = pkg_from_name("bootstrap"),
-    strip_prefix = "scss/",
     visibility = ["//visibility:private"],
 )
 
diff --git a/ts/sass/button-mixins.scss b/ts/sass/button-mixins.scss
index 9ca989f28..bf47a36b9 100644
--- a/ts/sass/button-mixins.scss
+++ b/ts/sass/button-mixins.scss
@@ -1,5 +1,5 @@
-@import "ts/sass/bootstrap/functions";
-@import "ts/sass/bootstrap/variables";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
 
 @mixin btn-border-radius {
     border-top-left-radius: var(--border-left-radius);
diff --git a/ts/svelte/svelte.bzl b/ts/svelte/svelte.bzl
index eb99acd6b..3c87a21d2 100644
--- a/ts/svelte/svelte.bzl
+++ b/ts/svelte/svelte.bzl
@@ -93,7 +93,7 @@ def svelte_check(name = "svelte_check", srcs = []):
             "//ts/lib",
             "@npm//sass",
         ] + srcs,
-        env = {"SASS_PATH": "$(rootpath //ts:tsconfig.json)/../.."},
+        env = {"SASS_PATH": "ts/sass"},
         # a lack of sandboxing on Windows breaks the local svelte_check
         # tests, so we need to disable them on Windows for now
         target_compatible_with = select({
diff --git a/ts/svelte/svelte.ts b/ts/svelte/svelte.ts
index 0f05831bc..324461aa0 100644
--- a/ts/svelte/svelte.ts
+++ b/ts/svelte/svelte.ts
@@ -153,13 +153,14 @@ async function writeJs(
     const preprocessOptions = preprocess({
         scss: {
             includePaths: [
-                binDir,
-                genDir,
+                "ts/sass",
+                `${binDir}/ts/sass`,
+                `${genDir}/ts/sass`,
                 // a nasty hack to ensure ts/sass/... resolves correctly
                 // when invoked from an external workspace
-                binDir + "/external/ankidesktop",
-                genDir + "/external/ankidesktop",
-                binDir + "/../../../external/ankidesktop",
+                `${binDir}/external/ankidesktop/ts/sass`,
+                `${genDir}/external/ankidesktop/ts/sass`,
+                `${binDir}/../../../external/ankidesktop/ts/sass`,
             ],
         },
     });