Use `@forward` instead of `@use` for proper customization (#41762)

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

* linty linterson

* woof

diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss
index e1c0ed9119979d63be00ae219ab84a8e6d14e694..cf9f3363e72421bb7e93ea8514e5a9163f19ca24 100644 (file)
--- 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 328222c48d5ab4960eed70639a2f2ef5d24649e8..57f8ed03bc309768ef531a11b49cfdacf38613e9 100644 (file)
--- 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 1b6004a0d4886876ef406c6b8c5b54adc899d0dd..d4ad8ea8ba40aee47e3c33687877edee70f0adf8 100644 (file)
--- 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 (file)
index 0000000..656ea7e
--- /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);
+          }
+        }
+      }
+    }
+  }
+}