`@media` range notation can result in float values in feature that only accept integers

[romainmenke]

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22source%22%3A%22%40media%20(color%20%3E%202)%20%7B%5Cn.foo%20%7Bcolor%3A%20red%3B%7D%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

@media (color > 2) {
.foo {color: red;}
}

becomes :

@media (min-color: 2.001) {
  .foo {
    color: red;
  }
}

color however doesn't accept <number>

[devongovett]

sure, but the input is also invalid so not sure if this is really a bug. we don't currently do any validation of the property names here but I suppose we could...

[romainmenke]

color: https://www.w3.org/TR/mediaqueries-4/#descdef-media-color

The specification outlines that color is a media feature of type range and value integer.

Name: | color
-- | --
@media
<integer>
range

Name:	color
For:	[@media](https://www.w3.org/TR/css3-conditional/#at-ruledef-media)
Value:	[<integer>](https://www.w3.org/TR/css-values-4/#integer-value)
Type:	range

All browsers agree that it works :

window.matchMedia('(color > 2)').matches
// true

So I fail to see how this input could be invalid?

---

we don't currently do any validation of the property names here but I suppose we could...

Property names should be validated, else it can lead to incorrect source becoming correct output :

@media (prefers-color-scheme = dark) { /* invalid input */
.foo {color: red;}
}

becomes :

@media (prefers-color-scheme: dark) { /* valid output */
  .foo {
    color: red;
  }
}

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22source%22%3A%22%40media%20(prefers-color-scheme%20%3D%20dark)%20%7B%5Cn.foo%20%7Bcolor%3A%20red%3B%7D%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

[devongovett]

Oh sorry I misunderstood. Didn't know that color accepted an integer. That's strange.

[romainmenke]

Yes, color-bit-depth or something would have been a better name for that media feature :)