postcss-plugins/plugins/postcss-custom-media/test/complex.css at main · csstools/postcss-plugins · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@custom-media --🧑🏾‍🎤 (min-width: 1);

@media (--🧑🏾‍🎤) {
	.a {
		order: 1;
	}
}

@custom-media --\(\)-escaped (min-width: 2);

@media (--\(\)-escaped) {
	.a {
		order: 2;
	}
}

@custom-media --modern (min-width: 3), (min-width: 4);

@media (--modern) and (width > 1024px) {
	.a { order: 3; }
}

/* #region https://github.com/csstools/postcss-custom-media/issues/51 */
@custom-media --screen only screen;
@custom-media --md-and-larger1 --screen and (width >= 570px);
@custom-media --md-and-larger2 (--screen) and (width >= 570px);
@custom-media --md-and-larger3 only screen and (width >= 570px);
@custom-media --md-larger4 (width >= 570px);
@custom-media --md-smaller4 (width < 1000px);

@media (--md-and-larger1) {
	body {
		background-color: red;
	}
}

@media (--md-and-larger2) {
	body {
		background-color: yellow;
	}
}

@media (--md-and-larger3) {
	body {
		background-color: green;
	}
}

@media (--screen) and (--md-larger4) {
	body {
		background-color: green;
	}
}

@media (--md-larger4) and (--md-smaller4) {
	body {
		background-color: green;
	}
}
/* #endregion https://github.com/csstools/postcss-custom-media/issues/51 */