premailer / css_parser

Ruby CSS Parser
Other
280 stars 110 forks source link

New CSS features like CSS Nesting and Container Queries #155

Open AndyObtiva opened 6 months ago

AndyObtiva commented 6 months ago

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 commented 6 months ago

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