type safe inline css

[StokeMasterJack]

When I use inline css in an html or jsp file, IntelliJ gives me nice syntax coloring and autocompletion:

Is there a type safe way to do inline css using kotlinx.html other than using a string? Or at least a way to get autocompletion and syntax coloring?

body {
    div {
        style = "background: yellow;border: solid thin blue"
    }
}

[StokeMasterJack]

I would suggest looking at the jsxstyle project for inspiration.

[cy6erGn0m]

most likely we need to integrate one of existing css libraries

[AfraidKnot]

For the short term, IntelliJ has a built in "Inject Language or Reference" feature (https://www.jetbrains.com/help/idea/using-language-injections.html) that is helpful in this situation. In short, Press ALT-ENTER, select "Inject language or reference" then select CSS.

[Miha-x64]

It would be cool for CSS classes to be real things on the level of Kotlin language, so unused classes will be grey in IDE and may be stripped, and used classes may be automatically renamed to have names consisting of 1-2 chars. I mean, DSL should not just repeat CSS itself, but add some extra safety, performance, etc.

[StokeMasterJack]

Also, GWT had this. Might be worth looking into that.

[cy6erGn0m]

Perhaps I can annotate all classes and style parameters however it will add corresponding annotations dependency

[marshallpierce]

I'm using https://github.com/olegcherr/Aza-Kotlin-CSS (via an unsafe block) and it works fine for me so far.

[ScottPierce]

Having this would dramatically increase the usability of kotlinx.html

[ScottPierce]

I tried several alternatives, including the above suggestion of a secondary css library, but I found all of the approaches lacking - primarily that I wanted to use an html library to keep my html code maintainable, but all my html code was ugly and difficult to read.

Over the past several weeks, I've created an alternative library, kotlin-html to add css, provide first-class support for ids, classes, and styles, and provide a simpler architecture so it was easier for people to contribute.

[quickstep24]

inline fun Unsafe.css(@Language("CSS")css: String) = raw(css.trimIndent())

[mgroth0]

@Language doesn't resolve for me. It does in jvm modules, but not in js modules.