From 5c2f2cfaf9687e40fea12783598c8fcafca28bc7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 23 Jan 2026 00:23:32 +0000
Subject: [PATCH 1/3] Initial plan


From 87190c17d8aabfa4e68f83f720abeb62627a0a0d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 23 Jan 2026 00:28:12 +0000
Subject: [PATCH 2/3] Replace Sass @import with @use in packages

Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
---
 extensions/common-frontend/src/css/app.scss   |  4 +--
 .../sanddance-app/src/css/sanddance-app.scss  |  4 +--
 .../sanddance-explorer/src/css/dataScope.scss |  2 ++
 .../src/css/sanddance-explorer.scss           | 30 +++++++++----------
 .../sanddance-explorer/src/css/sidebar.scss   |  2 ++
 .../sanddance-explorer/src/css/topbar.scss    |  2 ++
 .../src/css/sanddance-react.scss              |  2 +-
 7 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/extensions/common-frontend/src/css/app.scss b/extensions/common-frontend/src/css/app.scss
index 6c3514850..e8c7e9faa 100644
--- a/extensions/common-frontend/src/css/app.scss
+++ b/extensions/common-frontend/src/css/app.scss
@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
+@use "../../../../packages/sanddance-explorer/dist/css/sanddance-explorer";
+
 html,
 body {
     height: 100%;
@@ -22,5 +24,3 @@ input {
     right: 0;
     bottom: 0;
 }
-
-@import "../../../../packages/sanddance-explorer/dist/css/sanddance-explorer";
diff --git a/packages/sanddance-app/src/css/sanddance-app.scss b/packages/sanddance-app/src/css/sanddance-app.scss
index 4ff12ed2c..f55fad058 100644
--- a/packages/sanddance-app/src/css/sanddance-app.scss
+++ b/packages/sanddance-app/src/css/sanddance-app.scss
@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
+@use "../../../sanddance-explorer/dist/css/sanddance-explorer";
+
 .sanddance-app-static-content {
     display: none;
 }
@@ -22,8 +24,6 @@
     //margin-bottom: 12px;
 }
 
