css-mqgroup

CSS MqGroup
===========

Pack same CSS media query rules into one using PostCSS. Forked from https://github.com/hail2u/node-css-mqgroup.

SYNOPSIS
--------

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

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

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

.bar {
width: 160px;
}

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

This PostCSS plugin packs exactly same media queries:

`css
.foo {
width: 240px;
}

.bar {
width: 160px;
}

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

PACKING IN GROUPS
-----------------

Additionally, it supports packing groups with the custom @mqgroup rule, which give you more control as to which media queries get grouped, and where they appear in the resulting css.

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

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

.bar {
width: 160px;
}

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

@mqgroup
{
.baz {
width: 360px;
}

@media screen and (min-width: 768px) {
.baz {
width:640px;
}
}

.baz--large {
width: 420px;
}

@media screen and (min-width: 768px) {
.baz--large {
width: 780px;
}
}
}
`

This will result in:

`css
.foo {
width: 240px;
}

.bar {
width: 160px;
}

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

.bar {
width: 384px;
}
}

.baz {
width: 360px;
}

.baz--large {
width: 420px;
}

@media screen and (min-width: 768px)
{
.baz {
width: 640px;
}

.baz--large {
width: 780px;
}
}
`

INSTALL
-------

$ npm install css-mqgroup


USAGE
-----

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

`javascript
#!/usr/bin/env node

"use strict";

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

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

It is a recommended way to use this tool.

$3

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
#!/usr/bin/env node

"use strict";

const fs = require("fs");
const mqgroup = require("css-mqgroup");

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

$3

This package also installs a command line interface.

$ node ./node_modules/.bin/mqgroup --help
Usage: mqgroup [options] INPUT [OUTPUT]

Description:
Pack same CSS media query rules into one using PostCSS

Options:
-s, --sort Sort “min-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:
$ mqgroup fragmented.css
$ mqgroup 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.

If you install this package in global, CLI will be available somewhere in the
$PATH.


OPTIONS
-------

$3

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

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

Currently, this option only supports min-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([
mqgroup({
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
---

$3

Packs media queries in css.

The second argument is optional. The options are:

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

You can specify both at the same time.

`javascript
const fs = require("fs");
const mqgroup = require("css-mqgroup");

const result = mqgroup.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 mqgroup, the processed CSS is always valid CSS, but you and your
website user will get unexpected results. This section explains how CSS mqgroup
works and what you should keep in mind.

$3

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

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

.foo {
width: 400px;
}
`

Becomes:

`css
.foo {
width: 400px;
}

@media (min-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.

$3

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

`css
.foo {
width: 10px;
}

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

.bar {
width: 20px;
}

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

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

Becomes:

`css
.foo {
width: 10px;
}

.bar {
width: 20px;
}

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

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

This breaks cascading order of .bar, and .bar will be displayed in 200px
instead of 300px even if a viewport wider than 640px.

I suggest defining a query order on top of your CSS:

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

If you use simple min-width queries only, [the sort option][4] can help.

$3

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

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

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

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

Becomes:

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

@media (min-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!

LICENSE
-------

MIT: http://hail2u.mit-license.org/2014

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