Nested media queries instead of the 0.02px workaround?

[simevidas]

@miragecraft posted on Twitter the following discovery:

@media (width < 640px) {
  /* styles */
}

/* is the same as */

@media (max-width: 640px) {
  @media not (width: 640px) {
    /* styles */
  }
}

This seems like a better output than the (max-width: 639.98px) workaround that this plugin currently uses. Has this solution ever been considered?

[romainmenke]

Is there an example where (max-width: 639.98px) causes issues?

Nested media queries wasn't always supported : https://developer.mozilla.org/en-US/docs/Web/CSS/@media#browser_compatibility:~:text=Nested%20media%20queries

---

Another issue is that the proposed transform quickly escalates in complexity :

How do these examples transform? How do you program the plugin to transform correctly in all edge cases?

@media ((width < 640px) or (height < 400px)) {
  /* styles */
}

@media not print and (width < 640px) {
  /* styles */
}

Keeping the same overal query but changing the values is the least impactful change and therefor more likely to be correct.