1 | CSS MQPacker
|
2 | ============
|
3 |
|
4 | Pack same CSS media query rules into one media query rule.
|
5 |
|
6 | Written with [PostCSS][1].
|
7 |
|
8 |
|
9 | INSTALLATION
|
10 | ------------
|
11 |
|
12 | $ npm install css-mqpacker
|
13 |
|
14 | Or install as [Grunt plugin][2].
|
15 |
|
16 |
|
17 | QUICK USAGE
|
18 | -----------
|
19 |
|
20 | Read `from.css`, process its content, and output processed CSS to STDOUT.
|
21 |
|
22 | ```js
|
23 | #!/usr/bin/env node
|
24 |
|
25 | 'use strict';
|
26 |
|
27 | var fs = require('fs');
|
28 | var mqpacker = require('css-mqpacker');
|
29 |
|
30 | var original = fs.readFileSync('from.css', 'utf8');
|
31 | var processed = mqpacker.pack(original, {
|
32 | from: 'from.css',
|
33 | to: 'to.css',
|
34 | map: true
|
35 | });
|
36 | console.log(processed.css);
|
37 | ```
|
38 |
|
39 | If `test.css` has:
|
40 |
|
41 | ```css
|
42 | @charset "UTF-8";
|
43 |
|
44 | .foo::before {
|
45 | content: "foo on small";
|
46 | }
|
47 |
|
48 | @media screen and (min-width: 769px) {
|
49 | .foo::before {
|
50 | content: "foo on medium";
|
51 | }
|
52 | }
|
53 |
|
54 | .bar::before {
|
55 | content: "bar on small";
|
56 | }
|
57 |
|
58 | @media screen and (min-width: 769px) {
|
59 | .bar::before {
|
60 | content: "bar on medium";
|
61 | }
|
62 | }
|
63 | ```
|
64 |
|
65 | You will get following output:
|
66 |
|
67 | ```css
|
68 | @charset "UTF-8";
|
69 |
|
70 | .foo::before {
|
71 | content: "foo on small";
|
72 | }
|
73 |
|
74 | .bar::before {
|
75 | content: "bar on small";
|
76 | }
|
77 |
|
78 | @media screen and (min-width: 769px) {
|
79 | .foo::before {
|
80 | content: "foo on medium";
|
81 | }
|
82 | .bar::before {
|
83 | content: "bar on medium";
|
84 | }
|
85 | }
|
86 |
|
87 | /*# sourceMappingURL=to.css.map */
|
88 | ```
|
89 |
|
90 | Sweet!
|
91 |
|
92 |
|
93 | API
|
94 | ---
|
95 |
|
96 | ### pack(css, [options])
|
97 |
|
98 | Packs media queries in `css`.
|
99 |
|
100 | The second argument is optional. The `options` is same as the second argument of
|
101 | PostCSS's `process()` method. This is useful for generating Source Map.
|
102 |
|
103 | ```javascript
|
104 | var fs = require('fs');
|
105 | var mqpacker = require('mqpacker');
|
106 |
|
107 | var css = fs.readFileSync('from.css', 'utf8');
|
108 | var result = mqpakcer.pack(css, {
|
109 | from: 'from.css',
|
110 | to: 'to.css',
|
111 | map: true
|
112 | });
|
113 | fs.writeFileSync('to.css', result.css);
|
114 | fs.writeFileSync('to.css.map', result.map);
|
115 | ```
|
116 |
|
117 | See also [PostCSS document][3] for more about `options`.
|
118 |
|
119 |
|
120 | ### processor
|
121 |
|
122 | Returns [PostCSS processor][4].
|
123 |
|
124 | You can use this property for combining with other PostCSS processors such as
|
125 | [Autoprefixer][5].
|
126 |
|
127 | ```javascript
|
128 | var autoprefixer = require('autoprefixer');
|
129 | var mqpacker = require('mqpacker');
|
130 | var postcss = require('postcss');
|
131 |
|
132 | var css = fs.readFileSync('test.css', 'utf8');
|
133 | postcss().use(
|
134 | autoprefixer.postcss
|
135 | ).use(
|
136 | mqpakcer.processor
|
137 | ).process(css);
|
138 | ```
|
139 |
|
140 |
|
141 | LICENSE
|
142 | -------
|
143 |
|
144 | MIT: http://hail2u.mit-license.org/2014
|
145 |
|
146 |
|
147 | [1]: https://github.com/ai/postcss
|
148 | [2]: https://github.com/hail2u/grunt-css-mqpacker
|
149 | [3]: https://github.com/ai/postcss#source-map-1
|
150 | [4]: https://github.com/ai/postcss#processor
|
151 | [5]: https://github.com/ai/autoprefixer
|