https://github.com/rtsao/cssparse
A css parser powered by the style crate from Servo
https://github.com/rtsao/cssparse
css css-parser parser servo-browser
Last synced: 6 months ago
JSON representation
A css parser powered by the style crate from Servo
- Host: GitHub
- URL: https://github.com/rtsao/cssparse
- Owner: rtsao
- License: mit
- Created: 2020-10-01T02:56:50.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-01T05:53:45.000Z (about 5 years ago)
- Last Synced: 2025-04-19T11:14:53.603Z (8 months ago)
- Topics: css, css-parser, parser, servo-browser
- Language: Rust
- Homepage:
- Size: 30.3 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cssparse
A CSS parser powered by the style crate from Servo.
## Why?
I was unable to find a single Node.js library that could reliably parse shorthand CSS property values without using Web APIs.
My desired use case was expanding shorthand properties into their constituent longform properties. For example:
```css
background: center / contain no-repeat url("../foo.svg"), #eee 35% url("../bar.png");
```
The libraries I tested all failed to address my use case, for the following reasons:
1. Doesn't parse property values at all
- [`postcss@8.1.1`](https://github.com/postcss/postcss)
2. Doesn't support `background` property values at all
- [`inline-style-expand-shorthand@1.2.0`](https://github.com/robinweser/inline-style-expand-shorthand)
- [`css-shorthand-expanders@1.1.0`](https://github.com/kripod/css-shorthand-expanders)
3. Merely tokenizes `background` property values, failing to parse the value into sufficiently useful information
- [`tree-sitter-css@0.16.0`](https://github.com/tree-sitter/tree-sitter-css)
- [`postcss-value-parser@4.1.0`](https://github.com/TrySound/postcss-value-parser)
- [`postcss-values-parser@4.0.0`](https://github.com/shellscape/postcss-values-parser)
4. Fails when parsing valid `background` values (such as the example above)
- [`css-shorthand-expand@1.2.0`](https://github.com/kapetan/css-shorthand-expand)
- [`css-property-parser@1.0.6`](https://github.com/mahirshah/css-property-parser)
5. Relies on browser-specific APIs such as [`CSSStyleDeclaration`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
- [`css-background-parser@0.1.0`](https://github.com/gilmoreorless/css-background-parser)
After many failed attempts, I have come to the conclusion that the most accurate and reliable way to parse CSS is to simply use the parser from a production-grade web browser. The style crate from Servo is a good choice because it has been [integrated into Firefox](https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/).