kobweb
kobweb copied to clipboard
Support @container queries
This is a specific issue subordinated to #584
Started looking into container queries today. I can get something in but I'm not sure it's great.
Container queries should support targetting more than one element:
@container (...) {
.someelement { ... }
.anotherlement { ... }
.thirdelement { ... }
}
Also, there is value in supporting nested container queries:
@container (...) {
.card { ... }
@container {
.body { ... }
}
}
My current approach to CSS styles may be a bit too limited; it would look like this:
CssStyle {
cssRule(containerQuery = ...) {
Modifier.stuff()
}
}
which isn't quite flexible enough to allow either of the above two cases. I am going to sleep on this, but there's a chance I need to revisit CssStyle and allow it to be more flexible, perhaps with a new syntax or operation method:
// Multiple elements
CssStyle {
atRule(...) {
cssRule(".someelement") { ... }
cssRule(".anotherelement") { ... }
cssRule(".thidelement") { ... }
}
}
// Nested container queries
CssStyle {
atRule(...) {
cssRule(".card") { ... }
atRule(...) {
cssRule(".body") { ... }
}
}
}