Crate dioxus_class

Expand description

§dioxus-class

Most dioxus samples are using plain strings for classes, e.g.

    button {
        class: "inline-flex border-0 py-1 px-3 focus:outline-none hover:bg-gray-700",
        "Button"
        RightArrowIcon {}
    }

This is the common way in web development, it’s very powerful, but not providing any checks, typos in the classes will be hard to notice.

§How it Works

To support a certain CSS framework, Simple CSS values are defined as string constants, modifiers like hover: are defined as functions, then you can write the previous example as following:

    button {
        class: class!(inline_flex border_0 py_1 px_3 focus(outline_none) hover(bg_gray_700)),
        "Button"
        RightArrowIcon {}
    }

It looks very clean, and show the original values clearly, most importantly, the compiler will catch any typo now.

§How to Create CSS framework

check dioxus-tailwindcss for more details.

§Define class constant with macro

To create constants for your custom css, or creating a crate for existing frameworks, constants are created for compile time check.

Since css use - as separator, macros are provided to generate rust const for them by replacing - to _

These macros are accessable in dioxus_class::ext::*;

constant!(btn success);
constant!(btn warning);

Will be expanded to:

pub const btn_success: &'static str = "btn-success";
pub const btn_warning: &'static str = "btn-warning";

§Define sets of constants

There are many similar value groups, which is not easy to define manually, simple macro rules can be created to make this easier.

#[macro_export]
macro_rules! colors {
    ( $( $prefix:ident )* ) => {
        constant!($( $prefix )* inherit);
        constant!($( $prefix )* current);
        constant!($( $prefix )* transparent);
        constant!($( $prefix )* black);
        constant!($( $prefix )* white);

        constant!($( $prefix )* slate 50);
        constant!($( $prefix )* slate 100);
        constant!($( $prefix )* slate 200);
        constant!($( $prefix )* slate 300);
        constant!($( $prefix )* slate 400);
        constant!($( $prefix )* slate 500);
        constant!($( $prefix )* slate 600);
        constant!($( $prefix )* slate 700);
        constant!($( $prefix )* slate 800);
        constant!($( $prefix )* slate 900);

        constant!($( $prefix )* gray 50);
        constant!($( $prefix )* gray 100);
        constant!($( $prefix )* gray 200);
        constant!($( $prefix )* gray 300);
        constant!($( $prefix )* gray 400);
        constant!($( $prefix )* gray 500);
        constant!($( $prefix )* gray 600);
        constant!($( $prefix )* gray 700);
        constant!($( $prefix )* gray 800);
        constant!($( $prefix )* gray 900);
        ...
    }
}

// https://tailwindcss.com/docs/border-color
colors!(border);
colors!(border x);
colors!(border y);
colors!(border t);
colors!(border r);
colors!(border b);
colors!(border l);

§Build All Used CSS Classes

Since tailwindcss need to get all used values, when using class!, the default build process is not working.