@zeecoder/container-query - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

build/postcss/getConditionsFromQueryParams.js

@@ -23,18 +23,18 @@ 'use strict';
 function getConditionsFromQueryParams(params) {
-    var conditionArr = params.match(/\(([^\)]*)\)/g);
+    return params.split(',').map(function (andParams) {
+        return andParams.match(/\(([^\)]*)\)/g).map(function (condition) {
+            var conditionArr = (0, _lodash2.default)(condition, '()');
 
-    return conditionArr.map(function (condition) {
-        var conditionArr = (0, _lodash2.default)(condition, '()');
+            conditionArr = conditionArr.match(/([a-z-]*)([ :><=]*)([a-z0-9\.]*)/i);
+            conditionArr.shift();
 
-        conditionArr = conditionArr.match(/([a-z-]*)([ :><=]*)([a-z0-9\.]*)/i);
-        conditionArr.shift();
+            conditionArr = conditionArr.map(_lodash2.default);
 
-        conditionArr = conditionArr.map(_lodash2.default);
+            if (['landscape', 'portrait'].indexOf(conditionArr[2]) === -1) {
+                conditionArr[2] = parseFloat(conditionArr[2]);
+            }
 
-        if (['landscape', 'portrait'].indexOf(conditionArr[2]) === -1) {
-            conditionArr[2] = parseFloat(conditionArr[2]);
-        }
-
-        return conditionArr;
+            return conditionArr;
+        });
     });
 }

build/runtime/getConditionFunction.js

