Styling

Aitne provides first-class support for component-scoped CSS directly inside your mbx source files using ${ ... }$ CSS blocks.

You can write inline CSS rules, import external stylesheets use expand syntax !"path.css"/!'path.css', assign styles to variables and reference class names safely inside your component bindings.

Basic Usage

pub fn counter_btn(incr?: Int = 1) -> &View {
    let style = ${ 
        .btn {
            background-color: #000000;
        }
    }$ 
    let (count, set_count) = @reactive.create_signal(0)
    <button on:click={(_) => { set_count.update((v) => { v + incr }) }} class={()=>style.btn}>
        Click me:  {() => count.get().to_string()}
    </button>
}

Class names defined in the CSS block can be accessed through the generated style value:

class={()=>style.btn}

MBX compiler automatically generates a scoped class name for .btn and uses the same generated name in both the CSS output and the component.

Expand Syntax

External CSS files can be inserted into a CSS block using the expand syntax:

let style = ${
    !"./counter_btn.module.css"
}$

This has the same effect as expanding all the contents of the external file into the CSS Block.

Both single-quoted and double-quoted paths are supported:

!"./styles.css"
!'./styles.css'

The path is resolved relative to the source file containing the CSS block. The contents of the external stylesheet are expanded and compiled together with the CSS in the current block.

Inline CSS and external stylesheets can also be combined.

This allows reusable styles to be kept in external files while component-specific styles remain colocated with the component that uses them.