https://github.com/feathers-studio/hypercss
🏇 Strictly spec-compliant CSS parser in TypeScript
https://github.com/feathers-studio/hypercss
Last synced: 9 months ago
JSON representation
🏇 Strictly spec-compliant CSS parser in TypeScript
- Host: GitHub
- URL: https://github.com/feathers-studio/hypercss
- Owner: feathers-studio
- License: other
- Created: 2023-10-13T12:27:58.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T07:03:49.000Z (about 2 years ago)
- Last Synced: 2025-02-10T03:18:38.891Z (11 months ago)
- Language: HTML
- Homepage:
- Size: 307 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HyperCSS: Standards-Based CSS Parser for TypeScript
This project implements a standards-based CSS Parser, fully written in modern TypeScript.
It is based on [Tab Atkins's original parser](https://github.com/tabatkins/parse-css), which is based on .
Its structure and coding style are instead meant to be very close to the spec,
so that it's easy to verify that the code matches the spec (and vice versa)
and to make it easy, when the spec changes, to make the same change in the parser.
It is intended to fully and completely match browser behavior
(at least, as much as the final spec does).
The version of the spec this is based on is stored [here](./spec/drafts.csswg.org/css-syntax.html).
This will be used as the reference to diff future versions of the spec against,
and update this library.
## Using the Library
```TS (Deno)
import { parseAStylesheet } from "https://deno.land/x/hyperactive_css";
const stylesheet = parseAStylesheet(Deno.readTextFileSync("style.css"));
```
Note that the Syntax spec, and thus this parser, is _extremely generic_.
It doesn't have any specific knowledge of CSS rules, just the core syntax,
so it won't throw out invalid or unknown things.
## Parsing Functions
Here's the full list of parsing functions.
They do exactly what they say in their name,
because they're named exactly the same as the corresponding section of the Syntax spec:
- `parseAStylesheet()`
- `parseAListOfRules()`
- `parseARule()`
- `parseADeclaration()`
- `parseAListOfDeclarations()`
- `parseAComponentValue()`
- `parseAListOfComponentValues()`
- `parseACommaSeparatedListOfComponentValues()`
To reiterate, this parser intentionally has no knowledge of specifics
like "width" or "background-color",
and will happily parse any valid CSS syntax.
This makes it a very useful base to build CSS tools on top of.
A higher level API may yet be created in the future. It may also be useful to convert this parser into a streaming parser.
#### This library is heavily inspired by Tommy Hodgins's excellent video, [Why it's important to parse CSS correctly](http://youtu.be/1kHuXQhbeN0)
For the curious,
[Tommy Hodgins's YouTube](https://www.youtube.com/@innovati) has several demonstrations
on how to use a standards-compliant CSS parser.