Pack same media query rules into one media query rule using CSS MQPacker.
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Pack same media query rules into one media query rule using CSS MQPacker.

Getting Started

This plugin requires Grunt ~0.4.2

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

$ npm install grunt-css-mqpacker --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


The "css_mqpacker" task


In your project's Gruntfile, add a section named css_mqpacker to the data object passed into grunt.initConfig().

  css_mqpacker: {
    main: {
      options: {
        map: true,
        sort: true

      expand: true,
      cwd: 'src/css/',
      src: '*.css',
      dest: 'dest/css/'

Running $ grunt css_mqpacker with these options will pack and sort media queries in src/css/*.css with inline source maps, and output to dest/css/*.css.


The task options are the same as second argument of PostCSS pack() method. With these options, you can create or update source maps, and sort queries. For more information, please read the CSS MQPacker document.


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.