Skip to content

Commit 1545c1f

Browse files
romainmenkeromainmenke
authored
Remove redundant at-media rule for smallest entry in image-set (#50)
* Remove redundant at-media rule for DPI 96 * Remove redundant at-media rule for DPI 96 * always use smallest, not dpi 96 * clarify test
1 parent def421a commit 1545c1f

File tree

4 files changed

+28
-181
lines changed

4 files changed

+28
-181
lines changed

‎plugins/postcss-image-set-function/src/lib/process-image-set.ts

+10-6
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,21 @@ export const processImageSet = (imageSetOptionNodes, decl: Declaration, opts: {
4646
.sort((a, b) => a - b)
4747
.map(params => mediasByDpr.get(params));
4848

49-
// conditionally prepend previous siblings
5049
if (!medias.length) {
5150
return;
5251
}
5352

54-
parent.after(medias);
53+
const smallestMedia = medias[0];
54+
const mediasWithoutSmallest = medias.slice(1);
5555

56-
if (opts.preserve) {
57-
const firstDecl = (medias[0].nodes[0] as Container).nodes[0] as Declaration;
58-
decl.cloneBefore({ value: firstDecl.value.trim() });
59-
} else {
56+
if (mediasWithoutSmallest.length) {
57+
parent.after(mediasWithoutSmallest);
58+
}
59+
60+
const firstDecl = (smallestMedia.nodes[0] as Container).nodes[0] as Declaration;
61+
decl.cloneBefore({ value: firstDecl.value.trim() });
62+
63+
if (!opts.preserve) {
6064
decl.remove();
6165

6266
// and then conditionally remove its parent

‎plugins/postcss-image-set-function/test/basic.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@
3333
order: 1;
3434
background-image: image-set(
3535
url(img/test.png) 1x,
36-
url(img/test-2x.png) 2dppx
36+
url(img/test-2dppx.png) 2dppx
3737
);
3838
order: 2;
3939
background-image: image-set(
4040
url(img/test.png) 1x,
41-
url(img/test-2x.png) 20dpcm
41+
url(img/test-2dpcm.png) 20dpcm
4242
);
4343
order: 3;
4444
}

‎plugins/postcss-image-set-function/test/basic.expect.css

+4-91
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,6 @@
3333
order: 5;
3434
}
3535

36-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
37-
38-
.test-changed-properties {
39-
background-image: url(img/test.png);
40-
}
41-
}
42-
4336
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
4437

4538
.test-changed-properties {
@@ -54,64 +47,29 @@
5447
}
5548
}
5649

57-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
58-
59-
.test-changed-properties {
60-
background-image: url(img/test.png);
61-
}
62-
}
63-
6450
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
6551

6652
.test-changed-properties {
6753
background-image: url(img/test-2x.png);
6854
}
6955
}
7056

71-
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
72-
73-
.test-changed-properties {
74-
background-image: url(img/test.png);
75-
}
76-
}
77-
78-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
79-
80-
.test-changed-properties {
81-
background-image: url(img/test.png);
82-
}
83-
}
84-
8557
.test-mixed-units {
8658
order: 1;
8759
background-image: url(img/test.png);
8860
background-image: image-set(
8961
url(img/test.png) 1x,
90-
url(img/test-2x.png) 2dppx
62+
url(img/test-2dppx.png) 2dppx
9163
);
9264
order: 2;
93-
background-image: url(img/test-2x.png);
65+
background-image: url(img/test-2dpcm.png);
9466
background-image: image-set(
9567
url(img/test.png) 1x,
96-
url(img/test-2x.png) 20dpcm
68+
url(img/test-2dpcm.png) 20dpcm
9769
);
9870
order: 3;
9971
}
10072

101-
@media (-webkit-min-device-pixel-ratio: 0.52), (min-resolution: 50.8dpi) {
102-
103-
.test-mixed-units {
104-
background-image: url(img/test-2x.png);
105-
}
106-
}
107-
108-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
109-
110-
.test-mixed-units {
111-
background-image: url(img/test.png);
112-
}
113-
}
114-
11573
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
11674

11775
.test-mixed-units {
@@ -122,7 +80,7 @@
12280
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
12381

12482
.test-mixed-units {
125-
background-image: url(img/test-2x.png);
83+
background-image: url(img/test-2dppx.png);
12684
}
12785
}
12886

@@ -144,13 +102,6 @@
144102
order: 3;
145103
}
146104

147-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
148-
149-
.test-mixed-order {
150-
background: url(../images/bck.png);
151-
}
152-
}
153-
154105
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
155106

156107
.test-mixed-order {
@@ -165,13 +116,6 @@
165116
}
166117
}
167118

168-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
169-
170-
.test-mixed-order {
171-
background: url(../images/bck.png);
172-
}
173-
}
174-
175119
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
176120

177121
.test-mixed-order {
@@ -203,13 +147,6 @@
203147
order: 3;
204148
}
205149

206-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
207-
208-
.test-no-url {
209-
background-image: "img/test.png";
210-
}
211-
}
212-
213150
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
214151

215152
.test-no-url {
@@ -224,13 +161,6 @@
224161
}
225162
}
226163

227-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
228-
229-
.test-no-url {
230-
background-image: "img/test.png";
231-
}
232-
}
233-
234164
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
235165

236166
.test-no-url {
@@ -249,13 +179,6 @@
249179
order: 2;
250180
}
251181

252-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
253-
254-
.test-webkit-prefix {
255-
background-image: url(img/test.png);
256-
}
257-
}
258-
259182
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
260183

261184
.test-webkit-prefix {
@@ -279,11 +202,6 @@
279202
url(my-img-print.png) 600dpi
280203
);
281204
}
282-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
283-
.test-within-mq-1 {
284-
background-image: url(img/test.png);
285-
}
286-
}
287205
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
288206
.test-within-mq-1 {
289207
background-image: url(img/test-2x.png);
@@ -305,11 +223,6 @@
305223
url(my-img-print.png) 600dpi
306224
);
307225
}
308-
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
309-
.test-within-mq-2 {
310-
background-image: url(img/test.png);
311-
}
312-
}
313226
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
314227
.test-within-mq-2 {
315228
background-image: url(img/test-2x.png);

0 commit comments

Comments
 (0)