Ignore CSS Custom properties in kebabifyStyleName

Allow setting CSS Custom property values in various casing with StyleSheet.create/css by ignoring those keys in kebabifyStyleName utility Fixes: #339
Khan · Aug 14, 2018 · b9e4b78 · b9e4b78
1 parent 62ee2f0
commit b9e4b78
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/util.js b/src/util.js
@@ -9,6 +9,9 @@ const UPPERCASE_RE = /([A-Z])/g;
 const UPPERCASE_RE_TO_KEBAB = (match /* : string */)  /* : string */ => `-${match.toLowerCase()}`;
 
 export const kebabifyStyleName = (string /* : string */) /* : string */ => {
+    if (string.substring(0, 2) === '--') {
+        return string;
+    }
     const result = string.replace(UPPERCASE_RE, UPPERCASE_RE_TO_KEBAB);
     if (result[0] === 'm' && result[1] === 's' && result[2] === '-') {
         return `-${result}`;

diff --git a/tests/util_test.js b/tests/util_test.js
@@ -16,5 +16,8 @@ describe('Utils', () => {
         it('forces -ms-', () => {
             assert.equal(kebabifyStyleName('msFooBarBaz'), '-ms-foo-bar-baz');
         });
+        it('does not kebabify CSS Custom properties', () => {
+            assert.equal(kebabifyStyleName('--foo-Bar_Baz'), '--foo-Bar_Baz');
+        });
     });
 });