Preventing illegal chars in CSS and Sass variables

src/lib/utils/strings.ts

@@ -1,15 +1,20 @@
+// Sass is more liberal than CSS in what chars are legal in
+// a variable name, but we're taking the stricter approach.
+const stripForbiddenChars = (sentence: string) =>
+	sentence.replaceAll(/[^a-zA-Z0-9_-]/g, '');
+
 export const sentenceCase = (sentence: string) =>
 	sentence.charAt(0).toUpperCase() +
 	sentence.slice(1).toLowerCase();
 
 export const dashCase = (sentence: string) =>
-	sentence
+	stripForbiddenChars(sentence)
 		.split(' ')
 		.map((word) => word.toLowerCase())
 		.join('-');
 
 export const camelCase = (sentence: string) =>
-	sentence
+	stripForbiddenChars(sentence)
 		.split(' ')
 		.map((word, index) =>
 			index === 0 ? word.toLowerCase() : sentenceCase(word)