2 releases
0.1.3 | Nov 13, 2024 |
---|---|
0.1.2 |
|
0.1.1 |
|
0.1.0 | Nov 13, 2024 |
#1108 in Web programming
294 downloads per month
10KB
72 lines
tieliehin_css_parser
docs: https://docs.rs/tieliehin_css_parser/latest/tieliehin_css_parser/
crates: https://crates.io/crates/tieliehin_css_parser
This CSS parser is built using the pest
parsing library in Rust. It parses simple CSS rules into components such as selectors, properties, and values.
Grammar
The .pest grammar file defines the rules for parsing a CSS declaration block. Below is a breakdown of each rule:
- WHITESPACE: Matches whitespace characters, including spaces, tabs, newlines, and carriage returns, to be ignored in parsing.
- COMMENT: Matches CSS comments enclosed by /* and */.
- CSS_RULE: The main rule for parsing a single CSS rule, consisting of optional comments/whitespace, a selector, and declarations within { ... }.
- selector: Matches a CSS selector, which may include multiple simple_selector items separated by commas.
- simple_selector: Matches a basic CSS selector, such as an identifier, ID selector (#header), class selector (.button), or alphanumeric sequence.
- declarations: Matches multiple declaration entries inside a CSS rule.
- declaration: Parses an individual CSS declaration with a property, value, and trailing semicolon.
- property: Matches a CSS property name, including alphanumeric characters and hyphens.
- values: Matches one or more values for a property, with items separated by commas or whitespace.
- value: Matches various CSS value types, including color codes, lengths, percentages, strings, and numeric values.
- COLOR: Matches hexadecimal color codes with 3 to 6 hexadecimal digits.
- LENGTH: Matches length units in px, em, rem, or %.
- PERCENTAGE: Matches percentage values.
- STRING: Matches text in single or double quotes.
- ZERO: Matches the literal value 0.
- FLOAT: Matches floating-point numbers.
- IDENTIFIER: Matches alphanumeric keywords and names with optional hyphens.
Example of a Simple CSS Rule
This parser can handle basic CSS declarations, such as:
footer {
background-color: #333;
color: #f4f4f9;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
WHITESPACE = _{ " " | "\t" | "\n" | "\r" }
COMMENT = _{ "/*" ~ (!"*/" ~ ANY)* ~ "*/" }
CSS_RULE = _{ (COMMENT | WHITESPACE)* ~ selector ~ "{" ~ WHITESPACE* ~ declarations ~ WHITESPACE* ~ "}" }
selector = @{ (simple_selector ~ (WHITESPACE* ~ "," ~ WHITESPACE* ~ simple_selector)*) }
simple_selector = @{ IDENTIFIER | ("#" ~ IDENTIFIER+)
| ("." ~ IDENTIFIER+)
| ASCII_ALPHANUMERIC+ }
declarations = _{ (declaration ~ WHITESPACE*)+ }
declaration = _{ property ~ ":" ~ WHITESPACE* ~ values ~ ";" ~ WHITESPACE* }
property = @{ (ASCII_ALPHANUMERIC | "-")+ }
values = _{ value ~ (WHITESPACE* ~ "," ~ WHITESPACE* ~ value)* }
value = @{ COLOR | LENGTH | PERCENTAGE | STRING | ZERO | FLOAT | IDENTIFIER | ASCII_ALPHANUMERIC+}
COLOR = @{ "#" ~ ASCII_HEX_DIGIT{3,6} }
LENGTH = @{ ASCII_DIGIT+ ~ ("px" | "em" | "rem" | "%") }
PERCENTAGE = @{ ASCII_DIGIT+ ~ "%" }
STRING = @{ "\"" ~ (!"\"" ~ ANY)* ~ "\'" | "\'" ~ (!"\'" ~ ANY)* ~ "\'" }
ZERO = @{ "0" }
FLOAT = @{ ASCII_DIGIT+ ~ "." ~ ASCII_DIGIT+ }
IDENTIFIER = @{ (ASCII_ALPHANUMERIC | "-")+ }
Dependencies
~4MB
~75K SLoC