Css-mquery-packer NPM

CSS Media Query Packer

Simple media packer, merges same CSS media query rules into one via PostCSS

ABOUT

A straight forward example of what it does for you:

Before

.btn {
  display: inline-block;
}

@media screen and (max-width: 660px) {
  .btn {
    display: block;
    width: 100%;
  }
}

.wrapper {
  max-width: 1160px;
}

@media screen and (max-width: 660px) {
  .wrapper {
    max-width: 400px;
  }
}

After

.btn {
  display: inline-block;
}

.wrapper {
  max-width: 1160px;
}

@media screen and (max-width: 660px) {
  .btn {
    display: block;
    width: 100%;
  }
  .wrapper {
    max-width: 400px;
  }
}

INSTALL

npm install --save-dev css-mquery-packer

USAGE

Usage as a PostCSS plugin:

Gulp

gulpfile.js

const gulp = require('gulp');
const scss = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const postssMergeRules = require('postcss-merge-rules');
const cssnano = require('cssnano');
const mqpacker = requrie('css-mquery-packer');

const processStyles = () => {
  const plugins = [
    mqpacker(),
    postssMergeRules(),
    cssnano({...}),
  ];

  return gulp.src('./path/to/src')
      .pipe(sourcemaps.init())
      .pipe(scss()).on('error', scss.logError)
      .pipe(postcss(plugins))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('./path/to/dist'));
};

Webpack

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack')
// ...
module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: true,
              reloadAll: true,
            },
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('postcss-import')(),
                require('css-mquery-packer')(),
                ...
              ],
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
//...

postcss.config.js

module.exports = {
  plugins: {
    'css-mquery-packer': {},
    'postcss-merge-rules': {},
    cssnano: {
      preset: [
        'advanced',
        {
          normalizeWhitespace: false,
          discardUnused: false,
          mergeIdents: false,
          reduceIdents: false,
          autoprefixer: {},
        },
      ],
    },
  },
};