Media query range contexts are sometimes incorrectly downgraded

[romainmenke]

@media screen and (not (200px <= width < 500px)) {
	html {
		background-color: green;
	}
}

@media screen and (not (min-width: 200px) and (max-width: 499.999px)) {
	html {
		background-color: purple;
	}
}

I would expect html background color to be purple but it is green.

When adding not before a media feature with a range context the result is a list with not and and on the same level. not (min-width: 200px) and (max-width: 499.999px)

This is not allowed by the specification : https://www.w3.org/TR/mediaqueries-5/#media-conditions

correct transform :

@media screen and (not ((min-width: 200px) and (max-width: 499.999px))) {
	html {
		background-color: purple;
	}
}

[LeoniePhiline]

Addition:
The parens around the <media-not> are even non-standard, as the root-level <media-condition-without-or> uses no parens. (Only the <media-in-parens> inside it.)

Correct would be:

@media screen and not ((min-width: 200px) and (max-width: 499.999px)) {
	html {
		background-color: purple;
	}
}

[romainmenke]

Both of these work just fine and both are standard :

@media screen and not ((min-width: 200px) and (max-width: 499.999px)) {
	html {
		background-color: purple;
	}
}

@media screen and (not ((min-width: 200px) and (max-width: 499.999px))) {
	html {
		background-color: hotpink;
	}
}

The grammar is recursive.

• <media-in-parens> can contain a <media-condition>
• <media-condition> can contain a <media-not>
• <media-condition> can contain a <media-in-parens>

But you cannot mix and and not at the same level.

[LeoniePhiline]

Ah yes. :) True.

[romainmenke]

Thank you @devongovett