Skip to content
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.

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

Add :host rule to @theme layer #15975

Merged
merged 7 commits into from
Jan 29, 2025

Conversation

hugo-vrijswijk
Copy link
Contributor

@hugo-vrijswijk hugo-vrijswijk commented Jan 28, 2025

Resolves #15799
Resolves #14478
Part-of #15005

Adds a :host selector for the @theme layer. This is necessary for the @theme layer to work correctly in shadow DOM.

Also updates the snapshots for the tests that were affected by this change (in a separate commit).

Test plan

Tested via the Vite playground:

Screenshot 2025-01-29 at 15 06 49

Additionally made sure that @property defaults also work across Firefox, Chrome, and Safari (the @property definition from the root is pulled in) and added a UI spec.

Fixes tailwindlabs#15799

Adds a `:host` selector for the `@theme` layer. This is necessary for the `@theme` layer to work correctly in shadow DOM.

Also updates the snapshots for the tests that were affected by this change.
@lubomirblazekcz
Copy link
Contributor

This should also fix #14478

@philipp-spiess
Copy link
Member

@hugo-vrijswijk Thanks a ton for this PR! I went ahead and did a round of testing on the known repro cases and added a test plan to your description. I also added a UI spec to ensure we have some validation. Note that because of @property not being able to be scoped to a shadow root, you still have to have the stylesheet added to the browser root too.

CHANGELOG.md Outdated Show resolved Hide resolved
@philipp-spiess philipp-spiess merged commit 9fef2bd into tailwindlabs:main Jan 29, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

tailwindcss and shadow dom not working well (--spacing) [v4] Expose CSS properties also to :host
4 participants