Skip to content

Parser: Parse CSS and <style> tags using Lightning CSS#741

Draft
marcoroth wants to merge 1 commit intomainfrom
parse-css
Draft

Parser: Parse CSS and <style> tags using Lightning CSS#741
marcoroth wants to merge 1 commit intomainfrom
parse-css

Conversation

@marcoroth
Copy link
Owner

@marcoroth marcoroth commented Oct 26, 2025

This pull request integrates the Rust lightningcss crate for parsing CSS.

Additionally, it updates the Herb Parser to parse the CSS content of <style> tags within HTML+ERB documents using the herb_css_parse function.

So a document like this:

<style>
  body {
    color: black;
    font-size: 14pt;
    margin: 6px;
  }
</style>

Gets parsed as:

@ DocumentNode (location: (1:0)-(8:0))
└── children: (2 items)
    ├── @ HTMLElementNode (location: (1:0)-(7:8))
       ├── open_tag:
          └── @ HTMLOpenTagNode (location: (1:0)-(1:7))
              ├── tag_opening: "<" (location: (1:0)-(1:1))
              ├── tag_name: "style" (location: (1:1)-(1:6))
              ├── tag_closing: ">" (location: (1:6)-(1:7))
              ├── children: []
              └── is_void: false
       
       ├── tag_name: "style" (location: (1:1)-(1:6))├── body: (1 item)
          └── @ CSSStyleNode (location: (1:7)-(7:0))
              ├── content: "\n  body {\n    text: black;\n    font-size: 14pt;\n    margin: 6px;\n  }\n"
              ├── rules: (1 item)
                 └── @ CSSRuleNode (location: (1:7)-(7:0))
                     ├── selector: "SelectorList([Selector(body, specificity = 0x1)])"
                     └── declarations: (3 items)
                         ├── @ CSSDeclarationNode (location: (1:7)-(7:0))
                            ├── property: "color"
                            └── value: "Color(RGBA(RGBA { red: 0, green: 0, blue: 0, alpha: 255 }))"
                         
                         ├── @ CSSDeclarationNode (location: (1:7)-(7:0))
                            ├── property: "font-size"
                            └── value: "FontSize(Length(Dimension(Pt(14.0))))"
                         
                         └── @ CSSDeclarationNode (location: (1:7)-(7:0))
                             ├── property: "margin"
                             └── value: "Margin(Margin { top: LengthPercentage(Dimension(Px(6.0))), right: LengthPercentage(Dimension(Px(6.0))), bottom: LengthPercentage(Dimension(Px(6.0))), left: LengthPercentage(Dimension(Px(6.0))) })"
              
              
              ├── valid: true
              └── parse_error: ""
       
       ├── close_tag:
          └── @ HTMLCloseTagNode (location: (7:0)-(7:8))
              ├── tag_opening: "</" (location: (7:0)-(7:2))
              ├── tag_name: "style" (location: (7:2)-(7:7))
              ├── children: []
              └── tag_closing: ">" (location: (7:7)-(7:8))
       
       ├── is_void: false
       └── source: "HTML"
    
    └── @ HTMLTextNode (location: (7:8)-(8:0))
        └── content: "\n"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant