Skip to content

Fix CSS layer scoping and priority for host app compatibility #963

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ted-palmer merged 2 commits into from
Mar 5, 2026
Merged

Fix CSS layer scoping and priority for host app compatibility #963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e04e4f
Fix CSS layer scoping and priority for host app compatibility
ted-palmer Mar 5, 2026
a7b4541
feat: changeset
ted-palmer Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/yellow-meals-sink.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@relayprotocol/relay-kit-ui': patch
---

Fix CSS layer scoping and priority for host app compatibility
8 changes: 4 additions & 4 deletions packages/ui/scripts/scope-css.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* library from polluting the consuming app's global CSS namespace.
*
* Tailwind v4 generates:
* 1. @layer theme { :root, :host { --relay-* } }
* 1. @layer relay-theme { :root, :host { --relay-* } }
* → Scope :root,:host to .relay-kit-reset
* 2. @property --tw-* { ... }
* → Cannot be scoped (global by CSS spec). Low risk since
Expand All @@ -22,18 +22,18 @@ const cssPath = resolve(__dirname, '../dist/styles.css')
let css = readFileSync(cssPath, 'utf-8')

// 1. Scope the theme layer's `:root, :host` block.
// Pattern: `@layer theme { :root, :host { ... } }`
// Pattern: `@layer relay-theme { :root, :host { ... } }`
// We scope each selector to `.relay-kit-reset`.
css = css.replace(
/(@layer\s+theme\s*\{)\s*(:root\s*,\s*:host)\s*\{/,
/(@layer\s+relay-theme\s*\{)\s*(:root\s*,\s*:host)\s*\{/,
'$1\n .relay-kit-reset {'
)

// 2. Scope the properties layer's `*, ::before, ::after, ::backdrop` block.
// Pattern: `*, ::before, ::after, ::backdrop { --tw-*: ...; }`
// This is inside @layer properties { @supports(...) { ... } }
css = css.replace(
/(\*\s*,\s*::before\s*,\s*::after\s*,\s*::backdrop)\s*\{([^}]*--tw-[^}]*)\}/g,
/(\*\s*,\s*:?:before\s*,\s*:?:after\s*,\s*::backdrop)\s*\{([^}]*--tw-[^}]*)\}/g,
(match, selector, body) => {
const declarations = body.split(';').map((d) => d.trim()).filter(Boolean)
const allTwVars = declarations.every((d) => d.startsWith('--tw-'))
Expand Down
10 changes: 5 additions & 5 deletions packages/ui/src/styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) prefix(relay);
@import "tailwindcss/utilities.css" layer(utilities) prefix(relay);
@layer reset, base, tokens, recipes, utilities, theme, components, relay-theme, relay-base, relay-components, relay-utilities;
@import "tailwindcss/theme.css" layer(relay-theme) prefix(relay);
@import "tailwindcss/utilities.css" layer(relay-utilities) prefix(relay);

@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));

Expand Down Expand Up @@ -144,10 +144,10 @@

/* ===================================================================
CSS Reset (scoped to .relay-kit-reset)
Wrapped in @layer base so it appears BEFORE @tailwind utilities
Wrapped in @layer relay-base so it appears BEFORE @tailwind utilities
in the output. This ensures utility classes always win over the reset.
=================================================================== */
@layer base {
@layer relay-base {

.relay-kit-reset {
--font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
Expand Down