From 19cf42e0576cbe2b51b993ba5e94133a00e8d67c Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Tue, 23 Sep 2025 23:10:02 -0700
Subject: [PATCH] Use `@forward` instead of `@use` for proper customization
 (#41762)

* Use `@forward` instead of `@use` for proper customization

* linty linterson

* woof
---
 scss/bootstrap-utilities.scss               |  6 +--
 scss/bootstrap.scss                         | 56 ++++++++++-----------
 scss/tests/jasmine.js                       |  2 +-
 scss/tests/modules/_configuration.test.scss | 52 +++++++++++++++++++
 4 files changed, 84 insertions(+), 32 deletions(-)
 create mode 100644 scss/tests/modules/_configuration.test.scss

diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss
index e1c0ed9119..cf9f3363e7 100644
--- a/scss/bootstrap-utilities.scss
+++ b/scss/bootstrap-utilities.scss
@@ -6,11 +6,11 @@
 // @forward "variables";
 
 // Layout & components
-@use "root" as *;
+@forward "root";
 
 // Helpers
 @forward "helpers";
 
 // Utilities
-@use "utilities" as *;
-@use "utilities/api";
+@forward "utilities";
+@forward "utilities/api";
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 328222c48d..57f8ed03bc 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,40 +1,40 @@
-@use "banner";
+@forward "banner";
 
 // scss-docs-start import-stack
 // Global CSS variables, layer definitions, and configuration
-@use "root";
+@forward "root";
 
 // Subdir imports
-@use "content";
-@use "layout";
-@use "forms";
-@use "buttons";
+@forward "content";
+@forward "layout";
+@forward "forms";
+@forward "buttons";
 
 // Components
-@use "accordion";
-@use "alert";
-@use "badge";
-@use "breadcrumb";
-@use "card";
-@use "carousel";
-@use "dropdown";
-@use "list-group";
-@use "modal";
-@use "nav";
-@use "navbar";
-@use "offcanvas";
-@use "pagination";
-@use "placeholders";
-@use "popover";
-@use "progress";
-@use "spinners";
-@use "toasts";
-@use "tooltip";
-@use "transitions";
+@forward "accordion";
+@forward "alert";
+@forward "badge";
+@forward "breadcrumb";
+@forward "card";
+@forward "carousel";
+@forward "dropdown";
+@forward "list-group";
+@forward "modal";
+@forward "nav";
+@forward "navbar";
+@forward "offcanvas";
+@forward "pagination";
+@forward "placeholders";
+@forward "popover";
+@forward "progress";
+@forward "spinners";
+@forward "toasts";
+@forward "tooltip";
+@forward "transitions";
 
 // Helpers
-@use "helpers";
+@forward "helpers";
 
 // Utilities
-@use "utilities/api";
+@forward "utilities/api";
 // scss-docs-end import-stack
diff --git a/scss/tests/jasmine.js b/scss/tests/jasmine.js
index 1b6004a0d4..d4ad8ea8ba 100644
--- a/scss/tests/jasmine.js
+++ b/scss/tests/jasmine.js
@@ -8,7 +8,7 @@ module.exports = {
   spec_dir: 'scss',
   // Make Jasmine look for `.test.scss` files
   // spec_files: ['**/*.{test,spec}.scss'],
-  spec_files: ['**/_utilities.test.scss'],
+  spec_files: ['**/_utilities.test.scss', '**/modules/_configuration.test.scss'],
   // Compile them into JS scripts running `sass-true`
   requires: [path.join(__dirname, 'sass-true/register')],
   // Ensure we use `require` so that the require.extensions works
diff --git a/scss/tests/modules/_configuration.test.scss b/scss/tests/modules/_configuration.test.scss
new file mode 100644
index 0000000000..656ea7eb25
--- /dev/null
+++ b/scss/tests/modules/_configuration.test.scss
@@ -0,0 +1,52 @@
+// Test @use with configuration syntax using a single module instance
+@use "../../alert" as * with (
+  $alert-margin-bottom: 3rem,
+  $alert-link-font-weight: 800
+);
+@use "../../variables" as *;
+
+$true-terminal-output: false;
+
+@include describe("Bootstrap module configuration") {
+  @include describe("@use with configuration syntax") {
+    @include it("should allow configuring alert variables with @use ... with") {
+      @include assert() {
+        @include output() {
+          .test {
+            margin-bottom: $alert-margin-bottom;
+            font-weight: $alert-link-font-weight;
+          }
+        }
+
+        @include expect() {
+          .test {
+            margin-bottom: 3rem;
+            font-weight: 800;
+          }
+        }
+      }
+    }
+
+    @include it("should maintain other alert variables with default values") {
+      @include assert() {
+        @include output() {
+          .test {
+            padding-y: $alert-padding-y;
+            padding-x: $alert-padding-x;
+            // stylelint-disable-next-line property-disallowed-list
+            border-radius: $alert-border-radius;
+          }
+        }
+
+        @include expect() {
+          .test {
+            padding-y: 1rem;
+            padding-x: 1rem;
+            // stylelint-disable-next-line property-disallowed-list
+            border-radius: var(--bs-border-radius);
+          }
+        }
+      }
+    }
+  }
+}
-- 
2.47.3