Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hail2u/node-css-mqpacker
Pack same CSS media query rules into one using PostCSS
https://github.com/hail2u/node-css-mqpacker
Last synced: 3 months ago
JSON representation
Pack same CSS media query rules into one using PostCSS
- Host: GitHub
- URL: https://github.com/hail2u/node-css-mqpacker
- Owner: hail2u
- Created: 2014-02-15T07:26:54.000Z (over 10 years ago)
- Default Branch: main
- Last Pushed: 2023-10-06T12:33:06.000Z (about 1 year ago)
- Last Synced: 2024-08-01T18:45:38.968Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 303 KB
- Stars: 675
- Watchers: 14
- Forks: 60
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
CSS MQPacker
============
Pack same CSS media query rules into one using PostCSS
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 tool packs exactly same media queries:
```css
.foo {
width: 240px;
}
.bar {
width: 160px;
}
@media screen and (min-width: 768px) {
.foo {
width: 576px;
}
.bar {
width: 384px;
}
}
```
INSTALL
-------
$ echo @hail2u:registry=https://npm.pkg.github.com >> .npmrc
$ npm install --save-dev @hail2u/css-mqpacker
If you or your team member does not have GitHub account, you can install
directly from the GitHub repository:
$ npm install --save-dev github:hail2u/node-css-mqpacker#
`` should be replaced with one of the [available tags][1].
USAGE
-----
Of course, this package can be used as PostCSS plugin:
```javascript
const fs = require("fs");
const postcss = require("postcss");
postcss([
require("@hail2u/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("@hail2u/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 “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:
$ 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][2]). If you want to sort media queries automatically,
pass `sort: true` to this module.
```javascript
postcss([
mqpacker({
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([
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("@hail2u/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 (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.
### The “First Win” Algorithm
CSS MQPacker 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][5] can help.
### 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 (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
[1]: https://github.com/hail2u/node-css-mqpacker/tags
[2]: #the-first-win-algorithm
[3]: #options
[4]: http://api.postcss.org/global.html#processOptions
[5]: #sort