@@ -7,48 +7,47 @@ Pack same CSS media query rules into one using PostCSS
77SYNOPSIS
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 : 240 px ;
1615}
1716
18- @media screen and (min-width : 769 px ) {
19- .foo ::before {
20- content : " foo on medium " ;
17+ @media screen and (min-width : 768 px ) {
18+ .foo {
19+ width : 576 px ;
2120 }
2221}
2322
24- .bar ::before {
25- content : " bar on small " ;
23+ .bar {
24+ width : 160 px ;
2625}
2726
28- @media screen and (min-width : 769 px ) {
29- .bar ::before {
30- content : " bar on medium " ;
27+ @media screen and (min-width : 768 px ) {
28+ .bar {
29+ width : 384 px ;
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 : 240 px ;
4039}
4140
42- .bar ::before {
43- content : " bar on small " ;
41+ .bar {
42+ width : 160 px ;
4443}
4544
46- @media screen and (min-width : 769 px ) {
47- .foo ::before {
48- content : " foo on medium " ;
45+ @media screen and (min-width : 768 px ) {
46+ .foo {
47+ width : 576 px ;
4948 }
50- .bar ::before {
51- content : " bar on medium " ;
49+ .bar {
50+ width : 384 px ;
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" );
7775postcss ([
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
135134The ` --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
138140OPTIONS
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,
145147pass ` 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
175177API
@@ -187,11 +189,10 @@ The second argument is optional. The `options` are:
187189You 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
251252Bootstrap) component declaration, your whole CSS code will be something similar
252253to above example. To avoid this problem, you should pack only CSS you write, and
253254then 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`.
318319I 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
330331CSS 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