Switch from @import to @use

.stylelintrc

@@ -12,7 +12,7 @@
     "color-function-notation": "legacy",
     "declaration-empty-line-before": null,
     "no-invalid-position-at-import-rule": [true, {
-        "ignoreAtRules": ["use"]
+        "ignoreAtRules": ["use", "forward"]
     }],
     "scss/media-feature-value-dollar-variable": null,
     "selector-max-universal": 1

packages/core/src/_dark-theme.scss

@@ -1,5 +1,6 @@
 // Copyright 2021 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
+@use "common/variables" as *;
 
 .#{$ns}-dark {
   // this tells the browser to use a dark theme UI, which is most useful for enabling

packages/core/src/_reset.scss

@@ -1,8 +1,9 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "common/variables";
-@import "common/mixins";
+@use "common/variables" as *;
+@use "common/color-aliases" as *;
+@use "common/mixins" as *;
 
 // Apply a natural box layout model to all elements, but allow components to change as necessary
 html {

packages/core/src/_typography.scss

@@ -1,11 +1,14 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "common/variables";
-@import "common/variables-extended";
-@import "common/mixins";
-@import "common/typography-colors";
-@import "components/icon/icon";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "common/variables" as *;
+@use "common/variables-extended" as *;
+@use "common/color-aliases" as *;
+@use "common/mixins" as *;
+@use "common/typography-colors" as *;
+@use "components/icon/icon" as *;
+@use "components/html-table/html-table" as *;
 @include pt-typography-colors();
 
 /*

packages/core/src/accessibility/_focus-states.scss

@@ -1,5 +1,7 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
+@use "../common/variables" as *;
+@use "../common/mixins" as *;
 
 :focus {
   @include focus-outline();

packages/core/src/blueprint.scss

@@ -6,13 +6,8 @@ Licensed under the Apache License, Version 2.0.
 */
 
 // Import files in the same order that they are documented in the docs
-@import "@blueprintjs/colors/lib/scss/colors";
-@import "common/variables";
-@import "common/variables-extended";
-@import "common/mixins";
-
-@import "reset";
-@import "typography";
-@import "accessibility/focus-states";
-@import "dark-theme";
-@import "components/index";
+@forward "reset";
+@forward "typography";
+@forward "accessibility/focus-states";
+@forward "dark-theme";
+@forward "components/index";

packages/core/src/common/_color-aliases.scss

@@ -9,6 +9,7 @@
 // -  A limited subset of Sass syntax is supported. All syntax inluded here must be able to get parsed by the
 //    `generate-css-variables` script in @blueprintjs/node-build-scripts. For example, "sass:math" is unsupported.
 // ----------------------------------------------------------------------------
+@use "@blueprintjs/colors/lib/scss/colors" as *;
 
 $pt-intent-primary: $blue3 !default;
 $pt-intent-success: $green3 !default;

packages/core/src/common/_flex.scss

@@ -1,5 +1,6 @@
 // Copyright 2018 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
+@use "variables" as *;
 
 // this element becomes a flex container in the given direction.
 // supply `$margin` to put space between each child.

packages/core/src/common/_mixins.scss

@@ -2,8 +2,10 @@
 // Licensed under the Apache License, Version 2.0.
 
 @use "sass:math";
-@import "@blueprintjs/colors/lib/scss/colors";
-@import "flex";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "color-aliases" as *;
+@use "variables" as *;
+@use "flex" as *;
 
 $pt-intent-colors: (
   "primary": $pt-intent-primary,

packages/core/src/common/_react-transition.scss

@@ -1,6 +1,8 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "variables" as *;
+
 /*
 A mixin to generate the classes for a React CSSTransition which animates any number of CSS
 properties at once.

packages/core/src/common/_typography-colors.scss

@@ -1,9 +1,11 @@
 // Copyright 2022 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "variables";
-@import "variables-extended";
-@import "mixins";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "variables" as *;
+@use "variables-extended" as *;
+@use "color-aliases" as *;
+@use "mixins" as *;
 
 @mixin pt-typography-colors() {
   // N.B. we can't declare any global colors here because this mixin is @included at

packages/core/src/common/_variables-extended.scss

@@ -1,7 +1,7 @@
 // Copyright 2022 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "variables";
+@use "variables" as *;
 
 // ----------------------------------------------------------------------------
 // This file contains additional common variables which we do not want to export in public API via variables.scss,

packages/core/src/common/_variables.scss

@@ -1,8 +1,8 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "color-aliases";
-@import "mixins";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "color-aliases" as *;
 
 // ----------------------------------------------------------------------------
 // This file is part of the public Sass API of @blueprintjs/core.

packages/core/src/components/_index.scss

@@ -1,49 +1,49 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "alert/alert";
-@import "breadcrumbs/breadcrumbs";
-@import "button/button";
-@import "button/button-group";
-@import "callout/callout";
-@import "card/card";
-@import "card-list/card-list";
-@import "collapse/collapse";
-@import "context-menu/context-menu";
-@import "control-card/control-card";
-@import "divider/divider";
-@import "dialog/dialog";
-@import "dialog/dialog-body";
-@import "dialog/dialog-footer";
-@import "dialog/multistep-dialog";
-@import "drawer/drawer";
-@import "editable-text/editable-text";
-@import "entity-title/entity-title";
-@import "forms/index";
-@import "html-select/html-select";
-@import "html-table/html-table";
-@import "hotkeys/hotkeys";
-@import "icon/icon";
-@import "menu/menu";
-@import "navbar/navbar";
-@import "non-ideal-state/non-ideal-state";
-@import "overflow-list/overflow-list";
-@import "overlay/overlay";
-@import "panel-stack/panel-stack";
-@import "panel-stack2/panel-stack2";
-@import "popover/popover";
-@import "portal/portal";
-@import "progress-bar/progress-bar";
-@import "section/section";
-@import "segmented-control/segmented-control";
-@import "skeleton/skeleton";
-@import "slider/slider";
-@import "spinner/spinner";
-@import "tabs/tabs";
-@import "tag/tag";
-@import "tag/compound-tag";
-@import "tag-input/tag-input";
-@import "tag-input/resizable-input";
-@import "toast/toast";
-@import "tooltip/tooltip";
-@import "tree/tree";
+@forward "alert/alert";
+@forward "breadcrumbs/breadcrumbs";
+@forward "button/button";
+@forward "button/button-group";
+@forward "callout/callout";
+@forward "card/card";
+@forward "card-list/card-list";
+@forward "collapse/collapse";
+@forward "context-menu/context-menu";
+@forward "control-card/control-card";
+@forward "divider/divider";
+@forward "dialog/dialog";
+@forward "dialog/dialog-body";
+@forward "dialog/dialog-footer";
+@forward "dialog/multistep-dialog";
+@forward "drawer/drawer";
+@forward "editable-text/editable-text";
+@forward "entity-title/entity-title";
+@forward "forms/index";
+@forward "html-select/html-select";
+@forward "html-table/html-table";
+@forward "hotkeys/hotkeys";
+@forward "icon/icon";
+@forward "menu/menu";
+@forward "navbar/navbar";
+@forward "non-ideal-state/non-ideal-state";
+@forward "overflow-list/overflow-list";
+@forward "overlay/overlay";
+@forward "panel-stack/panel-stack";
+@forward "panel-stack2/panel-stack2";
+@forward "popover/popover";
+@forward "portal/portal";
+@forward "progress-bar/progress-bar";
+@forward "section/section";
+@forward "segmented-control/segmented-control";
+@forward "skeleton/skeleton";
+@forward "slider/slider";
+@forward "spinner/spinner";
+@forward "tabs/tabs";
+@forward "tag/tag";
+@forward "tag/compound-tag";
+@forward "tag-input/tag-input";
+@forward "tag-input/resizable-input";
+@forward "toast/toast";
+@forward "tooltip/tooltip";
+@forward "tree/tree";

packages/core/src/components/alert/_alert.scss

@@ -1,7 +1,7 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../../common/variables";
+@use "../../common/variables" as *;
 
 .#{$ns}-alert {
   max-width: $pt-grid-size * 40;

packages/core/src/components/breadcrumbs/_breadcrumbs.scss

@@ -1,8 +1,10 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "@blueprintjs/icons/lib/scss/variables";
-@import "../../common/variables";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "@blueprintjs/icons/lib/scss/variables" as *;
+@use "../../common/variables" as *;
+@use "../../common/color-aliases" as *;
 
 /*
 Breadcrumbs

packages/core/src/components/button/_button-group.scss

@@ -1,9 +1,9 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../../common/variables";
-@import "../forms/common";
-@import "./common";
+@use "../../common/variables" as *;
+@use "../forms/common" as *;
+@use "./common" as *;
 
 /*
 Button groups

packages/core/src/components/button/_button.scss

@@ -1,9 +1,13 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../../common/variables";
-@import "../../common/variables-extended";
-@import "./common";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "../../common/color-aliases" as *;
+@use "../../common/variables" as *;
+@use "../../common/variables-extended" as *;
+@use "./common" as *;
+@use "../icon/icon-mixins" as *;
+@use "../progress-bar/common" as *;
 
 /*
 Button

packages/core/src/components/button/_common.scss

@@ -1,10 +1,13 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../../common/mixins";
-@import "../../common/variables";
-@import "../../common/variables-extended";
-@import "../progress-bar/common";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "../../common/color-aliases" as *;
+@use "../../common/flex" as *;
+@use "../../common/mixins" as *;
+@use "../../common/variables" as *;
+@use "../../common/variables-extended" as *;
+@use "../progress-bar/common" as *;
 
 $button-border-width: 1px !default;
 $button-padding: ($pt-grid-size * 0.5) $pt-grid-size !default;

packages/core/src/components/callout/_callout.scss

@@ -1,7 +1,12 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../../common/variables-extended";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "../../common/color-aliases" as *;
+@use "../../common/variables" as *;
+@use "../../common/variables-extended" as *;
+@use "../../common/mixins" as *;
+@use "../icon/icon-mixins" as *;
 
 /*
 Callout

packages/core/src/components/card-list/card-list.scss

@@ -1,7 +1,10 @@
 // Copyright 2023 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../card/card-variables";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "../../common/color-aliases" as *;
+@use "../../common/variables" as *;
+@use "../card/card-variables" as *;
 
 .#{$ns}-card-list {
   overflow: auto;

packages/core/src/components/card/_card-variables.scss

@@ -1,7 +1,10 @@
 // Copyright 2023 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../../common/variables-extended";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "../../common/color-aliases" as *;
+@use "../../common/variables" as *;
+@use "../../common/variables-extended" as *;
 
 $card-padding: $pt-grid-size * 2 !default;
 $card-padding-compact: $pt-grid-size * 1.5 !default;

packages/core/src/components/card/_card.scss

@@ -1,7 +1,10 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "./card-variables";
+@use "@blueprintjs/colors/lib/scss/colors" as *;
+@use "../../common/variables" as *;
+@use "../../common/variables-extended" as *;
+@use "./card-variables" as *;
 
 /*
 Cards

packages/core/src/components/collapse/_collapse.scss

@@ -1,7 +1,7 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../../common/variables";
+@use "../../common/variables" as *;
 
 $collapse-transition: ($pt-transition-duration * 2) $pt-transition-ease !default;
 

packages/core/src/components/context-menu/_context-menu.scss

@@ -1,7 +1,7 @@
 // Copyright 2021 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../../common/variables";
+@use "../../common/variables" as *;
 
 .#{$ns}-context-menu-virtual-target {
   position: fixed;

packages/core/src/components/control-card/_control-card.scss

@@ -1,7 +1,8 @@
 // Copyright 2023 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-@import "../card/card-variables";
+@use "../../common/variables" as *;
+@use "../card/card-variables" as *;
 
 // use an extra selector to increase specificity
 .#{$ns}-card.#{$ns}-control-card {