swc/crates/swc_css_compat/tests/custom-media-query/complex.css

@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; }
}

@custom-media --test1 (color), (hover);

@media (--test1) and (width > 1024px) {
	.a { color: green; }
}

@custom-media --test2 not (color), (hover);

@media (--test2) and (width > 1024px) {
	body { background: red; }
}

@custom-media --test3 (color) and (min-width: 20px), (hover);

@media (--test3) and (min-height: 20px) {
	.a { color: green; }
}

@custom-media --screen only screen;
@custom-media --md-and-larger1 (--screen) and (width >= 570px);

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

@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 (--screen) or (--md-larger4) {
	body {
		background-color: green;
	}
}

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


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

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

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