Under heavy research and development, please don't use this yet!

rsx-stylesheet

Simple style tree abstraction layer for RSX over Servo CSS stylesheets

Purpose

A backwards compatible higher level of abstraction over the data structures generated by the reusable Servo CSS parser. Inspired by React Native's Stylesheet, this crate exposes an abstraction similar to CSS, by parsing it and grouping selectors and declarations into typed style rules. Since working directly with Servo's style::stylesheets::Stylesheet can be tedious, and the underlying parser data formats can change at any time, a simpler CSSOM structure is useful as an abstraction layer in the scope of writing RSX code.

How to use

Documentation

This crate concerns itself strictly generating an RSX Stylesheet from a Servo stylesheet. If you're just looking to write RSX in your project, take a look at the RSX compiler plugin instead.

Otherwise, add this to your Cargo.toml file:

[dependencies]
rsx-stylesheet = { git = "https://github.com/victorporof/rsx-stylesheet.git" }

CSS parsing is enabled via the css-parse feature gate.

[dependencies]
rsx-stylesheet = { git = "https://github.com/victorporof/rsx-stylesheet.git", features = ["css-parse"] }

When used as part of the RSX compiler plugin, the convertion is automatic between Servo's style::stylesheets::Stylesheet parsed CSS to the more convenient rsx_stylesheet::Stylesheet data structure, because the AST is directly tokenized into a CSSOM tree to avoid any runtime work! Templating is thus a zero cost abstraction.

If manual instantiation is desired, simply import the library into your code to build rsx_stylesheet::Stylesheet objects.

extern crate rsx_stylesheet;
use rsx_stylesheet::types::Stylesheet;

let mut stylesheet = Stylesheet::default();
stylesheet.push(StyleRule { ... });

or

extern crate rsx_stylesheet;
use rsx_stylesheet::types::Stylesheet;
use rsx_stylesheet::servo_css_parser::parse;
use rsx_stylesheet::servo_css_parser::types::{Url, QuirksMode, MediaList, Origin};

let url = Url::parse("about::test").unwrap();
let origin = Origin::UserAgent;
let quirks_mode = QuirksMode::NoQuirks;
let media = MediaList::empty();

let css = ".foo { background: blue; }";
let stylesheet = Stylesheet::from(parse(css, url, origin, quirks_mode, media));

Note: rsx-stylesheet also re-exports the servo-css-parser crate, only needed if you need to parse character streams (such as strings) directly. You'll probably prefer using the css! macro as part of the RSX compiler plugin instead.

See all the available types for more details.