fix(dom-fiber): support CSS custom properties (variables) in style prop

packages/@react-facet/dom-fiber/src/setupAttributes.ts

@@ -10,15 +10,33 @@ export const setupStyleUpdate = (
     const value = styleProp[key]
 
     if (value !== undefined) {
+      // CSS custom properties (variables) require setProperty
+      const isCSSVariable = key[0] === '-'
+
       if (isFacet(value)) {
-        styleUnsubscribers.set(
-          key,
-          value.observe((value) => {
-            style[key] = value
-          }),
-        )
+        if (isCSSVariable) {
+          const cssStyle = style as unknown as CSSStyleDeclaration
+          styleUnsubscribers.set(
+            key,
+            value.observe((value) => {
+              cssStyle.setProperty(key, value as string)
+            }),
+          )
+        } else {
+          styleUnsubscribers.set(
+            key,
+            value.observe((value) => {
+              style[key] = value
+            }),
+          )
+        }
       } else {
-        style[key] = value
+        if (isCSSVariable) {
+          const cssStyle = style as unknown as CSSStyleDeclaration
+          cssStyle.setProperty(key, value as string)
+        } else {
+          style[key] = value
+        }
       }
     }
   }

packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx

@@ -29,6 +29,12 @@ describe('mount', () => {
       expect(root).toContainHTML('<div id="root"><div style="background: red;">Hello World</div></div>')
     })
 
+    it('sets CSS custom properties (variables)', () => {
+      render(<div style={{ '--my-color': 'blue' } as React.CSSProperties}>Hello World</div>)
+      const div = root?.querySelector('div')
+      expect(div?.style.getPropertyValue('--my-color')).toBe('blue')
+    })
+
     it('sets the src', () => {
       render(<img className="image" src="bananafrita.png" />)
       const img = document.getElementsByClassName('image')[0] as HTMLImageElement | undefined
@@ -307,6 +313,17 @@ describe('mount', () => {
       expect(root).toContainHTML('<div id="root"><div style="background: yellow;">Hello World</div></div>')
     })
 
+    it('sets CSS custom properties (variables) with facets', () => {
+      const colorFacet = createFacet({ initialValue: 'blue' })
+
+      render(<fast-div style={{ '--my-color': colorFacet } as never}>Hello World</fast-div>)
+      const div = root?.querySelector('div')
+      expect(div?.style.getPropertyValue('--my-color')).toBe('blue')
+
+      colorFacet.set('green')
+      expect(div?.style.getPropertyValue('--my-color')).toBe('green')
+    })
+
     it('sets the src', () => {
       const srcFacet = createFacet({ initialValue: 'bananafrita.png' })
 

packages/@react-facet/dom-fiber/src/setupHostConfig.ts

@@ -390,15 +390,31 @@ export const setupHostConfig = (): HostConfig<
           const newValue = newStyleProp[key]
 
           if (oldValue !== newValue || oldStyleProp === undefined) {
+            // CSS custom properties (variables) require setProperty
+            const isCSSVariable = key[0] === '-'
+
             if (isFacet(newValue)) {
-              styleUnsubscribers.set(
-                key,
-                newValue.observe((value) => {
-                  notNullStyle[key] = value
-                }),
-              )
+              if (isCSSVariable) {
+                styleUnsubscribers.set(
+                  key,
+                  newValue.observe((value) => {
+                    style.setProperty(key, value as string)
+                  }),
+                )
+              } else {
+                styleUnsubscribers.set(
+                  key,
+                  newValue.observe((value) => {
+                    notNullStyle[key] = value
+                  }),
+                )
+              }
             } else {
-              notNullStyle[key] = newValue
+              if (isCSSVariable) {
+                style.setProperty(key, newValue as string)
+              } else {
+                notNullStyle[key] = newValue
+              }
             }
           }
         }