postcss-mq-extract

PostCSS plugin which extracts matched media queries to the separate file

What is it for?

This plugin looks through your css file, cut specific media queries and put them to the separate file with defined postfix.

Example

Before

source.css

@media (min-width: 768px) {
    .ngdialog-open {
        position:static
    }
}

.overlay--legacy__caption {
    font-weight: 700;
}

@media (min-width: 768px) {
    .overlay--ngdialog .ngdialog-content {
        width: 670px;
    }
}

.overlay--ngdialog .ngdialog-content {
    display: none;
}

After

source.css

.overlay--legacy__caption {
    font-weight: 700;
}

.overlay--ngdialog .ngdialog-content {
    display: none;
}

source-tablet.css

@media (min-width: 768px) {
    .ngdialog-open {
        position:static
    }
}

@media (min-width: 768px) {
    .overlay--ngdialog .ngdialog-content {
        width: 670px;
    }
}

Usage

npm install postcss-mq-extract --save-dev

Gulp

var postcss = require('gulp-postcss');
var mqExtract = require('postcss-mq-extract');

gulp.task('default', function () {
    var processors = [
        mqExtract({
            dest: 'css/generated',
            match: '(min-width: 768px)', 
            postfix: '-tablet',
        })
    ];
    return gulp.src('./css/source/test.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./css/generated'));
});

Grunt

var mqExtract = require('postcss-mq-extract');

gruntConfig.postcss = {
  options: {
    processors: [
        mqExtract({
            dest: 'css/generated', 
            match: '(min-width: 768px)', 
            postfix: '-tablet' 
        })
    ],
  },
  ...
};

Options

match

String

Regular expression to match media query rule

{
  match: '(min-width: 768px)'
}

postfix

String

Postfix which will be added to current filename. New file will be created with this name.

{
  postfix: '-tablet'
}

dest

String

Path to directory where new file should be created. By default new file is created in the same directory as original file.

{
  dest: 'css/generated'
}

Package detail