From b615c45420d68e0741f9564bf3a0c50f8577ac82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Wed, 8 Feb 2023 20:56:16 +0100
Subject: [PATCH] Combine :host to :root so that Web Components can access CSS
vars
---
scss/_grid.scss | 3 ++-
scss/_reboot.scss | 3 ++-
scss/_root.scss | 1 +
scss/_variables.scss | 2 +-
scss/mixins/_color-mode.scss | 2 +-
site/content/docs/5.3/customize/css-variables.md | 2 +-
6 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 048f8009a3..9c2e6270c5 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -2,7 +2,8 @@
//
// Rows contain your columns.
-:root {
+:root,
+:host {
@each $name, $value in $grid-breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
}
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 305740587b..f83bfba9c1 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -25,7 +25,8 @@
// Ability to the value of the root font sizes, affecting the value of `rem`.
// null by default, thus nothing is generated.
-:root {
+:root,
+:host {
@if $font-size-root != null {
@include font-size(var(--#{$prefix}root-font-size));
}
diff --git a/scss/_root.scss b/scss/_root.scss
index b82759a210..a10221a31e 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,4 +1,5 @@
:root,
+:host,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6f255d4042..db05cc44f5 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -387,7 +387,7 @@ $enable-important-utilities: true !default;
$enable-dark-mode: true !default;
$color-mode-type: data !default; // `data` or `media-query`
-// Prefix for :root CSS variables
+// Prefix for ':root, :host' CSS variables
$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !default;
diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss
index 03338b0256..822dbec1a7 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 {
+ :root, :host {
@content;
}
}
diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md
index ffb40c0c4a..f746660150 100644
--- a/site/content/docs/5.3/customize/css-variables.md
+++ b/site/content/docs/5.3/customize/css-variables.md
@@ -21,7 +21,7 @@ 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 -}}
+{{- $match := findRE `:root,\n:host,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}}
{{- if (eq (len $match) 0) -}}
{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
--
GitLab