Skip to content

New CSS features like CSS Nesting and Container Queries #155

Open
@AndyObtiva

Description

@AndyObtiva

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions