From 992d0dfc5268b25b6d135cdc7cf78d4c4d607c72 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Fri, 13 Feb 2026 09:53:31 -0600 Subject: [PATCH 1/5] Refactor: Scope Tailwind preflight resets Move Tailwind preflight resets to be scoped within the `[data-yv-sdk]` attribute. This prevents them from affecting consumer application styles while still applying necessary resets to SDK components. --- packages/ui/src/styles/global.css | 153 +++++++++++++++++++++++++++++- 1 file changed, 151 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css index 652cf7b4..ce85248b 100644 --- a/packages/ui/src/styles/global.css +++ b/packages/ui/src/styles/global.css @@ -20,13 +20,162 @@ * Note: CSS linter warnings on these imports are a known issue and do not * affect functionality. */ -@import 'tailwindcss/preflight.css' prefix(yv); +/* + * NOTE: We intentionally do NOT import 'tailwindcss/preflight.css' globally. + * Instead, preflight resets are scoped to [data-yv-sdk] below so our SDK + * components get the reset without nuking consumer app styles. + */ @import 'tailwindcss/theme.css' prefix(yv); @import 'tailwindcss/utilities.css' prefix(yv); - @import 'tw-animate-css'; @import './bible-reader.css'; +/* #region Scoped Preflight — only resets elements inside [data-yv-sdk] */ +[data-yv-sdk] { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + -webkit-tap-highlight-color: transparent; + + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: inherit; + font-weight: inherit; + } + + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + + b, + strong { + font-weight: bolder; + } + + code, + kbd, + samp, + pre { + font-family: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', + monospace; + font-size: 1em; + } + + small { + font-size: 80%; + } + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + + ol, + ul, + menu { + list-style: none; + } + + img, + svg, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; + vertical-align: middle; + } + + img, + video { + max-width: 100%; + height: auto; + } + + button, + input, + select, + optgroup, + textarea, + ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + + ::placeholder { + opacity: 1; + } + + textarea { + resize: vertical; + } + + button, + input:where([type='button'], [type='reset'], [type='submit']), + ::file-selector-button { + appearance: button; + } + + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; + } +} +/* #endregion Scoped Preflight */ + /* #region shadcn UI theme */ @custom-variant dark (&:is([data-yv-sdk][data-yv-theme='dark'] *)); From 46d4475706f01d3f4dfa66ff432f206a5cea7e2d Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Fri, 13 Feb 2026 09:56:08 -0600 Subject: [PATCH 2/5] Docs: Created changeset --- .changeset/scope-preflight-css.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/scope-preflight-css.md diff --git a/.changeset/scope-preflight-css.md b/.changeset/scope-preflight-css.md new file mode 100644 index 00000000..65df1bbb --- /dev/null +++ b/.changeset/scope-preflight-css.md @@ -0,0 +1,7 @@ +--- +'@youversion/platform-react-ui': patch +'@youversion/platform-core': patch +'@youversion/platform-react-hooks': patch +--- + +Fix Tailwind preflight CSS leaking globally into consumer apps. The unscoped `@import 'tailwindcss/preflight.css'` was resetting styles on all elements (h1–h6 font size/weight, margins, padding, list styles, etc.) across the entire page. Preflight resets are now scoped to `[data-yv-sdk]` so they only apply inside SDK components. From 7e248f68743d43e780c379cf7ab8ae8097c6f863 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Fri, 13 Feb 2026 11:31:59 -0600 Subject: [PATCH 3/5] Refactor Scoped Preflight CSS selectors Use `:where()` to reduce specificity of Tailwind's reset CSS within `[data-yv-sdk]`. This ensures that user-provided styles will correctly override the reset. --- packages/ui/src/styles/global.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css index ce85248b..598b3c32 100644 --- a/packages/ui/src/styles/global.css +++ b/packages/ui/src/styles/global.css @@ -30,8 +30,13 @@ @import 'tw-animate-css'; @import './bible-reader.css'; -/* #region Scoped Preflight — only resets elements inside [data-yv-sdk] */ -[data-yv-sdk] { +/* #region Tailwind's Reset CSS, scoped to [data-yv-sdk] */ +/* + * :where() is a CSS pseudo-class that drops the specificity of + * everything inside it to zero (0,0,0,0). The selectors still + * match, but they never win a specificity fight. This is desired. + */ +:where([data-yv-sdk]) { *, ::after, ::before, From def791ff8726cc0ac6eed35865a1abbbcc604d47 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Mon, 16 Feb 2026 11:59:37 -0600 Subject: [PATCH 4/5] fix(style): render font properly on popovers --- packages/ui/src/styles/global.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css index 598b3c32..aac992ac 100644 --- a/packages/ui/src/styles/global.css +++ b/packages/ui/src/styles/global.css @@ -89,9 +89,7 @@ kbd, samp, pre { - font-family: - ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', - monospace; + font-family: var(--yv-font-mono); font-size: 1em; } @@ -152,6 +150,7 @@ textarea, ::file-selector-button { font: inherit; + font-family: var(--yv-font-sans), var(--yv-font-serif); font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; From 624e1dd4877d2bbf5f25363aa77a1d8f5b2f3f05 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Mon, 16 Feb 2026 12:01:35 -0600 Subject: [PATCH 5/5] Apply the correct font defaults for the CSS reset. --- packages/ui/src/styles/global.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css index aac992ac..2d9a3b28 100644 --- a/packages/ui/src/styles/global.css +++ b/packages/ui/src/styles/global.css @@ -42,6 +42,8 @@ ::before, ::backdrop, ::file-selector-button { + font: inherit; + font-family: var(--yv-font-sans); box-sizing: border-box; margin: 0; padding: 0; @@ -150,7 +152,7 @@ textarea, ::file-selector-button { font: inherit; - font-family: var(--yv-font-sans), var(--yv-font-serif); + font-family: var(--yv-font-sans); font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit;