From 5c49bbc90a56e82bce9773690242c56692b66c38 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Sun, 14 Jul 2024 14:43:58 -0400
Subject: [PATCH] feat: `nonce` prop (#82)

---
 .changeset/chilled-rules-float.md               |  5 +++++
 .../mode-watcher/src/lib/mode-watcher.svelte    | 17 +++++++++++------
 packages/mode-watcher/src/lib/mode.ts           | 11 ++++-------
 packages/mode-watcher/src/lib/types.ts          |  8 ++++++++
 .../docs/content/api-reference/mode-watcher.md  |  8 ++++++++
 5 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/chilled-rules-float.md

diff --git a/.changeset/chilled-rules-float.md b/.changeset/chilled-rules-float.md
new file mode 100644
index 0000000..9ec838b
--- /dev/null
+++ b/.changeset/chilled-rules-float.md
@@ -0,0 +1,5 @@
+---
+"mode-watcher": patch
+---
+
+feat: Add `nonce` prop
diff --git a/packages/mode-watcher/src/lib/mode-watcher.svelte b/packages/mode-watcher/src/lib/mode-watcher.svelte
index a36baf8..de23be3 100644
--- a/packages/mode-watcher/src/lib/mode-watcher.svelte
+++ b/packages/mode-watcher/src/lib/mode-watcher.svelte
@@ -25,6 +25,7 @@
 	export let disableTransitions = true;
 	export let darkClassNames: string[] = ['dark'];
 	export let lightClassNames: string[] = [];
+	export let nonce: string = '';
 
 	themeColorsStore.set(themeColors);
 	disableTransitionsStore.set(disableTransitions);
@@ -51,6 +52,8 @@
 	const args = `"${defaultMode}"${
 		themeColors ? `, ${JSON.stringify(themeColors)}` : ', undefined'
 	}, ${JSON.stringify(darkClassNames)}, ${JSON.stringify(lightClassNames)}`;
+
+	$: trueNonce = typeof window === 'undefined' ? nonce : '';
 </script>
 
 <svelte:head>
@@ -60,10 +63,12 @@
 		<!-- but that snippet does not run in vitest -->
 		<meta name="theme-color" content={themeColors.dark} />
 	{/if}
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	{@html `<script nonce="%sveltekit.nonce%">(` +
-		setInitialMode.toString() +
-		`)(` +
-		args +
-		`);</script>`}
+
+	{#if trueNonce}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html `<script nonce=${trueNonce}>(` + setInitialMode.toString() + `)(` + args + `);</script>`}
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html `<script>(` + setInitialMode.toString() + `)(` + args + `);</script>`}
+	{/if}
 </svelte:head>
diff --git a/packages/mode-watcher/src/lib/mode.ts b/packages/mode-watcher/src/lib/mode.ts
index b4b28f3..7b14c0c 100644
--- a/packages/mode-watcher/src/lib/mode.ts
+++ b/packages/mode-watcher/src/lib/mode.ts
@@ -7,7 +7,6 @@ import {
 	themeColors,
 	disableTransitions,
 } from './stores.js';
-import { sanitizeClassNames } from './utils.js';
 import type { Mode, ThemeColors } from './types.js';
 
 /** Toggle between light and dark mode */
@@ -37,14 +36,12 @@ export function setInitialMode(
 	const light =
 		mode === 'light' ||
 		(mode === 'system' && window.matchMedia('(prefers-color-scheme: light)').matches);
-	const sanitizedDarkClassNames = sanitizeClassNames(darkClassNames);
-	const sanitizedLightClassNames = sanitizeClassNames(lightClassNames);
 	if (light) {
-		if (sanitizedDarkClassNames.length) rootEl.classList.remove(...sanitizedDarkClassNames);
-		if (sanitizedLightClassNames.length) rootEl.classList.add(...sanitizedLightClassNames);
+		if (darkClassNames.length) rootEl.classList.remove(...darkClassNames);
+		if (lightClassNames.length) rootEl.classList.add(...lightClassNames);
 	} else {
-		if (sanitizedLightClassNames.length) rootEl.classList.remove(...sanitizedLightClassNames);
-		if (sanitizedDarkClassNames.length) rootEl.classList.add(...sanitizedDarkClassNames);
+		if (lightClassNames.length) rootEl.classList.remove(...lightClassNames);
+		if (darkClassNames.length) rootEl.classList.add(...darkClassNames);
 	}
 	rootEl.style.colorScheme = light ? 'light' : 'dark';
 
diff --git a/packages/mode-watcher/src/lib/types.ts b/packages/mode-watcher/src/lib/types.ts
index 5880c15..d851d3c 100644
--- a/packages/mode-watcher/src/lib/types.ts
+++ b/packages/mode-watcher/src/lib/types.ts
@@ -42,4 +42,12 @@ export type ModeWatcherProps = {
 	 * @defaultValue `[]`
 	 */
 	lightClassNames?: string[];
+
+	/**
+	 * An optional nonce to use for the injected script tag to allow-list mode-watcher
+	 * if you are using a Content Security Policy.
+	 *
+	 * @defaultValue `undefined`
+	 */
+	nonce?: string;
 };
diff --git a/sites/docs/content/api-reference/mode-watcher.md b/sites/docs/content/api-reference/mode-watcher.md
index a9ae54a..bec7236 100644
--- a/sites/docs/content/api-reference/mode-watcher.md
+++ b/sites/docs/content/api-reference/mode-watcher.md
@@ -61,6 +61,14 @@ By default, `ModeWatcher` will add the `dark` class to the root `html` element w
 
 Now, when the mode is dark, the root `html` element will have the `dddd` class, and when the mode is light, the root `html` element will have the `fff` class.
 
+### Nonce
+
+You can use the `nonce` prop to allow-list mode-watcher if you are using a Content Security Policy. This will be applied to the `<script>` tag responsible for setting the initial mode before a FOUC occurs.
+
+```svelte
+<ModeWatcher nonce="my-secure-nonce" />
+```
+
 ## Props
 
 The `ModeWatcher` component accepts the following props: