Pack same CSS media query rules into one using PostCSS
yarn add @lipemat/css-mqpacker
A well componentized CSS file may have same media queries that can merge:
.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:
.foo {
width: 240px;
}
.bar {
width: 160px;
}
@media screen and (max-width: 768px) {
.foo {
width: 576px;
}
.bar {
width: 384px;
}
}
Of course, this package can be used as PostCSS plugin:
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.
This package is also a Node.js module. For example, you can read from.css
,
process its content, and output processed CSS to STDOUT:
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);
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.
By default, CSS MQPacker pack and order media queries as they are defined (the
“first win” algorithm). If you want to turn off the sort of media queries automatically,
pass sort: false
to this module.
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:
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.
Packs media queries in css
.
The second argument is optional. The options
are:
- options mentioned above
- the second argument of PostCSS’s
process()
method
You can specify both at the same time.
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);
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 MQPacker changes rulesets’ order. This means the processed CSS will have an unexpected cascading order. For example:
@media (max-width: 640px) {
.foo {
width: 300px;
}
}
.foo {
width: 400px;
}
Becomes:
.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.
CSS MQPacker is implemented with the “first win” algorithm. This means:
.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:
.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.
@media (max-width: 320px) { /* Wider than 320px */ }
@media (max-width: 640px) { /* Wider than 640px */ }
CSS MQPacker works only with CSS. This may break CSS applying order to an elements that have multiple classes. For example:
@media (max-width: 320px) {
.foo {
width: 100px;
}
}
@media (max-width: 640px) {
.bar {
width: 200px;
}
}
@media (max-width: 320px) {
.baz {
width: 300px;
}
}
Becomes:
@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!