test(query-devtools/contexts/PiPContext): add tests for 'requestPipWindow' copying parent stylesheets into the PiP document head by sukvvon · Pull Request #10800 · TanStack/query

sukvvon · 2026-05-25T19:03:21Z

🎯 Changes

Cover the three branches of the stylesheet copy loop in requestPipWindow (PiPContext.tsx:85-117) — the logic the module owns to make Devtools render styled inside the popup that wouldn't otherwise inherit any parent CSS:

should copy parent stylesheets as "<style>" with the same id into the PiP document head: verifies the same-origin path — cssText is concatenated into a new <style> and the source id is propagated so goober's #_goober mirror keeps working.
should fall back to a "<link>" for cross-origin stylesheets whose "cssRules" throw: verifies the cross-origin path — when reading cssRules raises (Google Fonts, CDN-served CSS), the module reattaches the same href as a <link> so the popup can still load it.
should skip the "<link>" fallback when the cross-origin stylesheet has no "href": verifies the href == null guard that prevents an empty <link> from being appended.

A small stubParentStyleSheet(sheet) helper plus a FakeStyleSheet type wraps vi.spyOn(document, 'styleSheets', 'get') so each case only declares the fields the production loop actually reads (cssRules, href, type, media, ownerNode). A makeCssRules(...cssTexts) helper builds the ArrayLike shape the production spread expects without an as unknown as CSSRuleList cast at the call sites.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Tests
- Added test suite for stylesheet propagation in Picture-in-Picture windows, ensuring styles are properly replicated when using the PiP feature.

…ndow' copying parent stylesheets into the PiP document head

coderabbitai · 2026-05-25T19:03:36Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b0b75b81-f981-4a2c-b3ec-f43eb733b6df

📥 Commits

Reviewing files that changed from the base of the PR and between 1b7d28a and 3bf50d2.

📒 Files selected for processing (1)

packages/query-devtools/src/__tests__/contexts/PiPContext.test.tsx

📝 Walkthrough

Walkthrough

This PR adds a test suite verifying how PiPProvider replicates parent document stylesheets into the PiP window head. The tests validate three stylesheet scenarios: accessible same-origin stylesheets copied as <style> elements, cross-origin stylesheets with inaccessible cssRules falling back to <link> elements, and missing-href stylesheets skipped entirely.

Changes

PiP stylesheet propagation tests

Layer / File(s)	Summary
Stylesheet propagation test suite `packages/query-devtools/src/__tests__/contexts/PiPContext.test.tsx`	Tests added for stylesheet replication into PiP document head: same-origin stylesheets copied as `<style>` elements preserving id, cross-origin stylesheets with throwing `cssRules` fall back to `<link rel="stylesheet">`, and stylesheets without `href` are skipped.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

TanStack/query#10796: Adds related test coverage for usePiPWindow and PiPProvider behavior, extending PiP window functionality testing.

Suggested labels

package: query-devtools

Poem

🐰 A stylesheet test hops by,
Checking styles reach PiP's sky,
Same-origin or cross-domain far—
All paths tested, nothing left to mar!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding tests for stylesheet propagation in the requestPipWindow function for the PiPContext module.
Description check	✅ Passed	The description comprehensively covers all required sections with detailed explanations of the three test cases, helper functions, and a completed checklist confirming testing and contribution guidelines compliance.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch test/query-devtools-pipcontext-stylesheet-propagation

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-05-25T19:03:46Z

View your CI Pipeline Execution ↗ for commit 3bf50d2

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	3m 33s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	27s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-25 19:07:46 UTC

github-actions · 2026-05-25T19:04:01Z

🚀 Changeset Version Preview

2 package(s) bumped directly, 23 bumped as dependents.

🟩 Patch bumps

Package	Version	Reason
`@tanstack/lit-query`	0.2.6 → 0.2.7	Changeset
`@tanstack/query-devtools`	5.100.14 → 5.100.15	Changeset
`@tanstack/angular-query-experimental`	5.100.14 → 5.100.15	Dependent
`@tanstack/angular-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/eslint-plugin-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/preact-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/preact-query-devtools`	5.100.14 → 5.100.15	Dependent
`@tanstack/preact-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-async-storage-persister`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-broadcast-client-experimental`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-core`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-persist-client-core`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-sync-storage-persister`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query-devtools`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query-next-experimental`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/solid-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/solid-query-devtools`	5.100.14 → 5.100.15	Dependent
`@tanstack/solid-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/svelte-query`	6.1.33 → 6.1.34	Dependent
`@tanstack/svelte-query-devtools`	6.1.33 → 6.1.34	Dependent
`@tanstack/svelte-query-persist-client`	6.1.33 → 6.1.34	Dependent
`@tanstack/vue-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/vue-query-devtools`	6.1.33 → 6.1.34	Dependent

pkg-pr-new · 2026-05-25T19:06:45Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10800

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10800

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@10800

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10800

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10800

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10800

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10800

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10800

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10800

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10800

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10800

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10800

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10800

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10800

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10800

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10800

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10800

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10800

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10800

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10800

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10800

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10800

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10800

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10800

commit: 3bf50d2

github-actions · 2026-05-25T19:07:25Z

size-limit report 📦

Path	Size
react full	12.11 KB (0%)
react minimal	9.08 KB (0%)

test(query-devtools/contexts/PiPContext): add tests for 'requestPipWi…

3bf50d2

…ndow' copying parent stylesheets into the PiP document head

sukvvon self-assigned this May 25, 2026

sukvvon merged commit 8c66649 into main May 25, 2026
9 checks passed

sukvvon deleted the test/query-devtools-pipcontext-stylesheet-propagation branch May 25, 2026 19:11

coderabbitai Bot mentioned this pull request May 26, 2026

test(query-devtools/contexts/PiPContext): add tests for the '#_goober' MutationObserver observing and mirroring parent style mutations #10804

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/contexts/PiPContext): add tests for 'requestPipWindow' copying parent stylesheets into the PiP document head#10800

test(query-devtools/contexts/PiPContext): add tests for 'requestPipWindow' copying parent stylesheets into the PiP document head#10800
sukvvon merged 1 commit into
mainfrom
test/query-devtools-pipcontext-stylesheet-propagation

sukvvon commented May 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 25, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented May 25, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 25, 2026

Uh oh!

pkg-pr-new Bot commented May 25, 2026

Uh oh!

github-actions Bot commented May 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 25, 2026

🚀 Changeset Version Preview

🟩 Patch bumps

Uh oh!

pkg-pr-new Bot commented May 25, 2026

Uh oh!

github-actions Bot commented May 25, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 25, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 25, 2026 •

edited

Loading

nx-cloud Bot commented May 25, 2026 •

edited

Loading