gulp-split-media-queries

gulp-split-media-queries

This plugin splits all media queries above defined breakpoint into separated file.

ADD THIS PACKAGE

yarn add -D gulp-split-media-queries

USAGE

const gulp = require('gulp');
const splitMediaQueries = require('gulp-split-media-queries');
 
gulp.task('build', function() {
    gulp.src('assets/styles/all.css')
        .pipe(splitMediaQueries({
            breakpoint: 1024, // default is 768
        }))
        .pipe(gulp.dest('build'));
});

all.css file:

.container {
    padding: 20px;
}
 
@media (min-width: 768px) {
    .container {
        padding: 10px 20px;
    }
}
 
@media (min-width: 1024px) {
    .container {
        padding: 30px;
    }
}
 
@media (min-width: 1280px) {
    .container {
        margin: 20px 0;
    }
}

This will be output:

.container {
    padding: 20px;
}
@media (min-width: 768px) {
    .container {
        padding: 10px 20px;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 30px;
    }
}    
@media (min-width: 1280px) {
    .container {
        margin: 20px 0;
    }
}

Include it in HTML:

<link rel="stylesheet" type="text/css" href="all.css" />
<link rel="stylesheet" type="text/css" href="all-above-1024.css" media="(min-width: 1024px)" />

Thanks for inspiration: https://www.npmjs.com/package/gulp-extract-media-queries