media-query-extractor
Groups css rules by media queries and extracts them to separate files.
Warning
Using this tool will change the position of the css rules in your files. So if you rely on properties overwriting, it will mess your styles.
This tool can only be used when you master your css files, using the right methodology (BEM), with low specificity.
Install
npm install media-query-extractor # for module export npm install -g media-query-extractor # globally for command line
Example
/* style.css */ {}{}{}
Grouping only. All @media rules are grouped and output in output.css
$ media-query-extractor style.css output.css
/* output.css */ {} {}
Grouping and extraction of rules min-width: 480px
in file tablet.css
. Remaining rules are put in remaining.css
$ media-query-extractor \ --breakpoint "screen and (min-width: 480px)|tablet.css" \ style.css remaining.css
/* remaining.css */ {}
/* tablet.css */{}
Grouping and extraction of rules min-width: 480px
and min-width: 990px
in files tablet.css
and desktop.css
. Remaining rules are put in remaining.css
$ media-query-extractor \ --breakpoint "screen and (min-width: 480px)|tablet.css" \ --breakpoint "screen and (min-width: 990px)|desktop.css" \ style.css remaining.css
/* remaining.css */
/* tablet.css */{}
/* desktop.css */{}
Usage
Usage: media-query-extractor [options] <input file> <output file> Options: -h, --help Output usage information -V, --version Output the version number -b, --breakpoint Add a breakpoint to be extracted. Model: --breakpoint "media query string[|output file name]" Example: $ media-query-extractor --help $ media-query-extractor \ --breakpoint "screen and (min-width: 480px)|tablet.css" \ --breakpoint "screen and (min-width: 660px)|big-tablet.css" \ --breakpoint "screen and (min-width: 990px)|desktop.css" \ styles.css remaining.css
var extractor = ; ;