Styling

Mint includes CSS support for styling HTML elements.

Within a component, you define styles with a style block named with an identifier:

component Test {
style base {
font-family: sans;
font-weight: bold;
color: red;
}
fun render : Html {
<div::base>
Hello
</div>
}
}

Then you apply the styles to an HTML element by specifying it after the tag of the element <div::style/> .

You can have CSS definitions, sub rules, media queries, if and case expressions inside a style block.

You can even apply multiple styles to an HTML element:

component Main {
style a {
color: red;
}
style b {
background: blue;
}
fun render : Html {
<div::a::b/>
}
}

Interpolation

Expressions can be interpolated in the value of a property using the interpolation syntax #{...}:

component Test {
style base {
color: #{color};
}
get color : String {
"red"
}
fun render : Html {
<div::base>
Hello
</div>
}
}

Here the color of the text evaluates to "red".

Arguments

A style block can take many arguments just like a function:

component Main {
style base(color : String) {
color: #{color};
}
fun render : Html {
<div>
<div::base("red")>
"I am red!"
</div>
<div::base("blue")>
"I am blue!"
</div>
</div>
}
}

Sub rules

Additional rules that match the element can be defined in the same block:

component Test {
style base {
color: cyan;
/* The ampersand character references the rule it resids in. */
&:focus {
color: red;
}
/* This is a sub rule which uses the descendant selector. */
a {
color: blue;
}
}
fun render : Html {
<div::base tabindex="0">
<{ "Hello " }>
<a>
<{ "world" }>
</a>
</div>
}
}

This is useful for styling pseudo elements and states or style child elements.

Media queries

Media queries can be defined for a style or sub rule. When matched, their contents apply to all elements that match them.

component Test {
style base {
color: red;
@media (min-width: 600px) {
color: blue;
}
}
fun render : Html {
<div::base>
<{ "Hello " }>
</div>
}
}

Nesting

Sub rules and media queries can be nested in each other infinitely:

style base {
color: red;
div {
color: blue;
span {
color: yellow;
@media (max-width: 500px) {
font-weight: bold;
}
}
}
}

If and Case

A special version of if and case expressions can be used inside style blocks:

style base {
if (loading) {
pointer-events: none;
opacity: 0.5;
}
case (status) {
Status::Ok => color: blue;
Status::Err =>
border: 1px solid red;
color: red;
}
}

In this case the some different rules:

  • one expression rule does not apply

  • you can have one or more CSS definitions in each branch

  • the else and empty case branch can be omitted

Inline Styles

You can use inline styles just like in HTML in two different ways:

component Main {
fun render : Html {
<div>
/* As a String */
<div style="color: red;">
"I am red!"
</div>
/* As a Map(String, String) */
try {
style =
Map.empty()
|> Map.set("color", "red")
<div style={style}>
"I am red!"
</div>
}
</div>
}
}

Behind the scenes

The compiler separates properties that have interpolations from the ones that don't. The properties with interpolations are converted to use CSS variables (--test-base-color ).

During compiling the dynamic properties are converted to use a style object that contains the appropriate variables with their expressions.

The defined styles are static and added to the head of the document at runtime.