Color and background query?

[IgorKaravaev]

I'm trying to create color and background container queries, but it doesn't work. What am I doing wrong?

.element:container(color = green) {
}

.element:container(background-color = green) {
}

[ausi]

Thanks for reporting the issue.

Looks like this is a bug in the current implementation.

You could work around that for now, until it’s fixed, by querying the hue of the color like:

.element:container(color hue = 120deg) { }
.element:container(background-color hue = 120deg) { }
/* or */
.element:container(color hue > 110deg < 130deg) { }
.element:container(background-color hue > 110deg < 130deg) { }

[ausi]

In the next version it will be possible to query colors using the rgb() or rgba() notation:

.element:container(color = rgb(0, 128, 0)) {
}
.element:container(background-color: rgba(0, 128, 0, 1)) {
}

Support for color keywords like green would need a huge amount of code or trigger style recalculation in the browser, therefore they are not supported.

[ausi]

Fixed in version 0.4.0.