Skip to content

Commit cd3c4c7

Browse files
committed
Update code example, quotes, and wording
1 parent 02b0d62 commit cd3c4c7

File tree

1 file changed

+53
-52
lines changed

1 file changed

+53
-52
lines changed

README.md

Lines changed: 53 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,47 @@ Pack same CSS media query rules into one using PostCSS
77
SYNOPSIS
88
--------
99

10-
A CSS file processed with a CSS pre-processor may have same queries that can
11-
merge:
10+
A well componentized CSS file may have same media queries that can merge:
1211

1312
```css
14-
.foo::before {
15-
content: "foo on small";
13+
.foo {
14+
width: 240px;
1615
}
1716

18-
@media screen and (min-width: 769px) {
19-
.foo::before {
20-
content: "foo on medium";
17+
@media screen and (min-width: 768px) {
18+
.foo {
19+
width: 576px;
2120
}
2221
}
2322

24-
.bar::before {
25-
content: "bar on small";
23+
.bar {
24+
width: 160px;
2625
}
2726

28-
@media screen and (min-width: 769px) {
29-
.bar::before {
30-
content: "bar on medium";
27+
@media screen and (min-width: 768px) {
28+
.bar {
29+
width: 384px;
3130
}
3231
}
3332
```
3433

35-
This PostCSS plugin packs exactly same queries (and optionally sorts) like this:
34+
This PostCSS plugin packs exactly same media queries:
3635

3736
```css
38-
.foo::before {
39-
content: "foo on small";
37+
.foo {
38+
width: 240px;
4039
}
4140

42-
.bar::before {
43-
content: "bar on small";
41+
.bar {
42+
width: 160px;
4443
}
4544

46-
@media screen and (min-width: 769px) {
47-
.foo::before {
48-
content: "foo on medium";
45+
@media screen and (min-width: 768px) {
46+
.foo {
47+
width: 576px;
4948
}
50-
.bar::before {
51-
content: "bar on medium";
49+
.bar {
50+
width: 384px;
5251
}
5352
}
5453
```
@@ -70,40 +69,40 @@ Of course, this package can be used as PostCSS plugin:
7069

7170
"use strict";
7271

73-
var fs = require("fs");
74-
var postcss = require("postcss");
72+
const fs = require("fs");
73+
cosnt postcss = require("postcss");
7574

76-
var css = fs.readFileSync("from.css", "utf8");
7775
postcss([
7876
require("autoprefixer-core")(),
7977
require("css-mqpacker")()
80-
]).process(css).then(function (result) {
78+
]).process(fs.readFileSync("from.css", "utf8")).then(function (result) {
8179
console.log(result.css);
8280
});
8381
```
8482

83+
It is a recommended way to use this tool.
84+
8585

8686
### As standard Node.js package
8787

88-
Read `from.css`, process its content, and output processed CSS to STDOUT.
88+
This package is also a Node.js module. For exmaple, you can read `from.css`,
89+
process its content, and output processed CSS to STDOUT:
8990

9091
```javascript
9192
#!/usr/bin/env node
9293

9394
"use strict";
9495

95-
var fs = require("fs");
96-
var mqpacker = require("css-mqpacker");
96+
const fs = require("fs");
97+
const mqpacker = require("css-mqpacker");
9798

98-
var original = fs.readFileSync("from.css", "utf8");
99-
var processed = mqpacker.pack(original, {
99+
cosole.log(mqpacker.pack(fs.readFileSync("from.css", "utf8"), {
100100
from: "from.css",
101101
map: {
102102
inline: false
103103
},
104104
to: "to.css"
105-
});
106-
console.log(processed.css);
105+
}).css);
107106
```
108107

109108

@@ -134,14 +133,17 @@ format instead of Node.js stack trace.
134133

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

136+
If you install this package in global, CLI will be available somewhere in the
137+
`$PATH`.
138+
137139

138140
OPTIONS
139141
-------
140142

141143
### sort
142144

143-
By default, CSS MQPacker pack and order media queries as they are defined. See
144-
also [The "First Win" Algorithm][1]. If you want to sort queries automatically,
145+
By default, CSS MQPacker pack and order media queries as they are defined ([the
146+
“first win” algorithm][1]). If you want to sort media queries automatically,
145147
pass `sort: true` to this module.
146148

147149
```javascript
@@ -166,10 +168,10 @@ postcss([
166168
]).process(css);
167169
```
168170

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

171-
This sorting function directly pass to `Array#sort()` method of an array of all
172-
your queries.
173+
This sorting function is directly passed to `Array#sort()` method of an array of
174+
all your media queries.
173175

174176

175177
API
@@ -187,11 +189,10 @@ The second argument is optional. The `options` are:
187189
You can specify both at the same time.
188190

189191
```javascript
190-
var fs = require("fs");
191-
var mqpacker = require("css-mqpacker");
192+
cosnt fs = require("fs");
193+
const mqpacker = require("css-mqpacker");
192194

193-
var css = fs.readFileSync("from.css", "utf8");
194-
var result = mqpacker.pack(css, {
195+
const result = mqpacker.pack(fs.readFileSync("from.css", "utf8"), {
195196
from: "from.css",
196197
map: {
197198
inline: false
@@ -243,19 +244,19 @@ Becomes:
243244
}
244245
```
245246

246-
`.foo` is always `400px` in original CSS, but `300px` if viewport is wider than
247-
`640px' with processed CSS.
247+
`.foo` is always `400px` with original CSS. With processed CSS, however, `.foo`
248+
is `300px` if viewport is wider than `640px`.
248249

249-
This does not occur on small project. On large project, however, this could
250-
occur frequently. For example, if you want to override a CSS framework (like
250+
This does not occur on small project. However, this could occur frequently on
251+
large project. For example, if you want to override a CSS framework (like
251252
Bootstrap) component declaration, your whole CSS code will be something similar
252253
to above example. To avoid this problem, you should pack only CSS you write, and
253254
then concaenate with a CSS framework.
254255

255256

256-
### The "First Win" Algorithm
257+
### The First Win Algorithm
257258

258-
CSS MQPacker is implemented with the "first win" algorithm. This means:
259+
CSS MQPacker is implemented with the first win algorithm. This means:
259260

260261
```css
261262
.foo {
@@ -318,17 +319,17 @@ instead of `300px` even if a viewport wider than `640px`.
318319
I suggest defining a query order on top of your CSS:
319320

320321
```css
321-
@media (min-width: 320px) { /*! Wider than 320px */ }
322-
@media (min-width: 640px) { /*! Wider than 640px */ }
322+
@media (min-width: 320px) { /* Wider than 320px */ }
323+
@media (min-width: 640px) { /* Wider than 640px */ }
323324
```
324325

325-
If you use only simple `min-width` queries, [the `sort` option][4] can help.
326+
If you use simple `min-width` queries only, [the `sort` option][4] can help.
326327

327328

328329
### Multiple Classes
329330

330331
CSS MQPacker works only with CSS. This may break CSS applying order to an
331-
elements that have multiple classes.
332+
elements that have multiple classes. For example:
332333

333334
```css
334335
@media (min-width: 320px) {

0 commit comments

Comments
 (0)