handle all emotion css with nonce

mastercomfig · Jul 12, 2024 · 707e9ba · 707e9ba
1 parent 01aa0cd
commit 707e9ba
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,8 @@
     "@astrojs/react": "^3.6.0",
     "@astrojs/sitemap": "^3.1.6",
     "@babel/core": "^7.24.7",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.4",
     "@fontsource-variable/roboto-flex": "^5.0.15",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@kindspells/astro-shield": "^1.3.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/head/BaseHead.astro b/src/components/head/BaseHead.astro
@@ -1,9 +1,10 @@
 ---
-
+import { NONCE } from "astro:env/server";
 ---
 
 <meta charset="utf-8" />
 <meta
   name="viewport"
   content="width=device-width, initial-scale=1, shrink-to-fit=no"
 />
+<meta property="csp-nonce" nonce={NONCE} />
diff --git a/src/components/items/ItemsSelector.tsx b/src/components/items/ItemsSelector.tsx
@@ -1,7 +1,16 @@
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
 import { useState } from "react";
 import { FormSelect } from "react-bootstrap";
 import Select, { components } from "react-select";
 
+const cache = createCache({
+  key: "css",
+  nonce:
+    document.querySelector<HTMLMetaElement>("meta[property=csp-nonce]")
+      ?.nonce || "",
+});
+
 function onMenuOpen() {
   setTimeout(() => {
     const selectedEl = document.getElementsByClassName(
@@ -263,32 +272,39 @@ export default function ItemsSelector({
     <div className="row">
       <div className={hidePreview ? "col-12" : "col-4"}>
         {(useAdvancedSelect && (
-          <Select
-            components={{ DropdownIndicator, IndicatorSeparator }}
-            theme={getSelectTheme}
-            styles={getSelectStyles(false)}
-            onMenuOpen={onMenuOpen}
-            className={"MyDropdown"}
-            classNamePrefix={"MyDropdown"}
-            formatOptionLabel={({ value, label }) => (
-              <div style={{ display: "flex", alignItems: "center" }}>
-                {getPreviewImage(value, previews, previewPath, previewImgClass)}
-                <div style={{ marginLeft: "0.5rem" }}>{label}</div>
-              </div>
-            )}
-            defaultValue={selectOptions[selection ?? defaultValue]}
-            autoComplete="off"
-            onChange={(option) => {
-              const value = option.value;
-              setSelected(value);
-              if (value === defaultValue) {
-                delItem(classname);
-              } else {
-                setItem(classname, value);
-              }
-            }}
-            options={Object.values(groupedSelectOptions ?? selectOptions)}
-          />
+          <CacheProvider value={cache}>
+            <Select
+              components={{ DropdownIndicator, IndicatorSeparator }}
+              theme={getSelectTheme}
+              styles={getSelectStyles(false)}
+              onMenuOpen={onMenuOpen}
+              className={"MyDropdown"}
+              classNamePrefix={"MyDropdown"}
+              formatOptionLabel={({ value, label }) => (
+                <div style={{ display: "flex", alignItems: "center" }}>
+                  {getPreviewImage(
+                    value,
+                    previews,
+                    previewPath,
+                    previewImgClass,
+                  )}
+                  <div style={{ marginLeft: "0.5rem" }}>{label}</div>
+                </div>
+              )}
+              defaultValue={selectOptions[selection ?? defaultValue]}
+              autoComplete="off"
+              onChange={(option) => {
+                const value = option.value;
+                setSelected(value);
+                if (value === defaultValue) {
+                  delItem(classname);
+                } else {
+                  setItem(classname, value);
+                }
+              }}
+              options={Object.values(groupedSelectOptions ?? selectOptions)}
+            />
+          </CacheProvider>
         )) || (
           <FormSelect
             className="bg-dark text-light"

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1,3 +1,4 @@
+/// <reference path="../.astro/env.d.ts" />
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 /// <reference types="vite-plugin-pwa/info" />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,14 +1,10 @@
 ---
-import { getSecret } from "astro:env/server";
 
-const nonce = getSecret("NONCE");
 ---
 
 <html lang="en-US" data-bs-theme="dark" transition:animate="none">
   <slot />
 
-  <meta property="csp-nonce" nonce={nonce} />
-
   <script>
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     document.addEventListener("astro:page-load", () => {