Generates CSS using a DSL, offering a fast alternative to preprocessors like Less/Sass. Enables runtime CSS generation with features like nesting, variables, mixins, and measurements.
This library is for generating css from a kotlin dsl. It can be used as an alternative to less/sass or as a runtime library to generate css on-the-fly.
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.
Include in build.gradle.kts:
repositories {
mavenCentral()
}
val commonMain by getting {
dependencies {
api("nl.astraeus:kotlin-css-generator:1.0.9")
}
}
Examples:
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))
}
}
}
}
To generate the css call get generateCss function:
val cssString: String = css.generateCss()
Result:
{
: ;
}
{
: (, , , );
: white;
}
{
: (, , , );
: (, , , );
}
There are several options when generating the css, for example minified:
val cssString: String = css.generateCss(minified = true)
Result:
.button{padding:5px;}.buttona{color:hsla(,,,);:white;}{:(,,,);:(,,,);}
As it's all just kotlin code, includes and 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: ;
: aquamarine;
: solid;
: white;
}
{
: ;
: aquamarine;
: solid;
: blue;
}
Giving the option combineEqualBlocks to the generateCss call will combine the a and .button blocks with the following result:
a,
.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;
}
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%;
}
Surfaced from shared tags and platforms — no rankings paid for.