feat(apollo-wind): add shadow DOM CSS injection utilities#830
Draft
david-rios-uipath wants to merge 3 commits into
Draft
feat(apollo-wind): add shadow DOM CSS injection utilities#830david-rios-uipath wants to merge 3 commits into
david-rios-uipath wants to merge 3 commits into
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
There was a problem hiding this comment.
⚠️ Not ready to approve
The new helper claims idempotency but the unit tests don’t currently assert the idempotent behavior, leaving a key behavior unverified.
Pull request overview
Adds a new @uipath/apollo-wind utility to support Tailwind v4 inside Shadow DOM by extracting @property at-rules from a CSS string and registering them globally via a single marker <style> in document.head.
Changes:
- Introduces
registerCssPropertyRules(css)to extract Tailwind@propertyrules and inject them once at the document level. - Adds unit tests verifying extraction and filtering behavior.
- Exports the new utility from both the internal lib barrel and the public package entry point.
File summaries
| File | Description |
|---|---|
| packages/apollo-wind/src/lib/register-shadow-dom-properties.ts | Implements registerCssPropertyRules with regex-based extraction and idempotent DOM marker injection. |
| packages/apollo-wind/src/lib/register-shadow-dom-properties.test.ts | Adds tests for extraction, filtering, and (needs adjustment) idempotency coverage. |
| packages/apollo-wind/src/lib/index.ts | Re-exports the helper from the lib barrel. |
| packages/apollo-wind/src/index.ts | Re-exports the helper from the public API. |
Copilot's findings
- Files reviewed: 4/4 changed files
- Comments generated: 2
Note
Your feedback helps us improve the quality of this feature.
Please use 👍 or 👎 to tell us whether this assessment is correct.
Comment on lines
+44
to
+49
| it('does nothing when CSS has no @property rules', () => { | ||
| registerCssPropertyRules('.flex { display: flex; }'); | ||
|
|
||
| expect(document.querySelector(SELECTOR)).toBeNull(); | ||
| }); | ||
| }); |
david-rios-uipath
added
the
dev-packages
Contributor
📦 Dev Packages
|
Contributor
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
3 tasks
david-rios-uipath
force-pushed
the
rios/shadow-dom-property-registration
branch
from
9d18f76 to
074dd34
Compare
david-rios-uipath
changed the title
Browsers silently ignore @Property rules inside shadow DOM <style> elements, breaking Tailwind v4 composable utilities (border, shadow, ring, translate). Every shadow DOM consumer was reimplementing the same inject + register dance. New exports: - injectTailwindIntoShadowRoot(root, css) — injects stylesheet + registers @Property rules - hasApolloWindCss(root) — two-level detection (tag check + computed-style probes) - TAILWIND_INJECT_ATTR — sentinel attribute constant
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
david-rios-uipath
force-pushed
the
rios/shadow-dom-property-registration
branch
from
074dd34 to
93f0ca3
Compare
Comment on lines
+32
to
+50
| export function hasApolloWindCss(root: Document | ShadowRoot): boolean { | ||
| if (root.querySelector(`style[${TAILWIND_INJECT_ATTR}]`)) { | ||
| return true; | ||
| } | ||
|
|
||
| const probeParent = root instanceof Document ? root.body : root; | ||
| const probe = document.createElement('div'); | ||
| probeParent.appendChild(probe); | ||
|
|
||
| try { | ||
| const computed = getComputedStyle(probe); | ||
| return PROBES.every((p) => { | ||
| probe.className = p.className; | ||
| return computed.getPropertyValue(p.property) === p.expected; | ||
| }); | ||
| } finally { | ||
| probe.remove(); | ||
| } | ||
| } |
Comment on lines
+35
to
+37
| if (typeof document === 'undefined') return; | ||
| if (document.querySelector(`style[${MARKER}]`)) return; | ||
|
|
david-rios-uipath
force-pushed
the
rios/shadow-dom-property-registration
branch
from
4948996 to
72a6254
Compare
Comment on lines
+37
to
+46
| const probeParent = root instanceof Document ? root.body : root; | ||
| const probe = document.createElement('div'); | ||
| probeParent.appendChild(probe); | ||
|
|
||
| try { | ||
| const computed = getComputedStyle(probe); | ||
| return PROBES.every((p) => { | ||
| probe.className = p.className; | ||
| return computed.getPropertyValue(p.property) === p.expected; | ||
| }); |
Comment on lines
+75
to
+80
| const style = document.createElement('style'); | ||
| style.setAttribute(TAILWIND_INJECT_ATTR, ''); | ||
| style.textContent = css; | ||
| root.prepend(style); | ||
| registerCssPropertyRules(css); | ||
| return style; |
Comment on lines
+33
to
+44
| export function registerCssPropertyRules(css: string): void { | ||
| if (typeof document === 'undefined') return; | ||
| if (document.querySelector(`style[${MARKER}]`)) return; | ||
|
|
||
| const rules = extractPropertyRules(css); | ||
| if (rules.length === 0) return; | ||
|
|
||
| const style = document.createElement('style'); | ||
| style.setAttribute(MARKER, ''); | ||
| style.textContent = rules.join('\n'); | ||
| document.head.appendChild(style); | ||
| } |
Contributor
Author
There was a problem hiding this comment.
Both points are intentional:
-
Single-call idempotency: There's one CSS bundle (
tailwind.canvas.css). This function is@internal— onlyinjectTailwindIntoShadowRootcalls it, always with the same CSS. Merge logic would be dead code. -
Global
document: The consumer (TraceView web component) always runs in the host page's document, never in iframes. Adding an optionalDocumentparameter complicates the API for a nonexistent scenario.
david-rios-uipath
force-pushed
the
rios/shadow-dom-property-registration
branch
from
0f0885d to
96d87ea
Compare
Comment on lines
+37
to
+39
| const probeParent = root instanceof Document ? root.body : root; | ||
| const probe = document.createElement('div'); | ||
| probeParent.appendChild(probe); |
Comment on lines
+33
to
+44
| export function registerCssPropertyRules(css: string): void { | ||
| if (typeof document === 'undefined') return; | ||
| if (document.querySelector(`style[${MARKER}]`)) return; | ||
|
|
||
| const rules = extractPropertyRules(css); | ||
| if (rules.length === 0) return; | ||
|
|
||
| const style = document.createElement('style'); | ||
| style.setAttribute(MARKER, ''); | ||
| style.textContent = rules.join('\n'); | ||
| document.head.appendChild(style); | ||
| } |
Comment on lines
+29
to
+33
| afterEach(() => { | ||
| document.querySelectorAll(SELECTOR).forEach((el) => { el.remove(); }); | ||
| document.querySelectorAll(PROPERTY_SELECTOR).forEach((el) => { el.remove(); }); | ||
| document.querySelectorAll('div').forEach((el) => { el.parentNode?.removeChild(el); }); | ||
| }); |
Comment on lines
+37
to
+39
| const probeParent = root instanceof Document ? root.body : root; | ||
| const probe = document.createElement('div'); | ||
| probeParent.appendChild(probe); |
Comment on lines
+42
to
+46
| const computed = getComputedStyle(probe); | ||
| return PROBES.every((p) => { | ||
| probe.className = p.className; | ||
| return computed.getPropertyValue(p.property) === p.expected; | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds reusable utilities for injecting apollo-wind Tailwind CSS into shadow DOM. Browsers silently ignore
@propertyrules inside shadow root<style>elements, breaking Tailwind v4 composable utilities (border,shadow-*,ring-*,translate-*). Every shadow DOM consumer was reimplementing the same inject + register dance — this PR consolidates it.See upstream discussion: tailwindlabs/tailwindcss#16772
Immediate consumer:
@uipath/traceview— migrating shared components from MUI to apollo-wind (Radix), which portal inside a shadow root.New exports
injectTailwindIntoShadowRoot(root, css)— injects a<style data-tailwind-inject>into the shadow root and registers@propertyrules at the document level. Idempotent. Returns the createdHTMLStyleElement(ornullif skipped) so callers can clean up on unmount.hasApolloWindCss(root)— two-level detection: fast-path tag check + computed-style probes (grid/flex/hidden/relative). Deliberately avoids probing custom properties (they inherit across the shadow boundary and would false-positive).TAILWIND_INJECT_ATTR— sentinel attribute constant (data-tailwind-inject).Usage
Changes
src/lib/register-shadow-dom-properties.ts— internal helper that extracts@propertyrules via regex and injects intodocument.head. Idempotent, SSR-safe.src/lib/shadow-dom-css.ts— the public API:injectTailwindIntoShadowRoot,hasApolloWindCss,TAILWIND_INJECT_ATTR. CallsregisterCssPropertyRulesinternally.src/lib/index.tsandsrc/index.ts— export the public API.Testing
pnpm --filter @uipath/apollo-wind testpasses (923 tests)pnpm --filter @uipath/apollo-wind build— new exports indist/index.d.ts🤖 Generated with Claude Code