Made "or" queries work as they do for @media queries

Author: ZeeCoder

CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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)
 
 - cmin / cmax unit support

package.json

@@ -1,6 +1,6 @@
 {
   "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.",
   "main": "index.js",
   "author": "Viktor Hubert <[email protected]>",

src/postcss/containerQuery.spec.js

@@ -88,6 +88,12 @@ test('proper json and css output', () => {
                     }
                     /* Ignore this */
                 }
+                
+                @container (height >= 100px) and (width >= 100px), (aspect-ratio > 3.5) {
+                    .container {
+                        background: #000;
+                    }
+                }
 
                 /* Ignore this */
 
@@ -150,10 +156,10 @@ test('proper json and css output', () => {
                         ]
                     },
                     {
-                        "conditions": [
+                        "conditions": [[
                             [ "height", ">=", 100 ],
                             [ "width", ">=", 100 ],
-                        ],
+                        ]],
                         "elements": [
                             {
                                 "selector": ".container",
@@ -164,9 +170,9 @@ test('proper json and css output', () => {
                         ]
                     },
                     {
-                        "conditions": [
+                        "conditions": [[
                             [ "height", ">=", 100 ],
-                        ],
+                        ]],
                         "elements": [
                             {
                                 "selector": ".container",
@@ -175,6 +181,25 @@ test('proper json and css output', () => {
                                 }
                             }
                         ]
+                    },
+                    {
+                        "conditions": [
+                            [
+                                [ "height", ">=", 100 ],
+                                [ "width", ">=", 100 ],
+                            ],
+                            [
+                                [ "aspect-ratio", ">", 3.5 ]
+                            ]
+                        ],
+                        "elements": [
+                            {
+                                "selector": ".container",
+                                "styles": {
+                                    "background": "#000"
+                                }
+                            }
+                        ]
                     }
                 ]
             });
@@ -202,13 +227,9 @@ test('proper json and css output', () => {
                         ]
                     },
                     {
-                        "conditions": [
-                            [
-                                "orientation",
-                                ":",
-                                "portrait"
-                            ]
-                        ],
+                        "conditions": [[
+                            [ "orientation", ":", "portrait" ]
+                        ]],
                         "elements": [
                             {
                                 "selector": ".container2",

src/postcss/getConditionsFromQueryParams.js

@@ -9,20 +9,20 @@ import trim from 'lodash.trim';
  * @returns {string[]}
  */
 export default function getConditionsFromQueryParams (params) {
-    let conditionArr = params.match(/\(([^\)]*)\)/g);
+    return params.split(',').map((andParams) => {
+        return andParams.match(/\(([^\)]*)\)/g).map((condition) => {
+            let conditionArr = trim(condition, '()');
 
-    return conditionArr.map((condition) => {
-        let conditionArr = trim(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(trim);
 
-        conditionArr = conditionArr.map(trim);
+            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;
+        });
     });
 }

src/postcss/getConditionsFromQueryParams.spec.js

@@ -1,51 +1,51 @@
 import getConditionsFromQueryParams from './getConditionsFromQueryParams';
 
 test('width condition should work with the "<", ">", "<=", ">=" and ":" operators', () => {
-    expect(getConditionsFromQueryParams('(width >= 42px)')).toEqual([
+    expect(getConditionsFromQueryParams('(width >= 42px)')).toEqual([[
         [ 'width', '>=', 42 ],
-    ]);
-    expect(getConditionsFromQueryParams('(width > 42px)')).toEqual([
+    ]]);
+    expect(getConditionsFromQueryParams('(width > 42px)')).toEqual([[
         [ 'width', '>', 42 ],
-    ]);
-    expect(getConditionsFromQueryParams('(width <= 42px)')).toEqual([
+    ]]);
+    expect(getConditionsFromQueryParams('(width <= 42px)')).toEqual([[
         [ 'width', '<=', 42 ],
-    ]);
-    expect(getConditionsFromQueryParams('(width < 42px)')).toEqual([
+    ]]);
+    expect(getConditionsFromQueryParams('(width < 42px)')).toEqual([[
         [ 'width', '<', 42 ],
-    ]);
+    ]]);
 });
 
 test('aspect-ratio should work with the "<", ">", "<=", ">=" and ":" operators', () => {
-    expect(getConditionsFromQueryParams('(aspect-ratio >= 0.5)')).toEqual([
+    expect(getConditionsFromQueryParams('(aspect-ratio >= 0.5)')).toEqual([[
         [ 'aspect-ratio', '>=', 0.5 ],
-    ]);
-    expect(getConditionsFromQueryParams('(aspect-ratio > 0.5)')).toEqual([
+    ]]);
+    expect(getConditionsFromQueryParams('(aspect-ratio > 0.5)')).toEqual([[
         [ 'aspect-ratio', '>', 0.5 ],
-    ]);
-    expect(getConditionsFromQueryParams('(aspect-ratio <= 0.5)')).toEqual([
+    ]]);
+    expect(getConditionsFromQueryParams('(aspect-ratio <= 0.5)')).toEqual([[
         [ 'aspect-ratio', '<=', 0.5 ],
-    ]);
-    expect(getConditionsFromQueryParams('(aspect-ratio < 0.5)')).toEqual([
+    ]]);
+    expect(getConditionsFromQueryParams('(aspect-ratio < 0.5)')).toEqual([[
         [ 'aspect-ratio', '<', 0.5 ],
-    ]);
+    ]]);
 });
 
 test('orientations with the : operator', () => {
-    expect(getConditionsFromQueryParams('(orientation: portrait)')).toEqual([
+    expect(getConditionsFromQueryParams('(orientation: portrait)')).toEqual([[
         [ 'orientation', ':', 'portrait' ],
-    ]);
-    expect(getConditionsFromQueryParams('(orientation: landscape)')).toEqual([
+    ]]);
+    expect(getConditionsFromQueryParams('(orientation: landscape)')).toEqual([[
         [ 'orientation', ':', 'landscape' ],
-    ]);
+    ]]);
 });
 
 test('should handle multiple "and" conditions', () => {
-    expect(getConditionsFromQueryParams('(orientation: landscape) and (width > 42px)')).toEqual([
+    expect(getConditionsFromQueryParams('(orientation: landscape) and (width > 42px)')).toEqual([[
         [ 'orientation', ':', 'landscape' ],
         [ 'width', '>', 42 ],
-    ]);
-    expect(getConditionsFromQueryParams('(width < 42px) and (height >= 42px)')).toEqual([
+    ]]);
+    expect(getConditionsFromQueryParams('(width < 42px) and (height >= 42px)')).toEqual([[
         [ 'width', '<', 42 ],
         [ 'height', '>=', 42 ],
-    ]);
+    ]]);
 });