Include root.scss in all dist builds (#34773)

* Remove the font-family-* override vars from Reboot build * Update Reboot docs to mention CSS variables
twbs · Sep 2, 2021 · d91480e · d91480e
1 parent 283cbd9
commit d91480e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -10,11 +10,11 @@
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "2 kB"
+      "maxSize": "2.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
-      "maxSize": "2 kB"
+      "maxSize": "2.35 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
@@ -18,6 +18,8 @@ $include-column-box-sizing: true !default;
 
 @import "vendor/rfs";
 
+@import "root";
+
 @import "containers";
 @import "grid";
 

diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss
@@ -8,8 +8,6 @@
 
 @import "functions";
 @import "variables";
-// Prevent the usage of custom properties since we don't add them to `:root` in reboot
-$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default
-$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default
 @import "mixins";
+@import "root";
 @import "reboot";
diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md
@@ -18,6 +18,12 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
 - For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
 - Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
 
+## CSS variables
+
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.1</small>
+
+With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css` to include `_root.scss` . This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more CSS variables added over time.
+
 ## Page defaults
 
 The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically: