Skip to content

Commit b7e36dc

Browse files
romainmenkeromainmenke
authored
postcss-custom-media: avoid complex generated CSS in more cases (#709)
* postcss-custom-media: avoid complex generated CSS in more cases * undo * fmt
1 parent 263027c commit b7e36dc

File tree

10 files changed

+88
-207
lines changed

10 files changed

+88
-207
lines changed

‎packages/media-query-list-parser/src/nodes/media-condition.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export class MediaCondition {
99

1010
media: MediaNot | MediaInParens | MediaConditionListWithAnd | MediaConditionListWithOr;
1111

12-
constructor(media: MediaNot | MediaInParens |MediaConditionListWithAnd | MediaConditionListWithOr) {
12+
constructor(media: MediaNot | MediaInParens | MediaConditionListWithAnd | MediaConditionListWithOr) {
1313
this.media = media;
1414
}
1515

‎plugins/postcss-custom-media/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes to PostCSS Custom Media
22

3+
### Unreleased
4+
5+
- Fixed: avoid complex generated CSS when `@custom-media` contains only a single simple media feature.
6+
37
### 9.0.0 (November 14, 2022)
48

59
- Updated: Support for Node v14+ (major).

‎plugins/postcss-custom-media/src/transform-at-media/transform-at-media.ts

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
import { alwaysTrue, neverTrue } from './always-true-or-false';
2-
import { isGeneralEnclosed, isMediaAnd, isMediaConditionList, isMediaFeature, isMediaFeatureBoolean, isMediaNot, isMediaOr, isMediaQueryInvalid, isMediaQueryWithType, MediaQuery, newMediaFeaturePlain, parse } from '@csstools/media-query-list-parser';
2+
import {
3+
MediaFeature,
4+
MediaQuery,
5+
isGeneralEnclosed,
6+
isMediaAnd,
7+
isMediaConditionList,
8+
isMediaFeature,
9+
isMediaFeatureBoolean,
10+
isMediaNot,
11+
isMediaOr,
12+
isMediaQueryInvalid,
13+
isMediaQueryWithType,
14+
newMediaFeaturePlain,
15+
parse,
16+
} from '@csstools/media-query-list-parser';
317

418
export function transformAtMediaListTokens(params: string, replacements: Map<string, { truthy: Array<MediaQuery>, falsy: Array<MediaQuery> }>): Array<{ replaceWith: string, encapsulateWith?: string }> {
519
const mediaQueries = parse(params, {
@@ -104,6 +118,29 @@ export function transformComplexMediaQuery(mediaQuery: MediaQuery, replacements:
104118

105119
const replacement = replacements.get(name);
106120
if (replacement) {
121+
122+
if (replacement.truthy.length === 1 && mediaQueryIsSimple(replacement.truthy[0])) {
123+
let mediaFeature: MediaFeature | null = null;
124+
const replacementMediaQuery = replacement.truthy[0];
125+
replacementMediaQuery.walk((replacementEntry) => {
126+
if (isMediaFeature(replacementEntry.node)) {
127+
mediaFeature = replacementEntry.node;
128+
return false;
129+
}
130+
});
131+
132+
if (mediaFeature && mediaFeature.feature) {
133+
parent.feature = mediaFeature.feature;
134+
candidate = [
135+
{
136+
replaceWith: mediaQuery.toString(),
137+
},
138+
];
139+
140+
return false;
141+
}
142+
}
143+
107144
const replaceWithTrue = newMediaFeaturePlain(
108145
alwaysTrue[0][4].value as string,
109146
alwaysTrue[2],

‎plugins/postcss-custom-media/test/basic-after-v9.css

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@
1313
}
1414
}
1515

16+
@media (((--simple-feature-test))) {
17+
.a {
18+
order: 1.2;
19+
}
20+
}
21+
1622
/* Also a type condition */
1723
@media screen and (--simple-feature-test) {
1824
.a {
@@ -31,7 +37,7 @@
3137
@custom-media --modern (color), (hover);
3238

3339
@media (--modern) and (width > 1024px) {
34-
.a {
35-
color: green;
36-
}
40+
.a {
41+
color: green;
42+
}
3743
}

‎plugins/postcss-custom-media/test/basic-after-v9.expect.css

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,54 +11,42 @@
1111
}
1212
}
1313

14-
/* Also a type condition */
1514
@media (min-width: 300px) {
16-
@media screen and (max-color:2147477350) {
1715
.a {
18-
order: 2;
16+
order: 1.2;
1917
}
2018
}
21-
}
22-
@media not all and (min-width: 300px) {
23-
@media screen and (color:2147477350) {
19+
20+
/* Also a type condition */
21+
@media screen and (min-width: 300px) {
2422
.a {
2523
order: 2;
2624
}
2725
}
28-
}
2926

3027
/* Negation */
31-
@media (min-width: 300px) {
32-
@media not (max-color:2147477350) {
28+
@media not (min-width: 300px) {
3329
.a {
3430
order: 3;
3531
}
3632
}
37-
}
38-
@media not all and (min-width: 300px) {
39-
@media not (color:2147477350) {
40-
.a {
41-
order: 3;
42-
}
43-
}
44-
}
4533

4634
/* LightningCSS example */
4735

4836
@media (color),(hover) {
4937

5038
@media (max-color:2147477350) and (width > 1024px) {
51-
.a {
52-
color: green;
53-
}
39+
.a {
40+
color: green;
41+
}
5442
}
5543
}
5644

5745
@media not all and (color),not all and (hover) {
5846

5947
@media (color:2147477350) and (width > 1024px) {
60-
.a {
61-
color: green;
62-
}
48+
.a {
49+
color: green;
50+
}
6351
}
6452
}

‎plugins/postcss-custom-media/test/basic-after-v9.preserve.expect.css

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -24,42 +24,36 @@
2424
}
2525
}
2626

27-
/* Also a type condition */
2827
@media (min-width: 300px) {
29-
@media screen and (max-color:2147477350) {
3028
.a {
31-
order: 2;
29+
order: 1.2;
3230
}
3331
}
32+
33+
@media (((--simple-feature-test))) {
34+
.a {
35+
order: 1.2;
36+
}
3437
}
35-
@media not all and (min-width: 300px) {
36-
@media screen and (color:2147477350) {
38+
39+
/* Also a type condition */
40+
@media screen and (min-width: 300px) {
3741
.a {
3842
order: 2;
3943
}
4044
}
41-
}
4245
@media screen and (--simple-feature-test) {
4346
.a {
4447
order: 2;
4548
}
4649
}
4750

4851
/* Negation */
49-
@media (min-width: 300px) {
50-
@media not (max-color:2147477350) {
52+
@media not (min-width: 300px) {
5153
.a {
5254
order: 3;
5355
}
5456
}
55-
}
56-
@media not all and (min-width: 300px) {
57-
@media not (color:2147477350) {
58-
.a {
59-
order: 3;
60-
}
61-
}
62-
}
6357
@media not (--simple-feature-test) {
6458
.a {
6559
order: 3;
@@ -72,23 +66,23 @@
7266
@media (color),(hover) {
7367

7468
@media (max-color:2147477350) and (width > 1024px) {
75-
.a {
76-
color: green;
77-
}
69+
.a {
70+
color: green;
71+
}
7872
}
7973
}
8074

8175
@media not all and (color),not all and (hover) {
8276

8377
@media (color:2147477350) and (width > 1024px) {
84-
.a {
85-
color: green;
86-
}
78+
.a {
79+
color: green;
80+
}
8781
}
8882
}
8983

9084
@media (--modern) and (width > 1024px) {
91-
.a {
92-
color: green;
93-
}
85+
.a {
86+
color: green;
87+
}
9488
}

‎plugins/postcss-custom-media/test/basic.expect.css

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -118,47 +118,11 @@
118118
}
119119
}
120120

121-
@media (min-width: 320px) {
122-
123-
@media (max-width: 640px) {
124-
125-
@media (max-color:2147477350) and (max-color:2147477350) {
126-
body {
127-
order: 10;
128-
}
129-
}
130-
}
131-
132-
@media not all and (max-width: 640px) {
133-
134-
@media (max-color:2147477350) and (color:2147477350) {
135-
body {
136-
order: 10;
137-
}
138-
}
139-
}
140-
}
141-
142-
@media not all and (min-width: 320px) {
143-
144-
@media (max-width: 640px) {
145-
146-
@media (color:2147477350) and (max-color:2147477350) {
147-
body {
148-
order: 10;
149-
}
150-
}
151-
}
152-
153-
@media not all and (max-width: 640px) {
154-
155-
@media (color:2147477350) and (color:2147477350) {
121+
@media (min-width: 320px) and (max-width: 640px) {
156122
body {
157123
order: 10;
158124
}
159125
}
160-
}
161-
}
162126

163127
@media (min-width: 320px) and (max-width: 640px) {
164128
body {

‎plugins/postcss-custom-media/test/complex.expect.css

Lines changed: 3 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -58,85 +58,25 @@
5858

5959
@media only screen {
6060

61-
@media (width >= 570px) {
62-
63-
@media (max-color:2147477350) and (max-color:2147477350) {
64-
body {
65-
background-color: green;
66-
}
67-
}
68-
}
69-
70-
@media not all and (width >= 570px) {
71-
72-
@media (max-color:2147477350) and (color:2147477350) {
61+
@media (max-color:2147477350) and (width >= 570px) {
7362
body {
7463
background-color: green;
7564
}
7665
}
7766
}
78-
}
7967

8068
@media not screen {
8169

82-
@media (width >= 570px) {
83-
84-
@media (color:2147477350) and (max-color:2147477350) {
85-
body {
86-
background-color: green;
87-
}
88-
}
89-
}
90-
91-
@media not all and (width >= 570px) {
92-
93-
@media (color:2147477350) and (color:2147477350) {
94-
body {
95-
background-color: green;
96-
}
97-
}
98-
}
99-
}
100-
101-
@media (width >= 570px) {
102-
103-
@media (width < 1000px) {
104-
105-
@media (max-color:2147477350) and (max-color:2147477350) {
106-
body {
107-
background-color: green;
108-
}
109-
}
110-
}
111-
112-
@media not all and (width < 1000px) {
113-
114-
@media (max-color:2147477350) and (color:2147477350) {
115-
body {
116-
background-color: green;
117-
}
118-
}
119-
}
120-
}
121-
122-
@media not all and (width >= 570px) {
123-
124-
@media (width < 1000px) {
125-
126-
@media (color:2147477350) and (max-color:2147477350) {
70+
@media (color:2147477350) and (width >= 570px) {
12771
body {
12872
background-color: green;
12973
}
13074
}
13175
}
13276

133-
@media not all and (width < 1000px) {
134-
135-
@media (color:2147477350) and (color:2147477350) {
77+
@media (width >= 570px) and (width < 1000px) {
13678
body {
13779
background-color: green;
13880
}
13981
}
140-
}
141-
}
14282
/* #endregion https://github.com/csstools/postcss-custom-media/issues/51 */

0 commit comments

Comments
 (0)