From e64b614f19526691d5acb6b669dfc50409ce76f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Girault?= <felix.girault@gmail.com>
Date: Sat, 20 Apr 2024 19:16:42 +0200
Subject: [PATCH] Preventing illegal chars in CSS and Sass variables

---
 src/lib/utils/strings.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/lib/utils/strings.ts b/src/lib/utils/strings.ts
index 4833a89..42f6ef6 100644
--- a/src/lib/utils/strings.ts
+++ b/src/lib/utils/strings.ts
@@ -1,3 +1,8 @@
+// Sass is more liberal than CSS in what chars are legal in
+// a variable name, but we're taking the stricter approach.
+const stripForbiddenChars = (text: string) =>
+	text.replaceAll(/[^a-zA-Z0-9_-]/g, '');
+
 export const sentenceCase = (sentence: string) =>
 	sentence.charAt(0).toUpperCase() +
 	sentence.slice(1).toLowerCase();
@@ -5,12 +10,14 @@ export const sentenceCase = (sentence: string) =>
 export const dashCase = (sentence: string) =>
 	sentence
 		.split(' ')
+		.map(stripForbiddenChars)
 		.map((word) => word.toLowerCase())
 		.join('-');
 
 export const camelCase = (sentence: string) =>
 	sentence
 		.split(' ')
+		.map(stripForbiddenChars)
 		.map((word, index) =>
 			index === 0 ? word.toLowerCase() : sentenceCase(word)
 		)