From 0c64934cd39a1a11b1eb02b08ff5939cfabbf33f Mon Sep 17 00:00:00 2001
From: Marc Berger <marc@fourkitchens.com>
Date: Fri, 29 Sep 2023 16:10:53 -0700
Subject: [PATCH] feat: Filter BEM function classes to conform to CSS spec:
 https://www.w3.org/TR/CSS21/syndata.html#characters

---
 .../lib/bem-twig-extension.js                 | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/bem-twig-extension/lib/bem-twig-extension.js b/packages/bem-twig-extension/lib/bem-twig-extension.js
index a9f2f3e..4b16847 100644
--- a/packages/bem-twig-extension/lib/bem-twig-extension.js
+++ b/packages/bem-twig-extension/lib/bem-twig-extension.js
@@ -5,12 +5,19 @@ module.exports = bemTwigExtension;
 function bemTwigExtension(Twig) {
   Twig.extendFunction("bem", function(base_class, modifiers = [], blockname = '', extra = [], attributes = '') {
     let classes = [];
-    
+
+    // Helper function to sanitize and validate class names
+    function sanitizeClassName(className) {
+      // Strips out initial numbers. Replace non-matches with spaces, does strip non-english characters
+      const sanitized = className.match(/-?[_a-zA-Z]+[_a-zA-Z0-9-]*/g);
+      return sanitized ? sanitized.join(' ') : '';
+    }
+
     // If using a blockname to override default class.
     if (blockname.length) {
         // Set blockname class.
         classes.push(blockname + '__' + base_class);
-    
+
         // Set blockname--modifier classes for each modifier.
         if (modifiers.length && Array.isArray(modifiers)) {
         modifiers.forEach(function(modifier) {
@@ -29,14 +36,19 @@ function bemTwigExtension(Twig) {
         });
         }
     }
-    
+
     // If extra non-BEM classes are added.
     if (extra.length && Array.isArray(extra)) {
         extra.forEach(function(extra_class) {
         classes.push(extra_class);
         });
     }
-    
+
+    // Sanitize class names in the classes array
+    classes = classes.map(function(className) {
+        return sanitizeClassName(className);
+    });
+
     attributes = 'class="' + classes.join(' ') + '"';
     return attributes;
   });