Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support @container queries #619

Open
bitspittle opened this issue Nov 13, 2024 · 0 comments
Open

Support @container queries #619

bitspittle opened this issue Nov 13, 2024 · 0 comments
Labels
enhancement New feature or request
Milestone

Comments

@bitspittle
Copy link
Collaborator

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 bitspittle added the enhancement New feature or request label Nov 13, 2024
@bitspittle bitspittle added this to the 1.0 milestone Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant