From 9faf10958b880067cacdd0ef3c4bf9e64172ed91 Mon Sep 17 00:00:00 2001 From: Brandon McConnell Date: Fri, 8 Sep 2023 08:46:57 -0700 Subject: [PATCH] Update Preflight `html` styles to include shadow DOM `:host` pseudo-class (#11200) * Extend current preflight `html` styles to support other root/host scopes Supports SVG root scope, ShadowDOM, and presumably other root scopes * Replace `:root` with `html` * Update tests * Update changelog --------- Co-authored-by: Jonathan Reinink --- CHANGELOG.md | 1 + src/css/preflight.css | 3 ++- tests/plugins/__snapshots__/preflight.test.js.snap | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cf840ade8..692533c2e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320)) - Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist ([#11402](https://github.com/tailwindlabs/tailwindcss/pull/11402), [#11412](https://github.com/tailwindlabs/tailwindcss/pull/11412)) - Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832)) +- Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200)) ### Changed diff --git a/src/css/preflight.css b/src/css/preflight.css index c2835c71e..bebba4dd2 100644 --- a/src/css/preflight.css +++ b/src/css/preflight.css @@ -26,7 +26,8 @@ 6. Use the user's configured `sans` font-variation-settings by default. */ -html { +html, +:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ diff --git a/tests/plugins/__snapshots__/preflight.test.js.snap b/tests/plugins/__snapshots__/preflight.test.js.snap index 45cae8b69..fa02b05ea 100644 --- a/tests/plugins/__snapshots__/preflight.test.js.snap +++ b/tests/plugins/__snapshots__/preflight.test.js.snap @@ -11,7 +11,7 @@ exports[`should test the 'preflight' plugin 1`] = ` --tw-content: ""; } -html { +html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; font-feature-settings: normal; @@ -208,7 +208,7 @@ exports[`should test the 'preflight' plugin 2`] = ` --tw-content: ""; } -html { +html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; font-feature-settings: normal;