Custom media handling seems incorrect

[romainmenke]

I am working on the PostCSS plugin for @custom-media and found it to be wildly incorrect.
When comparing with lightningcss I think I also found some instances where lightningcss has bugs.

@custom-media --not-width not (min-width: 300px);

@media screen and ((prefers-color-scheme: dark) or (--not-width)) {
	.foo {
		order: 6;
	}
}

becomes

@media screen and ((prefers-color-scheme: dark) or not (min-width: 300px)) {
  .foo {
    order: 6;
  }
}

This is not a valid media query.

Equivalent could be :

@media screen {
	@media (prefers-color-scheme: dark) {
		.foo {
			order: 6;
		}
	}

	@media not (min-width: 300px) {
		.foo {
			order: 6;
		}
	}
}

---

For the PostCSS plugin I am now considering only allowing <media-feature> https://drafts.csswg.org/mediaqueries-5/#mq-syntax

/* supported */
@custom-media --mq (min-width: 300px);

/* not supported */
@custom-media --mq-with-type screen and (min-width: 300px);
@custom-media --mq-with-modifier not (min-width: 300px);
@custom-media --mq-list (min-width: 300px), (prefers-color-scheme: dark);

I think technically lists would be possible but at this time I prefer to scale back the scope of the plugin as much as possible to something that is known to be correct.

[devongovett]

I think it's just missing parentheses. This is valid:

screen and ((prefers-color-scheme: dark) or (not (min-width: 300px))) 

[devongovett]

The above commit should fix this particular case. Let me know if you find others. There is certainly some complexity here!

Btw, Lightning CSS does currently error in some cases:

a) if there is a circular reference between custom media rules
b) trying to and/or different media types. This would require duplicating the rule, or nesting them in strange ways.

[romainmenke]

Awesome, thank you!

I really like that Lightning CSS is more cautious and errors in those cases.
Will keep a lookout for more issues.