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

[842u]

🎯 Changes

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

  • Fixed Content Security Policy (CSP) nonce handling in DevTools to prevent CSP violations when nonce values are provided.

• Tests

  • Added test coverage for nonce configuration in stylesheet setup.

[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: f73ee8f2-984a-432e-b852-7ce9d59a88f1

📥 Commits

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

📒 Files selected for processing (3)

• .changeset/mighty-banks-mate.md
• packages/query-devtools/src/__tests__/utils.test.ts
• packages/query-devtools/src/utils.tsx

---

📝 Walkthrough

Walkthrough

This PR improves CSP nonce handling in @tanstack/query-devtools by updating setupStyleSheet to write the nonce to window.__nonce__, enabling Goober's CSS-in-JS styling to read and preserve the nonce attribute on generated style elements.

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 can read it during style element creation/access, preventing CSP nonce from being overwritten with undefined.
Test coverage and global cleanup packages/query-devtools/src/__tests__/utils.test.ts	Test cleanup deletes window.__nonce__ after each test to prevent cross-test leakage. New test cases verify nonce is set when provided and remains undefined when omitted.
Changeset documentation .changeset/mighty-banks-mate.md	Changeset describes the patch that improves CSP nonce handling in devtools' CSS-in-JS output by enabling Goober to read window.__nonce__ and avoid clearing the nonce.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A nonce through the window now flies,
No CSP violations surprise!
Goober reads true,
Tests verify too—
DevTools styling, pristine and wise. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: setting window.nonce in setupStyleSheet to fix CSP nonce handling in query-devtools.
Description check	✅ Passed	The description comprehensively covers the problem, root cause, and solution, includes a code example, and all required checklist items are marked complete with a changeset generated.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 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.}