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

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

* test(query-devtools): add tests for window.__nonce__ in setupStyleSheet

* chore: add changeset

* fix: merge conflicts

* formatting

* ci: apply automated fixes

---------

Co-authored-by: Dominik Dorfmeister 🔮 <office@dorfmeister.cc>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

.changeset/mighty-banks-mate.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/query-devtools': patch
+---
+
+`setupStyleSheet` now sets `window.__nonce__` when a `styleNonce` is provided.
+
+The devtools use [goober](https://goober.js.org/) for CSS-in-JS, which reads `window.__nonce__` every time it creates or accesses its style element. Without this, goober overwrote the nonce with `undefined`, causing CSP violations even when `styleNonce` was correctly passed to `<ReactQueryDevtools>`.

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

@@ -982,6 +982,7 @@ describe('Utils tests', () => {
   describe('setupStyleSheet', () => {
     afterEach(() => {
       document.head.querySelector('#_goober')?.remove()
+      delete (window as any).__nonce__
     })
 
     it('should not insert any style tag when "nonce" is missing', () => {
@@ -1055,6 +1056,18 @@ describe('Utils tests', () => {
         'shadow-nonce',
       )
     })
+
+    it('should set window.__nonce__ so goober preserves the nonce on its style element', () => {
+      setupStyleSheet('test-nonce')
+
+      expect((window as any).__nonce__).toBe('test-nonce')
+    })
+
+    it('should not set window.__nonce__ when nonce is missing', () => {
+      setupStyleSheet()
+
+      expect((window as any).__nonce__).toBeUndefined()
+    })
   })
 
   describe('sortFns', () => {

packages/query-devtools/src/utils.tsx

@@ -307,7 +307,12 @@ export const deleteNestedDataByPath = (
 // Sets up the goober stylesheet
 // Adds a nonce to the style tag if needed
 export const setupStyleSheet = (nonce?: string, target?: ShadowRoot) => {
-  if (!nonce) return
+  if (!nonce)
+    return // Goober reads window.__nonce__ every time it creates or accesses its style
+    // element (el.nonce = window.__nonce__). Without this, goober overwrites the
+    // nonce we set on the pre-created element with undefined, clearing it.
+  ;(window as any).__nonce__ = nonce
+
   const root = target ?? document.head
   if (root.querySelector('#_goober')) return
   const styleTag = document.createElement('style')