Fixed style application for custom properties

Author: ZeeCoder

.gitignore

@@ -7,3 +7,4 @@ yarn-error.log
 .idea
 .DS_Store
 yarn.lock
+package-lock.json

CHANGELOG.md

@@ -7,7 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-## [3.0.0]
+## [3.0.0-alpha.1]
+
+### Fixed
+
+- Tests now check if custom props are properly set
+- Change sets are tested with hyphenated prop names instead of camel cased ones
+
+## [3.0.0-alpha.0]
 
 ### Added
 

packages/container-query/src/adjustContainer.spec.js

@@ -63,7 +63,7 @@ test("should apply changed styles", () => {
   getChangedStyles.mockImplementationOnce(() => ({
     ".Container": {
       addStyle: {
-        lineHeight: "10px",
+        "line-height": "10px",
         background: "none"
       },
       removeProps: ["fontSize", "border"]

packages/container-query/src/applyStylesToElements.js

@@ -7,8 +7,9 @@ export default function applyStylesToElements(styles, elements) {
 
   for (let i = 0; i < elementsLength; i++) {
     for (let prop in styles) {
-      elements[i].style[prop] = styles[prop];
-      // Equivalent to setProperty, see: https://devdocs.io/dom/cssstyledeclaration/setproperty
+      // Even though `style[prop] = value` is equivalent for the most part, we
+      // need to use setProperty to support setting css custom props as well.
+      elements[i].style.setProperty(prop, styles[prop]);
     }
   }
 }

packages/container-query/src/applyStylesToElements.spec.js

@@ -1,22 +1,49 @@
 import applyStylesToElements from "./applyStylesToElements";
 
+// For some reason "setProperty" here in Node doesn't work with custom props for
+// elements created via `document.createElement`, that's why I'm mocking the
+// styles object here.
+class Style {
+  constructor() {
+    this.style = {};
+  }
+
+  setProperty(name, value) {
+    this.style[name] = value;
+  }
+
+  getPropertyValue(name) {
+    return this.style[name];
+  }
+}
+
 test("should apply all declarations to all the elements", () => {
   const element1 = {
-    style: {}
+    style: new Style()
   };
   const element2 = {
-    style: {}
+    style: new Style()
   };
 
   const elements = [element1, element2];
 
   const style = {
     "font-size": "42px",
-    "line-height": "50px"
+    "line-height": "50px",
+    "--custom-prop": "50px"
   };
 
   applyStylesToElements(style, elements);
 
-  expect(element1.style).toEqual(style);
-  expect(element2.style).toEqual(style);
+  elements.forEach(element => {
+    expect(element.style.getPropertyValue("font-size")).toEqual(
+      style["font-size"]
+    );
+    expect(element.style.getPropertyValue("line-height")).toEqual(
+      style["line-height"]
+    );
+    expect(element.style.getPropertyValue("custom-prop")).toEqual(
+      style["custom-prop"]
+    );
+  });
 });

packages/container-query/src/getChangedStyles.spec.js

@@ -30,14 +30,14 @@ test("should apply default queries without a condition function", () => {
               {
                 [SELECTOR]: ".Container",
                 [VALUES]: {
-                  fontSize: `2rh`,
-                  lineHeight: `1rh`
+                  "font-size": `2rh`,
+                  "line-height": `1rh`
                 }
               },
               {
                 [SELECTOR]: ".Container__element",
                 [VALUES]: {
-                  lineHeight: `3rh`
+                  "line-height": `3rh`
                 }
               }
             ]
@@ -48,14 +48,14 @@ test("should apply default queries without a condition function", () => {
               {
                 [SELECTOR]: ".Container",
                 [VALUES]: {
-                  fontSize: `4rh`,
-                  lineHeight: `2rh`
+                  "font-size": `4rh`,
+                  "line-height": `2rh`
                 }
               },
               {
                 [SELECTOR]: ".Container__element",
                 [STYLES]: {
-                  lineHeight: "10px"
+                  "line-height": "10px"
                 }
               }
             ]
@@ -70,13 +70,13 @@ test("should apply default queries without a condition function", () => {
   expect(getChangedStyles(element, size)).toEqual({
     ".Container": {
       addStyle: {
-        fontSize: "4.000px",
-        lineHeight: "2.000px"
+        "font-size": "4.000px",
+        "line-height": "2.000px"
       }
     },
     ".Container__element": {
       addStyle: {
-        lineHeight: "10px"
+        "line-height": "10px"
       }
     }
   });
@@ -94,11 +94,11 @@ test("should return change sets on first run", () => {
             {
               [SELECTOR]: ".Container__element",
               [STYLES]: {
-                fontSize: "12px",
+                "font-size": "12px",
                 background: "#ccc"
               },
               [VALUES]: {
-                lineHeight: `1rh`
+                "line-height": `1rh`
               }
             }
           ]
@@ -115,7 +115,7 @@ test("should return change sets on first run", () => {
             {
               [SELECTOR]: ".Container__element",
               [STYLES]: {
-                fontSize: "14px"
+                "font-size": "14px"
               }
             }
           ]
@@ -136,8 +136,8 @@ test("should return change sets on first run", () => {
     },
     ".Container__element": {
       addStyle: {
-        fontSize: "14px",
-        lineHeight: "1.00px",
+        "font-size": "14px",
+        "line-height": "1.00px",
         background: "#ccc"
       }
     }
@@ -188,7 +188,7 @@ test("should generate remove change set", () => {
               [SELECTOR]: ".Container",
               [STYLES]: {},
               [VALUES]: {
-                lineHeight: `10rh`
+                "line-height": `10rh`
               }
             }
           ]
@@ -199,11 +199,11 @@ test("should generate remove change set", () => {
             {
               [SELECTOR]: ".Container",
               [STYLES]: {
-                fontSize: "14px",
+                "font-size": "14px",
                 background: "#bbb"
               },
               [VALUES]: {
-                lineHeight: `2rh`
+                "line-height": `2rh`
               }
             },
             {
@@ -213,7 +213,7 @@ test("should generate remove change set", () => {
                 border: "none"
               },
               [VALUES]: {
-                fontSize: `1rh`
+                "font-size": `1rh`
               }
             }
           ]
@@ -230,15 +230,15 @@ test("should generate remove change set", () => {
     ".Container": {
       addStyle: {
         background: "#aaa",
-        lineHeight: "10.00px"
+        "line-height": "10.00px"
       },
-      removeProps: ["fontSize"]
+      removeProps: ["font-size"]
     },
     ".Container__element": {
       addStyle: {
         background: "#bbb"
       },
-      removeProps: ["border", "fontSize"]
+      removeProps: ["border", "font-size"]
     }
   });
   expect(registryData.queryState).toEqual([true, true, false]);
@@ -256,15 +256,15 @@ test("should generate empty change set if conditions allow", () => {
             {
               [SELECTOR]: ".Container",
               [STYLES]: {
-                fontSize: "14px",
+                "font-size": "14px",
                 background: "#bbb",
-                lineHeight: "16px"
+                "line-height": "16px"
               }
             },
             {
               [SELECTOR]: ".Container__element",
               [STYLES]: {
-                fontSize: "8px",
+                "font-size": "8px",
                 background: "#eee"
               }
             }
@@ -276,15 +276,15 @@ test("should generate empty change set if conditions allow", () => {
             {
               [SELECTOR]: ".Container",
               [STYLES]: {
-                fontSize: "16px",
+                "font-size": "16px",
                 background: "#ccc",
-                lineHeight: "18px"
+                "line-height": "18px"
               }
             },
             {
               [SELECTOR]: ".Container__element",
               [STYLES]: {
-                fontSize: "9px",
+                "font-size": "9px",
                 background: "#fff"
               }
             }
@@ -317,13 +317,13 @@ test("should always recalculate values", () => {
             {
               [SELECTOR]: ".Container",
               [VALUES]: {
-                fontSize: `2rh`
+                "font-size": `2rh`
               }
             },
             {
               [SELECTOR]: ".Container__element",
               [VALUES]: {
-                fontSize: `4rh`
+                "font-size": `4rh`
               }
             }
           ]
@@ -334,7 +334,7 @@ test("should always recalculate values", () => {
             {
               [SELECTOR]: ".Container",
               [VALUES]: {
-                fontSize: `3rh`
+                "font-size": `3rh`
               }
             }
           ]
@@ -345,13 +345,13 @@ test("should always recalculate values", () => {
             {
               [SELECTOR]: ".Container",
               [VALUES]: {
-                lineHeight: `4rh`
+                "line-height": `4rh`
               }
             },
             {
               [SELECTOR]: ".Container__element",
               [VALUES]: {
-                lineHeight: `3rh`
+                "line-height": `3rh`
               }
             }
           ]
@@ -366,14 +366,14 @@ test("should always recalculate values", () => {
   expect(getChangedStyles(element, size)).toEqual({
     ".Container": {
       addStyle: {
-        lineHeight: "8.00px",
-        fontSize: "6.00px"
+        "line-height": "8.00px",
+        "font-size": "6.00px"
       }
     },
     ".Container__element": {
       addStyle: {
-        lineHeight: "6.00px",
-        fontSize: "8.00px"
+        "line-height": "6.00px",
+        "font-size": "8.00px"
       }
     }
   });
@@ -392,8 +392,8 @@ test("should be able to limit the precision of generated css values", () => {
             {
               [SELECTOR]: ".Container",
               [VALUES]: {
-                fontSize: `22.5rh`,
-                lineHeight: `22.4rh`
+                "font-size": `22.5rh`,
+                "line-height": `22.4rh`
               }
             }
           ]
@@ -409,8 +409,8 @@ test("should be able to limit the precision of generated css values", () => {
   expect(getChangedStyles(element, size)).toEqual({
     ".Container": {
       addStyle: {
-        fontSize: "27.68px",
-        lineHeight: "27.55px"
+        "font-size": "27.68px",
+        "line-height": "27.55px"
       }
     }
   });
@@ -430,8 +430,8 @@ test("should handle multiple prop removal over multiple queries", () => {
               [SELECTOR]: ".Container",
               [STYLES]: {
                 border: "none",
-                fontSize: "12px",
-                lineHeight: "15px"
+                "font-size": "12px",
+                "line-height": "15px"
               }
             }
           ]
@@ -442,7 +442,7 @@ test("should handle multiple prop removal over multiple queries", () => {
             {
               [SELECTOR]: ".Container",
               [STYLES]: {
-                fontSize: "13px"
+                "font-size": "13px"
               }
             }
           ]
@@ -456,7 +456,7 @@ test("should handle multiple prop removal over multiple queries", () => {
                 border: "1px solid"
               },
               [VALUES]: {
-                lineHeight: `2rh`
+                "line-height": `2rh`
               }
             }
           ]
@@ -473,8 +473,8 @@ test("should handle multiple prop removal over multiple queries", () => {
     ".Container": {
       addStyle: {
         border: "none",
-        fontSize: "13px",
-        lineHeight: "15px"
+        "font-size": "13px",
+        "line-height": "15px"
       }
     }
   });