feat: driver-universal support CSS custom properties

packages/driver-dom/src/index.js

@@ -331,6 +331,7 @@ export function setStyle(node, style) {
     // Support CSS custom properties
     const convertedValue = convertUnit(style[prop]);
     if (prop[0] === '-' && prop[1] === '-') {
+      // reference: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty. style.setProperty do not support Camel-Case style properties.
       node.style.setProperty(prop, convertedValue);
     } else {
       node.style[prop] = convertedValue;

packages/driver-universal/src/__tests__/css-custom-properties.js

@@ -0,0 +1,39 @@
+import { createElement, render } from 'rax';
+import DriverDOM from '../';
+
+describe('Support CSS custom properties', () => {
+  let container;
+  let logs;
+  const setProperty = CSSStyleDeclaration.prototype.setProperty;
+
+  beforeAll(() => {
+    CSSStyleDeclaration.prototype.setProperty = (prop, value) => {
+      logs.push([prop, value]);
+    };
+  });
+
+  afterAll(() => {
+    CSSStyleDeclaration.prototype.setProperty = setProperty;
+  });
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    (document.body || document.documentElement).appendChild(container);
+    logs = [];
+  });
+
+  it('CSS custom properties works.', () => {
+    render((
+      <div style={{
+        '--backgroundColor': 'red',
+        backgroundColor: 'var(--backgroundColor)',
+      }}>
+        Test CSS custom properties.
+      </div>
+    ), container, {
+      driver: DriverDOM
+    });
+
+    expect(logs).toEqual([['--backgroundColor', 'red']]);
+  });
+});

packages/driver-universal/src/dom.js

@@ -49,7 +49,12 @@ const driver = Object.assign({}, DriverDOM, {
         if (Array.isArray(transformValue)) {
           for (let i = 0; i < transformValue.length; i++) node.style[prop] = transformValue[i];
         } else {
-          node.style[prop] = transformValue;
+          if (prop[0] === '-' && prop[1] === '-') {
+            // reference: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty. style.setProperty do not support Camel-Case style properties.
+            node.style.setProperty(prop, transformValue);
+          } else {
+            node.style[prop] = transformValue;
+          }
         }
       }
     }