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, which is based on http://drafts.csswg.org/css-syntax.
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. This will be used as the reference to diff future versions of the spec against, and update this library.
Using the Library
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.
Why itâs important to parse CSS correctly
This library is heavily inspired by Tommy Hodginsâs excellent video,For the curious, Tommy Hodginsâs YouTube has several demonstrations on how to use a standards-compliant CSS parser.