Css generator like less/sass in kotlin multiplatform

This library is for generating css from a kotlin dsl. It is meant to be used runtime to dynamically generate css.

Tools like less and sass are often used as a build step and take some time. This library is meant to be fast enough to generate the css on the fly either from the server or directly in the browser.

Examples:

Nesting / colors / variables

    val color = hsla(0, 50, 50, 1.0)
    val backgroundColor = Color.white

    val css = style {
      select(cls("button")) {
        padding(5.px)
        
        select("a") {
          color(color)
          backgroundColor(backgroundColor)

          hover {
            color(color.lighten(10))
            backgroundColor(backgroundColor.darken(10))
          }
        }
      }
    }

Result:

.button {
    padding:                      5px;
}

.button a {
    color:                        hsla(0, 50%, 50%, 1.0);
    background-color:             white;
}

.button a:hover {
    color:                        hsla(0, 50%, 55%, 1.0);
    background-color:             rgba(229, 229, 229, 1.0);
}

Mixins

As it's just kotlin code includes, mixins etc. are just functions calls.

   fun Style.borderStyles(borderWidth: Measurement = 2.px) {
      borderWidth(borderWidth)
      borderColor(Color.aquamarine)
      borderStyle(BorderStyle.solid)
    }

    val css = style {
      select(txt("a"), cls("button")) {
        borderStyles()

        color(Color.white)
      }

      select(cls("btn-primary")) {
        borderStyles(3.px)
        color(Color.blue)
      }
    }

Result:

a {
    border-width:                 2px;
    border-color:                 aquamarine;
    border-style:                 solid;
    color:                        white;
}

.button {
    border-width:                 2px;
    border-color:                 aquamarine;
    border-style:                 solid;
    color:                        white;
}

.btn-primary {
    border-width:                 3px;
    border-color:                 aquamarine;
    border-style:                 solid;
    color:                        blue;
}

Measurements

Sizes and widths are given in measurements, there are extension variables to help with these:

  select("body") {
    fontSize(1.2.em)
    borderWidth(3.px)
    width(75.prc)
  }

Result:

body {
  font-size:                    1.2em;
  border-width:                 3px;
  width:                        75%;
}