From 6237f9990b8053f94c915b9516bef89249105427 Mon Sep 17 00:00:00 2001 From: Alexis Faye Date: Mon, 3 Feb 2014 10:48:05 +0100 Subject: [PATCH 1/3] Media queries splitted in different files --- bin/group-css-media-queries | 132 ++++++++++++++++++++++++++++-------- index.coffee | 19 ++++-- index.js | 19 ++++-- package.json | 5 +- 4 files changed, 137 insertions(+), 38 deletions(-) diff --git a/bin/group-css-media-queries b/bin/group-css-media-queries index abc774f..0dc7da2 100755 --- a/bin/group-css-media-queries +++ b/bin/group-css-media-queries @@ -1,39 +1,117 @@ #!/usr/bin/env node -var fs = require('fs'); +var fs = require('fs'); +var path = require('path'); +var main = require(path.join(path.dirname(fs.realpathSync(__filename)), '../')); +var argv = require('optimist').argv; +var slugify = require('slugify'); +var stringify = require('css-stringify'); +var colors = require('colors'); -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(0); +} + +// Util : returns base name of a path (without extention or path) +var baseName = function (str) { + var base = new String(str).substring(str.lastIndexOf('/') + 1); + if(base.lastIndexOf(".") != -1) + base = base.substring(0, base.lastIndexOf(".")); + return base; +} 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); - } + + if (argv.s || argv.split){ + var inputFilename = argv.s || argv.split || argv._[0]; + var outputBaseName = baseName(inputFilename); + var outputDir = argv.d || argv.dir || (outputBaseName + "-splitted"); + + fs.mkdir(outputDir, function(err){ + if (err) throw err; + }); + + 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,17 @@ 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 + # res = [] + res = [rootRules] + res.push + + for rule in mediaRules + res.push rule + + res + diff --git a/index.js b/index.js index 780ae8c..3039fdd 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,8 +6,8 @@ stringify = require('css-stringify'); - module.exports = function(css) { - var media, mediaRules, medias, parsed, rootRules, rule, rules, _i, _len, _ref; + module.exports = function(css, split) { + var media, mediaRules, medias, parsed, res, rootRules, rule, rules, _i, _j, _len, _len1, _ref; parsed = parse(css); medias = {}; rootRules = []; @@ -32,8 +32,17 @@ rules: rules }); } - parsed.stylesheet.rules = rootRules.concat(mediaRules); - return stringify(parsed); + if (!split) { + return stringify(parsed); + } else { + res = [rootRules]; + res.push; + for (_j = 0, _len1 = mediaRules.length; _j < _len1; _j++) { + rule = mediaRules[_j]; + res.push(rule); + } + return res; + } }; }).call(this); diff --git a/package.json b/package.json index 35ffae1..d705355 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,10 @@ }, "dependencies": { "css-parse": "*", - "css-stringify": "*" + "css-stringify": "*", + "optimist": "*", + "slugify": "*", + "colors": "*" }, "engines": { "node": ">=0.8.0" From f9e8fb36a58e10d64428aaa9a4e8f1ff2a0bcd01 Mon Sep 17 00:00:00 2001 From: Alexis Faye Date: Mon, 3 Feb 2014 12:53:24 +0100 Subject: [PATCH 2/3] fix code after review --- bin/group-css-media-queries | 90 ++++++++++++++++++------------------- index.coffee | 9 +--- index.js | 10 +---- package.json | 3 +- 4 files changed, 49 insertions(+), 63 deletions(-) diff --git a/bin/group-css-media-queries b/bin/group-css-media-queries index 0dc7da2..6b29f41 100755 --- a/bin/group-css-media-queries +++ b/bin/group-css-media-queries @@ -1,12 +1,13 @@ #!/usr/bin/env node -var fs = require('fs'); -var path = require('path'); -var main = require(path.join(path.dirname(fs.realpathSync(__filename)), '../')); -var argv = require('optimist').argv; -var slugify = require('slugify'); -var stringify = require('css-stringify'); -var colors = require('colors'); +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'); // Help message var help = @@ -28,15 +29,7 @@ if ( argv.h || argv.help ) { if ( !argv.s && !argv.split && !argv._.length ) { console.log("Error: no input file provided") console.log(help); - process.exit(0); -} - -// Util : returns base name of a path (without extention or path) -var baseName = function (str) { - var base = new String(str).substring(str.lastIndexOf('/') + 1); - if(base.lastIndexOf(".") != -1) - base = base.substring(0, base.lastIndexOf(".")); - return base; + process.exit(-1); } var input = function(cb) { @@ -60,45 +53,50 @@ var input = function(cb) { var output = function(data) { + // Split result if (argv.s || argv.split){ var inputFilename = argv.s || argv.split || argv._[0]; - var outputBaseName = baseName(inputFilename); + var outputBaseName = path.basename(inputFilename).replace(path.extname(inputFilename), ""); var outputDir = argv.d || argv.dir || (outputBaseName + "-splitted"); - fs.mkdir(outputDir, function(err){ - if (err) throw err; - }); - - var outputName, rules, sheet; - - // Loop on each media group rules. - // [0] => root rules - for(var i=0; i root rules + for(var i=0; i stringify parsed # or send array else - # res = [] - res = [rootRules] - res.push - - for rule in mediaRules - res.push rule - - res + [rootRules].concat mediaRules diff --git a/index.js b/index.js index 3039fdd..9b5044a 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,7 @@ stringify = require('css-stringify'); module.exports = function(css, split) { - var media, mediaRules, medias, parsed, res, rootRules, rule, rules, _i, _j, _len, _len1, _ref; + var media, mediaRules, medias, parsed, rootRules, rule, rules, _i, _len, _ref; parsed = parse(css); medias = {}; rootRules = []; @@ -35,13 +35,7 @@ if (!split) { return stringify(parsed); } else { - res = [rootRules]; - res.push; - for (_j = 0, _len1 = mediaRules.length; _j < _len1; _j++) { - rule = mediaRules[_j]; - res.push(rule); - } - return res; + return [rootRules].concat(mediaRules); } }; diff --git a/package.json b/package.json index d705355..876b519 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "css-stringify": "*", "optimist": "*", "slugify": "*", - "colors": "*" + "colors": "*", + "mkdirp": "*" }, "engines": { "node": ">=0.8.0" From 8f9833fb81f7ad78d7685d711051c54752eba430 Mon Sep 17 00:00:00 2001 From: Alexis Faye Date: Mon, 3 Feb 2014 13:00:34 +0100 Subject: [PATCH 3/3] update doc --- README.md | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) 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