grunt-css-mqpacker

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:

grunt.loadNpmTasks('grunt-css-mqpacker');

The "css_mqpacker" task

Overview

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

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.

Options

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.

Contributing

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.

hail2u / grunt-css-mqpacker