Media queries splitted in different files

README.md

@@ -10,7 +10,7 @@ You have input.css (take note on similar media query):
 .header-main {
   background-image: url("/images/branding/logo.main.png");
 }
-@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
+@media all and (min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
   .header-main {
     background-image: url("/images/branding/[email protected]");
     -webkit-background-size: auto auto;
@@ -21,7 +21,7 @@ You have input.css (take note on similar media query):
 .footer-main {
   background-image: url("/images/branding/logo.main.png");
 }
-@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
+@media all and (min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
   .footer-main {
     background-image: url("/images/branding/[email protected]");
     -webkit-background-size: auto auto;
@@ -63,6 +63,33 @@ The result is output.css:
 }
 ```
 
+Split in different files:
+
+```
+group-css-media-queries -s input.css
+```
+
+Result is:
+
+```
+Creating app-splitted/app-root.css
+Creating app-splitted/app-all-and-(min-device-pixel-ratio:1.5)(min-resolution:138dpi)(min-resolution:1.5dppx).css
+```
+
+Split in different files in a custom directory:
+
+```
+group-css-media-queries -s input.css -d custom-dir
+```
+
+Result is:
+
+```
+Creating custom-dir/app-root.css
+Creating custom-dir/app-all-and-(min-device-pixel-ratio:1.5)(min-resolution:138dpi)(min-resolution:1.5dppx).css
+```
+
+
 Voila!
 
 # Installing

bin/group-css-media-queries

@@ -1,39 +1,115 @@
 #!/usr/bin/env node
 
-var fs = require('fs');
+var fs        = require('fs'),
+    path      = require('path'),
+    main      = require(path.join(path.dirname(fs.realpathSync(__filename)), '../')),
+    argv      = require('optimist').argv,
+    slugify   = require('slugify'),
+    stringify = require('css-stringify'),
+    colors    = require('colors'),
+    mkdirp    = require('mkdirp');
 
-var path = require('path');
-var main = require(path.join(path.dirname(fs.realpathSync(__filename)), '../'));
+// Help message
+var help = 
+ "Usage:\n"
++"  group-css-media-queries [options] [input_file] [output_file]\n\n"
++"Options:\n"
++"  -s, --split    split output in pultiple files\n"
++"  -d, --dir      output files to this directory\n"
++"  -h, --help     display this message"
+;
+
+// Display help ?
+if ( argv.h || argv.help ) {
+    console.log(help);
+    process.exit(0);
+}
+
+// No input file provided ?
+if ( !argv.s && !argv.split && !argv._.length ) {
+    console.log("Error: no input file provided")
+    console.log(help);
+    process.exit(-1);
+}
 
 var input = function(cb) {
-	var inputFilename = process.argv[2];
-	if (inputFilename) {
-		cb(fs.readFileSync(inputFilename, "utf8"));
-	} else {
-		var data = "";
-		process.stdin.resume();
-		process.stdin.setEncoding('utf8');
-
-		process.stdin.on('data', function(chunk) {
-			data += chunk;
-		});
-
-		process.stdin.on('end', function() {
-			cb(data);
-		});
-	}
+    var inputFilename = argv.s || argv.split || argv._[0];
+    if (inputFilename) {
+        cb(fs.readFileSync(inputFilename, "utf8"));
+    } else {
+        var data = "";
+        process.stdin.resume();
+        process.stdin.setEncoding('utf8');
+
+        process.stdin.on('data', function(chunk) {
+            data += chunk;
+        });
+
+        process.stdin.on('end', function() {
+            cb(data);
+        });
+    }
 };
 
 var output = function(data) {
-	var outputFilename = process.argv[3];
-	if (outputFilename) {
-		fs.writeFileSync(outputFilename, data);
-	} else {
-		console.log(data);
-	}
+
+    // Split result
+    if (argv.s || argv.split){
+        var inputFilename = argv.s || argv.split || argv._[0];
+        var outputBaseName = path.basename(inputFilename).replace(path.extname(inputFilename), "");
+        var outputDir = argv.d || argv.dir || (outputBaseName + "-splitted");
+
+        // Create output dir
+        mkdirp(outputDir, function (err) {
+            if (err){
+                console.error(err)
+                process.exit(-1);
+            }
+
+            var outputName, rules, sheet;
+
+            // Loop on each media group rules.
+            // [0] => root rules
+            for(var i=0; i<data.length; i++){
+                // Root rules
+                if (i == 0){
+                    outputName = outputBaseName + "-root.css";
+                    rules = data[i];
+                }
+                // Other media rules
+                else{
+                    outputName = data[i].media.replace(/:\s+/g, "-");
+                    outputName = outputBaseName + "-" + slugify(outputName) + ".css";
+                    rules = [data[i]];
+                }
+                outputName = outputDir + '/' + outputName;
+
+                console.log ("Creating " + outputName.green);
+                sheet = {
+                    type: 'stylesheet',
+                    stylesheet: {
+                        rules: rules
+                    }
+                }
+                // Write css file
+                fs.writeFileSync(outputName, stringify(sheet));
+            }
+        });
+    }
+    // Or in a single file (or direct output) 
+    else{
+        var outputFilename = argv._[1];
+        if (outputFilename) {
+            fs.writeFileSync(outputFilename, data);
+        } else {
+            console.log(data);
+        }
+
+    }
 };
 
+// Do the work
 input(function(data) {
-	result = main(data);
-	output(result);
+    result = main(data, argv.s || argv.split);
+    output(result);
 });

index.coffee

@@ -2,7 +2,7 @@
 parse = require 'css-parse'
 stringify = require 'css-stringify'
 
-module.exports = (css) ->
+module.exports = (css, split) ->
 	# parse it
 	parsed = parse css
 
@@ -24,8 +24,10 @@ module.exports = (css) ->
 			media: media
 			rules: rules
 
-	# modify parsed AST
-	parsed.stylesheet.rules = rootRules.concat mediaRules
-
 	# output
-	stringify parsed
+	if not split
+		stringify parsed
+	# or send array
+	else
+		[rootRules].concat mediaRules
+

package.json

@@ -18,7 +18,11 @@
   },
   "dependencies": {
     "css-parse": "*",
-    "css-stringify": "*"
+    "css-stringify": "*",
+    "optimist": "*",
+    "slugify": "*",
+    "colors": "*",
+    "mkdirp": "*"
   },
   "engines": {
     "node": ">=0.8.0"