-@import "../../../sanddance-explorer/dist/css/sanddance-explorer";
-
 .sanddance-sidebar {
     .sanddance-datascope {
         min-height: 7em;
diff --git a/packages/sanddance-explorer/src/css/dataScope.scss b/packages/sanddance-explorer/src/css/dataScope.scss
index 875cd9ade..e83a595d2 100644
--- a/packages/sanddance-explorer/src/css/dataScope.scss
+++ b/packages/sanddance-explorer/src/css/dataScope.scss
@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
+@use "color" as *;
+
 @mixin dataScope(
     $toolbar-margin,
     $toolbar-width,
diff --git a/packages/sanddance-explorer/src/css/sanddance-explorer.scss b/packages/sanddance-explorer/src/css/sanddance-explorer.scss
index 4db102a02..a5bd7d9a3 100644
--- a/packages/sanddance-explorer/src/css/sanddance-explorer.scss
+++ b/packages/sanddance-explorer/src/css/sanddance-explorer.scss
@@ -1,21 +1,21 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
 @use 'sass:math';
-@import "../../../sanddance-react/dist/css/sanddance-react";
-@import "color";
-@import "columnMap";
-@import "dataItem";
-@import "dataIndex";
-@import "dataScope";
-@import "group";
-@import "note";
-@import "palette";
-@import "search";
-@import "scrollable";
-@import "sidebar";
-@import "snapshots";
-@import "history";
-@import "topbar";
+@use "../../../sanddance-react/dist/css/sanddance-react";
+@use "color" as *;
+@use "columnMap" as *;
+@use "dataItem" as *;
+@use "dataIndex" as *;
+@use "dataScope" as *;
+@use "group" as *;
+@use "note" as *;
+@use "palette" as *;
+@use "search" as *;
+@use "scrollable" as *;
+@use "sidebar" as *;
+@use "snapshots" as *;
+@use "history" as *;
+@use "topbar" as *;
 
 //settings
 $sidetab-width: 50px;
diff --git a/packages/sanddance-explorer/src/css/sidebar.scss b/packages/sanddance-explorer/src/css/sidebar.scss
index 53e3bb5c1..cf98fc9fa 100644
--- a/packages/sanddance-explorer/src/css/sidebar.scss
+++ b/packages/sanddance-explorer/src/css/sidebar.scss
@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
+@use 'sass:math';
+
 @mixin sidebar(
     $bg-color,
     $dark-bg-color,
diff --git a/packages/sanddance-explorer/src/css/topbar.scss b/packages/sanddance-explorer/src/css/topbar.scss
index f80bb3512..2eafe5e90 100644
--- a/packages/sanddance-explorer/src/css/topbar.scss
+++ b/packages/sanddance-explorer/src/css/topbar.scss
@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
+@use "color" as *;
+
 @mixin topbar(
   $toolbar-margin,
   $toolbar-width,
diff --git a/packages/sanddance-react/src/css/sanddance-react.scss b/packages/sanddance-react/src/css/sanddance-react.scss
index 11f0ce1fe..b9cb986d7 100644
--- a/packages/sanddance-react/src/css/sanddance-react.scss
+++ b/packages/sanddance-react/src/css/sanddance-react.scss
@@ -1,3 +1,3 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
-@import "../../../sanddance/dist/css/sanddance";
+@use "../../../sanddance/dist/css/sanddance";

From 47ccd7f2f9c351f6b865e14f21f7eef219abb30a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 23 Jan 2026 00:56:25 +0000
Subject: [PATCH 3/3] Revert @use changes - preserve CSS order with @import

Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
---
 extensions/common-frontend/src/css/app.scss   |  4 +--
 .../sanddance-app/src/css/sanddance-app.scss  |  4 +--
 .../sanddance-explorer/src/css/dataScope.scss |  2 --
 .../src/css/sanddance-explorer.scss           | 30 +++++++++----------
 .../sanddance-explorer/src/css/sidebar.scss   |  2 --
 .../sanddance-explorer/src/css/topbar.scss    |  2 --
 .../src/css/sanddance-react.scss              |  2 +-
 7 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/extensions/common-frontend/src/css/app.scss b/extensions/common-frontend/src/css/app.scss
index e8c7e9faa..6c3514850 100644
--- a/extensions/common-frontend/src/css/app.scss
+++ b/extensions/common-frontend/src/css/app.scss
@@ -1,7 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
-@use "../../../../packages/sanddance-explorer/dist/css/sanddance-explorer";
-
 html,
 body {
     height: 100%;
@@ -24,3 +22,5 @@ input {
     right: 0;
     bottom: 0;
 }
+
+@import "../../../../packages/sanddance-explorer/dist/css/sanddance-explorer";
diff --git a/packages/sanddance-app/src/css/sanddance-app.scss b/packages/sanddance-app/src/css/sanddance-app.scss
index f55fad058..4ff12ed2c 100644
--- a/packages/sanddance-app/src/css/sanddance-app.scss
+++ b/packages/sanddance-app/src/css/sanddance-app.scss
@@ -1,7 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
-@use "../../../sanddance-explorer/dist/css/sanddance-explorer";
-
 .sanddance-app-static-content {
     display: none;
 }
@@ -24,6 +22,8 @@
     //margin-bottom: 12px;
 }
 
+@import "../../../sanddance-explorer/dist/css/sanddance-explorer";
+
 .sanddance-sidebar {
     .sanddance-datascope {
         min-height: 7em;
diff --git a/packages/sanddance-explorer/src/css/dataScope.scss b/packages/sanddance-explorer/src/css/dataScope.scss
index e83a595d2..875cd9ade 100644
--- a/packages/sanddance-explorer/src/css/dataScope.scss
+++ b/packages/sanddance-explorer/src/css/dataScope.scss
@@ -1,7 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
-@use "color" as *;
-
 @mixin dataScope(
     $toolbar-margin,
     $toolbar-width,
diff --git a/packages/sanddance-explorer/src/css/sanddance-explorer.scss b/packages/sanddance-explorer/src/css/sanddance-explorer.scss
index a5bd7d9a3..4db102a02 100644
--- a/packages/sanddance-explorer/src/css/sanddance-explorer.scss
+++ b/packages/sanddance-explorer/src/css/sanddance-explorer.scss
@@ -1,21 +1,21 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
 @use 'sass:math';
-@use "../../../sanddance-react/dist/css/sanddance-react";
-@use "color" as *;
-@use "columnMap" as *;
-@use "dataItem" as *;
-@use "dataIndex" as *;
-@use "dataScope" as *;
-@use "group" as *;
-@use "note" as *;
-@use "palette" as *;
-@use "search" as *;
-@use "scrollable" as *;
-@use "sidebar" as *;
-@use "snapshots" as *;
-@use "history" as *;
-@use "topbar" as *;
+@import "../../../sanddance-react/dist/css/sanddance-react";
+@import "color";
+@import "columnMap";
+@import "dataItem";
+@import "dataIndex";
+@import "dataScope";
+@import "group";
+@import "note";
+@import "palette";
+@import "search";
+@import "scrollable";
+@import "sidebar";
+@import "snapshots";
+@import "history";
+@import "topbar";
 
 //settings
 $sidetab-width: 50px;
diff --git a/packages/sanddance-explorer/src/css/sidebar.scss b/packages/sanddance-explorer/src/css/sidebar.scss
index cf98fc9fa..53e3bb5c1 100644
--- a/packages/sanddance-explorer/src/css/sidebar.scss
+++ b/packages/sanddance-explorer/src/css/sidebar.scss
@@ -1,7 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
-@use 'sass:math';
-
 @mixin sidebar(
     $bg-color,
     $dark-bg-color,
diff --git a/packages/sanddance-explorer/src/css/topbar.scss b/packages/sanddance-explorer/src/css/topbar.scss
index 2eafe5e90..f80bb3512 100644
--- a/packages/sanddance-explorer/src/css/topbar.scss
+++ b/packages/sanddance-explorer/src/css/topbar.scss
@@ -1,7 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
-@use "color" as *;
-
 @mixin topbar(
   $toolbar-margin,
   $toolbar-width,
diff --git a/packages/sanddance-react/src/css/sanddance-react.scss b/packages/sanddance-react/src/css/sanddance-react.scss
index b9cb986d7..11f0ce1fe 100644
--- a/packages/sanddance-react/src/css/sanddance-react.scss
+++ b/packages/sanddance-react/src/css/sanddance-react.scss
@@ -1,3 +1,3 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
-@use "../../../sanddance/dist/css/sanddance";
+@import "../../../sanddance/dist/css/sanddance";