feat: #648 - added support for symbols (#652)

Co-authored-by: Mauro Erta <mauro.erta@sap.com>
morfeojs · Jan 31, 2023 · 6bb4925 · 6bb4925
1 parent 5980606
commit 6bb4925
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/packages/jss/src/generateClassName.ts b/packages/jss/src/generateClassName.ts
@@ -1,12 +1,35 @@
 function getClassNameGenerator() {
   const cache = new Map<string, string>();
 
+  const symbolsMap = {
+    '*': 'all',
+    '.': 'dot',
+    ',': 'comma',
+    '>': 'grtr',
+    '+': 'plus',
+    '~': 'tld',
+    '[': 'sqropn',
+    ']': 'sqrclsd',
+    '^': 'crt',
+    $: 'dlr',
+    '|': 'or',
+    '(': 'opn',
+    ')': 'clsd',
+    '=': 'eql',
+  };
+
   function escapeString(string: string) {
     if (cache.has(string)) {
       return cache.get(string);
     }
 
-    const escaped = string.replace(/[^\w\s-]/gi, '').trim();
+    const replaced = Object.keys(symbolsMap).reduce(
+      (acc, symbol) =>
+        acc.replace(new RegExp('\\' + symbol, 'gi'), symbolsMap[symbol]),
+      string,
+    );
+
+    const escaped = replaced.replace(/[^\w-]/gi, '');
     cache.set(string, escaped);
 
     return escaped;

diff --git a/packages/jss/tests/generateClassName.test.ts b/packages/jss/tests/generateClassName.test.ts
@@ -24,4 +24,14 @@ describe('generateClassName', () => {
 
     expect(className).toBe('p-bg-primary');
   });
+
+  it('should convert symbols into plain text', () => {
+    const className = generateClassName({
+      '& div > p': {
+        bg: 'primary',
+      },
+    });
+
+    expect(className).toBe('divgrtrp-bg-primary');
+  });
 });
diff --git a/packages/spec/src/properties/colors.ts b/packages/spec/src/properties/colors.ts
@@ -4,6 +4,7 @@ export const colorsMap = [
   'color',
   'stroke',
   'caretColor',
+  'accentColor',
   'borderColor',
   'outlineColor',
   'borderTopColor',