Create CSS class with kotlinx.html DSL

Question

I'm using Kotlin to Javascript plugin and kotlinx.html library to build sample app:

fun main(args: Array<String>) {
    window.onload = {
        document.body!!.append.div {
            a("#", classes = "red") {
                +"Link"
            }
        }
    }
}

And I want to paint a link with "red" CSS class to red color.
Now I'm using unsage + raw to do it:

document.head!!.append.style {
    unsafe {
        raw(".red { background: #f00; }")
    }
}

How to create CSS class with kotlinx.html DSL? I didn't find any docs related to css DSL.

Answer 1

You cannot use the HTML DSL for creating CSS. There are two possible ways for using css in your HTML.

1) You create CSS files independently and then use the classes as you proposed. 2) Inline the CSS if this is feasible for your app.

h1("h1Class") {
    style = "background-color:red"
    +"My header1"
}

This results in:

<h1 class="h1Class" style="background-color:red">My header1</h1>

Answer 2

kotinx-html is a DSL for HTML only. So CSS needs to be built separately. What you need is kotlinx.css but it was quite unpopular so it was discontinued. For sure there are few community libraries targeted to that purpose but not sure if they are still alive.