1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | "use strict";
|
9 | var postcss = require("postcss");
|
10 | var pxtorem = require("..");
|
11 | var basicCSS = ".rule { font-size: 15px }";
|
12 | var filterPropList = require("../lib/filter-prop-list");
|
13 |
|
14 | describe("pxtorem", function() {
|
15 | it("should work on the readme example", function() {
|
16 | var input =
|
17 | "h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; }";
|
18 | var output =
|
19 | "h1 { margin: 0 0 20px; font-size: 2rem; line-height: 1.2; letter-spacing: 0.0625rem; }";
|
20 | var processed = postcss(pxtorem()).process(input).css;
|
21 |
|
22 | expect(processed).toBe(output);
|
23 | });
|
24 |
|
25 | it("should replace the px unit with rem", function() {
|
26 | var processed = postcss(pxtorem()).process(basicCSS).css;
|
27 | var expected = ".rule { font-size: 0.9375rem }";
|
28 |
|
29 | expect(processed).toBe(expected);
|
30 | });
|
31 |
|
32 | it("should ignore non px properties", function() {
|
33 | var expected = ".rule { font-size: 2em }";
|
34 | var processed = postcss(pxtorem()).process(expected).css;
|
35 |
|
36 | expect(processed).toBe(expected);
|
37 | });
|
38 |
|
39 | it("should handle < 1 values and values without a leading 0 - legacy", function() {
|
40 | var rules = ".rule { margin: 0.5rem .5px -0.2px -.2em }";
|
41 | var expected = ".rule { margin: 0.5rem 0.03125rem -0.0125rem -.2em }";
|
42 | var options = {
|
43 | propWhiteList: ["margin"]
|
44 | };
|
45 | var processed = postcss(pxtorem(options)).process(rules).css;
|
46 |
|
47 | expect(processed).toBe(expected);
|
48 | });
|
49 |
|
50 | it("should handle < 1 values and values without a leading 0", function() {
|
51 | var rules = ".rule { margin: 0.5rem .5px -0.2px -.2em }";
|
52 | var expected = ".rule { margin: 0.5rem 0.03125rem -0.0125rem -.2em }";
|
53 | var options = {
|
54 | propList: ["margin"]
|
55 | };
|
56 | var processed = postcss(pxtorem(options)).process(rules).css;
|
57 |
|
58 | expect(processed).toBe(expected);
|
59 | });
|
60 |
|
61 | it("should not add properties that already exist", function() {
|
62 | var expected = ".rule { font-size: 16px; font-size: 1rem; }";
|
63 | var processed = postcss(pxtorem()).process(expected).css;
|
64 |
|
65 | expect(processed).toBe(expected);
|
66 | });
|
67 |
|
68 | it("should remain unitless if 0", function() {
|
69 | var expected = ".rule { font-size: 0px; font-size: 0; }";
|
70 | var processed = postcss(pxtorem()).process(expected).css;
|
71 |
|
72 | expect(processed).toBe(expected);
|
73 | });
|
74 | });
|
75 |
|
76 | describe("value parsing", function() {
|
77 | it("should not replace values in double quotes or single quotes - legacy", function() {
|
78 | var options = {
|
79 | propWhiteList: []
|
80 | };
|
81 | var rules =
|
82 | ".rule { content: '16px'; font-family: \"16px\"; font-size: 16px; }";
|
83 | var expected =
|
84 | ".rule { content: '16px'; font-family: \"16px\"; font-size: 1rem; }";
|
85 | var processed = postcss(pxtorem(options)).process(rules).css;
|
86 |
|
87 | expect(processed).toBe(expected);
|
88 | });
|
89 |
|
90 | it("should not replace values in double quotes or single quotes", function() {
|
91 | var options = {
|
92 | propList: ["*"]
|
93 | };
|
94 | var rules =
|
95 | ".rule { content: '16px'; font-family: \"16px\"; font-size: 16px; }";
|
96 | var expected =
|
97 | ".rule { content: '16px'; font-family: \"16px\"; font-size: 1rem; }";
|
98 | var processed = postcss(pxtorem(options)).process(rules).css;
|
99 |
|
100 | expect(processed).toBe(expected);
|
101 | });
|
102 |
|
103 | it("should not replace values in `url()` - legacy", function() {
|
104 | var options = {
|
105 | propWhiteList: []
|
106 | };
|
107 | var rules = ".rule { background: url(16px.jpg); font-size: 16px; }";
|
108 | var expected = ".rule { background: url(16px.jpg); font-size: 1rem; }";
|
109 | var processed = postcss(pxtorem(options)).process(rules).css;
|
110 |
|
111 | expect(processed).toBe(expected);
|
112 | });
|
113 |
|
114 | it("should not replace values in `url()`", function() {
|
115 | var options = {
|
116 | propList: ["*"]
|
117 | };
|
118 | var rules = ".rule { background: url(16px.jpg); font-size: 16px; }";
|
119 | var expected = ".rule { background: url(16px.jpg); font-size: 1rem; }";
|
120 | var processed = postcss(pxtorem(options)).process(rules).css;
|
121 |
|
122 | expect(processed).toBe(expected);
|
123 | });
|
124 |
|
125 | it("should not replace values with an uppercase P or X", function() {
|
126 | var options = {
|
127 | propList: ["*"]
|
128 | };
|
129 | var rules =
|
130 | ".rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }";
|
131 | var expected =
|
132 | ".rule { margin: 0.75rem calc(100% - 14PX); height: calc(100% - 1.25rem); font-size: 12Px; line-height: 1rem; }";
|
133 | var processed = postcss(pxtorem(options)).process(rules).css;
|
134 |
|
135 | expect(processed).toBe(expected);
|
136 | });
|
137 | });
|
138 |
|
139 | describe("rootValue", function() {
|
140 |
|
141 | it("should replace using a root value of 10 - legacy", function() {
|
142 | var expected = ".rule { font-size: 1.5rem }";
|
143 | var options = {
|
144 | root_value: 10
|
145 | };
|
146 | var processed = postcss(pxtorem(options)).process(basicCSS).css;
|
147 |
|
148 | expect(processed).toBe(expected);
|
149 | });
|
150 |
|
151 | it("should replace using a root value of 10", function() {
|
152 | var expected = ".rule { font-size: 1.5rem }";
|
153 | var options = {
|
154 | rootValue: 10
|
155 | };
|
156 | var processed = postcss(pxtorem(options)).process(basicCSS).css;
|
157 |
|
158 | expect(processed).toBe(expected);
|
159 | });
|
160 |
|
161 | it("should replace using different root values with different files", function() {
|
162 | var css2 = ".rule { font-size: 20px }";
|
163 | var expected = ".rule { font-size: 1rem }";
|
164 | var options = {
|
165 | rootValue: function(input) {
|
166 | if (input.from.indexOf("basic.css") !== -1) {
|
167 | return 15;
|
168 | }
|
169 | return 20;
|
170 | }
|
171 | };
|
172 | var processed1 = postcss(pxtorem(options)).process(basicCSS, {
|
173 | from: "/tmp/basic.css"
|
174 | }).css;
|
175 | var processed2 = postcss(pxtorem(options)).process(css2, {
|
176 | from: "/tmp/whatever.css"
|
177 | }).css;
|
178 |
|
179 | expect(processed1).toBe(expected);
|
180 | expect(processed2).toBe(expected);
|
181 | });
|
182 | });
|
183 |
|
184 | describe("unitPrecision", function() {
|
185 |
|
186 | it("should replace using a decimal of 2 places - legacy", function() {
|
187 | var expected = ".rule { font-size: 0.94rem }";
|
188 | var options = {
|
189 | unit_precision: 2
|
190 | };
|
191 | var processed = postcss(pxtorem(options)).process(basicCSS).css;
|
192 |
|
193 | expect(processed).toBe(expected);
|
194 | });
|
195 |
|
196 | it("should replace using a decimal of 2 places", function() {
|
197 | var expected = ".rule { font-size: 0.94rem }";
|
198 | var options = {
|
199 | unitPrecision: 2
|
200 | };
|
201 | var processed = postcss(pxtorem(options)).process(basicCSS).css;
|
202 |
|
203 | expect(processed).toBe(expected);
|
204 | });
|
205 | });
|
206 |
|
207 | describe("propWhiteList", function() {
|
208 |
|
209 | it("should only replace properties in the white list - legacy", function() {
|
210 | var expected = ".rule { font-size: 15px }";
|
211 | var options = {
|
212 | prop_white_list: ["font"]
|
213 | };
|
214 | var processed = postcss(pxtorem(options)).process(basicCSS).css;
|
215 |
|
216 | expect(processed).toBe(expected);
|
217 | });
|
218 |
|
219 | it("should only replace properties in the white list - legacy", function() {
|
220 | var expected = ".rule { font-size: 15px }";
|
221 | var options = {
|
222 | propWhiteList: ["font"]
|
223 | };
|
224 | var processed = postcss(pxtorem(options)).process(basicCSS).css;
|
225 |
|
226 | expect(processed).toBe(expected);
|
227 | });
|
228 |
|
229 | it("should only replace properties in the white list - legacy", function() {
|
230 | var css = ".rule { margin: 16px; margin-left: 10px }";
|
231 | var expected = ".rule { margin: 1rem; margin-left: 10px }";
|
232 | var options = {
|
233 | propWhiteList: ["margin"]
|
234 | };
|
235 | var processed = postcss(pxtorem(options)).process(css).css;
|
236 |
|
237 | expect(processed).toBe(expected);
|
238 | });
|
239 |
|
240 | it("should only replace properties in the prop list", function() {
|
241 | var css =
|
242 | ".rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }";
|
243 | var expected =
|
244 | ".rule { font-size: 1rem; margin: 1rem; margin-left: 5px; padding: 5px; padding-right: 1rem }";
|
245 | var options = {
|
246 | propWhiteList: ["*font*", "margin*", "!margin-left", "*-right", "pad"]
|
247 | };
|
248 | var processed = postcss(pxtorem(options)).process(css).css;
|
249 |
|
250 | expect(processed).toBe(expected);
|
251 | });
|
252 |
|
253 | it("should only replace properties in the prop list with wildcard", function() {
|
254 | var css =
|
255 | ".rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }";
|
256 | var expected =
|
257 | ".rule { font-size: 16px; margin: 1rem; margin-left: 5px; padding: 5px; padding-right: 16px }";
|
258 | var options = {
|
259 | propWhiteList: ["*", "!margin-left", "!*padding*", "!font*"]
|
260 | };
|
261 | var processed = postcss(pxtorem(options)).process(css).css;
|
262 |
|
263 | expect(processed).toBe(expected);
|
264 | });
|
265 |
|
266 | it("should replace all properties when white list is empty", function() {
|
267 | var rules = ".rule { margin: 16px; font-size: 15px }";
|
268 | var expected = ".rule { margin: 1rem; font-size: 0.9375rem }";
|
269 | var options = {
|
270 | propWhiteList: []
|
271 | };
|
272 | var processed = postcss(pxtorem(options)).process(rules).css;
|
273 |
|
274 | expect(processed).toBe(expected);
|
275 | });
|
276 | });
|
277 |
|
278 | describe("selectorBlackList", function() {
|
279 |
|
280 | it("should ignore selectors in the selector black list - legacy", function() {
|
281 | var rules = ".rule { font-size: 15px } .rule2 { font-size: 15px }";
|
282 | var expected = ".rule { font-size: 0.9375rem } .rule2 { font-size: 15px }";
|
283 | var options = {
|
284 | selector_black_list: [".rule2"]
|
285 | };
|
286 | var processed = postcss(pxtorem(options)).process(rules).css;
|
287 |
|
288 | expect(processed).toBe(expected);
|
289 | });
|
290 |
|
291 | it("should ignore selectors in the selector black list", function() {
|
292 | var rules = ".rule { font-size: 15px } .rule2 { font-size: 15px }";
|
293 | var expected = ".rule { font-size: 0.9375rem } .rule2 { font-size: 15px }";
|
294 | var options = {
|
295 | selectorBlackList: [".rule2"]
|
296 | };
|
297 | var processed = postcss(pxtorem(options)).process(rules).css;
|
298 |
|
299 | expect(processed).toBe(expected);
|
300 | });
|
301 |
|
302 | it("should ignore every selector with `body$`", function() {
|
303 | var rules =
|
304 | "body { font-size: 16px; } .class-body$ { font-size: 16px; } .simple-class { font-size: 16px; }";
|
305 | var expected =
|
306 | "body { font-size: 1rem; } .class-body$ { font-size: 16px; } .simple-class { font-size: 1rem; }";
|
307 | var options = {
|
308 | selectorBlackList: ["body$"]
|
309 | };
|
310 | var processed = postcss(pxtorem(options)).process(rules).css;
|
311 |
|
312 | expect(processed).toBe(expected);
|
313 | });
|
314 |
|
315 | it("should only ignore exactly `body`", function() {
|
316 | var rules =
|
317 | "body { font-size: 16px; } .class-body { font-size: 16px; } .simple-class { font-size: 16px; }";
|
318 | var expected =
|
319 | "body { font-size: 16px; } .class-body { font-size: 1rem; } .simple-class { font-size: 1rem; }";
|
320 | var options = {
|
321 | selectorBlackList: [/^body$/]
|
322 | };
|
323 | var processed = postcss(pxtorem(options)).process(rules).css;
|
324 |
|
325 | expect(processed).toBe(expected);
|
326 | });
|
327 | });
|
328 |
|
329 | describe("replace", function() {
|
330 | it("should leave fallback pixel unit with root em value", function() {
|
331 | var options = {
|
332 | replace: false
|
333 | };
|
334 | var processed = postcss(pxtorem(options)).process(basicCSS).css;
|
335 | var expected = ".rule { font-size: 15px; font-size: 0.9375rem }";
|
336 |
|
337 | expect(processed).toBe(expected);
|
338 | });
|
339 | });
|
340 |
|
341 | describe("mediaQuery", function() {
|
342 |
|
343 | it("should replace px in media queries", function() {
|
344 | var options = {
|
345 | media_query: true
|
346 | };
|
347 | var processed = postcss(pxtorem(options)).process(
|
348 | "@media (min-width: 500px) { .rule { font-size: 16px } }"
|
349 | ).css;
|
350 | var expected = "@media (min-width: 31.25rem) { .rule { font-size: 1rem } }";
|
351 |
|
352 | expect(processed).toBe(expected);
|
353 | });
|
354 |
|
355 | it("should replace px in media queries", function() {
|
356 | var options = {
|
357 | mediaQuery: true
|
358 | };
|
359 | var processed = postcss(pxtorem(options)).process(
|
360 | "@media (min-width: 500px) { .rule { font-size: 16px } }"
|
361 | ).css;
|
362 | var expected = "@media (min-width: 31.25rem) { .rule { font-size: 1rem } }";
|
363 |
|
364 | expect(processed).toBe(expected);
|
365 | });
|
366 | });
|
367 |
|
368 | describe("minPixelValue", function() {
|
369 | it("should not replace values below minPixelValue", function() {
|
370 | var options = {
|
371 | propWhiteList: [],
|
372 | minPixelValue: 2
|
373 | };
|
374 | var rules =
|
375 | ".rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }";
|
376 | var expected =
|
377 | ".rule { border: 1px solid #000; font-size: 1rem; margin: 1px 0.625rem; }";
|
378 | var processed = postcss(pxtorem(options)).process(rules).css;
|
379 |
|
380 | expect(processed).toBe(expected);
|
381 | });
|
382 | });
|
383 |
|
384 | describe("filter-prop-list", function() {
|
385 | it('should find "exact" matches from propList', function() {
|
386 | var propList = [
|
387 | "font-size",
|
388 | "margin",
|
389 | "!padding",
|
390 | "*border*",
|
391 | "*",
|
392 | "*y",
|
393 | "!*font*"
|
394 | ];
|
395 | var expected = "font-size,margin";
|
396 | expect(filterPropList.exact(propList).join()).toBe(expected);
|
397 | });
|
398 |
|
399 | it('should find "contain" matches from propList and reduce to string', function() {
|
400 | var propList = [
|
401 | "font-size",
|
402 | "*margin*",
|
403 | "!padding",
|
404 | "*border*",
|
405 | "*",
|
406 | "*y",
|
407 | "!*font*"
|
408 | ];
|
409 | var expected = "margin,border";
|
410 | expect(filterPropList.contain(propList).join()).toBe(expected);
|
411 | });
|
412 |
|
413 | it('should find "start" matches from propList and reduce to string', function() {
|
414 | var propList = [
|
415 | "font-size",
|
416 | "*margin*",
|
417 | "!padding",
|
418 | "border*",
|
419 | "*",
|
420 | "*y",
|
421 | "!*font*"
|
422 | ];
|
423 | var expected = "border";
|
424 | expect(filterPropList.startWith(propList).join()).toBe(expected);
|
425 | });
|
426 |
|
427 | it('should find "end" matches from propList and reduce to string', function() {
|
428 | var propList = [
|
429 | "font-size",
|
430 | "*margin*",
|
431 | "!padding",
|
432 | "border*",
|
433 | "*",
|
434 | "*y",
|
435 | "!*font*"
|
436 | ];
|
437 | var expected = "y";
|
438 | expect(filterPropList.endWith(propList).join()).toBe(expected);
|
439 | });
|
440 |
|
441 | it('should find "not" matches from propList and reduce to string', function() {
|
442 | var propList = [
|
443 | "font-size",
|
444 | "*margin*",
|
445 | "!padding",
|
446 | "border*",
|
447 | "*",
|
448 | "*y",
|
449 | "!*font*"
|
450 | ];
|
451 | var expected = "padding";
|
452 | expect(filterPropList.notExact(propList).join()).toBe(expected);
|
453 | });
|
454 |
|
455 | it('should find "not contain" matches from propList and reduce to string', function() {
|
456 | var propList = [
|
457 | "font-size",
|
458 | "*margin*",
|
459 | "!padding",
|
460 | "!border*",
|
461 | "*",
|
462 | "*y",
|
463 | "!*font*"
|
464 | ];
|
465 | var expected = "font";
|
466 | expect(filterPropList.notContain(propList).join()).toBe(expected);
|
467 | });
|
468 |
|
469 | it('should find "not start" matches from propList and reduce to string', function() {
|
470 | var propList = [
|
471 | "font-size",
|
472 | "*margin*",
|
473 | "!padding",
|
474 | "!border*",
|
475 | "*",
|
476 | "*y",
|
477 | "!*font*"
|
478 | ];
|
479 | var expected = "border";
|
480 | expect(filterPropList.notStartWith(propList).join()).toBe(expected);
|
481 | });
|
482 |
|
483 | it('should find "not end" matches from propList and reduce to string', function() {
|
484 | var propList = [
|
485 | "font-size",
|
486 | "*margin*",
|
487 | "!padding",
|
488 | "!border*",
|
489 | "*",
|
490 | "!*y",
|
491 | "!*font*"
|
492 | ];
|
493 | var expected = "y";
|
494 | expect(filterPropList.notEndWith(propList).join()).toBe(expected);
|
495 | });
|
496 | });
|