From 50c39070bc42258134b4481f036da265f2319e11 Mon Sep 17 00:00:00 2001
From: HondaYt <honda.yuto.04@gmail.com>
Date: Thu, 5 Feb 2026 00:48:57 +0900
Subject: [PATCH] fix(hast-util-to-babel-ast): preserve CSS custom property
 values

---
 packages/hast-util-to-babel-ast/src/index.test.ts   | 13 +++++++++++--
 .../src/stringToObjectStyle.ts                      |  5 +++--
 2 files changed, 14 insertions(+), 4 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 972c7e5d..9d924fef 100644
--- a/packages/hast-util-to-babel-ast/src/index.test.ts
+++ b/packages/hast-util-to-babel-ast/src/index.test.ts
@@ -93,11 +93,20 @@ describe('hast-util-to-babel-ast', () => {
     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,
+          "--index": "1",
           fontSize: 24
         }} /><path style={{
-          "--index": 2
+          "--index": "2"
         }} /></svg>;"
     `)
   })
+
+  it('preserves units in CSS custom property values', () => {
+    const code = `<svg style="--size: 20px; --spacing: 1.5rem; --width: 100%; --gradient: linear-gradient(red, blue);"></svg>`
+    const output = transform(code)
+    expect(output).toContain(`"--size": "20px"`)
+    expect(output).toContain(`"--spacing": "1.5rem"`)
+    expect(output).toContain(`"--width": "100%"`)
+    expect(output).toContain(`"--gradient": "linear-gradient(red, blue)"`)
+  })
 })
diff --git a/packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts b/packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts
index bf9b4965..a503f7ea 100644
--- a/packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts
+++ b/packages/hast-util-to-babel-ast/src/stringToObjectStyle.ts
@@ -30,7 +30,8 @@ const formatKey = (key: string) => {
 /**
  * Format style value into JSX style object value.
  */
-const formatValue = (value: string) => {
+const formatValue = (value: string, key: string) => {
+  if (VAR_REGEX.test(key)) return t.stringLiteral(value)
   if (isNumeric(value)) return t.numericLiteral(Number(value))
   if (isConvertiblePixelValue(value))
     return t.numericLiteral(Number(trimEnd(value, 'px')))
@@ -53,7 +54,7 @@ export const stringToObjectStyle = (rawStyle: string): t.ObjectExpression => {
     const value = style.substr(firstColon + 1).trim()
     const key = style.substr(0, firstColon)
     if (key !== '') {
-      const property = t.objectProperty(formatKey(key), formatValue(value))
+      const property = t.objectProperty(formatKey(key), formatValue(value, key))
       properties.push(property)
     }
   }