added media queries

Author: streamich

README.md

@@ -193,21 +193,43 @@ console.log(css.atoms);
 
 Output:
 
-    { d: 'display', 
+    { d: 'display',
       mar: 'margin',
-      pad: 'padding'
-      bd: 'border', 
-      col: 'color', 
+      pad: 'padding',
+      bd: 'border',
+      col: 'color',
       op: 'opacity',
-      bg: 'backgroun
-      fz: 'font-size
-      fs: 'font-styl
-      bxz: 'box-sizi
+      bg: 'background',
+      fz: 'font-size',
+      fs: 'font-style',
+      lh: 'line-height',
+      bxz: 'box-sizing',
       cur: 'cursor',
-      ov: 'overflow'
-      pos: 'position
-      ls: 'list-styl
-      td: 'text-deco
+      ov: 'overflow',
+      pos: 'position',
+      ls: 'list-style',
+      ta: 'text-align',
+      td: 'text-decoration',
       fl: 'float',
-      w: 'width', 
-      h: 'height' } 
+      w: 'width',
+      h: 'height' }
+
+
+## Media Queries
+
+```js
+// ## Media queries
+console.log(css.css({
+    '@media (max-width: 600px)': {
+        '.facet_sidebar': {
+            display: 'none'
+        }
+    }
+}));
+```
+
+Output:
+
+    @media (max-width: 600px){
+        .facet_sidebar{display:none}
+    }

index.js

@@ -40,6 +40,11 @@ function toBlocks(pojo) {
     for (var selector in pojo) {
         if (pojo.hasOwnProperty(selector)) {
             (function process_block(styles) {
+                // `@media` query
+                if (selector[0] === '@') {
+                    blocks.push([selector, toBlocks(styles)]);
+                    return;
+                }
                 if (!(styles instanceof Array))
                     styles = [styles];
                 var tmp = {};
@@ -93,14 +98,23 @@ function toBlocks(pojo) {
     return blocks;
 }
 exports.toBlocks = toBlocks;
-function css(pojo) {
-    var blocks = toBlocks(pojo);
+function concat(blocks) {
     var blockstrs = [];
     for (var i = 0; i < blocks.length; i++) {
-        if (blocks[i][1].length)
-            blockstrs.push(blocks[i][0] + '{' + blocks[i][1].join(';') + '}');
+        if (blocks[i][1].length) {
+            if (typeof blocks[i][1][0] === 'string') {
+                blockstrs.push(blocks[i][0] + '{' + blocks[i][1].join(';') + '}');
+            }
+            else {
+                blockstrs.push(blocks[i][0] + '{' + concat(blocks[i][1]) + '}');
+            }
+        }
     }
-    return blockstrs.join('\n');
+    return blockstrs.join('');
+}
+function css(pojo) {
+    var blocks = toBlocks(pojo);
+    return concat(blocks);
 }
 exports.css = css;
 // Inject CSS into DOM

index.ts

@@ -31,10 +31,24 @@ export var atoms = {
 };
 
 
-export function toBlocks(pojo): [string, string[]][] {
+export type Tselector = string;
+export type Tstyles = string[];
+export type Tblock = [Tselector, Tstyles];
+export type Tquery = string;
+export type Tmediablock = [Tquery, Tblock[]];
+
+
+export function toBlocks(pojo): (Tblock|Tmediablock)[] {
     var blocks = [];
 
     for(var selector in pojo) { if(pojo.hasOwnProperty(selector)) { (function process_block(styles) {
+
+        // `@media` query
+        if(selector[0] === '@') {
+            blocks.push([selector, toBlocks(styles)]);
+            return;
+        }
+
         if(!(styles instanceof Array)) styles = [styles];
 
         var tmp: any = {};
@@ -80,15 +94,24 @@ export function toBlocks(pojo): [string, string[]][] {
 }
 
 
-export function css(pojo): string {
-    var blocks = toBlocks(pojo);
-
+function concat(blocks) {
     var blockstrs = [];
     for(var i = 0; i < blocks.length; i++) {
-        if(blocks[i][1].length)
-            blockstrs.push(blocks[i][0] + '{' + blocks[i][1].join(';') + '}');
+        if(blocks[i][1].length) {
+            if(typeof blocks[i][1][0] === 'string') { // `Tblock`
+                blockstrs.push(blocks[i][0] + '{' + blocks[i][1].join(';') + '}');
+            } else { // `Tmediablock`
+                blockstrs.push(blocks[i][0] + '{' + concat(blocks[i][1]) + '}');
+            }
+        }
     }
-    return blockstrs.join('\n');
+    return blockstrs.join('');
+}
+
+
+export function css(pojo): string {
+    var blocks = toBlocks(pojo);
+    return concat(blocks);
 }
 
 // Inject CSS into DOM

media.js

@@ -0,0 +1,22 @@
+var css = require('./index');
+// ## Media queries
+var pojo = {
+    h1: {
+        td: 'none'
+    },
+    '@media (max-width: 600px)': {
+        '.facet_sidebar': {
+            display: 'none'
+        },
+        h1: {
+            color: 'red',
+            span: {
+                color: 'green'
+            }
+        }
+    }
+};
+var bl = css.toBlocks(pojo);
+console.log(bl);
+console.log(bl[0][1]);
+console.log(css.css(pojo));

media.ts

@@ -0,0 +1,27 @@
+declare var require: any;
+var css = require('./index');
+
+
+// ## Media queries
+var pojo = {
+    h1: {
+        td: 'none',
+    },
+    '@media (max-width: 600px)': {
+        '.facet_sidebar': {
+            display: 'none'
+        },
+        h1: {
+            color: 'red',
+            span: {
+                color: 'green',
+            }
+        }
+    }
+};
+var bl = css.toBlocks(pojo);
+
+console.log(bl);
+console.log(bl[0][1]);
+console.log(css.css(pojo));
+

package.json

@@ -1,7 +1,7 @@
 {
   "name": "css-light",
   "description": "Write CSS in JavaScript",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "keywords": [
     "css",
     "javascript",

test.js

@@ -121,3 +121,12 @@ console.log(css.css({
 }));
 // div{padding:0 0 0 0;padding:0 0 0 0}
 console.log(css.atoms);
+// ## Media queries
+console.log(css.css({
+    '@media (max-width: 600px)': {
+        '.facet_sidebar': {
+            display: 'none'
+        }
+    }
+}));
+// @media (max-width: 600px){.facet_sidebar{display:none}}

test.ts

@@ -141,3 +141,13 @@ console.log(css.css({
 // div{padding:0 0 0 0;padding:0 0 0 0}
 console.log(css.atoms);
 
+
+// ## Media queries
+console.log(css.css({
+    '@media (max-width: 600px)': {
+        '.facet_sidebar': {
+            display: 'none'
+        }
+    }
+}));
+// @media (max-width: 600px){.facet_sidebar{display:none}}