From 7cc91bfb37d81b18c5cfbf7608af04ea0dad2562 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 23 Jan 2020 15:35:34 +0100
Subject: [PATCH 1/3] test: add custom properties

---
 lib/CSSStyleDeclaration.test.js | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js
index a2460360..04800a39 100644
--- a/lib/CSSStyleDeclaration.test.js
+++ b/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('yellow');
+  });
+
+  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');
+  });
 });

From 7308c7fed954ac659e2e2c257ab1f3dadba7eacc Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 23 Jan 2020 15:45:39 +0100
Subject: [PATCH 2/3] feat: implement read/write of custom properties

---
 lib/CSSStyleDeclaration.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/lib/CSSStyleDeclaration.js b/lib/CSSStyleDeclaration.js
index 0bb9eced..87f480e3 100644
--- a/lib/CSSStyleDeclaration.js
+++ b/lib/CSSStyleDeclaration.js
@@ -35,6 +35,9 @@ CSSStyleDeclaration.prototype = {
    * Returns the empty string if the property has not been set.
    */
   getPropertyValue: function(name) {
+    if (name.indexOf('--') === 0 && this.hasOwnProperty(name)) {
+      return this[name];
+    }
     if (!this._values.hasOwnProperty(name)) {
       return '';
     }
@@ -56,13 +59,19 @@ CSSStyleDeclaration.prototype = {
       this.removeProperty(name);
       return;
     }
-    var lowercaseName = name.toLowerCase();
-    if (!allProperties.has(lowercaseName) && !allExtraProperties.has(lowercaseName)) {
+    var isCustomProperty = name.indexOf('--') === 0;
+    // custom properties are case-sensitive
+    var propertyName = isCustomProperty ? name : name.toLowerCase();
+    if (
+      !isCustomProperty &&
+      !allProperties.has(propertyName) &&
+      !allExtraProperties.has(propertyName)
+    ) {
       return;
     }
 
-    this[lowercaseName] = value;
-    this._importants[lowercaseName] = priority;
+    this[propertyName] = value;
+    this._importants[propertyName] = priority;
   },
   _setProperty: function(name, value, priority) {
     if (value === undefined) {

From 9a3a612f0af32d0e7374d5459b1e6effbe9f81cf Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 23 Jan 2020 16:00:17 +0100
Subject: [PATCH 3/3] fix: object setter has no effect

---
 lib/CSSStyleDeclaration.js      | 20 ++++++++------------
 lib/CSSStyleDeclaration.test.js |  2 +-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/lib/CSSStyleDeclaration.js b/lib/CSSStyleDeclaration.js
index 87f480e3..bded9a44 100644
--- a/lib/CSSStyleDeclaration.js
+++ b/lib/CSSStyleDeclaration.js
@@ -35,9 +35,6 @@ CSSStyleDeclaration.prototype = {
    * Returns the empty string if the property has not been set.
    */
   getPropertyValue: function(name) {
-    if (name.indexOf('--') === 0 && this.hasOwnProperty(name)) {
-      return this[name];
-    }
     if (!this._values.hasOwnProperty(name)) {
       return '';
     }
@@ -60,18 +57,17 @@ CSSStyleDeclaration.prototype = {
       return;
     }
     var isCustomProperty = name.indexOf('--') === 0;
-    // custom properties are case-sensitive
-    var propertyName = isCustomProperty ? name : name.toLowerCase();
-    if (
-      !isCustomProperty &&
-      !allProperties.has(propertyName) &&
-      !allExtraProperties.has(propertyName)
-    ) {
+    if (isCustomProperty) {
+      this._setProperty(name, value, priority);
+      return;
+    }
+    var lowercaseName = name.toLowerCase();
+    if (!allProperties.has(lowercaseName) && !allExtraProperties.has(lowercaseName)) {
       return;
     }
 
-    this[propertyName] = value;
-    this._importants[propertyName] = priority;
+    this[lowercaseName] = value;
+    this._importants[lowercaseName] = priority;
   },
   _setProperty: function(name, value, priority) {
     if (value === undefined) {
diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js
index 04800a39..d0cba231 100644
--- a/lib/CSSStyleDeclaration.test.js
+++ b/lib/CSSStyleDeclaration.test.js
@@ -537,7 +537,7 @@ describe('CSSStyleDeclaration', () => {
     const style = new CSSStyleDeclaration();
     style['--baz'] = 'yellow';
 
-    expect(style.getPropertyValue('--baz')).toEqual('yellow');
+    expect(style.getPropertyValue('--baz')).toEqual('');
   });
 
   test('custom properties are case-sensitive', () => {