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

  • Fixes Content Security Policy (CSP) nonce handling in DevTools so provided nonces are preserved and CSP violations are avoided.

• Tests

  • Added tests covering nonce behavior in stylesheet setup and ensured test isolation for nonce-related globals.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3997a164-140e-4e2a-94ea-4d962eab08e8

📥 Commits

Reviewing files that changed from the base of the PR and between 793a5c7 and f1ccf7a.

📒 Files selected for processing (2)

• packages/query-devtools/src/__tests__/utils.test.ts
• packages/query-devtools/src/utils.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• packages/query-devtools/src/utils.tsx
• packages/query-devtools/src/tests/utils.test.ts

---

📝 Walkthrough

Walkthrough

setupStyleSheet now writes the provided style nonce to window.nonce before Goober accesses the devtools' style element. Tests clean up and assert this global side effect. A patch changeset documents the fix.

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__ so Goober reads it during style element creation/access, preventing the nonce attribute from being overwritten with undefined.
Test coverage and global cleanup packages/query-devtools/src/__tests__/utils.test.ts	Tests delete window.__nonce__ in afterEach. New tests assert setupStyleSheet('test-nonce') sets window.__nonce__ and calling setupStyleSheet() leaves it undefined.
Changeset documentation .changeset/mighty-banks-mate.md	Changeset describes the patch for @tanstack/query-devtools that propagates styleNonce to window.__nonce__ so Goober preserves the nonce.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• TkDodo

Poem

🐰 I set a nonce through the sill,
So Goober won't clear what it will.
Tests hop and sing,
The stylesheet's king—
DevTools style stays calm and still.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: setting window.nonce in setupStyleSheet to fix CSP violations.
Description check	✅ Passed	The description fully addresses the template with problem context, root cause analysis, solution code, and completed checklist items including changeset generation.
Linked Issues check	✅ Passed	All coding objectives from #10820 are met: window.nonce is set before style element creation, backward compatibility is maintained, and tests verify correct behavior.
Out of Scope Changes check	✅ Passed	All changes are scoped to the CSP nonce fix: utils.tsx sets window.nonce, tests verify the behavior, and a changeset documents the patch.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ 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 and usage tips.}

[coderabbitai]

Actionable comments posted: 0