fix(query-devtools): set window.__nonce__ in setupStyleSheet

[842u]

🎯 Changes

Fixes #10820

Problem

When passing styleNonce to <ReactQueryDevtools>, user still receive CSP violations for the
devtools <style> element even though the nonce prop is correctly provided.

Root cause

The devtools use goober for CSS-in-JS. Goober uses window.__nonce__ as
its CSP hook, reading it every time it creates or accesses its style element. Since setupStyleSheet
never set it, goober always overwrote the nonce with undefined, causing the CSP violation.

Solution

Set window.__nonce__ inside setupStyleSheet before the element is created or inserted:

export const setupStyleSheet = (nonce?: string, target?: ShadowRoot) => {
  if (!nonce) return
  
  ;(window as any).__nonce__ = nonce

  // ... rest unchanged
}

✅ 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

• Bug Fixes

  • Improved CSP nonce handling in DevTools so the provided nonce is preserved during stylesheet generation, reducing the chance of CSP violations.

• Tests

  • Added coverage to confirm nonce behavior during stylesheet setup.
  • Updated test cleanup to clear global nonce state between runs to prevent cross-test leakage.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

setupStyleSheet now writes the provided nonce to window.__nonce__ before Goober uses the devtools style element. Tests cover the new global side effect and reset it between cases. A changeset documents the patch.

Changes

CSP Nonce Propagation

Layer / File(s)	Summary
setupStyleSheet nonce propagation packages/query-devtools/src/utils.tsx	setupStyleSheet assigns the provided nonce to window.__nonce__ before goober style access and returns early when no nonce is provided.
Tests and changeset packages/query-devtools/src/__tests__/utils.test.ts, .changeset/mighty-banks-mate.md	Tests clear window.__nonce__ after each case and assert the nonce side effect, and the changeset records the devtools patch.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• TkDodo
• ardeora

Poem

🐰 I hopped through the nonce-lit night,
And Goober kept its style tag right.
No CSP fuss,
Just tests for us—
DevTools glows with bunny delight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main fix in query-devtools.
Description check	✅ Passed	The description matches the template well and includes changes, checklist items, and release impact.
Linked Issues check	✅ Passed	The code change sets window.__nonce__ in setupStyleSheet, matching the issue's required CSP fix.
Out of Scope Changes check	✅ Passed	The PR only adds the nonce fix, related tests, and a changeset, with no evident unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 57d2700

---

☁️ Nx Cloud last updated this comment at 2026-06-27 20:11:27 UTC