#compiler #web #css

nightly bin+lib procss

A simple CSS parsing and transformation framework

14 releases

0.1.13 May 1, 2023
0.1.12 Feb 20, 2023
0.1.9 Jan 28, 2023
0.1.7 Dec 6, 2022
0.1.5 Nov 25, 2022

#1008 in Web programming

Download history 122/week @ 2023-02-16 59/week @ 2023-02-23 45/week @ 2023-03-02 54/week @ 2023-03-09 47/week @ 2023-03-16 18/week @ 2023-03-23 23/week @ 2023-03-30 50/week @ 2023-04-06 31/week @ 2023-04-13 33/week @ 2023-04-20 54/week @ 2023-04-27 75/week @ 2023-05-04 44/week @ 2023-05-11 40/week @ 2023-05-18 72/week @ 2023-05-25 135/week @ 2023-06-01

307 downloads per month
Used in perspective





A simple CSS parsing and transformation framework.


Developer Setup


cargo xbuild


cargo xtest

Test coverage report (disables incremental builds)

cargo xtest --coverage


cargo clippy


cargo xbench

Generate docs (output at ./target/doc/procss/index.html)

cargo doc


A simple CSS parsing and transformation framework. Procss can be used to quickly bundle a collection of CSS+ files, or write your own custom transforms.


Procss's parser understands a nested superset of CSS (which we refer to as CSS+), similar to the CSS nesting proposal, or languages like Sass. Start with source CSS+ as a [str], use [crate::parse] or [crate::parse_unchecked] to generate an [ast::Tree].

use procss::{ast, parse};

let ast = procss::parse("div{.open{color:red;}}").unwrap();

The resulting [ast::Tree] can be converted to a de-nested [ast::Css] with the [ast::Tree::flatten_tree] method, which itself can then be rendered as a plain browser-readable CSS string via the [RenderCss::as_css_string] trait method.

# use procss::{parse, ast};
# let ast = procss::parse("div{.open{color:red;}}").unwrap();
use procss::RenderCss;

let flat: ast::Css = ast.flatten_tree();
let css: String = flat.as_css_string();
assert_eq!(css, "div .open{color:red;}");

Intermediate structs [ast::Css::transform] amd [ast::Tree::transform] can be used to recursively mutate a tree for a variety of node structs in the [ast] module. Some useful Example of such transforms can be found in the [transformers] module.

# use procss::{parse, RenderCss};
use procss::transformers;

let test = "
@mixin test {color: red;}
div {@include test;}

let mut ast = procss::parse(test).unwrap();
transformers::apply_mixin(&mut ast);
let flat = ast.flatten_tree().as_css_string();
assert_eq!(flat, "div{color:red;}");

For coordinating large builds on a tree of CSS files, the [BuildCss] struct can parse and minify, applying all transforms (including [transformers::apply_import]) as the compilation is left-folded over the inputs.

let mut build = procss::BuildCss::new("./src");
build.add_file("logout.scss"); // imports "controls/menu.scss"
build.add_file("my_app.scss"); // imports "controls/menu.scss" and "logout.scss"


~141K SLoC