gulp-media-queries-splitter

Split CSS files into several CSS files based on media queries

Installation

Install package with NPM and add it to your development dependencies:

npm install --save-dev gulp-media-queries-splitter

Options

gulp-media-queries-splitter takes an array of configuration objects to generate the new CSS files with. You can provide multiple configuration objects, each using the following options:

• media (required) — possible values are:
  • all — to include all CSS rules regardless of the media query;
  • none — to include all CSS rules that do not belong to a media query, or that belong to a media query without min-width or max-width declarations;
  • an object containing the following options:
    • min (optional, default: 0) — defines the min-width value of a media query to include CSS rules from;
    • minUntil (optional) — defines the maximum value for the min-width value of a media query to include CSS rules from;
    • max (optional) — defines the max-width value of a media query to include CSS rules from.
  • an array containing the previous possible values (either all, none or an object).
• filename (required) — the destination filename to put the CSS rules in that matches the configuration in the media option.

Usage

const gulp = require('gulp');
const mediaQueriesSplitter = require('gulp-media-queries-splitter');

gulp.task('split-css', function () {
    gulp.src('./input/*.css')
        .pipe(mediaQueriesSplitter([
            // Include all CSS rules
            {media: 'all', filename: 'all.css'},

            // Include only CSS rules without screen size based media queries
            {media: 'none', filename: 'base.css'},

            // Include CSS rules for small screen sizes and CSS rules without screen size based media queries
            {media: ['none', {minUntil: '576px'}, {max: '9999999px'}], filename: 'main.css'},

            // Include CSS rules for medium screen sizes (mostly used on tablet)
            {media: [{min: '576px', minUntil: '768px'}, {min: '576px', max: '768px'}], filename: 'tablet.css'},

            // Include CSS rules for bigger screen sizes (mostly used on desktop)
            {media: {min: '768px'}, filename: 'desktop.css'},
        ]))
        .pipe(gulp.dest('./output'))
});

Errors

gulp-media-queries-splitter emits an 'error' event if a source file is being loaded using a stream.