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

[raashish1601]

Description

This fixes CSP styleNonce handling in Query Devtools.

Problem

setupStyleSheet sets a nonce attribute on the injected <style id=_goober>, but it never sets window.__nonce__. goober (v2.1.17+) reads window.__nonce__ when accessing style nodes and overwrites the nonce, which can clear it and break CSP.

Fix

• Set window.__nonce__ when setupStyleSheet receives a nonce.
• Keep existing insertion logic intact so this still works as a pre-creation fallback.
• Add a regression test in packages/query-devtools/src/__tests__/utils.test.ts to assert window.__nonce__ is set.

Validation

• npx pnpm@11 --filter @tanstack/query-devtools exec vitest run src/__tests__/utils.test.ts

Summary by CodeRabbit

• Tests

  • Added test coverage for global nonce value handling to ensure security nonce side effects are properly verified.

• Bug Fixes

  • Improved nonce tracking by storing provided nonce values in global state during 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: afeb1f09-e4bd-4795-98fa-06a859589c1c

📥 Commits

Reviewing files that changed from the base of the PR and between 7fa2781 and 4d36c27.

📒 Files selected for processing (2)

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

---

📝 Walkthrough

Walkthrough

The PR adds global nonce tracking to the setupStyleSheet utility. When a nonce is provided, it is now assigned to window.__nonce__ before stylesheet creation, enabling downstream code to access the nonce value from the global scope. Tests verify this assignment and include cleanup to prevent state leakage between test runs.

Changes

Global nonce tracking in setupStyleSheet

Layer / File(s)	Summary
Nonce global assignment and test coverage packages/query-devtools/src/utils.tsx, packages/query-devtools/src/__tests__/utils.test.ts	setupStyleSheet assigns the provided nonce to window.__nonce__ before creating the Goober style tag. Test cleanup resets window.__nonce__ after each test, and a new assertion verifies that setupStyleSheet('test-nonce') correctly sets the global nonce value.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related issues

• bug(query-devtools): styleNonce prop has no effect because goober 2.1.17+ overwrites the nonce via window.__nonce__ #10820: Modifies the same setupStyleSheet function to set window.__nonce__ for Goober's nonce handling, implementing the same feature with test coverage.

Poem

🐰 A nonce now nestles in the window's nest,
For Goober's styles to pass the CSP test!
Global tracking shines with tests so clean,
The finest stylesheet code I've ever seen! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: setting window.nonce in setupStyleSheet, which aligns with the primary objective of fixing CSP nonce handling.
Description check	✅ Passed	The description provides clear problem statement, fix details, and validation steps. It follows the repository template with a descriptive Changes section and identifies the change as affecting published code, though a changeset reference is missing.
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.}