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

New CSS features like CSS Nesting and Container Queries #155

Open
AndyObtiva opened this issue May 18, 2024 · 1 comment
Open

New CSS features like CSS Nesting and Container Queries #155

AndyObtiva opened this issue May 18, 2024 · 1 comment

Comments

@AndyObtiva
Copy link

Thank you for providing this great library. I was just able to leverage it to parse CSS and convert it into Glimmer DSL for CSS Ruby syntax:
https://github.com/AndyObtiva/glimmer-dsl-css?tab=readme-ov-file#css-to-glimmer-converter
https://github.com/AndyObtiva/glimmer-dsl-css/blob/master/lib/glimmer/css/css_to_glimmer_converter.rb

I noticed that CSS Parser does not support the recently added CSS Nesting feature (added in 2023 I believe):
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting

For example, instead of writing this:

      body .h1.header {
        font-weight: bold;
        font-family: "'Times New Roman', Arial";
      }

We can write this:

      body {
        & .h1.header {
          font-weight: bold;
          font-family: "'Times New Roman', Arial";
        }
      }

I believe CSS added other nesting features as well, like nesting @-rules.

Also, CSS added Container Queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

Example:

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

It would be cool to support all of those features eventually.

I would like to help, but I am already bound up by many open-source projects like Glimmer DSL for Web and Glimmer DSL for LibUI.

@grosser
Copy link
Contributor

grosser commented May 20, 2024

PR welcome, but I don't have time to work on this
... FYI here is an issue about swapping out the CSS engine which might help this usecase too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants