Merge pull request #145 from cloudfour/fix/custom-props

Don't camelCase CSS custom properties
aknuds1 · Apr 7, 2023 · a195ea9 · a195ea9
2 parents 2869823 + 3e6aae7
commit a195ea9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/lib/utils.js b/lib/utils.js
@@ -20,7 +20,14 @@ function createStyleJsonFromString(styleString) {
     }
 
     if (key != null && value != null && key.length > 0 && value.length > 0) {
-      jsonStyles[camelCase(key)] = value;
+      key = key.trim();
+
+      // Don't camelCase CSS custom properties
+      if (key.indexOf('--') !== 0) {
+        key = camelCase(key);
+      }
+
+      jsonStyles[key] = value;
     }
   }
   return jsonStyles;

diff --git a/test/html-to-react-tests.js b/test/html-to-react-tests.js
@@ -61,6 +61,15 @@ describe('Html2React', () => {
       assert.equal(reactHtml, htmlExpected);
     });
 
+    it('should return a valid HTML string with custom properties in inline styles', () => {
+      const htmlInput = '<div style="color:var(--color-example);--color-example:black"></div>';
+
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+
+      assert.equal(reactHtml, htmlInput);
+    });
+
     it('should return a valid HTML string with data attributes', () => {
       const htmlInput = '<div data-test-attribute="data attribute value"></div>';