npm package: @lipemat/css-mqpacker
Description: Pack same CSS media query rules into one using PostCSS
Author: Mat Lipe
Latest version: 9.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

CSS MQPacker
============

Pack same CSS media query rules into one using PostCSS

### Installation
```bash
yarn add @lipemat/css-mqpacker
```

SYNOPSIS
--------

A well componentized CSS file may have same media queries that can merge:

```css
.foo {
	width: 240px;
}

@media screen and (max-width: 768px) {
  .foo {
    width: 576px;
  }
}

.bar {
	width: 160px;
}

@media screen and (max-width: 768px) {
  .bar {
    width: 384px;
  }
}
```

This tool packs exactly same media queries:

```css
.foo {
	width: 240px;
}

.bar {
	width: 160px;
}

@media screen and (max-width: 768px) {
  .foo {
    width: 576px;
  }
  .bar {
    width: 384px;
  }
}
```

USAGE
-----

Of course, this package can be used as PostCSS plugin:

```javascript
const fs = require("fs");
const postcss = require("postcss");

postcss([
  require("autoprefixer-core")(),
  require("@lipemat/css-mqpacker")()
]).process(fs.readFileSync("from.css", "utf8")).then(function (result) {
	console.log(result.css);
});
```

It is a recommended way to use this tool.


### As standard Node.js package

This package is also a Node.js module. For example, you can read `from.css`,
process its content, and output processed CSS to STDOUT:

```javascript
const fs = require("fs");
const mqpacker = require("@lipemat/css-mqpacker");

console.log(mqpacker.pack(fs.readFileSync("from.css", "utf8"), {
	from: "from.css",
	map: {
		inline: false
	},
	to: "to.css"
}).css);
```


### As CLI Program

This package also installs a command line interface.


    $ node ./node_modules/.bin/mqpacker --help
    Usage: mqpacker [options] INPUT [OUTPUT]
    
    Description:
      Pack same CSS media query rules into one using PostCSS
    
    Options:
      -s, --sort       Sort “max-width” queries.
          --sourcemap  Create source map file.
      -h, --help       Show this message.
          --version    Print version information.
    
    Use a single dash for INPUT to read CSS from standard input.
    
    Examples:
      $ mqpacker fragmented.css
      $ mqpacker fragmented.css > packed.css

When PostCSS failed to parse INPUT, CLI shows a CSS parse error in GNU error
format instead of Node.js stack trace.

The `--sort` option does not currently support a custom function.


OPTIONS
-------

### sort

By default, CSS MQPacker pack and order media queries as they are defined ([the
“first win” algorithm][1]). If you want to turn off the sort of media queries automatically,
pass `sort: false` to this module.

```javascript
postcss([
	mqpacker({
		sort: true
	})
]).process(css);
```

Currently, this option only supports `max-width` queries with specific units
(`ch`, `em`, `ex`, `px`, and `rem`). If you want to do more, you need to create
your own sorting function and pass it to this module like this:

```javascript
postcss([
	mqpacker({
		sort: function (a, b) {
			return a.localeCompare(b);
		}
	})
]).process(css);
```

In this example, all your media queries will sort by A-Z order.

This sorting function is directly passed to `Array#sort()` method of an array of
all your media queries.


API
---

### pack(css[, options])

Packs media queries in `css`.

The second argument is optional. The `options` are:

- [options][3] mentioned above
- the second argument of [PostCSS’s `process()` method][4]

You can specify both at the same time.

```javascript
const fs = require("fs");
const mqpacker = require("@lipemat/css-mqpacker");

const result = mqpacker.pack(fs.readFileSync("from.css", "utf8"), {
	from: "from.css",
	map: {
		inline: false
	},
	sort: true,
	to: "to.css"
});
fs.writeFileSync("to.css", result.css);
fs.writeFileSync("to.css.map", result.map);
```


NOTES
-----

With CSS MQPacker, the processed CSS is always valid CSS, but you and your
website user will get unexpected results. This section explains how CSS MQPacker
works and what you should keep in mind.


### CSS Cascading Order

CSS MQPacker changes rulesets’ order. This means the processed CSS will have an
unexpected cascading order. For example:

```css
@media (max-width: 640px) {
  .foo {
    width: 300px;
  }
}

.foo {
	width: 400px;
}
```

Becomes:

```css
.foo {
	width: 400px;
}

@media (max-width: 640px) {
  .foo {
    width: 300px;
  }
}
```

`.foo` is always `400px` with original CSS. With processed CSS, however, `.foo`
is `300px` if viewport is wider than `640px`.

This does not occur on small project. However, this could occur frequently on
large project. For example, if you want to override a CSS framework (like
Bootstrap) component declaration, your whole CSS code will be something similar
to above example. To avoid this problem, you should pack only CSS you write, and
then concatenate with a CSS framework.


### The “First Win” Algorithm

CSS MQPacker is implemented with the “first win” algorithm. This means:

```css
.foo {
	width: 10px;
}

@media (max-width: 640px) {
  .foo {
    width: 150px;
  }
}

.bar {
	width: 20px;
}

@media (max-width: 320px) {
  .bar {
    width: 200px;
  }
}

@media (max-width: 640px) {
  .bar {
    width: 300px;
  }
}
```

Becomes:

```css
.foo {
	width: 10px;
}

.bar {
	width: 20px;
}

@media (max-width: 640px) {
  .foo {
    width: 150px;
  }
  .bar {
    width: 300px;
  }
}

@media (max-width: 320px) {
  .bar {
    width: 200px;
  }
}
```

If you use simple `max-width` queries only, the default sort will help.

Otherwise, you may set `sort` to `false` and define the order explicitly at the top of your postcss.

```css
@media (max-width: 320px) { /* Wider than 320px */ }
@media (max-width: 640px) { /* Wider than 640px */ }
```

### Multiple Classes

CSS MQPacker works only with CSS. This may break CSS applying order to an
elements that have multiple classes. For example:

```css
@media (max-width: 320px) {
  .foo {
    width: 100px;
  }
}

@media (max-width: 640px) {
  .bar {
    width: 200px;
  }
}

@media (max-width: 320px) {
  .baz {
    width: 300px;
  }
}
```

Becomes:

```css
@media (max-width: 320px) {
  .foo {
    width: 100px;
  }
  .baz {
    width: 300px;
  }
}

@media (max-width: 640px) {
  .bar {
    width: 200px;
  }
}
```

The result looks good. However, if an HTML element has `class="bar baz"` and
viewport width larger than `640px`, that element `width` incorrectly set to
`200px` instead of `300px`. This problem cannot be resolved only with CSS, so be
careful!

[1]: #the-first-win-algorithm
[2]: #options
[3]: http://api.postcss.org/global.html#processOptions
[4]: #sort