Style and Stylo

CSS in Firefox is implemented by Stylo, the Rust-based style engine that originated in the Servo project and shipped in Firefox in 2017 (Quantum). It computes specified, computed, and used CSS values; matches selectors; resolves the cascade; and feeds layout.

Where it lives

servo/                                  # Pieces of Servo vendored into Gecko
├── components/
│   ├── style/                          # The Stylo engine
│   ├── style_traits/
│   ├── selectors/                      # Selector matching
│   ├── derive_common/, malloc_size_of/, …
└── ports/                              # Glue

The C++ side that talks to Stylo is at layout/style/:

• ServoStyleSet.cpp — main entry; owns a Servo StyleSet per document.
• nsStyleStruct.h — C++ representation of computed style structs (border, font, …).
• ComputedStyle — the result you query.

How it connects

graph LR
    Stylesheet[CSS stylesheet text] --> Parser[servo::components::style::parser]
    Parser --> RuleTree[ServoStyleSet rule tree]
    DOM[Element + classes/attributes] --> Match[Selector matching]
    RuleTree --> Match
    Match --> Cascade[Cascade]
    Cascade --> Computed[ComputedStyle structs]
    Computed --> Layout[layout/ frame construction]

Stylo is parallelized at the rule-matching level: traversal of the DOM happens in parallel using rayon, with style-bloom-filter caching.

Adding or changing a CSS property

The big property registry lives in servo/components/style/properties/. It uses Mako templates (.mako.rs) to declare each property's:

• Name.
• Animation type.
• Inherited / non-inherited.
• Initial value.
• Allowed grammar.
• Computed-value type.

After updating the template, ./mach build regenerates the Rust files. The C++ side often needs to update nsStyleStruct to mirror the new value.

Selectors

servo/components/selectors/ implements W3C selector matching. Bloom filters in the matcher accelerate descendant/ancestor queries.

Animations

Animations are computed in servo/components/style/animation.rs and the Web Animations bindings live in dom/animation/. Composited animations (transform, opacity) are sent across IPC to the GPU process to drive WebRender directly.

Related

• Layout
• DOM
• Graphics