Passing Strings Using (In)finite-State Machines and Prepack
summary
A small CSS parser implemented as a finite-state machine that tokenizes input, builds an AST, validates syntax, highlights errors, and visualizes FSM states in the browser. The implementation is optimized for frontend bundling using Prepack (ahead-of-time simplification) to reduce the source from ~20 KB to an optimized bundle of about 1 KB; it demonstrates parsing, an arrow-to-function transform, and visualization, though no head-to-head benchmarks versus other parsers are provided.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:50Parsing and why
- 3:32CSS parser problems
- 8:11AST role
- 15:24Goals for new solution
- 21:04Finite-state machines for CSS
- 27:16Prepack optimization scheme
- 29:51Debugging and visualization
- 30:37Results and alternatives
related talks
28mState machines for frontend state management
46mFinite-state machines? Your compiler wants in!
25mMastering UIs with Finite State Machines
30mMastering UIs with Finite State Machines
09mA State Machine walks into a Svelte Component
29mCrafting Stateful Styles with State Machines
27mParsing, Compiling, and Static Metaprogramming
20mTaming UI complexity with Typed State Machines