Fixed unitless @container queries

Fixes #6

Author: ZeeCoder

CHANGELOG.md

@@ -0,0 +1,11 @@
+# CHANGELOG
+
+## 1.0.2 (2017-01-22)
+
+- BUGFIX (#6): Fixed unitless @container queries
+- Upgraded Jest from v18 to v19
+
+
+## 1.0.1 (2017-01-21)
+
+- Removed coverage/ and .babelrc from the installed package, hence making it a bit lighter.

README.md

@@ -32,12 +32,16 @@ change at any time. (Including minor / patch releases.)
 - Example function to save all container configurations in separate JSON files in a dir
 - Gulp example
     - PostCSS example
-    - SASS example
-    - Less -> no-go
+    - SASS example: works out of the box
+    - Less -> separate pipeline
 - Containers can have more than one instance of their elements
 - The container units are relative to the container's "inner" height / width.
 (Without the borders.)
 - Note possible circular issues
     - A container should not use container units for properties that would affect
     its width / height. These situations are not currently handled, so try to
     avoid them.
+    
+## 
+- To avoid circular deps, use overflow: hidden and avoid using container units on defined containers
+- Use native CSS techniques to achieve your goal whenever possible (css grid, flexbox)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeecoder/container-query",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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]>",
@@ -25,6 +25,7 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "jest": "^19.0.1",
     "lodash.camelcase": "^4.3.0",
     "lodash.trim": "^4.5.1",
     "postcss": "^5.2.13"

src/postcss/containerQuery.spec.js

@@ -76,13 +76,13 @@ test('proper json and css output', () => {
                     line-height: 100${HEIGHT_UNIT}px;
                 }
 
-                @container (height >= 100) and (width >= 100) {
+                @container (height >= 100px) and (width >= 100px) {
                     .container {
                         font-size: 70${HEIGHT_UNIT}px;
                     }
                 }
 
-                @container (height >= 100) {
+                @container (height >= 100px) {
                     .container {
                         background: none;
                     }
@@ -151,8 +151,8 @@ test('proper json and css output', () => {
                     },
                     {
                         "conditions": [
-                            [ "height", ">=", "100" ],
-                            [ "width", ">=", "100" ],
+                            [ "height", ">=", 100 ],
+                            [ "width", ">=", 100 ],
                         ],
                         "elements": [
                             {
@@ -165,7 +165,7 @@ test('proper json and css output', () => {
                     },
                     {
                         "conditions": [
-                            [ "height", ">=", "100" ],
+                            [ "height", ">=", 100 ],
                         ],
                         "elements": [
                             {

src/postcss/getConditionsFromQueryParams.js

@@ -19,6 +19,10 @@ export default function getConditionsFromQueryParams (params) {
 
         conditionArr = conditionArr.map(trim);
 
+        if ([ 'landscape', 'portrait' ].indexOf(conditionArr[2]) === -1) {
+            conditionArr[2] = parseInt(conditionArr[2]);
+        }
+
         return conditionArr;
     });
 }

src/postcss/getConditionsFromQueryParams.spec.js

@@ -2,16 +2,16 @@ import getConditionsFromQueryParams from './getConditionsFromQueryParams';
 
 test('single condition should work with the "<", ">", "<=", ">=" and ":" operators', () => {
     expect(getConditionsFromQueryParams('(width >= 42px)')).toEqual([
-        [ 'width', '>=', '42px' ],
+        [ 'width', '>=', 42 ],
     ]);
     expect(getConditionsFromQueryParams('(width > 42px)')).toEqual([
-        [ 'width', '>', '42px' ],
+        [ 'width', '>', 42 ],
     ]);
     expect(getConditionsFromQueryParams('(width <= 42px)')).toEqual([
-        [ 'width', '<=', '42px' ],
+        [ 'width', '<=', 42 ],
     ]);
     expect(getConditionsFromQueryParams('(width < 42px)')).toEqual([
-        [ 'width', '<', '42px' ],
+        [ 'width', '<', 42 ],
     ]);
     expect(getConditionsFromQueryParams('(orientation: portrait)')).toEqual([
         [ 'orientation', ':', 'portrait' ],
@@ -24,10 +24,10 @@ test('single condition should work with the "<", ">", "<=", ">=" and ":" operato
 test('should handle multiple "and" conditions', () => {
     expect(getConditionsFromQueryParams('(orientation: landscape) and (width > 42px)')).toEqual([
         [ 'orientation', ':', 'landscape' ],
-        [ 'width', '>', '42px' ],
+        [ 'width', '>', 42 ],
     ]);
     expect(getConditionsFromQueryParams('(width < 42px) and (height >= 42px)')).toEqual([
-        [ 'width', '<', '42px' ],
-        [ 'height', '>=', '42px' ],
+        [ 'width', '<', 42 ],
+        [ 'height', '>=', 42 ],
     ]);
 });