Fix CSP nonce timing for admin styles

app/Http/Middleware/ContentSecurityPolicy.php

@@ -123,6 +123,7 @@ class ContentSecurityPolicy
             'default-src' => ["'self'"],
             'script-src' => array_unique($scriptSources),
             'style-src' => array_unique($styleSources),
+            'style-src-attr' => ["'unsafe-inline'"],
             'img-src' => array_unique($imgSources),
             'font-src' => array_unique($fontSources),
             'connect-src' => array_unique($connectSources),

resources/js/admin/main.tsx

@@ -1,10 +1,10 @@
+import './nonce';
 import React, { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { TamaguiProvider, Theme } from '@tamagui/core';
-import { setNonce } from '@tamagui/web';
 import '@tamagui/core/reset.css';
 import tamaguiConfig from '../../../tamagui.config';
 import { AuthProvider } from './auth/context';
@@ -24,14 +24,6 @@ const DevTenantSwitcher = React.lazy(() => import('./DevTenantSwitcher'));
 
 const enableDevSwitcher = import.meta.env.DEV || import.meta.env.VITE_ENABLE_TENANT_SWITCHER === 'true';
 
-const styleNonce = document
-  .querySelector('meta[name="csp-style-nonce"]')
-  ?.getAttribute('content');
-
-if (styleNonce) {
-  setNonce(styleNonce);
-}
-
 initializeTheme();
 initSentry('admin');
 const rootEl = document.getElementById('root')!;

resources/js/admin/nonce.ts

@@ -0,0 +1,9 @@
+import { setNonce } from '@tamagui/web';
+
+const styleNonce = document
+  .querySelector('meta[name="csp-style-nonce"]')
+  ?.getAttribute('content');
+
+if (styleNonce) {
+  setNonce(styleNonce);
+}