22 releases

0.0.22-alpha Jun 22, 2023
0.0.21-alpha Mar 4, 2023
0.0.20-alpha Feb 3, 2023
0.0.17-alpha Dec 16, 2022
0.0.2-alpha Mar 21, 2022

#154 in Build Utils


Used in percy-preview-app

MIT/Apache

5KB

sunbeam Actions Status docs

Sunbeam is a typo-safe CSS class library

Sunbeam is a typo-safe CSS class library.

With sunbeam you write your CSS using the css! macro.

Later, at build time, you run sunbeam-build to parse these css! calls and then generate a CSS file that contains only the CSS that your application is using.

Basic Usage

cargo new sunbeam-example
cd sunbeam-example
// src/main.rs

#[macro_use]
extern crate sunbeam;

fn main () {
    let classes = css!("mr10 px5 py10 min640:bg-col-red min980:bg-col-custom");
    assert_eq!(classes, "mr10 px5 py10 min640:bg-col-red min980:bg-col-custom");
}
// build.rs

use sunbeam_build;

fn main() {
    // In a real application you might programatically build your file list
    // using something like:
    // `swift_bridge_build::files_in_dir_ending_with("src", "-view.rs")`
    let files_with_css = vec!["src/main.rs"];

    for path in &files_with_css {
        println!("cargo:rerun-if-changed={}", path);
    }

    sunbeam_build::parse_css(files)
        .write_class_declarations("./app.css")
}
cargo check
cat app.css

Custom CSS

Sunbeam's default styles should cover most use cases, but some applications might need to introduce new classes for their own needs.

For certain kinds of CSS, sunbeam allows you to define additional classes that will also be type checked at compile time.

# Sunbeam.toml

screen-widths = [ 308, 999, ]

[colors]
brand-red = #ff0001
let classes = css!("mb36 ml98 p85 bg-col-brand-red mt5 mr10");
assert_eq!(classes, "mb36 ml98 p85 bg-col-brand-red mt5 mr10");

Invalid CSS

If you try to use a class or selector that is not defined by sunbeam or in your Sunbeam.toml, you will get a compile time error.

let _classes = css!("d-flex not-a-real-class");
# SHOW THE COMPILE TIME ERROR HERE

TODO

  • Docs explain why Sunbeam does not come with color palettes. We want to encourage visual diversity.

To Test

To run the test suite.

# Clone the repository
git clone git@github.com:chinedufn/sunbeam.git
cd sunbeam

# Run tests
cargo test --all

License

sunbeam is licensed under either of

Dependencies

~2–2.6MB
~56K SLoC