Skip to content

Commit 4c41714

Browse files
yunusgayunusga
committed
Base Media Queries Level 4 "range" support
https://www.w3.org/TR/mediaqueries-4/#mq-ranges
1 parent 3f642aa commit 4c41714

File tree

2 files changed

+122
-48
lines changed

2 files changed

+122
-48
lines changed

‎lib/create-sort.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
// ----------------------------------------
44

55
const minMaxWidth = /(!?\(\s*min(-device-)?-width)(.|\n)+\(\s*max(-device)?-width/i;
6-
const minWidth = /\(\s*min(-device)?-width/i;
6+
const minWidth = /\(\s*min(-device)?-width|\(\s*width\s*>(=)?/i;
77
const maxMinWidth = /(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width/i;
8-
const maxWidth = /\(\s*max(-device)?-width/i;
8+
const maxWidth = /\(\s*max(-device)?-width|\(\s*width\s*<(=)?/i;
99

1010
const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
1111
const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);

‎tests/index.spec.js‎

Lines changed: 120 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,34 @@ test(`simple #1. mobile-first`, () => {
99
'screen and (min-width: 640px)',
1010
'screen and (min-width: 1280px)',
1111
'screen and (min-width: 768px)',
12-
'screen and (max-width: 1280px)'
12+
'screen and (max-width: 1280px)',
13+
'screen and (width < 640px)',
14+
'screen and (width >= 980px)',
15+
'screen and (width <= 980px)',
16+
'screen and (width <= 768px)',
17+
'screen and (width > 640px)',
18+
'screen and (width >= 1280px)',
19+
'screen and (width > 768px)',
20+
'screen and (width < 1280px)',
1321
];
1422

1523
const expectedOrder = [
1624
'screen and (min-width: 640px)',
25+
'screen and (width > 640px)',
1726
'screen and (min-width: 768px)',
27+
'screen and (width > 768px)',
1828
'screen and (min-width: 980px)',
29+
'screen and (width >= 980px)',
1930
'screen and (min-width: 1280px)',
31+
'screen and (width >= 1280px)',
2032
'screen and (max-width: 1280px)',
33+
'screen and (width < 1280px)',
2134
'screen and (max-width: 980px)',
35+
'screen and (width <= 980px)',
2236
'screen and (max-width: 768px)',
23-
'screen and (max-width: 640px)'
37+
'screen and (width <= 768px)',
38+
'screen and (max-width: 640px)',
39+
'screen and (width < 640px)',
2440
];
2541

2642
const expected = expectedOrder.join('\n');
@@ -38,18 +54,34 @@ test(`simple #1. desktop-first`, () => {
3854
'screen and (min-width: 640px)',
3955
'screen and (min-width: 1280px)',
4056
'screen and (min-width: 768px)',
41-
'screen and (max-width: 1280px)'
57+
'screen and (max-width: 1280px)',
58+
'screen and (width < 640px)',
59+
'screen and (width > 980px)',
60+
'screen and (width <= 980px)',
61+
'screen and (width < 768px)',
62+
'screen and (width > 640px)',
63+
'screen and (width >= 1280px)',
64+
'screen and (width >= 768px)',
65+
'screen and (width <= 1280px)',
4266
];
4367

4468
const expectedOrder = [
69+
'screen and (width <= 1280px)',
4570
'screen and (max-width: 1280px)',
71+
'screen and (width <= 980px)',
4672
'screen and (max-width: 980px)',
73+
'screen and (width < 768px)',
4774
'screen and (max-width: 768px)',
75+
'screen and (width < 640px)',
4876
'screen and (max-width: 640px)',
77+
'screen and (width > 640px)',
4978
'screen and (min-width: 640px)',
79+
'screen and (width >= 768px)',
5080
'screen and (min-width: 768px)',
81+
'screen and (width > 980px)',
5182
'screen and (min-width: 980px)',
52-
'screen and (min-width: 1280px)'
83+
'screen and (width >= 1280px)',
84+
'screen and (min-width: 1280px)',
5385
];
5486

5587
const expected = expectedOrder.join('\n');
@@ -63,14 +95,22 @@ test(`simple #2. mobile-first`, () => {
6395
'screen and (max-width: 640px)',
6496
'screen and (max-width: 640px)',
6597
'screen and (min-width: 1280px)',
66-
'screen and (max-width: 640px)'
98+
'screen and (max-width: 640px)',
99+
'screen and (width < 640px)',
100+
'screen and (width < 640px)',
101+
'screen and (width > 1280px)',
102+
'screen and (width < 640px)',
67103
];
68104

69105
const expectedOrder = [
70106
'screen and (min-width: 1280px)',
107+
'screen and (width > 1280px)',
108+
'screen and (max-width: 640px)',
71109
'screen and (max-width: 640px)',
72110
'screen and (max-width: 640px)',
73-
'screen and (max-width: 640px)'
111+
'screen and (width < 640px)',
112+
'screen and (width < 640px)',
113+
'screen and (width < 640px)',
74114
];
75115

76116
const expected = expectedOrder.join('\n');
@@ -84,14 +124,22 @@ test(`simple #2. desktop-first`, () => {
84124
'screen and (max-width: 640px)',
85125
'screen and (max-width: 640px)',
86126
'screen and (min-width: 1280px)',
87-
'screen and (max-width: 640px)'
127+
'screen and (max-width: 640px)',
128+
'screen and (width < 640px)',
129+
'screen and (width < 640px)',
130+
'screen and (width > 1280px)',
131+
'screen and (width < 640px)',
88132
];
89133

90134
const expectedOrder = [
135+
'screen and (width < 640px)',
136+
'screen and (width < 640px)',
137+
'screen and (width < 640px)',
91138
'screen and (max-width: 640px)',
92139
'screen and (max-width: 640px)',
93140
'screen and (max-width: 640px)',
94-
'screen and (min-width: 1280px)'
141+
'screen and (width > 1280px)',
142+
'screen and (min-width: 1280px)',
95143
];
96144

97145
const expected = expectedOrder.join('\n');
@@ -101,9 +149,19 @@ test(`simple #2. desktop-first`, () => {
101149
});
102150

103151
test(`simple #3. mobile-first`, () => {
104-
const receivedOrder = ['screen and (min-width: 640px)', 'screen and (min-width: 0)'];
152+
const receivedOrder = [
153+
'screen and (min-width: 640px)',
154+
'screen and (min-width: 0)',
155+
'screen and (width > 640px)',
156+
'screen and (width > 0)',
157+
];
105158

106-
const expectedOrder = ['screen and (min-width: 0)', 'screen and (min-width: 640px)'];
159+
const expectedOrder = [
160+
'screen and (min-width: 0)',
161+
'screen and (width > 0)',
162+
'screen and (min-width: 640px)',
163+
'screen and (width > 640px)',
164+
];
107165

108166
const expected = expectedOrder.join('\n');
109167
const received = receivedOrder.sort(sortCSSmq).join('\n');
@@ -178,20 +236,28 @@ test(`mixed #1. mobile-first`, () => {
178236
'tv',
179237
'print and (orientation: landscape)',
180238
'screen and (min-width: 1280px)',
239+
'screen and (width > 1280px)',
181240
'screen and (max-width: 640px)',
241+
'screen and (width < 640px)',
182242
'screen and (orientation: landscape)',
183243
'print',
184244
'screen and (orientation: portrait)',
185245
'screen and (min-width: 768px)',
246+
'screen and (width > 768px)',
186247
'screen and (max-width: 1280px)',
248+
'screen and (width < 1280px)',
187249
'print and (orientation: portrait)'
188250
];
189251

190252
const expectedOrder = [
191253
'screen and (min-width: 768px)',
254+
'screen and (width > 768px)',
192255
'screen and (min-width: 1280px)',
256+
'screen and (width > 1280px)',
193257
'screen and (max-width: 1280px)',
258+
'screen and (width < 1280px)',
194259
'screen and (max-width: 640px)',
260+
'screen and (width < 640px)',
195261
'screen and (orientation: landscape)',
196262
'screen and (orientation: portrait)',
197263
'tv',
@@ -211,19 +277,27 @@ test(`mixed #1. desktop-first`, () => {
211277
'tv',
212278
'print and (orientation: landscape)',
213279
'screen and (min-width: 1280px)',
280+
'screen and (width > 1280px)',
214281
'screen and (max-width: 640px)',
282+
'screen and (width < 640px)',
215283
'screen and (orientation: landscape)',
216284
'print',
217285
'screen and (orientation: portrait)',
218286
'screen and (min-width: 768px)',
287+
'screen and (width > 768px)',
219288
'screen and (max-width: 1280px)',
289+
'screen and (width < 1280px)',
220290
'print and (orientation: portrait)'
221291
];
222292

223293
const expectedOrder = [
294+
'screen and (width < 1280px)',
224295
'screen and (max-width: 1280px)',
296+
'screen and (width < 640px)',
225297
'screen and (max-width: 640px)',
298+
'screen and (width > 768px)',
226299
'screen and (min-width: 768px)',
300+
'screen and (width > 1280px)',
227301
'screen and (min-width: 1280px)',
228302
'screen and (orientation: landscape)',
229303
'screen and (orientation: portrait)',
@@ -284,67 +358,67 @@ test(`multiline #2. mobile-first`, () => {
284358
// Edge cases
285359
const receivedOrder = [
286360
`
287-
361+
288362
@media (min-width: 48em)
289-
290-
363+
364+
291365
and (max-width: 59.999em)
292-
366+
293367
`,
294368
`
295-
296-
369+
370+
297371
@media (min-width: 40em)
298-
372+
299373
and (max-width: 47.999em)
300-
301-
374+
375+
302376
`,
303377
`
304-
305-
306-
378+
379+
380+
307381
@media (min-width: 15em)
308-
309-
310-
382+
383+
384+
311385
and (max-width: 47.999em)
312-
313-
314-
386+
387+
388+
315389
`
316390
];
317391

318392
const expectedOrder = [
319393
`
320-
321-
322-
394+
395+
396+
323397
@media (min-width: 15em)
324-
325-
326-
398+
399+
400+
327401
and (max-width: 47.999em)
328-
329-
330-
402+
403+
404+
331405
`,
332406
`
333-
334-
407+
408+
335409
@media (min-width: 40em)
336-
410+
337411
and (max-width: 47.999em)
338-
339-
412+
413+
340414
`,
341415
`
342-
416+
343417
@media (min-width: 48em)
344-
345-
418+
419+
346420
and (max-width: 59.999em)
347-
421+
348422
`
349423
];
350424

0 commit comments

Comments
 (0)