@@ -8,3 +8,3 @@ 'use strict';
 /**
- * Combines condition function into a single one.
+ * Combines condition functions into a single "and" one.
  *
@@ -27,2 +27,21 @@ * @param {function[]} conditionFunctions
 
+/**
+ * Combines condition functions into a single "or" one.
+ *
+ * @param {function[]} conditionFunctions
+ * @param {ContainerDimensions} containerDimensions
+ *
+ * @returns {boolean}
+ */
+function orCondition(conditionFunctions, containerDimensions) {
+    var conditionFunctionsLength = conditionFunctions.length;
+    for (var i = 0; i < conditionFunctionsLength; i++) {
+        if (conditionFunctions[i](containerDimensions)) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
 function noCondition() {
@@ -33,10 +52,101 @@ return true;
 /**
+ * Converts a condition array to a function like so:
+ * `[ "orientation", ":", "portrait" ]` => function
+ *
+ * @param {string[]} condition
+ *
+ * @returns {function}
+ */
+function convertConditionArrayToFunction(condition) {
+    var feature = condition[0];
+    var operation = condition[1];
+    var value = condition[2];
+
+    if (feature === 'width') {
+        if (operation === '>') {
+            return function (containerDimensions) {
+                return containerDimensions.width > value;
+            };
+        } else if (operation === '>=') {
+            return function (containerDimensions) {
+                return containerDimensions.width >= value;
+            };
+        } else if (operation === '<') {
+            return function (containerDimensions) {
+                return containerDimensions.width < value;
+            };
+        } else if (operation === '<=') {
+            return function (containerDimensions) {
+                return containerDimensions.width <= value;
+            };
+        }
+    } else if (feature === 'height') {
+        if (operation === '>') {
+            return function (containerDimensions) {
+                return containerDimensions.height > value;
+            };
+        } else if (operation === '>=') {
+            return function (containerDimensions) {
+                return containerDimensions.height >= value;
+            };
+        } else if (operation === '<') {
+            return function (containerDimensions) {
+                return containerDimensions.height < value;
+            };
+        } else if (operation === '<=') {
+            return function (containerDimensions) {
+                return containerDimensions.height <= value;
+            };
+        }
+    } else if (feature === 'aspect-ratio') {
+        if (operation === '>') {
+            return function (containerDimensions) {
+                return containerDimensions.width / containerDimensions.height > value;
+            };
+        } else if (operation === '>=') {
+            return function (containerDimensions) {
+                return containerDimensions.width / containerDimensions.height >= value;
+            };
+        } else if (operation === '<') {
+            return function (containerDimensions) {
+                return containerDimensions.width / containerDimensions.height < value;
+            };
+        } else if (operation === '<=') {
+            return function (containerDimensions) {
+                return containerDimensions.width / containerDimensions.height <= value;
+            };
+        }
+    } else if (feature === 'orientation') {
+        if (value === 'portrait') {
+            return function (containerDimensions) {
+                return containerDimensions.height >= containerDimensions.width;
+            };
+        } else {
+            return function (containerDimensions) {
+                return containerDimensions.height < containerDimensions.width;
+            };
+        }
+    }
+
+    // If the condition was unsupported
+    return noCondition;
+}
+
+/**
  * Converts an array of condition arrays to a function, that accepts a container
  * dimension object with `with` and `height` props.
  *
- * @param {Array[]} [conditions] An array of conditions following the:
- * `[ <feature>, <operation>, <value> ]` pattern
- * Examples:
- * [ "orientation", ":", "landscape" ]
- * [ "width", ">=", 10 ]
+ * @param {Array[]} [conditions] An array of conditions represented by a
+ * multidimensional array where
+ * "(width > 100) and (height > 100), (orientation: landscape)"
+ * is expected to be:
+ * [
+ *   [
+ *     [ "width", ">", 100 ],
+ *     [ "height", ">", 100 ],
+ *   ],
+ *   [
+ *     [ "orientation", ":", "landscape" ]
+ *   ]
+ * ]
  *
@@ -46,2 +156,4 @@ * @returns {function}
 function getConditionFunction(conditions) {
+    var _this = this;
+
     if (!Array.isArray(conditions) || conditions.length === 0) {
@@ -51,78 +163,5 @@ return noCondition;
 
-    var conditionFunctions = conditions.map(function (condition) {
-        var feature = condition[0];
-        var operation = condition[1];
-        var value = condition[2];
-
-        if (feature === 'width') {
-            if (operation === '>') {
-                return function (containerDimensions) {
-                    return containerDimensions.width > value;
-                };
-            } else if (operation === '>=') {
-                return function (containerDimensions) {
-                    return containerDimensions.width >= value;
-                };
-            } else if (operation === '<') {
-                return function (containerDimensions) {
-                    return containerDimensions.width < value;
-                };
-            } else if (operation === '<=') {
-                return function (containerDimensions) {
-                    return containerDimensions.width <= value;
-                };
-            }
-        } else if (feature === 'height') {
-            if (operation === '>') {
-                return function (containerDimensions) {
-                    return containerDimensions.height > value;
-                };
-            } else if (operation === '>=') {
-                return function (containerDimensions) {
-                    return containerDimensions.height >= value;
-                };
-            } else if (operation === '<') {
-                return function (containerDimensions) {
-                    return containerDimensions.height < value;
-                };
-            } else if (operation === '<=') {
-                return function (containerDimensions) {
-                    return containerDimensions.height <= value;
-                };
-            }
-        } else if (feature === 'aspect-ratio') {
-            if (operation === '>') {
-                return function (containerDimensions) {
-                    return containerDimensions.width / containerDimensions.height > value;
-                };
-            } else if (operation === '>=') {
-                return function (containerDimensions) {
-                    return containerDimensions.width / containerDimensions.height >= value;
-                };
-            } else if (operation === '<') {
-                return function (containerDimensions) {
-                    return containerDimensions.width / containerDimensions.height < value;
-                };
-            } else if (operation === '<=') {
-                return function (containerDimensions) {
-                    return containerDimensions.width / containerDimensions.height <= value;
-                };
-            }
-        } else if (feature === 'orientation') {
-            if (value === 'portrait') {
-                return function (containerDimensions) {
-                    return containerDimensions.height >= containerDimensions.width;
-                };
-            } else {
-                return function (containerDimensions) {
-                    return containerDimensions.height < containerDimensions.width;
-                };
-            }
-        }
-
-        // If the condition was unsupported
-        return noCondition;
-    });
-
-    return andCondition.bind(this, conditionFunctions);
+    return orCondition.bind(this, conditions.map(function (andConditions) {
+        return andCondition.bind(_this, andConditions.map(convertConditionArrayToFunction));
+    }));
 }

CHANGELOG.md

 # CHANGELOG
 
+## 1.2.0 (2017-02-28)
+
+- Made "or" queries work as they do for @media queries
+
+## 1.1.1 (2017-02-27)
+
+- Attempt to make the readme appear on npm
+
 ## 1.1.0 (2017-02-27)
@@ -4,0 +12,0 @@

package.json

 {
   "name": "@zeecoder/container-query",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A PostCSS plugin and Javascript runtime combination, which allows you to write @container queries in your CSS the same way you would write @media queries.",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

30954

increased by2.89%

Lines of code

706

increased by5.53%

No dependency changes