diff --git a/README.md b/README.md index 194ce9d..d7c15c1 100644 --- a/README.md +++ b/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/logo.main@2x.png"); -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/logo.main@2x.png"); -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 diff --git a/bin/group-css-media-queries b/bin/group-css-media-queries index abc774f..6b29f41 100755 --- a/bin/group-css-media-queries +++ b/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 +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 + diff --git a/index.js b/index.js index 780ae8c..9b5044a 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -// Generated by CoffeeScript 1.6.3 +// Generated by CoffeeScript 1.7.1 (function() { var parse, stringify; @@ -6,7 +6,7 @@ stringify = require('css-stringify'); - module.exports = function(css) { + module.exports = function(css, split) { var media, mediaRules, medias, parsed, rootRules, rule, rules, _i, _len, _ref; parsed = parse(css); medias = {}; @@ -32,8 +32,11 @@ rules: rules }); } - parsed.stylesheet.rules = rootRules.concat(mediaRules); - return stringify(parsed); + if (!split) { + return stringify(parsed); + } else { + return [rootRules].concat(mediaRules); + } }; }).call(this); diff --git a/package.json b/package.json index 35ffae1..876b519 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,11 @@ }, "dependencies": { "css-parse": "*", - "css-stringify": "*" + "css-stringify": "*", + "optimist": "*", + "slugify": "*", + "colors": "*", + "mkdirp": "*" }, "engines": { "node": ">=0.8.0"