npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

media-query-extractor

0.1.1 • Public • Published

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 */
a { text-decoration: underline; }
p { padding: 10px 0; }
 
@media screen and (min-width: 480px) {
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
}
@media screen and (min-width: 480px) {
    p { padding: 15px 0; }
}
@media screen and (min-width: 990px) {
    p { padding: 20px 0; }
}

Grouping only. All @media rules are grouped and output in output.css

$ media-query-extractor style.css output.css
/* output.css */
a { text-decoration: underline; }
p { padding: 10px 0; }
 
@media screen and (min-width: 480px) {
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    p { padding: 15px 0; }
}
 
@media screen and (min-width: 990px) {
    p { padding: 20px 0; }
}

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 */
a { text-decoration: underline; }
p { padding: 10px 0; }
 
@media screen and (min-width: 990px) {
    p { padding: 20px 0; }
}
/* tablet.css */
@media screen and (min-width: 480px) {
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    p { padding: 15px 0; }
}

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 */
a { text-decoration: underline; }
p { padding: 10px 0;}
/* tablet.css */
@media screen and (min-width: 480px) {
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    p { padding: 15px 0; }
}
/* desktop.css */
@media screen and (min-width: 990px) {
  p { padding: 20px 0; }
}

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 = require('media-query-extractor');
 
extractor( 'input.css', 'output.css', [
    'screen and (min-width: 500px)|tablet.css',
    'screen and (min-width: 990px)|desk.css'
]);

Keywords

install

npm i media-query-extractor

Downloadsweekly downloads

154

version

0.1.1

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability