Merge pull request #111 from eps1lon/feat/custom-property-access

feat: Implement read/write of custom properties

Author: jsakas

lib/CSSStyleDeclaration.js

@@ -56,6 +56,11 @@ CSSStyleDeclaration.prototype = {
       this.removeProperty(name);
       return;
     }
+    var isCustomProperty = name.indexOf('--') === 0;
+    if (isCustomProperty) {
+      this._setProperty(name, value, priority);
+      return;
+    }
     var lowercaseName = name.toLowerCase();
     if (!allProperties.has(lowercaseName) && !allExtraProperties.has(lowercaseName)) {
       return;

lib/CSSStyleDeclaration.test.js

@@ -518,4 +518,33 @@ describe('CSSStyleDeclaration', () => {
     expect(0).toEqual(style.length);
     expect(undefined).toEqual(style[0]);
   });
+
+  test('getPropertyValue for custom properties in cssText', () => {
+    const style = new CSSStyleDeclaration();
+    style.cssText = '--foo: red';
+
+    expect(style.getPropertyValue('--foo')).toEqual('red');
+  });
+
+  test('getPropertyValue for custom properties with setProperty', () => {
+    const style = new CSSStyleDeclaration();
+    style.setProperty('--bar', 'blue');
+
+    expect(style.getPropertyValue('--bar')).toEqual('blue');
+  });
+
+  test('getPropertyValue for custom properties with object setter', () => {
+    const style = new CSSStyleDeclaration();
+    style['--baz'] = 'yellow';
+
+    expect(style.getPropertyValue('--baz')).toEqual('');
+  });
+
+  test('custom properties are case-sensitive', () => {
+    const style = new CSSStyleDeclaration();
+    style.cssText = '--fOo: purple';
+
+    expect(style.getPropertyValue('--foo')).toEqual('');
+    expect(style.getPropertyValue('--fOo')).toEqual('purple');
+  });
 });