kobweb icon indicating copy to clipboard operation
kobweb copied to clipboard

Support @container queries

Open bitspittle opened this issue 1 year ago • 0 comments

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") { ... }
       }
   }
}

bitspittle avatar Nov 13 '24 23:11 bitspittle