Merge branch 'zero298-css-variable-fix'

pafnuty · Aug 4, 2018 · 8886ec4 · 8886ec4
2 parents 4d1101b + f9cbec0
commit 8886ec4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/spec/defaultBindings/styleBehaviors.js b/spec/defaultBindings/styleBehaviors.js
@@ -52,6 +52,22 @@ describe('Binding: CSS style', function() {
         expect(testNode.childNodes[0].style.width).toBe("");
     });
 
+    if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
+        it('Should be able to assign values to custom CSS properties', function() {
+            var customWidth = ko.observable();
+            testNode.innerHTML = "<div style=\"width: var(--custom-width)\" data-bind=\"style: {'--custom-width': customWidth}\"></div>";
+
+            ko.applyBindings({customWidth: customWidth}, testNode);
+            expect(testNode.childNodes[0].style.getPropertyValue("--custom-width")).toBe("");
+
+            customWidth("100px");
+            expect(testNode.childNodes[0].style.getPropertyValue("--custom-width")).toBe("100px");
+
+            customWidth(false);
+            expect(testNode.childNodes[0].style.getPropertyValue("--custom-width")).toBe("");
+        });
+    }
+
     it('Should properly respond to changes in the observable, adding px when appropriate', function() {
         var width = ko.observable();
         testNode.innerHTML = "<div data-bind='style: { width: width }'></div>";
@@ -68,4 +84,4 @@ describe('Binding: CSS style', function() {
         width(false);
         expect(testNode.childNodes[0].style.width).toBe("");
     });
-});
+});
diff --git a/src/binding/defaultBindings/style.js b/src/binding/defaultBindings/style.js
@@ -11,6 +11,9 @@ ko.bindingHandlers['style'] = {
 
             if (jQueryInstance) {
                 jQueryInstance(element)['css'](styleName, styleValue);
+            } else if (/^--/.test(styleName)) {
+                // Is styleName a custom CSS property?
+                element.style.setProperty(styleName, styleValue);
             } else {
                 styleName = styleName.replace(/-(\w)/g, function (all, letter) {
                     return letter.toUpperCase();