From cbdb47fae98293af20cb91e14526a96c3a293e8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Sat, 13 Nov 2021 09:55:15 +0100
Subject: [PATCH] fix: support CSS variables

Fixes #582
---
 packages/hast-util-to-babel-ast/src/index.test.ts    | 12 ++++++++++++
 .../src/stringToObjectStyle.ts                       | 11 +++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/hast-util-to-babel-ast/src/index.test.ts b/packages/hast-util-to-babel-ast/src/index.test.ts
index 5e72b10a..30e30547 100644
--- a/packages/hast-util-to-babel-ast/src/index.test.ts
+++ b/packages/hast-util-to-babel-ast/src/index.test.ts
@@ -83,4 +83,16 @@ describe('hast-util-to-babel-ast', () => {
       `"<svg><text><tspan>{\\"<\\"}</tspan></text></svg>;"`,
     )
   })
+
+  it('properly converts style with variables', () => {
+    const code = `<svg><path style="--index: 1; font-size: 24px;"></path><path style="--index: 2"></path></svg>`
+    expect(transform(code)).toMatchInlineSnapshot(`
+      "<svg><path style={{
+          \\"--index\\": 1,
+          fontSize: 24
+        }} /><path style={{
+          \\"--index\\": 2
+        }} /></svg>;"
+    `)
+  })
 })
diff --git a/packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts b/packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts
index 2d7f4a27..bf9b4965 100644
--- a/packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts
+++ b/packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts
@@ -2,21 +2,28 @@
 import * as t from '@babel/types'
 import { hyphenToCamelCase, isNumeric, trimEnd } from './util'
 
+const PX_REGEX = /^\d+px$/
+const MS_REGEX = /^-ms-/
+const VAR_REGEX = /^--/
+
 /**
  * Determines if the CSS value can be converted from a
  * 'px' suffixed string to a numeric value.
  */
 const isConvertiblePixelValue = (value: string) => {
-  return /^\d+px$/.test(value)
+  return PX_REGEX.test(value)
 }
 
 /**
  * Format style key into JSX style object key.
  */
 const formatKey = (key: string) => {
+  if (VAR_REGEX.test(key)) {
+    return t.stringLiteral(key)
+  }
   key = key.toLowerCase()
   // Don't capitalize -ms- prefix
-  if (/^-ms-/.test(key)) key = key.substr(1)
+  if (MS_REGEX.test(key)) key = key.substr(1)
   return t.identifier(hyphenToCamelCase(key))
 }