diff --git a/scss/_grid.scss b/scss/_grid.scss index 048f8009a36335c4388e41cade7ff42de1c22d45..762378dc0e7338db183a9a6891db79bc3c227527 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -2,7 +2,7 @@ // // Rows contain your columns. -:root { +@include root() { @each $name, $value in $grid-breakpoints { --#{$prefix}breakpoint-#{$name}: #{$value}; } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index e1e130b16438a516dc04a1099112239e8543f3a0..4ac6685ddc3774f93ee401761b916f4f4b1f37dc 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -17,6 +17,7 @@ @import "mixins/visually-hidden"; @import "mixins/reset-text"; @import "mixins/text-truncate"; +@import "mixins/root"; // Utilities @import "mixins/utilities"; diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 305740587b4d927bb197b958a2bd81f4bdf82284..dee1242a18fd53f5e465696aee60076a9071be19 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -25,7 +25,7 @@ // Ability to the value of the root font sizes, affecting the value of `rem`. // null by default, thus nothing is generated. -:root { +@include root() { @if $font-size-root != null { @include font-size(var(--#{$prefix}root-font-size)); } diff --git a/scss/_root.scss b/scss/_root.scss index b82759a210c8fc139d4b0590ba6a456c9a48dd32..e0ce8f63e4deca19aad01d6b6b5d884dfff09fae 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,5 +1,4 @@ -:root, -[data-bs-theme="light"] { +@include root('[data-bs-theme="light"]') { // Note: Custom variable values only support SassScript inside `#{}`. // Colors diff --git a/scss/_variables.scss b/scss/_variables.scss index 6f255d4042c892fe5ec83b2f012b394c96a318bc..ee1e28bded37db9b2143b97c1358e19214c81991 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -383,6 +383,7 @@ $enable-validation-icons: true !default; $enable-negative-margins: false !default; $enable-deprecation-messages: true !default; $enable-important-utilities: true !default; +$enable-host: false !default; $enable-dark-mode: true !default; $color-mode-type: data !default; // `data` or `media-query` diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 0ea62372e2ca9e795c35753b4a6a38916a773a75..c9f80f633d54ea528b60d1926d214fb192152c6e 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -13,6 +13,7 @@ $include-column-box-sizing: true !default; @import "mixins/container"; @import "mixins/grid"; @import "mixins/utilities"; +@import "mixins/root"; @import "vendor/rfs"; diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss index 03338b0256759f7d71560864801cda8cadf9a4bf..bdc41e41b9015de10a0228b095ec3fea05823df3 100644 --- a/scss/mixins/_color-mode.scss +++ b/scss/mixins/_color-mode.scss @@ -3,7 +3,7 @@ @if $color-mode-type == "media-query" { @if $root == true { @media (prefers-color-scheme: $mode) { - :root { + @include root() { @content; } } diff --git a/scss/mixins/_root.scss b/scss/mixins/_root.scss new file mode 100644 index 0000000000000000000000000000000000000000..72c3661d44de3caab583bafe3a7d73bad20d76ae --- /dev/null +++ b/scss/mixins/_root.scss @@ -0,0 +1,7 @@ +@mixin root($extra_selector: "") { + $extra_selector: if($enable-host, ":host", ":root") if($extra_selector, ", " + $extra_selector, ""); // stylelint-disable-line scss/dollar-variable-pattern + + #{$extra_selector} { + @content; + } +} diff --git a/scss/tests/mixins/_root.test.scss b/scss/tests/mixins/_root.test.scss new file mode 100644 index 0000000000000000000000000000000000000000..64c678f42d53d462be0848a468dab5d33a40f7f2 --- /dev/null +++ b/scss/tests/mixins/_root.test.scss @@ -0,0 +1,75 @@ +@import "../../functions"; +@import "../../mixins"; +@import "../../variables"; + +@include describe("global $enable-host: false") { + @include it("generates :root selector for web components") { + @include assert() { + @include output() { + @include root() { + --test: 1; + } + } + @include expect() { + :root { + --test: 1; + } + } + } + } +} + +@include describe("global $enable-host: false") { + @include it("generates :root, [data-bs-theme=light] selector for web components") { + @include assert() { + @include output() { + @include root("[data-bs-theme=light]") { + --test: 1; + } + } + @include expect() { + :root, + [data-bs-theme="light"] { + --test: 1; + } + } + } + } +} + +$enable-host: true !global; + +@include describe("global $enable-host: true") { + @include it("generates :host selector for web components") { + @include assert() { + @include output() { + @include root() { + --test: 1; + } + } + @include expect() { + :host { + --test: 1; + } + } + } + } +} + +@include describe("global $enable-host: true") { + @include it("generates :root, [data-bs-theme=light] selector for web components") { + @include assert() { + @include output() { + @include root("[data-bs-theme=light]") { + --test: 1; + } + } + @include expect() { + :host, + [data-bs-theme="light"] { + --test: 1; + } + } + } + } +} diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md index ffb40c0c4a4a014c6dc33fb888199b068a7c467a..333c7d16b0f6de904c4887149e1824adc5d6a378 100644 --- a/site/content/docs/5.3/customize/css-variables.md +++ b/site/content/docs/5.3/customize/css-variables.md @@ -18,35 +18,10 @@ Here are the variables we include (note that the `:root` is required) that can b These CSS variables are available everywhere, regardless of color mode. -```css -{{< root.inline >}} -{{- $css := readFile "dist/css/bootstrap.css" -}} -{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}} - -{{- if (eq (len $match) 0) -}} -{{- errorf "Got no matches for :root in %q!" $.Page.Path -}} -{{- end -}} - -{{- index $match 0 -}} - -{{< /root.inline >}} -``` - ### Dark mode These variables are scoped to our built-in dark mode. -```css -{{< root.inline >}} -{{- $css := readFile "dist/css/bootstrap.css" -}} -{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}} -{{- if (eq (len $match) 0) -}} -{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}} -{{- end -}} -{{- index $match 0 -}} -{{< /root.inline >}} -``` - ## Component variables Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.