Merge function-builder branch into master

.gitignore

@@ -1,3 +1,5 @@
 .gradle
 build
 .idea
+local.properties
+gradle.properties

build.gradle.kts

@@ -1,59 +1,83 @@
 plugins {
-    kotlin("multiplatform") version "1.3.70-eap-184"
+    kotlin("multiplatform") version "1.4.32"
+    `maven-publish`
 }
 
 group = "nl.astraeus"
-version = "0.1.0-SNAPSHOT"
+version = "0.4.19"
 
 repositories {
     maven { setUrl("https://dl.bintray.com/kotlin/kotlin-eap") }
+    mavenLocal()
     mavenCentral()
 }
 
-apply(plugin = "kotlin-dce-js")
-
 kotlin {
-    /* Targets configuration omitted. 
-    *  To find out how to configure the targets, please follow the link:
-    *  https://kotlinlang.org/docs/reference/building-mpp-with-gradle.html#setting-up-targets */
     jvm()
-    js()
+    js(BOTH) {
-
+        browser {
-    sourceSets {
+            testTask {
-        val commonMain by getting {
+                useKarma {
-            dependencies {
+                    useFirefox()
-                implementation(kotlin("stdlib-common"))
+                    //useChrome()
-
+                }
-                implementation("io.github.microutils:kotlin-logging-common:1.7.8")
             }
         }
+    }
+
+    sourceSets {
+        val commonMain by getting {}
         val commonTest by getting {
             dependencies {
                 implementation(kotlin("test-common"))
-                //implementation(kotlin("test-annotations-common"))
+                implementation(kotlin("test-annotations-common"))
             }
         }
-        val jsMain by getting {
+        val jvmTest by getting {
             dependencies {
-                implementation(kotlin("stdlib-js"))
+                implementation(kotlin("test-junit"))
-
-                implementation("io.github.microutils:kotlin-logging-js:1.7.8")
             }
         }
         val jsTest by getting {
             dependencies {
                 implementation(kotlin("test-js"))
-                //implementation(kotlin("test-annotations-js"))
-            }
-        }
-        val jvmMain by getting {
-            dependencies {
-                implementation(kotlin("stdlib-jdk8"))
-
-                implementation("org.slf4j:slf4j-api:1.7.29")
-                implementation("org.slf4j:slf4j-simple:1.7.29")
-                implementation("io.github.microutils:kotlin-logging:1.7.8")
             }
         }
     }
 }
+
+publishing {
+    repositories {
+        maven {
+            name = "releases"
+            // change to point to your repo, e.g. http://my.org/repo
+            url = uri("http://nexus.astraeus.nl/nexus/content/repositories/releases")
+            credentials {
+                val nexusUsername: String by project
+                val nexusPassword: String by project
+
+                username = nexusUsername
+                password = nexusPassword
+            }
+        }
+        maven {
+            name = "snapshots"
+            // change to point to your repo, e.g. http://my.org/repo
+            url = uri("http://nexus.astraeus.nl/nexus/content/repositories/snapshots")
+            credentials {
+                val nexusUsername: String by project
+                val nexusPassword: String by project
+
+                username = nexusUsername
+                password = nexusPassword
+            }
+        }
+    }
+/*
+    publications {
+        val kotlinMultiplatform by getting {
+            artifactId = "kotlin-css-generator"
+        }
+    }
+*/
+}

gradle.properties

@@ -1 +1,5 @@
-kotlin.code.style=official
+kotlin.code.style=official
+kotlin.js.compiler=both
+
+nexusUsername=deployment
+nexusPassword=bGtci5GLFbqORmruICmTWFmGLY

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.8.3-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

settings.gradle.kts

@@ -7,4 +7,7 @@ pluginManagement {
         maven { setUrl("https://plugins.gradle.org/m2/") }
     }
 }
+
 rootProject.name = "kotlin-css-generator"
+
+enableFeaturePreview("GRADLE_METADATA")

src/commonMain/kotlin/nl/astraeus/css/CssBuilder.kt

@@ -1,19 +1,20 @@
 package nl.astraeus.css
 
+import nl.astraeus.css.style.ConditionalCss
+import nl.astraeus.css.style.ConditionalStyle
 import nl.astraeus.css.style.Css
 import nl.astraeus.css.style.Style
 
 fun css(definition: Css) = definition
 
-fun style(definition: Css): Style {
+fun style(definition: ConditionalCss): ConditionalStyle {
-    val css = Style()
+    val css = ConditionalStyle()
 
     definition(css)
 
     return css
 }
 
-
 class CssBuilder {
     var definition: Style = Style()
 

src/commonMain/kotlin/nl/astraeus/css/properties/AlignContent.kt

@@ -5,13 +5,13 @@ class AlignContent(
 ) : CssProperty(value) {
 
     companion object {
-        fun stretch() = AlignContent("stretch")
+        val stretch = AlignContent("stretch")
-        fun center() = AlignContent("center")
+        val center = AlignContent("center")
-        fun flexStart() = AlignContent("flex-start")
+        val flexStart = AlignContent("flex-start")
-        fun flexEnd() = AlignContent("flex-end")
+        val flexEnd = AlignContent("flex-end")
-        fun spaceBetween() = AlignContent("space-between")
+        val spaceBetween = AlignContent("space-between")
-        fun spaceAround() = AlignContent("space-around")
+        val spaceAround = AlignContent("space-around")
-        fun initial() = AlignContent("initial")
+        val initial = AlignContent("initial")
-        fun inherit() = AlignContent("inherit")
+        val inherit = AlignContent("inherit")
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/AlignItems.kt

@@ -2,16 +2,16 @@ package nl.astraeus.css.properties
 
 class AlignItems(
     value: String
-) : CssProperty(value) {
+): CssProperty(value) {
 
     companion object {
-        fun stretch() = AlignItems("stretch")
+        val stretch = AlignItems("stretch")
-        fun center() = AlignItems("center")
+        val center = AlignItems("center")
-        fun flexStart() = AlignItems("flex-start")
+        val flexStart = AlignItems("flex-start")
-        fun flexEnd() = AlignItems("flex-end")
+        val flexEnd = AlignItems("flex-end")
-        fun baseline() = AlignItems("baseline")
+        val baseline = AlignItems("baseline")
-        fun initial() = AlignItems("initial")
+        val initial = AlignItems("initial")
-        fun inherit() = AlignItems("inherit")
+        val inherit = AlignItems("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/AlignSelf.kt

@@ -2,16 +2,17 @@ package nl.astraeus.css.properties
 
 class AlignSelf(
     value: String
-) : CssProperty(value) {
+): CssProperty(value) {
 
     companion object {
-        fun auto() = AlignSelf("auto")
+        val auto = AlignSelf("auto")
-        fun stretch() = AlignSelf("stretch")
+        val stretch = AlignSelf("stretch")
-        fun center() = AlignSelf("center")
+        val center = AlignSelf("center")
-        fun flexStart() = AlignSelf("flex-start")
+        val flexStart = AlignSelf("flex-start")
-        fun flexEnd() = AlignSelf("flex-end")
+        val flexEnd = AlignSelf("flex-end")
-        fun baseline() = AlignSelf("baseline")
+        val baseline = AlignSelf("baseline")
-        fun initial() = AlignSelf("initial")
+        val initial = AlignSelf("initial")
-        fun inherit() = AlignSelf("inherit")
+        val inherit = AlignSelf("inherit")
     }
+
 }

src/commonMain/kotlin/nl/astraeus/css/properties/All.kt

@@ -2,13 +2,13 @@ package nl.astraeus.css.properties
 
 class All(
     value: String
-) : CssProperty(value) {
+): CssProperty(value) {
 
     companion object {
-        fun initial() = All("initial")
+        val unset = All("unset")
-        fun inherit() = All("inherit")
+        val revert = All("revert")
-        fun unset() = All("unset")
+        val initial = All("initial")
-        fun revert() = All("revert")
+        val inherit = All("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Animation.kt

@@ -5,12 +5,12 @@ class AnimationDirection(
 ) : CssProperty(value) {
 
     companion object {
-        fun normal() = AnimationDirection("normal")
+        val normal = AnimationDirection("normal")
-        fun reverse() = AnimationDirection("reverse")
+        val reverse = AnimationDirection("reverse")
-        fun alternate() = AnimationDirection("alternate")
+        val alternate = AnimationDirection("alternate")
-        fun alternateReverse() = AnimationDirection("alternate-reverse")
+        val alternateReverse = AnimationDirection("alternate-reverse")
-        fun initial() = AnimationDirection("initial")
+        val initial = AnimationDirection("initial")
-        fun inherit() = AnimationDirection("inherit")
+        val inherit = AnimationDirection("inherit")
     }
 }
 
@@ -19,12 +19,12 @@ class AnimationFillMode(
 ) : CssProperty(value) {
 
     companion object {
-        fun none() = AnimationFillMode("none")
+        val none = AnimationFillMode("none")
-        fun forwards() = AnimationFillMode("forwards")
+        val forwards = AnimationFillMode("forwards")
-        fun backwards() = AnimationFillMode("backwards")
+        val backwards = AnimationFillMode("backwards")
-        fun both() = AnimationFillMode("both")
+        val both = AnimationFillMode("both")
-        fun initial() = AnimationFillMode("initial")
+        val initial = AnimationFillMode("initial")
-        fun inherit() = AnimationFillMode("inherit")
+        val inherit = AnimationFillMode("inherit")
     }
 }
 
@@ -33,10 +33,10 @@ class AnimationFrame(
 ): CssProperty(value) {
 
     companion object {
-        fun name(name: String): AnimationFrame = AnimationFrame(name)
+        fun name(name: String) = AnimationFrame(name)
-        fun none(): AnimationFrame = AnimationFrame("none")
+        val none: AnimationFrame = AnimationFrame("none")
-        fun initial(): AnimationFrame = AnimationFrame("initial")
+        val initial: AnimationFrame = AnimationFrame("initial")
-        fun inherit(): AnimationFrame = AnimationFrame("inherit")
+        val inherit: AnimationFrame = AnimationFrame("inherit")
     }
 }
 
@@ -47,31 +47,9 @@ class AnimationPlayState(
 
     companion object {
         fun name(name: String) = AnimationPlayState(name)
-        fun paused() = AnimationPlayState("paused")
+        val paused = AnimationPlayState("paused")
-        fun running() = AnimationPlayState("running")
+        val running = AnimationPlayState("running")
-        fun initial() = AnimationPlayState("initial")
+        val initial = AnimationPlayState("initial")
-        fun inherit() = AnimationPlayState("inherit")
+        val inherit = AnimationPlayState("inherit")
-    }
-}
-
-class AnimationTimingFunction(
-    value: String = ""
-) : CssProperty(value) {
-
-    companion object {
-        fun linear() = AnimationTimingFunction("linear")
-        fun ease() = AnimationTimingFunction("ease")
-        fun easeIn() = AnimationTimingFunction("ease-in")
-        fun easeOut() = AnimationTimingFunction("ease-out")
-        fun easeInOut() = AnimationTimingFunction("ease-in-out")
-        fun cubicBezier(
-            n1: Double,
-            n2: Double,
-            n3: Double,
-            n4: Double
-        ) = AnimationTimingFunction("cubic-bezier($n1,$n2,$n3,$n4)")
-        fun initial() = AnimationTimingFunction("initial")
-        fun inherit() = AnimationTimingFunction("inherit")
-
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/BackfaceVisibility.kt

@@ -5,9 +5,9 @@ class BackfaceVisibility(
 ) : CssProperty(value) {
 
     companion object {
-        fun visible() = BackfaceVisibility("visible")
+        val visible = BackfaceVisibility("visible")
-        fun hidden() = BackfaceVisibility("hidden")
+        val hidden = BackfaceVisibility("hidden")
-        fun initial() = BackfaceVisibility("initial")
+        val initial = BackfaceVisibility("initial")
-        fun inherit() = BackfaceVisibility("inherit")
+        val inherit = BackfaceVisibility("inherit")
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Background.kt

@@ -5,11 +5,11 @@ class BackgroundAttachment(
 ) : CssProperty(value) {
 
     companion object {
-        fun scroll() = BackgroundAttachment("scroll")
+        val scroll = BackgroundAttachment("scroll")
-        fun fixed() = BackgroundAttachment("fixed")
+        val fixed = BackgroundAttachment("fixed")
-        fun local() = BackgroundAttachment("local")
+        val local = BackgroundAttachment("local")
-        fun initial() = BackgroundAttachment("initial")
+        val initial = BackgroundAttachment("initial")
-        fun inherit() = BackgroundAttachment("inherit")
+        val inherit = BackgroundAttachment("inherit")
     }
 }
 
@@ -18,16 +18,16 @@ class BackgroundBlendMode(
 ) : CssProperty(value) {
 
     companion object {
-        fun normal() = BackgroundBlendMode("normal")
+        val normal = BackgroundBlendMode("normal")
-        fun multiply() = BackgroundBlendMode("multiply")
+        val multiply = BackgroundBlendMode("multiply")
-        fun screen() = BackgroundBlendMode("screen")
+        val screen = BackgroundBlendMode("screen")
-        fun overlay() = BackgroundBlendMode("overlay")
+        val overlay = BackgroundBlendMode("overlay")
-        fun darken() = BackgroundBlendMode("darken")
+        val darken = BackgroundBlendMode("darken")
-        fun lighten() = BackgroundBlendMode("lighten")
+        val lighten = BackgroundBlendMode("lighten")
-        fun colorDodge() = BackgroundBlendMode("color-dodge")
+        val colorDodge = BackgroundBlendMode("color-dodge")
-        fun saturation() = BackgroundBlendMode("saturation")
+        val saturation = BackgroundBlendMode("saturation")
-        fun color() = BackgroundBlendMode("color")
+        val color = BackgroundBlendMode("color")
-        fun luminosity() = BackgroundBlendMode("luminosity")
+        val luminosity = BackgroundBlendMode("luminosity")
     }
 }
 
@@ -36,12 +36,11 @@ class BackgroundPosition(
 ) : CssProperty(value) {
 
     companion object {
-        fun left() = BackgroundPosition("left")
+        val left = BackgroundPosition("left")
-        fun center() = BackgroundPosition("center")
+        val center = BackgroundPosition("center")
-        fun right() = BackgroundPosition("right")
+        val right = BackgroundPosition("right")
-        fun initial() = BackgroundPosition("initial")
+        val initial = BackgroundPosition("initial")
-        fun inherit() = BackgroundPosition("inherit")
+        val inherit = BackgroundPosition("inherit")
-
     }
 }
 
@@ -50,15 +49,15 @@ class BackgroundRepeat(
 ) : CssProperty(value) {
 
     companion object {
-        fun repeat() = BackgroundRepeat("repeat")
+        val repeat = BackgroundRepeat("repeat")
-        fun repeatX() = BackgroundRepeat("repeat-x")
+        val repeatX = BackgroundRepeat("repeat-x")
-        fun repeatY() = BackgroundRepeat("repeat-y")
+        val repeatY = BackgroundRepeat("repeat-y")
-        fun noRepeat() = BackgroundRepeat("no-repeat")
+        val noRepeat = BackgroundRepeat("no-repeat")
-        fun space() = BackgroundRepeat("space")
+        val space = BackgroundRepeat("space")
-        fun round() = BackgroundRepeat("round")
+        val round = BackgroundRepeat("round")
-        fun initial() = BackgroundRepeat("initial")
+        val initial = BackgroundRepeat("initial")
-        fun inherit() = BackgroundRepeat("inherit")
+        val inherit = BackgroundRepeat("inherit")
-        fun unset() = BackgroundRepeat("unset")
+        val unset = BackgroundRepeat("unset")
     }
 }
 
@@ -69,11 +68,12 @@ class BackgroundSize(
     companion object {
         fun px(px: Int) = BackgroundSize("${px}px")
         fun perc(pc: Double) = BackgroundSize("${pc}%")
-        fun auto() = BackgroundSize("auto")
+
-        fun cover() = BackgroundSize("cover")
+        val auto = BackgroundSize("auto")
-        fun contain() = BackgroundSize("contain")
+        val cover = BackgroundSize("cover")
-        fun initial() = BackgroundSize("initial")
+        val contain = BackgroundSize("contain")
-        fun inherit() = BackgroundSize("inherit")
+        val initial = BackgroundSize("initial")
+        val inherit = BackgroundSize("inherit")
     }
 }
 

src/commonMain/kotlin/nl/astraeus/css/properties/Border.kt

@@ -3,17 +3,6 @@ package nl.astraeus.css.properties
 class BorderRadius(
     value: String
 ): CssProperty(value) {
-    constructor(topLeft: Int, topRight: Int, bottomRight: Int, bottomLeft: Int): this(
-        "${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px"
-    )
-    constructor(topLeft: Int, topRightBottomLeft: Int, bottomRight: Int): this(
-        "${topLeft}px ${topRightBottomLeft}px ${bottomRight}px"
-    )
-    constructor(topLeftBottomRight: Int, topRightBottomLeft: Int): this(
-        "${topLeftBottomRight}px ${topRightBottomLeft}px"
-    )
-    constructor(radius: Int): this("${radius}px")
-
     companion object {
         fun px(nr: Int) = BorderRadius("${nr}px")
         fun em(nr: Int) = BorderRadius("${nr}em")
@@ -24,28 +13,28 @@ class BorderRadius(
         fun pc(nr: Double) = BorderRadius("${nr}pc")
         fun cm(nr: Int) = BorderRadius("${nr}cm")
         fun cm(nr: Double) = BorderRadius("${nr}cm")
-        fun initial() = BorderRadius("initial")
+        val initial = BorderRadius("initial")
-        fun inherit() = BorderRadius("inherit")
+        val inherit = BorderRadius("inherit")
     }
 }
 
-class RuleBorderStyle(
+class BorderStyle(
     value: String
 ): CssProperty(value) {
 
     companion object {
-        fun none() = RuleBorderStyle("none")
+        val none = BorderStyle("none")
-        fun hidden() = RuleBorderStyle("hidden")
+        val hidden = BorderStyle("hidden")
-        fun dotted() = RuleBorderStyle("dotted")
+        val dotted = BorderStyle("dotted")
-        fun dashed() = RuleBorderStyle("dashed")
+        val dashed = BorderStyle("dashed")
-        fun solid() = RuleBorderStyle("solid")
+        val solid = BorderStyle("solid")
-        fun double() = RuleBorderStyle("double")
+        val double = BorderStyle("double")
-        fun groove() = RuleBorderStyle("groove")
+        val groove = BorderStyle("groove")
-        fun ridge() = RuleBorderStyle("ridge")
+        val ridge = BorderStyle("ridge")
-        fun inset() = RuleBorderStyle("inset")
+        val inset = BorderStyle("inset")
-        fun outset() = RuleBorderStyle("outset")
+        val outset = BorderStyle("outset")
-        fun initial() = RuleBorderStyle("initial")
+        val initial = BorderStyle("initial")
-        fun inherit() = RuleBorderStyle("inherit")
+        val inherit = BorderStyle("inherit")
     }
 }
 
@@ -54,22 +43,11 @@ class BorderWidth(
 ): CssProperty(value) {
 
     companion object {
-        fun thin() = BorderWidth("thin")
+        val thin = BorderWidth("thin")
-        fun medium() = BorderWidth("medium")
+        val medium = BorderWidth("medium")
-        fun thick() = BorderWidth("thick")
+        val thick = BorderWidth("thick")
-
+        val initial = BorderWidth("initial")
-        fun px(nr: Int) = BorderWidth("${nr}px")
+        val inherit = BorderWidth("inherit")
-        fun em(nr: Int) = BorderWidth("${nr}em")
-        fun em(nr: Double) = BorderWidth("${nr}em")
-        fun perc(nr: Int) = BorderWidth("${nr}%")
-        fun perc(nr: Double) = BorderWidth("${nr}%")
-        fun pc(nr: Int) = BorderWidth("${nr}pc")
-        fun pc(nr: Double) = BorderWidth("${nr}pc")
-        fun cm(nr: Int) = BorderWidth("${nr}cm")
-        fun cm(nr: Double) = BorderWidth("${nr}cm")
-
-        fun initial() = BorderWidth("initial")
-        fun inherit() = BorderWidth("inherit")
     }
 }
 
@@ -78,8 +56,8 @@ class BorderCollapse(
 ): CssProperty(value) {
 
     companion object {
-        fun separate() = BorderWidth("separate")
+        val separate = BorderCollapse("separate")
-        fun collapse() = BorderWidth("collapse")
+        val collapse = BorderCollapse("collapse")
     }
 }
 
@@ -88,13 +66,13 @@ class BorderImageWidth (
 ): CssProperty(value) {
 
     companion object {
-        fun px(nr: Int) = BorderRadius("${nr}px")
+        fun px(nr: Int) = BorderImageWidth("${nr}px")
-        fun nr(nr: Int) = Image("$nr")
+        fun nr(nr: Int) = BorderImageWidth("$nr")
-        fun perc(nr: Int) = BorderRadius("${nr}%")
+        fun perc(nr: Int) = BorderImageWidth("${nr}%")
-        fun perc(nr: Double) = BorderRadius("${nr}%")
+        fun perc(nr: Double) = BorderImageWidth("${nr}%")
-        fun auto() = BorderWidth("auto")
+        val auto = BorderImageWidth("auto")
-        fun initial() = BorderWidth("initial")
+        val initial = BorderImageWidth("initial")
-        fun inherit() = BorderWidth("inherit")
+        val inherit = BorderImageWidth("inherit")
     }
 }
 
@@ -103,16 +81,16 @@ class BorderSpacing(
 ): CssProperty(value) {
 
     companion object {
-        fun px(nr: Int) = BorderRadius("${nr}px")
+        fun px(nr: Int) = BorderSpacing("${nr}px")
-        fun em(nr: Int) = BorderRadius("${nr}em")
+        fun em(nr: Int) = BorderSpacing("${nr}em")
-        fun em(nr: Double) = BorderRadius("${nr}em")
+        fun em(nr: Double) = BorderSpacing("${nr}em")
-        fun perc(nr: Int) = BorderRadius("${nr}%")
+        fun perc(nr: Int) = BorderSpacing("${nr}%")
-        fun perc(nr: Double) = BorderRadius("${nr}%")
+        fun perc(nr: Double) = BorderSpacing("${nr}%")
-        fun pc(nr: Int) = BorderRadius("${nr}pc")
+        fun pc(nr: Int) = BorderSpacing("${nr}pc")
-        fun pc(nr: Double) = BorderRadius("${nr}pc")
+        fun pc(nr: Double) = BorderSpacing("${nr}pc")
-        fun cm(nr: Int) = BorderRadius("${nr}cm")
+        fun cm(nr: Int) = BorderSpacing("${nr}cm")
-        fun cm(nr: Double) = BorderRadius("${nr}cm")
+        fun cm(nr: Double) = BorderSpacing("${nr}cm")
-        fun initial() = BorderRadius("initial")
+        val initial = BorderSpacing("initial")
-        fun inherit() = BorderRadius("inherit")
+        val inherit = BorderSpacing("inherit")
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Box.kt

@@ -5,11 +5,11 @@ class BoxDecorationBreak(
 ): CssProperty(value) {
 
     companion object {
-        fun slice() = BorderWidth("slice")
+        val slice = BoxDecorationBreak("slice")
-        fun clone() = BorderWidth("clone")
+        val clone = BoxDecorationBreak("clone")
-        fun initial() = BorderWidth("initial")
+        val initial = BoxDecorationBreak("initial")
-        fun inherit() = BorderWidth("inherit")
+        val inherit = BoxDecorationBreak("inherit")
-        fun unset() = BorderWidth("unset")
+        val unset = BoxDecorationBreak("unset")
     }
 }
 
@@ -18,11 +18,12 @@ class BoxShadow(
 ): CssProperty(value) {
 
     companion object {
-        fun none() = BoxShadow("none")
+        val none = BoxShadow("none")
+        val inset = BoxShadow("inset")
+        val initial = BoxShadow("initial")
+        val inherit = BoxShadow("inherit")
+
         fun text(txt: String) = BoxShadow(txt)
-        fun inset() = BoxShadow("inset")
-        fun initial() = BoxShadow("initial")
-        fun inherit() = BoxShadow("inherit")
     }
 }
 
@@ -31,9 +32,9 @@ class BoxSizing(
 ): CssProperty(value) {
 
     companion object {
-        fun contextBox() = BoxSizing("content-box")
+        val contextBox = BoxSizing("content-box")
-        fun borderBox() = BoxSizing("border-box")
+        val borderBox = BoxSizing("border-box")
-        fun initial() = BoxShadow("initial")
+        val initial = BoxShadow("initial")
-        fun inherit() = BoxShadow("inherit")
+        val inherit = BoxShadow("inherit")
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Break.kt

@@ -6,22 +6,22 @@ class Break(
 ): CssProperty(value) {
 
     companion object {
-        fun auto() = Break("auto")
+        val auto = Break("auto")
-        fun all() = Break("all")
+        val all = Break("all")
-        fun always() = Break("always")
+        val always = Break("always")
-        fun avoid() = Break("avoid")
+        val avoid = Break("avoid")
-        fun avoidColumn() = Break("avoid-column")
+        val avoidColumn = Break("avoid-column")
-        fun avoidPage() = Break("avoid-page")
+        val avoidPage = Break("avoid-page")
-        fun avoidRegion() = Break("avoid-region")
+        val avoidRegion = Break("avoid-region")
-        fun column() = Break("column")
+        val column = Break("column")
-        fun left() = Break("left")
+        val left = Break("left")
-        fun page() = Break("page")
+        val page = Break("page")
-        fun recto() = Break("recto")
+        val recto = Break("recto")
-        fun region() = Break("region")
+        val region = Break("region")
-        fun right() = Break("right")
+        val right = Break("right")
-        fun verso() = Break("verso")
+        val verso = Break("verso")
-        fun initial() = Break("initial")
+        val initial = Break("initial")
-        fun inherit() = Break("inherit")
+        val inherit = Break("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Caption.kt

@@ -5,10 +5,10 @@ class CaptionSide(
 ): CssProperty(value) {
 
     companion object {
-        fun top() = BoxSizing("top")
+        val top = CaptionSide("top")
-        fun bottom() = BoxSizing("bottom")
+        val bottom = CaptionSide("bottom")
-        fun initial() = BoxShadow("initial")
+        val initial = CaptionSide("initial")
-        fun inherit() = BoxShadow("inherit")
+        val inherit = CaptionSide("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Clear.kt

@@ -6,12 +6,12 @@ class Clear(
 ): CssProperty(value) {
 
     companion object {
-        fun none() = Clear("none")
+        val none = Clear("none")
-        fun left() = Clear("left")
+        val left = Clear("left")
-        fun right() = Clear("right")
+        val right = Clear("right")
-        fun both() = Clear("both")
+        val both = Clear("both")
-        fun initial() = Clear("initial")
+        val initial = Clear("initial")
-        fun inherit() = Clear("inherit")
+        val inherit = Clear("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Clip.kt

@@ -5,10 +5,10 @@ class Clip(
 ) : CssProperty(value) {
 
     companion object {
-        fun auto() = Clip("auto")
         fun rect(top: Int, right: Int, bottom: Int, left: Int) = Clip("rect(${top}px,${right}px,${bottom}px,${left}px)")
-        fun initial() = Clip("initial")
+        val auto = Clip("auto")
-        fun inherit() = Clip("inherit")
+        val initial = Clip("initial")
+        val inherit = Clip("inherit")
 
     }
 }
@@ -18,7 +18,7 @@ class ClipPath(
 ) : CssProperty(value) {
 
     companion object {
-        fun auto() = ClipPath("auto")
+        val auto = ClipPath("auto")
         fun circle(perc: Double) = ClipPath("circle(${perc}%)")
         fun ellipse(radiusX: Double, radiusY: Double) = ClipPath("ellipse(${radiusX}%,${radiusY}%)")
         fun ellipse(
@@ -27,15 +27,18 @@ class ClipPath(
             positionX: Double,
             positionY: Double
         ) = ClipPath("ellipse(${radiusX}%,${radiusY}% at ${positionX}%,${positionY}%)")
+
         // todo: other options
-        fun marginBox() = ClipPath("margin-box")
+        fun other(text: String) = ClipPath(text)
-        fun borderBox() = ClipPath("border-box")
+
-        fun paddingBox() = ClipPath("padding-box")
+        val marginBox = ClipPath("margin-box")
-        fun contentBox() = ClipPath("content-box")
+        val borderBox = ClipPath("border-box")
-        fun fillBox() = ClipPath("fill-box")
+        val paddingBox = ClipPath("padding-box")
-        fun strokeBox() = ClipPath("stroke-box")
+        val contentBox = ClipPath("content-box")
-        fun viewBox() = ClipPath("view-box")
+        val fillBox = ClipPath("fill-box")
-        fun none() = ClipPath("none")
+        val strokeBox = ClipPath("stroke-box")
+        val viewBox = ClipPath("view-box")
+        val none = ClipPath("none")
     }
 }
 
@@ -44,11 +47,11 @@ class ClipOrigin(
 ) : CssProperty(value) {
 
     companion object {
-        fun borderBox() = ClipOrigin("border-box")
+        val borderBox = ClipOrigin("border-box")
-        fun paddingBox() = ClipOrigin("padding-box")
+        val paddingBox = ClipOrigin("padding-box")
-        fun contentBox() = ClipOrigin("content-box")
+        val contentBox = ClipOrigin("content-box")
-        fun initial() = ClipOrigin("initial")
+        val initial = ClipOrigin("initial")
-        fun inherit() = ClipOrigin("inherit")
+        val inherit = ClipOrigin("inherit")
 
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Color.kt

@@ -1,36 +1,500 @@
 package nl.astraeus.css.properties
 
-class Color(
+import kotlin.math.PI
-    value: String
+import kotlin.math.abs
-) : CssProperty(value) {
+import kotlin.math.max
+import kotlin.math.roundToInt
 
-    companion object {
+/**
-        fun auto() = Color("auto")
+ * See [CSS Color Module Level 3](https://www.w3.org/TR/2018/REC-css-color-3-20180619/)
-        fun transparant() = Color("transparant")
+ *
-        fun initial() = Color("initial")
+ * This class represents a CSS color value. String parameters to the constructor argument
-        fun inherit() = Color("inherit")
+ * can take one of the following forms:
-        fun hex(hex: String) = Color("#$hex")
+ *
-        fun rgb(
+ *  * HTML color name, e.g. ``Red``, ``DarkSalmon`` (case-insensitive), though in this case the use of the pre-defined constants is recommended.
-            red: Int,
+ *  * ``#rgb`` or ``#rrggbb``
-            green: Int,
+ *  * ``rgb(0..255, 0..255, 0..255)``, ``rgb(0..100%, 0..100%, 0..100%)``, ``rgb(0..100%, 0..100%, 0..100%, 0..1)``, ``rgba(0..255, 0..255, 0..255, 0..1)``
-            blue: Int
+ *  * ``hsl(0..360, 0-100%, 0..100%)`` or ``hsla(0..360, 0-100%, 0..100%, 0..1)``
-        ) = Color("rgb($red, $green, $blue)")
+ *
-        fun rgba(
+ * Technically, the Hue parameter to ``hsl`` or ``hsla`` can exceed ``360``, because it represents a *degree* (angle) on
-            red: Int,
+ * the color wheel. But as per the algorithm proposed by the W3C, the value will ultimately be capped to ``360`` through
-            green: Int,
+ * a series of modulus operations; see section *4.2.4. HSL color values* of the above specification.
-            blue: Int,
+ *
-            alpha: Double
+ * Taken from: https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-css
-        ) = Color("rgba($red, $green, $blue, $alpha)")
+ */
-        fun hsl(
+@Suppress("SpellCheckingInspection")
-            hue: Int,
+class Color(value: String) : CssProperty(value) {
-            saturation: Int,
+  private var rgb: String? = null
-            lightness: Int
+
-        ) = Color("hsl($hue, $saturation, $lightness)")
+  private constructor(value: String, rgb: String) : this(value) {
-        fun hsla(
+    this.rgb = rgb
-            hue: Int,
+  }
-            saturation: Int,
+
-            lightness: Int,
+  companion object {
-            alpha: Double
+    val initial = Color("initial")
-        ) = Color("hsla($hue, $saturation, $lightness, $alpha)")
+    val inherit = Color("inherit")
+    val unset = Color("unset")
+
+    val transparent = Color("transparent")
+    val currentColor = Color("currentColor")
+
+    // W3C predefined HTML colors (147), see the referenced specification above.
+    val aliceBlue = Color("aliceblue", "#f0f8ff")
+    val antiqueWhite = Color("antiquewhite", "#faebd7")
+    val aqua = Color("aqua", "#00ffff")
+    val aquamarine = Color("aquamarine", "#7fffd4")
+    val azure = Color("azure", "#f0ffff")
+    val beige = Color("beige", "#f5f5dc")
+    val bisque = Color("bisque", "#ffe4c4")
+    val black = Color("black", "#000000")
+    val blanchedAlmond = Color("blanchedalmond", "#ffebcd")
+    val blue = Color("blue", "#0000ff")
+    val blueViolet = Color("blueviolet", "#8a2be2")
+    val brown = Color("brown", "#a52a2a")
+    val burlyWood = Color("burlywood", "#deb887")
+    val cadetBlue = Color("cadetblue", "#5f9ea0")
+    val chartreuse = Color("chartreuse", "#7fff00")
+    val chocolate = Color("chocolate", "#d2691e")
+    val coral = Color("coral", "#ff7f50")
+    val cornflowerBlue = Color("cornflowerblue", "#6495ed")
+    val cornsilk = Color("cornsilk", "#fff8dc")
+    val crimson = Color("crimson", "#dc143c")
+    val cyan = Color("cyan", "#00ffff")
+    val darkBlue = Color("darkblue", "#00008b")
+    val darkCyan = Color("darkcyan", "#008b8b")
+    val darkGoldenrod = Color("darkgoldenrod", "#b8860b")
+    val darkGray = Color("darkgray", "#a9a9a9")
+    val darkGreen = Color("darkgreen", "#006400")
+    val darkGrey = Color("darkgrey", "#a9a9a9")
+    val darkKhaki = Color("darkkhaki", "#bdb76b")
+    val darkMagenta = Color("darkmagenta", "#8b008b")
+    val darkOliveGreen = Color("darkolivegreen", "#556b2f")
+    val darkOrange = Color("darkorange", "#ff8c00")
+    val darkOrchid = Color("darkorchid", "#9932cc")
+    val darkRed = Color("darkred", "#8b0000")
+    val darkSalmon = Color("darksalmon", "#e9967a")
+    val darkSeaGreen = Color("darkseagreen", "#8fbc8f")
+    val darkSlateBlue = Color("darkslateblue", "#483d8b")
+    val darkSlateGray = Color("darkslategray", "#2f4f4f")
+    val darkSlateGrey = Color("darkslategrey", "#2f4f4f")
+    val darkTurquoise = Color("darkturquoise", "#00ced1")
+    val darkViolet = Color("darkviolet", "#9400d3")
+    val deepPink = Color("deeppink", "#ff1493")
+    val deepSkyBlue = Color("deepskyblue", "#00bfff")
+    val dimGray = Color("dimgray", "#696969")
+    val dimGrey = Color("dimgrey", "#696969")
+    val dodgerBlue = Color("dodgerblue", "#1e90ff")
+    val firebrick = Color("firebrick", "#b22222")
+    val floralWhite = Color("floralwhite", "#fffaf0")
+    val forestGreen = Color("forestgreen", "#228b22")
+    val fuchsia = Color("fuchsia", "#ff00ff")
+    val gainsboro = Color("gainsboro", "#dcdcdc")
+    val ghostWhite = Color("ghostwhite", "#f8f8ff")
+    val gold = Color("gold", "#ffd700")
+    val goldenrod = Color("goldenrod", "#daa520")
+    val gray = Color("gray", "#808080")
+    val green = Color("green", "#008000")
+    val greenYellow = Color("greenyellow", "#adff2f")
+    val grey = Color("grey", "#808080")
+    val honeydew = Color("honeydew", "#f0fff0")
+    val hotPink = Color("hotpink", "#ff69b4")
+    val indianRed = Color("indianred", "#cd5c5c")
+    val indigo = Color("indigo", "#4b0082")
+    val ivory = Color("ivory", "#fffff0")
+    val khaki = Color("khaki", "#f0e68c")
+    val lavender = Color("lavender", "#e6e6fa")
+    val lavenderBlush = Color("lavenderblush", "#fff0f5")
+    val lawnGreen = Color("lawngreen", "#7cfc00")
+    val lemonChiffon = Color("lemonchiffon", "#fffacd")
+    val lightBlue = Color("lightblue", "#add8e6")
+    val lightCoral = Color("lightcoral", "#f08080")
+    val lightCyan = Color("lightcyan", "#e0ffff")
+    val lightGoldenrodYellow = Color("lightgoldenrodyellow", "#fafad2")
+    val lightGray = Color("lightgray", "#d3d3d3")
+    val lightGreen = Color("lightgreen", "#90ee90")
+    val lightGrey = Color("lightgrey", "#d3d3d3")
+    val lightPink = Color("lightpink", "#ffb6c1")
+    val lightSalmon = Color("lightsalmon", "#ffa07a")
+    val lightSeaGreen = Color("lightseagreen", "#20b2aa")
+    val lightSkyBlue = Color("lightskyblue", "#87cefa")
+    val lightSlateGray = Color("lightslategray", "#778899")
+    val lightSlateGrey = Color("lightslategrey", "#778899")
+    val lightSteelBlue = Color("lightsteelblue", "#b0c4de")
+    val lightYellow = Color("lightyellow", "#ffffe0")
+    val lime = Color("lime", "#00ff00")
+    val limeGreen = Color("limegreen", "#32cd32")
+    val linen = Color("linen", "#faf0e6")
+    val magenta = Color("magenta", "#ff00ff")
+    val maroon = Color("maroon", "#800000")
+    val mediumAquamarine = Color("mediumaquamarine", "#66cdaa")
+    val mediumBlue = Color("mediumblue", "#0000cd")
+    val mediumOrchid = Color("mediumorchid", "#ba55d3")
+    val mediumPurple = Color("mediumpurple", "#9370d8")
+    val mediumSeaGreen = Color("mediumseagreen", "#3cb371")
+    val mediumSlateBlue = Color("mediumslateblue", "#7b68ee")
+    val mediumSpringGreen = Color("mediumspringgreen", "#00fa9a")
+    val mediumTurquoise = Color("mediumturquoise", "#48d1cc")
+    val mediumVioletRed = Color("mediumvioletred", "#c71585")
+    val midnightBlue = Color("midnightblue", "#191970")
+    val mintCream = Color("mintcream", "#f5fffa")
+    val mistyRose = Color("mistyrose", "#ffe4e1")
+    val moccasin = Color("moccasin", "#ffe4b5")
+    val navajoWhite = Color("navajowhite", "#ffdead")
+    val navy = Color("navy", "#000080")
+    val oldLace = Color("oldlace", "#fdf5e6")
+    val olive = Color("olive", "#808000")
+    val oliveDrab = Color("olivedrab", "#6b8e23")
+    val orange = Color("orange", "#ffa500")
+    val orangeRed = Color("orangered", "#ff4500")
+    val orchid = Color("orchid", "#da70d6")
+    val paleGoldenrod = Color("palegoldenrod", "#eee8aa")
+    val paleGreen = Color("palegreen", "#98fb98")
+    val paleTurquoise = Color("paleturquoise", "#afeeee")
+    val paleVioletRed = Color("palevioletred", "#db7093")
+    val papayaWhip = Color("papayawhip", "#ffefd5")
+    val peachPuff = Color("peachpuff", "#ffdab9")
+    val peru = Color("peru", "#cd853f")
+    val pink = Color("pink", "#ffc0cb")
+    val plum = Color("plum", "#dda0dd")
+    val powderBlue = Color("powderblue", "#b0e0e6")
+    val purple = Color("purple", "#800080")
+    val red = Color("red", "#ff0000")
+    val rosyBrown = Color("rosybrown", "#bc8f8f")
+    val royalBlue = Color("royalblue", "#4169e1")
+    val saddleBrown = Color("saddlebrown", "#8b4513")
+    val salmon = Color("salmon", "#fa8072")
+    val sandyBrown = Color("sandybrown", "#f4a460")
+    val seaGreen = Color("seagreen", "#2e8b57")
+    val seaShell = Color("seashell", "#fff5ee")
+    val sienna = Color("sienna", "#a0522d")
+    val silver = Color("silver", "#c0c0c0")
+    val skyBlue = Color("skyblue", "#87ceeb")
+    val slateBlue = Color("slateblue", "#6a5acd")
+    val slateGray = Color("slategray", "#708090")
+    val slateGrey = Color("slategrey", "#708090")
+    val snow = Color("snow", "#fffafa")
+    val springGreen = Color("springgreen", "#00ff7f")
+    val steelBlue = Color("steelblue", "#4682b4")
+    val tan = Color("tan", "#d2b48c")
+    val teal = Color("teal", "#008080")
+    val thistle = Color("thistle", "#d8bfd8")
+    val tomato = Color("tomato", "#ff6347")
+    val turquoise = Color("turquoise", "#40e0d0")
+    val violet = Color("violet", "#ee82ee")
+    val wheat = Color("wheat", "#f5deb3")
+    val white = Color("white", "#ffffff")
+    val whiteSmoke = Color("whitesmoke", "#f5f5f5")
+    val yellow = Color("yellow", "#ffff00")
+    val yellowGreen = Color("yellowgreen", "#9acd32")
+
+    fun normalizeFractionalPercent(value: Double): Double =
+      value.coerceIn(minimumValue = 0.0, maximumValue = 1.0)
+
+    fun normalizePercent(value: Int): Int =
+      value.coerceIn(minimumValue = 0, maximumValue = 100)
+
+    fun normalizeRGB(value: Int): Int =
+      value.coerceIn(minimumValue = 0, maximumValue = 255)
+
+    // algorithm for capping from W3C
+    fun normalizeHue(value: Double): Int =
+      (((value % 360) + 360) % 360).roundToInt()
+
+    fun normalizeAlpha(value: Double): Double =
+      normalizeFractionalPercent(value)
+
+    // Match for hsl(int, int%, int%) | hsla(int, int%, int%, 0.5) | etc.
+    private val HSLA_REGEX by lazy {
+      Regex(
+        "^hsla?\\((-?[0-9]+\\.?[0-9]*(?:deg|grad|rad|turn)?)\\s*[, ]?\\s*(\\d{1,3})%\\s*[, ]\\s*(\\d{1,3})%\\s*[, ]?\\s*(\\d|(?:\\d?\\.\\d+))?\\)\$",
+        RegexOption.IGNORE_CASE
+      )
     }
+
+    // Match for rgb(255, 255, 255) | rgba(255, 255, 255, 0.5) | rgb(100% 100% 100%) | etc.
+    private val RGBA_REGEX by lazy {
+      Regex(
+        "^rgba?\\((\\d{1,3}%?)\\s*[, ]\\s*(\\d{1,3}%?)\\s*[, ]\\s*(\\d{1,3}%?)[, ]?\\s*(\\d|(?:\\d?\\.\\d+))?\\)\$",
+        RegexOption.IGNORE_CASE
+      )
+    }
+  }
+
+  /**
+   * withAlpha preserves existing alpha value: rgba(0, 0, 0, 0.5).withAlpha(0.1) = rgba(0, 0, 0, 0.05)
+   */
+  fun withAlpha(alpha: Double) =
+    when {
+      value.startsWith("hsl", true) -> with(fromHSLANotation()) { hsla(hue, saturation, lightness, normalizeAlpha(alpha) * this.alpha) }
+      else -> with(toRGBA()) { rgba(red, green, blue, normalizeAlpha(alpha) * this.alpha) }
+    }
+
+  /**
+   * changeAlpha rewrites existing alpha value: rgba(0, 0, 0, 0.5).withAlpha(0.1) = rgba(0, 0, 0, 0.1)
+   */
+  fun changeAlpha(alpha: Double) =
+    when {
+      value.startsWith("hsl", true) -> with(fromHSLANotation()) { hsla(hue, saturation, lightness, normalizeAlpha(alpha)) }
+      else -> with(toRGBA()) { rgba(red, green, blue, normalizeAlpha(alpha)) }
+    }
+
+  // https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb
+  fun blend(backgroundColor: Color): Color {
+    val source = this.toRGBA()
+    val background = backgroundColor.toRGBA()
+
+    val targetR = ((1 - source.alpha) * background.red) + (source.alpha * source.red)
+    val targetG = ((1 - source.alpha) * background.green) + (source.alpha * source.green)
+    val targetB = ((1 - source.alpha) * background.blue) + (source.alpha * source.blue)
+
+    return rgb(targetR.roundToInt(), targetG.roundToInt(), targetB.roundToInt())
+  }
+
+  /**
+   * Lighten the color by the specified percent (between 0-100), returning a new instance of Color.
+   *
+   * @param percent the percent to lighten the Color
+   * @return a new lightened version of this color
+   */
+  fun lighten(percent: Int): Color {
+    val isHSLA = value.startsWith("hsl", ignoreCase = true)
+    val hsla = if (isHSLA) fromHSLANotation() else toRGBA().asHSLA()
+
+    val lightness = hsla.lightness + (hsla.lightness * (normalizePercent(percent) / 100.0)).roundToInt()
+    val newHSLa = hsla.copy(lightness = normalizePercent(lightness))
+    return if (isHSLA) {
+      hsla(newHSLa.hue, newHSLa.saturation, newHSLa.lightness, newHSLa.alpha)
+    } else {
+      with(newHSLa.asRGBA()) { rgba(red, green, blue, alpha) }
+    }
+  }
+
+  /**
+   * Darken the color by the specified percent (between 0-100), returning a new instance of Color.
+   *
+   * @param percent the percent to darken the Color
+   * @return a new darkened version of this color
+   */
+  fun darken(percent: Int): Color {
+    val isHSLA = value.startsWith("hsl", ignoreCase = true)
+    val hsla = if (isHSLA) fromHSLANotation() else toRGBA().asHSLA()
+
+    val darkness = hsla.lightness - (hsla.lightness * (normalizePercent(percent) / 100.0)).roundToInt()
+    val newHSLa = hsla.copy(lightness = normalizePercent(darkness))
+    return if (isHSLA) {
+      hsla(newHSLa.hue, newHSLa.saturation, newHSLa.lightness, newHSLa.alpha)
+    } else {
+      with(newHSLa.asRGBA()) { rgba(red, green, blue, alpha) }
+    }
+  }
+
+  /**
+   * Increase contrast, if lightness > 50 then darken else lighten
+   *
+   * @param percent the percent to lighten/darken the Color
+   * @return a new ligtened/darkened version of this color
+   */
+  fun contrast(percent: Int): Color {
+    val isHSLA = value.startsWith("hsl", ignoreCase = true)
+    val hsla = if (isHSLA) fromHSLANotation() else toRGBA().asHSLA()
+
+    val darkness = if (hsla.lightness > 50) {
+      hsla.lightness - (hsla.lightness * (normalizePercent(percent) / 100.0)).roundToInt()
+    } else {
+      hsla.lightness + (hsla.lightness * (normalizePercent(percent) / 100.0)).roundToInt()
+    }
+
+    val newHSLa = hsla.copy(lightness = normalizePercent(darkness))
+    return if (isHSLA) {
+      hsla(newHSLa.hue, newHSLa.saturation, newHSLa.lightness, newHSLa.alpha)
+    } else {
+      with(newHSLa.asRGBA()) { rgba(red, green, blue, alpha) }
+    }
+  }
+
+  /**
+   * Saturate the color by the specified percent (between 0-100), returning a new instance of Color.
+   *
+   * @param percent the percent to saturate the Color
+   * @return a new saturated version of this color
+   */
+  fun saturate(percent: Int): Color {
+    val isHSLA = value.startsWith("hsl", ignoreCase = true)
+    val hsla = if (isHSLA) fromHSLANotation() else toRGBA().asHSLA()
+
+    val saturation = hsla.saturation + (hsla.saturation * (normalizePercent(percent) / 100.0)).roundToInt()
+    val newHSLa = hsla.copy(saturation = normalizePercent(saturation))
+    return if (isHSLA) {
+      hsla(newHSLa.hue, newHSLa.saturation, newHSLa.lightness, newHSLa.alpha)
+    } else {
+      with(newHSLa.asRGBA()) { rgba(red, green, blue, alpha) }
+    }
+  }
+
+  /**
+   * Desaturate the color by the specified percent (between 0-100), returning a new instance of Color.
+   *
+   * @param percent the percent to desaturate the Color
+   * @return a new desaturated version of this color
+   */
+  fun desaturate(percent: Int): Color {
+    val isHSLA = value.startsWith("hsl", ignoreCase = true)
+    val hsla = if (isHSLA) fromHSLANotation() else toRGBA().asHSLA()
+
+    val desaturation = hsla.saturation - (hsla.saturation * (normalizePercent(percent) / 100.0)).roundToInt()
+    val newHSLa = hsla.copy(saturation = normalizePercent(desaturation))
+    return if (isHSLA) {
+      hsla(newHSLa.hue, newHSLa.saturation, newHSLa.lightness, newHSLa.alpha)
+    } else {
+      with(newHSLa.asRGBA()) { rgba(red, green, blue, alpha) }
+    }
+  }
+
+  internal data class RGBA(
+    val red: Int,
+    val green: Int,
+    val blue: Int,
+    val alpha: Double = 1.0
+  ) {
+
+    // Algorithm adapted from http://www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/
+    fun asHSLA(): HSLA {
+      // scale R, G, B values into 0..1 fractions
+      val r = red / 255.0
+      val g = green / 255.0
+      val b = blue / 255.0
+
+      val cMax = maxOf(r, g, b)
+      val cMin = minOf(r, g, b)
+      val chroma = cMax - cMin
+
+      val lg = normalizeFractionalPercent((cMax + cMin) / 2)
+      val s = if (chroma != 0.0) normalizeFractionalPercent(chroma / (1.0 - abs((2.0 * lg) - 1.0))) else 0.0
+      val h = when (cMax) {
+        cMin -> 0.0
+        r -> 60 * (((g - b) / chroma) % 6.0)
+        g -> 60 * (((b - r) / chroma) + 2)
+        b -> 60 * (((r - g) / chroma) + 4)
+        else -> error("Unexpected value for max") // theoretically unreachable bc maxOf(r, g, b) above
+      }
+
+      return HSLA(normalizeHue(h), (s * 100).roundToInt(), (lg * 100).roundToInt(), alpha)
+    }
+  }
+
+  internal data class HSLA(
+    val hue: Int,
+    val saturation: Int,
+    val lightness: Int,
+    val alpha: Double = 1.0
+  ) {
+
+    // Algorithm from W3C link referenced in class comment (section 4.2.4. HSL color values)
+    fun asRGBA(): RGBA {
+      fun hueToRGB(m1: Double, m2: Double, h: Double): Double {
+        val hu = if (h < 0) h + 1 else if (h > 1) h - 1 else h
+        return when {
+          (hu < 1.0 / 6) -> m1 + (m2 - m1) * 6 * hu
+          (hu < 1.0 / 2) -> m2
+          (hu < 2.0 / 3) -> m1 + ((m2 - m1) * 6 * (2.0 / 3 - hu))
+          else -> m1
+        }
+      }
+
+      if (saturation == 0) return RGBA(lightness, lightness, lightness)
+
+      // scale H, S, V values into 0..1 fractions
+      val h = (hue % 360.0) / 360.0
+      val s = saturation / 100.0
+      val lg = lightness / 100.0
+
+      val m2 = if (lg < 0.5) lg * (1 + s) else (lg + s - lg * s)
+      val m1 = 2 * lg - m2
+      val r = normalizeFractionalPercent(hueToRGB(m1, m2, h + (1.0 / 3)))
+      val g = normalizeFractionalPercent(hueToRGB(m1, m2, h))
+      val b = normalizeFractionalPercent(hueToRGB(m1, m2, h - (1.0 / 3)))
+      return RGBA((r * 255).roundToInt(), (g * 255).roundToInt(), (b * 255).roundToInt(), alpha)
+    }
+  }
+
+  internal fun fromHSLANotation(): HSLA {
+    val match = HSLA_REGEX.find(value)
+
+    fun getHSLParameter(index: Int) =
+      match?.groups?.get(index)?.value
+        ?: throw IllegalArgumentException("Expected hsl or hsla notation, got $value")
+
+    val hueShape = getHSLParameter(1)
+    val hue = normalizeHue(
+      when {
+        hueShape.endsWith("grad", true) -> hueShape.substringBefore("grad").toDouble() * (9.0 / 10)
+        hueShape.endsWith("rad", true) -> (hueShape.substringBefore("rad").toDouble() * 180) / PI
+        hueShape.endsWith("turn", true) -> hueShape.substringBefore("turn").toDouble() * 360.0
+        hueShape.endsWith("deg", true) -> hueShape.substringBefore("deg").toDouble()
+        else -> hueShape.toDouble()
+      }
+    )
+    val saturation = normalizePercent(getHSLParameter(2).toInt())
+    val lightness = normalizePercent(getHSLParameter(3).toInt())
+    val alpha = normalizeAlpha(match?.groups?.get(4)?.value?.toDouble() ?: 1.0)
+
+    return HSLA(hue, saturation, lightness, alpha)
+  }
+
+  internal fun fromRGBANotation(): RGBA {
+    val match = RGBA_REGEX.find(value)
+
+    fun getRGBParameter(index: Int): Int {
+      val group = match?.groups?.get(index)?.value
+        ?: throw IllegalArgumentException("Expected rgb or rgba notation, got $value")
+
+      return when {
+        (group.endsWith('%')) -> (normalizeFractionalPercent(group.substringBefore('%').toDouble() / 100.0) * 255.0).toInt()
+        else -> normalizeRGB(group.toInt())
+      }
+    }
+
+    val red = getRGBParameter(1)
+    val green = getRGBParameter(2)
+    val blue = getRGBParameter(3)
+    val alpha = normalizeAlpha(match?.groups?.get(4)?.value?.toDouble() ?: 1.0)
+
+    return RGBA(red, green, blue, alpha)
+  }
+
+  internal fun toRGBA(): RGBA {
+    val v = rgb ?: value
+    return when {
+      v.startsWith("rgb") -> fromRGBANotation()
+
+      // Matches #rgb
+      v.startsWith("#") && v.length == 4 -> RGBA(
+        "${v[1]}${v[1]}".toInt(16),
+        "${v[2]}${v[2]}".toInt(16),
+        "${v[3]}${v[3]}".toInt(16)
+      )
+
+      // Matches both #rrggbb and #rrggbbaa
+      v.startsWith("#") && (v.length == 7 || v.length == 9) -> RGBA(
+        (v.substring(1..2)).toInt(16),
+        (v.substring(3..4)).toInt(16),
+        (v.substring(5..6)).toInt(16)
+      )
+      else -> throw IllegalArgumentException("Only hexadecimal, rgb, and rgba notations are accepted, got $v")
+    }
+  }
 }
+
+private fun String.withZeros() = this + "0".repeat(max(0, 3 - this.length))
+fun hex(value: Int) = Color("#${value.toString(16).withZeros()}")
+fun rgb(red: Int, green: Int, blue: Int) = Color("rgb($red, $green, $blue)")
+fun rgba(red: Int, green: Int, blue: Int, alpha: Double) = Color("rgba($red, $green, $blue, ${formatAlpha(alpha)})")
+fun hsl(hue: Int, saturation: Int, lightness: Int) = Color("hsl($hue, $saturation%, $lightness%)")
+fun hsla(hue: Int, saturation: Int, lightness: Int, alpha: Double) = Color("hsla($hue, $saturation%, $lightness%, ${formatAlpha(alpha)})")
+fun blackAlpha(alpha: Double) = Color.black.withAlpha(alpha)
+fun whiteAlpha(alpha: Double) = Color.white.withAlpha(alpha)
+
+private fun formatAlpha(alpha: Double): String =
+  alpha.toString().let {
+    if ("." in it) it else "$it.0"
+  }

src/commonMain/kotlin/nl/astraeus/css/properties/Common.kt

@@ -14,8 +14,8 @@ class Length(
         fun pc(nr: Double) = Length("${nr}pc")
         fun cm(nr: Int) = Length("${nr}cm")
         fun cm(nr: Double) = Length("${nr}cm")
-        fun initial() = Length("initial")
+        val initial = Length("initial")
-        fun inherit() = Length("inherit")
+        val inherit = Length("inherit")
     }
 
 }
@@ -25,9 +25,9 @@ class Fill(
 ) : CssProperty(value) {
 
     companion object {
-        fun balance() = Fill("balance")
+        val balance = Fill("balance")
-        fun auto() = Fill("auto")
+        val auto = Fill("auto")
-        fun initial() = Fill("initial")
+        val initial = Fill("initial")
-        fun inherit() = Fill("inherit")
+        val inherit = Fill("inherit")
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Content.kt

@@ -5,18 +5,19 @@ class Content(
 ) : CssProperty(value) {
 
     companion object {
-        fun normal() = Content("normal")
+        val normal = Content("normal")
-        fun none() = Content("none")
+        val none = Content("none")
-        fun counter() = Content("counter")
+        val counter = Content("counter")
+        val openQuote = Content("open-quote")
+        val closeQuote = Content("close-quote")
+        val noOpenQuote = Content("no-open-quote")
+        val noCloseQuote = Content("no-close-quote")
+        val initial = Content("initial")
+        val inherit = Content("inherit")
+
         fun attr(attribute: String) = Content("attr($attribute)")
         fun string(txt: String) = Content("\"$txt\"")
-        fun openQuote() = Content("open-quote")
-        fun closeQuote() = Content("close-quote")
-        fun noOpenQuote() = Content("no-open-quote")
-        fun noCloseQuote() = Content("no-close-quote")
         fun url(url: String) = Content("url($url)")
-        fun initial() = Content("initial")
-        fun inherit() = Content("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Count.kt

@@ -5,15 +5,11 @@ class  Count(
 ) : CssProperty(value) {
 
     companion object {
-        fun count(number: Int): Count =
+        val auto: Count = Count("auto")
-            Count("$number")
+        val infinite: Count = Count("infinite")
-        fun auto(): Count =
+        val initial: Count = Count("initial")
-            Count("auto")
+        val inherit: Count = Count("inherit")
-        fun infinite(): Count =
+
-            Count("infinite")
+        fun count(number: Int): Count = Count("$number")
-        fun initial(): Count =
-            Count("initial")
-        fun inherit(): Count =
-            Count("inherit")
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/CssFloat.kt

@@ -0,0 +1,15 @@
+package nl.astraeus.css.properties
+
+class CssFloat(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = CssFloat("none")
+        val left = CssFloat("left")
+        val right = CssFloat("right")
+        val initial = CssFloat("initial")
+        val inherit = CssFloat("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt

@@ -1,10 +1,14 @@
 package nl.astraeus.css.properties
 
-open class CssProperty(
+interface CssValue {
-    val value: String
+    fun css(): String
-) {
+}
 
-    fun css(): String = value
+open class CssProperty(
+    var value: String
+): CssValue {
+
+    override fun css(): String = value
 
 }
 

src/commonMain/kotlin/nl/astraeus/css/properties/DelayDuration.kt

@@ -5,8 +5,10 @@ class DelayDuration(
 ) : CssProperty(value) {
 
     companion object {
+        val initial = DelayDuration("initial")
+        val inherit = DelayDuration("inherit")
+
         fun seconds(seconds: Int) = DelayDuration("${seconds}s")
-        fun initial() = DelayDuration("initial")
+        fun millis(milliSeconds: Int) = DelayDuration("${milliSeconds}ms")
-        fun inherit() = DelayDuration("inherit")
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Direction.kt

@@ -5,10 +5,10 @@ class Direction(
 ) : CssProperty(value) {
 
     companion object {
-        fun ltr() = Direction("ltr")
+        val ltr = Direction("ltr")
-        fun rtl() = Direction("rtl")
+        val rtl = Direction("rtl")
-        fun initial() = Direction("initial")
+        val initial = Direction("initial")
-        fun inherit() = Direction("inherit")
+        val inherit = Direction("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Display.kt

@@ -5,29 +5,29 @@ class Display(
 ) : CssProperty(value) {
 
     companion object {
-        fun inline() = Display("inline")
+        val inline = Display("inline")
-        fun block() = Display("block")
+        val block = Display("block")
-        fun contents() = Display("contents")
+        val contents = Display("contents")
-        fun flex() = Display("flex")
+        val flex = Display("flex")
-        fun grid() = Display("grid")
+        val grid = Display("grid")
-        fun inlineBlock() = Display("inline-block")
+        val inlineBlock = Display("inline-block")
-        fun inlineFlex() = Display("inline-flex")
+        val inlineFlex = Display("inline-flex")
-        fun inlineGrid() = Display("inline-grid")
+        val inlineGrid = Display("inline-grid")
-        fun inlineTable() = Display("inline-table")
+        val inlineTable = Display("inline-table")
-        fun listItem() = Display("list-item")
+        val listItem = Display("list-item")
-        fun runIn() = Display("run-in")
+        val runIn = Display("run-in")
-        fun table() = Display("table")
+        val table = Display("table")
-        fun tableCaption() = Display("table-caption")
+        val tableCaption = Display("table-caption")
-        fun tableColumnGroup() = Display("table-column-group")
+        val tableColumnGroup = Display("table-column-group")
-        fun tableHeaderGroup() = Display("table-header-group")
+        val tableHeaderGroup = Display("table-header-group")
-        fun tableFooterGroup() = Display("table-footer-group")
+        val tableFooterGroup = Display("table-footer-group")
-        fun tableRowGroup() = Display("table-row-group")
+        val tableRowGroup = Display("table-row-group")
-        fun tableCell() = Display("table-cell")
+        val tableCell = Display("table-cell")
-        fun tableColumn() = Display("table-column")
+        val tableColumn = Display("table-column")
-        fun tableRow() = Display("table-row")
+        val tableRow = Display("table-row")
-        fun none() = Display("none")
+        val none = Display("none")
-        fun initial() = Display("initial")
+        val initial = Display("initial")
-        fun inherit() = Display("inherit")
+        val inherit = Display("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/EmptyCells.kt

@@ -5,10 +5,10 @@ class EmptyCells(
 ) : CssProperty(value) {
 
     companion object {
-        fun show() = EmptyCells("show")
+        val show = EmptyCells("show")
-        fun hide() = EmptyCells("hide")
+        val hide = EmptyCells("hide")
-        fun initial() = EmptyCells("initial")
+        val initial = EmptyCells("initial")
-        fun inherit() = EmptyCells("inherit")
+        val inherit = EmptyCells("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Flex.kt

@@ -5,12 +5,12 @@ class FlexDirection(
 ) : CssProperty(value) {
 
     companion object {
-        fun row() = FlexDirection("row")
+        val row = FlexDirection("row")
-        fun rowReverse() = FlexDirection("row-reverse")
+        val rowReverse = FlexDirection("row-reverse")
-        fun column() = FlexDirection("column")
+        val column = FlexDirection("column")
-        fun columnReverse() = FlexDirection("column-reverse")
+        val columnReverse = FlexDirection("column-reverse")
-        fun initial() = FlexDirection("initial")
+        val initial = FlexDirection("initial")
-        fun inherit() = FlexDirection("inherit")
+        val inherit = FlexDirection("inherit")
     }
 
 }
@@ -20,9 +20,10 @@ class FlexGrowShrink(
 ) : CssProperty(value) {
 
     companion object {
-        fun number(number: Int) = FlexDirection("$number")
+        val initial = FlexGrowShrink("initial")
-        fun initial() = FlexDirection("initial")
+        val inherit = FlexGrowShrink("inherit")
-        fun inherit() = FlexDirection("inherit")
+
+        fun number(number: Int) = FlexGrowShrink("$number")
     }
 
 }
@@ -32,11 +33,11 @@ class FlexWrap(
 ) : CssProperty(value) {
 
     companion object {
-        fun nowrap() = FlexWrap("nowrap")
+        val nowrap = FlexWrap("nowrap")
-        fun wrap() = FlexWrap("wrap")
+        val wrap = FlexWrap("wrap")
-        fun wrapReverse() = FlexWrap("wrap-reverse")
+        val wrapReverse = FlexWrap("wrap-reverse")
-        fun initial() = FlexWrap("initial")
+        val initial = FlexWrap("initial")
-        fun inherit() = FlexWrap("inherit")
+        val inherit = FlexWrap("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/Float.kt

@@ -1,15 +0,0 @@
-package nl.astraeus.css.properties
-
-class Float(
-    value: String
-) : CssProperty(value) {
-
-    companion object {
-        fun none() = Float("none")
-        fun left() = Float("left")
-        fun right() = Float("right")
-        fun initial() = Float("initial")
-        fun inherit() = Float("inherit")
-    }
-
-}

src/commonMain/kotlin/nl/astraeus/css/properties/Font.kt

@@ -5,17 +5,18 @@ class FontSize(
 ) : CssProperty(value) {
 
     companion object {
-        fun xxSmall() = FontSize("xx-small")
+        val xxSmall = FontSize("xx-small")
-        fun xSmall() = FontSize("x-small")
+        val xSmall = FontSize("x-small")
-        fun small() = FontSize("small")
+        val small = FontSize("small")
-        fun medium() = FontSize("medium")
+        val medium = FontSize("medium")
-        fun large() = FontSize("large")
+        val large = FontSize("large")
-        fun xLarge() = FontSize("x-large")
+        val xLarge = FontSize("x-large")
-        fun xxLarge() = FontSize("xx-large")
+        val xxLarge = FontSize("xx-large")
-        fun smaller() = FontSize("smaller")
+        val smaller = FontSize("smaller")
-        fun larger() = FontSize("larger")
+        val larger = FontSize("larger")
-        fun initial() = FontSize("initial")
+        val initial = FontSize("initial")
-        fun inherit() = FontSize("inherit")
+        val inherit = FontSize("inherit")
+
         fun px(nr: Int) = FontSize("${nr}px")
         fun em(nr: Int) = FontSize("${nr}em")
         fun em(nr: Double) = FontSize("${nr}em")
@@ -26,6 +27,7 @@ class FontSize(
         fun cm(nr: Int) = FontSize("${nr}cm")
         fun cm(nr: Double) = FontSize("${nr}cm")
     }
+
 }
 
 class FontStretch(
@@ -33,15 +35,17 @@ class FontStretch(
 ) : CssProperty(value) {
 
     companion object {
-        fun normal() = FontStretch("normal")
+        val normal = FontStretch("normal")
-        fun condensed() = FontStretch("condensed")
+        val condensed = FontStretch("condensed")
-        fun ultraCondensed() = FontStretch("ultra-condensed")
+        val ultraCondensed = FontStretch("ultra-condensed")
-        fun extraCondensed() = FontStretch("extra-condensed")
+        val extraCondensed = FontStretch("extra-condensed")
-        fun semiCondensed() = FontStretch("semi-condensed")
+        val semiCondensed = FontStretch("semi-condensed")
-        fun expanded() = FontStretch("expanded")
+        val expanded = FontStretch("expanded")
-        fun semiExpanded() = FontStretch("semi-expanded")
+        val semiExpanded = FontStretch("semi-expanded")
-        fun extraExpanded() = FontStretch("extra-expanded")
+        val extraExpanded = FontStretch("extra-expanded")
-        fun ultraExpanded() = FontStretch("ultra-expanded")
+        val ultraExpanded = FontStretch("ultra-expanded")
+        val initial = FontWeight("initial")
+        val inherit = FontWeight("inherit")
     }
 
 }
@@ -51,9 +55,11 @@ class FontStyle(
 ) : CssProperty(value) {
 
     companion object {
-        fun normal() = FontStyle("normal")
+        val normal = FontStyle("normal")
-        fun italic() = FontStyle("italic")
+        val italic = FontStyle("italic")
-        fun oblique() = FontStyle("oblique")
+        val oblique = FontStyle("oblique")
+        val initial = FontStyle("initial")
+        val inherit = FontStyle("inherit")
     }
 
 }
@@ -63,18 +69,74 @@ class FontWeight(
 ) : CssProperty(value) {
 
     companion object {
-        fun normal() = FontWeight("normal")
+        val normal = FontWeight("normal")
-        fun bold() = FontWeight("bold")
+        val bold = FontWeight("bold")
-        fun _100() = FontWeight("100")
+        val _100 = FontWeight("100")
-        fun _200() = FontWeight("200")
+        val _200 = FontWeight("200")
-        fun _300() = FontWeight("300")
+        val _300 = FontWeight("300")
-        fun _400() = FontWeight("400")
+        val _400 = FontWeight("400")
-        fun _500() = FontWeight("500")
+        val _500 = FontWeight("500")
-        fun _600() = FontWeight("600")
+        val _600 = FontWeight("600")
-        fun _700() = FontWeight("700")
+        val _700 = FontWeight("700")
-        fun _800() = FontWeight("800")
+        val _800 = FontWeight("800")
-        fun _900() = FontWeight("900")
+        val _900 = FontWeight("900")
+        val initial = FontWeight("initial")
+        val inherit = FontWeight("inherit")
     }
 
 }
 
+class FontKerning(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = FontKerning("auto")
+        val normal = FontKerning("normal")
+        val none = FontKerning("none")
+    }
+
+}
+
+class FontSizeAdjust(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = FontSizeAdjust("none")
+        val initial = FontSizeAdjust("initial")
+        val inherit = FontSizeAdjust("inherit")
+    }
+
+}
+
+class FontVariant(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val normal = FontVariant("normal")
+        val smallCaps = FontVariant("small-caps")
+        val initial = FontVariant("initial")
+        val inherit = FontVariant("inherit")
+    }
+
+}
+
+class FontVariantCaps(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val normal = FontVariantCaps("normal")
+        val smallCaps = FontVariantCaps("small-caps")
+        val allSmallCaps = FontVariantCaps("all-small-caps")
+        val petiteCaps = FontVariantCaps("petite-caps")
+        val allPetiteCaps = FontVariantCaps("all-petite-caps")
+        val unicase = FontVariantCaps("unicase")
+        val initial = FontVariantCaps("initial")
+        val inherit = FontVariantCaps("inherit")
+        val unset = FontVariantCaps("unset")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Grid.kt

@@ -0,0 +1,72 @@
+package nl.astraeus.css.properties
+
+
+class Grid(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = Grid("none")
+        val initial = Grid("initial")
+        val inherit = Grid("inherit")
+    }
+
+}
+
+class GridAuto(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = GridAuto("auto")
+        val maxContent = GridAuto("max-content")
+        val minContent = GridAuto("min-content")
+    }
+
+}
+
+class GridFlow(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val row = GridFlow("row")
+        val column = GridFlow("column")
+        val dense = GridFlow("dense")
+        val rowDense = GridFlow("row dense")
+        val columnDense = GridFlow("column dense")
+    }
+
+}
+
+class GridValue(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = GridValue("auto")
+
+        fun span(column: Int) = GridValue("span $column")
+        fun column(line: Int) = GridValue("$line")
+        fun row(line: Int) = GridValue("$line")
+    }
+
+}
+
+class TemplateRowColumn(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = GridValue("none")
+        val auto = GridValue("auto")
+        val maxContent = GridValue("max-content")
+        val minContent = GridValue("min-content")
+        val initial = GridValue("initial")
+        val inherit = GridValue("inherit")
+
+        fun length(length: Measurement) = GridValue(length.value)
+    }
+
+}
+

src/commonMain/kotlin/nl/astraeus/css/properties/Hyphens.kt

@@ -0,0 +1,15 @@
+package nl.astraeus.css.properties
+
+class Hyphens(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = Hyphens("none")
+        val manual = Hyphens("manual")
+        val auto = Hyphens("auto")
+        val initial = Hyphens("initial")
+        val inherit = Hyphens("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Image.kt

@@ -5,10 +5,11 @@ class Image(
 ) : CssProperty(value) {
 
     companion object {
+        val none = Image("none")
+        val initial = Image("initial")
+        val inherit = Image("inherit")
+
         fun url(url: String) = Image("url($url)")
-        fun none() = Image("none")
-        fun initial() = Image("initial")
-        fun inherit() = Image("inherit")
     }
 }
 
@@ -17,11 +18,12 @@ class ImageRepeat(
 ) : CssProperty(value) {
 
     companion object {
-        fun stretch(url: String) = Image("stretch")
+        val repeat = ImageRepeat("repeat")
-        fun repeat() = Image("repeat")
+        val round = ImageRepeat("round")
-        fun round() = Image("round")
+        val initial = ImageRepeat("initial")
-        fun initial() = Image("initial")
+        val inherit = ImageRepeat("inherit")
-        fun inherit() = Image("inherit")
+
+        fun stretch(url: String) = ImageRepeat("stretch")
     }
 
 }
@@ -31,14 +33,15 @@ class ImageSlice(
 ) : CssProperty(value) {
 
     companion object {
-        fun nr(nr: Int) = Image("$nr")
+        val repeat = ImageSlice("repeat")
-        fun perc(perc: Int) = Image("$perc%")
+        val fill = ImageSlice("fill")
-        fun perc(perc: Double) = Image("$perc%")
+        val initial = ImageSlice("initial")
-        fun stretch(url: String) = Image("stretch")
+        val inherit = ImageSlice("inherit")
-        fun repeat() = Image("repeat")
+
-        fun fill() = Image("fill")
+        fun nr(nr: Int) = ImageSlice("$nr")
-        fun initial() = Image("initial")
+        fun perc(perc: Int) = ImageSlice("$perc%")
-        fun inherit() = Image("inherit")
+        fun perc(perc: Double) = ImageSlice("$perc%")
+        fun stretch(url: String) = ImageSlice("stretch")
     }
 
 }
@@ -48,11 +51,12 @@ class ImageSource(
 ) : CssProperty(value) {
 
     companion object {
-        fun none() = ImageSource("none")
+        val none = ImageSource("none")
+        val initial = ImageSource("initial")
+        val inherit = ImageSource("inherit")
+
         fun text(txt: String) = ImageSource(txt)
         fun image(url: String) = ImageSource("'$url'")
-        fun initial() = ImageSource("initial")
-        fun inherit() = ImageSource("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/InitialInherit.kt

@@ -0,0 +1,12 @@
+package nl.astraeus.css.properties
+
+class InitialInherit(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val initial = InitialInherit("initial")
+        val inherit = InitialInherit("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Isolation.kt

@@ -0,0 +1,14 @@
+package nl.astraeus.css.properties
+
+class Isolation(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = Isolation("auto")
+        val isolate = Isolation("isolate")
+        val initial = Isolation("initial")
+        val inherit = Isolation("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/JustifyContent.kt

@@ -0,0 +1,17 @@
+package nl.astraeus.css.properties
+
+class JustifyContent(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val flexStart = JustifyContent("flex-start")
+        val flexEnd = JustifyContent("flex-end")
+        val center = JustifyContent("center")
+        val spaceBetween = JustifyContent("space-between")
+        val spaceAround = JustifyContent("space-around")
+        val initial = JustifyContent("initial")
+        val inherit = JustifyContent("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/LetterSpacing.kt

@@ -0,0 +1,13 @@
+package nl.astraeus.css.properties
+
+class LetterSpacing(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val normal = LetterSpacing("normal")
+        val initial = LetterSpacing("initial")
+        val inherit = LetterSpacing("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/ListStyle.kt

@@ -0,0 +1,48 @@
+package nl.astraeus.css.properties
+
+
+class ListStylePosition(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val inside = ListStylePosition("inside")
+        val outside = ListStylePosition("outside")
+        val initial = ListStylePosition("initial")
+        val inherit = ListStylePosition("inherit")
+    }
+
+}
+
+class ListStyleType(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val disc = ListStyleType("disc")
+        val armenian = ListStyleType("armenian")
+        val circle = ListStyleType("circle")
+        val cjkIdeographic = ListStyleType("cjk-ideographic")
+        val decimal = ListStyleType("decimal")
+        val decimalLeadingZero = ListStyleType("decimal-leading-zero")
+        val georgian = ListStyleType("georgian")
+        val hebrew = ListStyleType("hebrew")
+        val hiragana = ListStyleType("hiragana")
+        val hiraganaIroha = ListStyleType("hiragana-iroha")
+        val katakana = ListStyleType("katakana")
+        val katakanaIroha = ListStyleType("katakana-iroha")
+        val lowerAlpha = ListStyleType("lower-alpha")
+        val lowerGreek = ListStyleType("lower-greek")
+        val lowerLatin = ListStyleType("lower-latin")
+        val lowerRoman = ListStyleType("lower-roman")
+        val none = ListStyleType("none")
+        val square = ListStyleType("square")
+        val upperAlpha = ListStyleType("upper-alpha")
+        val upperGreek = ListStyleType("upper-greek")
+        val upperLatin = ListStyleType("upper-latin")
+        val upperRoman = ListStyleType("upper-roman")
+        val initial = ListStyleType("initial")
+        val inherit = ListStyleType("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt

@@ -5,18 +5,56 @@ open class Measurement(
 ) : CssProperty(value) {
 
     companion object {
-        fun auto() = Measurement("auto")
+        val auto = Measurement("auto")
-        fun initial() = Measurement("initial")
+        val initial = Measurement("initial")
-        fun inherit() = Measurement("inherit")
+        val inherit = Measurement("inherit")
-        fun normal() = Measurement("normal")
+        val normal = Measurement("normal")
-        fun px(nr: Int) = Measurement("${nr}px")
+
-        fun em(nr: Int) = Measurement("${nr}em")
+        fun px(nr: Int) = if (nr == 0) { Measurement("0") } else { Measurement("${nr}px") }
-        fun em(nr: Double) = Measurement("${nr}em")
+        fun px(nr: Double) = nr.px
-        fun perc(nr: Int) = Measurement("${nr}%")
+        fun em(nr: Int) = nr.em
-        fun perc(nr: Double) = Measurement("${nr}%")
+        fun em(nr: Double) = nr.em
-        fun pc(nr: Int) = Measurement("${nr}pc")
+        fun prc(nr: Int) = nr.prc
-        fun pc(nr: Double) = Measurement("${nr}pc")
+        fun prc(nr: Double) = nr.prc
-        fun cm(nr: Int) = Measurement("${nr}cm")
+        fun pc(nr: Int) = nr.pc
-        fun cm(nr: Double) = Measurement("${nr}cm")
+        fun pc(nr: Double) = nr.pc
+        fun cm(nr: Int) = nr.cm
+        fun cm(nr: Double) = nr.cm
+    }
+}
+
+val Int.px: Measurement
+    get() = Measurement("${this}${if (this == 0) { "" } else { "px"}}")
+val Int.em: Measurement
+    get() = Measurement("${this}${if (this == 0) { "" } else { "em"}}")
+val Int.rem: Measurement
+    get() = Measurement("${this}${if (this == 0) { "" } else { "rem"}}")
+val Int.prc: Measurement
+    get() = Measurement("${this}%")
+val Int.pc: Measurement
+    get() = Measurement("${this}pc")
+val Int.cm: Measurement
+    get() = Measurement("${this}cm")
+fun Int.px(): Measurement = Measurement.px(this)
+
+val Double.px: Measurement
+    get() = Measurement("${this}px")
+val Double.em: Measurement
+    get() = Measurement("${this}em")
+val Double.rem: Measurement
+    get() = Measurement("${this}rem")
+val Double.prc: Measurement
+    get() = Measurement("${this}%")
+val Double.pc: Measurement
+    get() = Measurement("${this}pc")
+val Double.cm: Measurement
+    get() = Measurement("${this}cm")
+fun Double.px(): Measurement = Measurement.px(this)
+
+open class LineHeight(value: String) : CssProperty(value) {
+    companion object {
+        val normal = LineHeight("normal")
+        val initial = LineHeight("initial")
+        val inherit = LineHeight("inherit")
     }
 }

src/commonMain/kotlin/nl/astraeus/css/properties/MixBlendMode.kt

@@ -0,0 +1,25 @@
+package nl.astraeus.css.properties
+
+
+class MixBlendMode(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val normal = MixBlendMode("normal")
+        val multiply = MixBlendMode("multiply")
+        val screen = MixBlendMode("screen")
+        val overlay = MixBlendMode("overlay")
+        val darken = MixBlendMode("darken")
+        val lighten = MixBlendMode("lighten")
+        val colorDodge = MixBlendMode("color-dodge")
+        val colorBurn = MixBlendMode("color-burn")
+        val difference = MixBlendMode("difference")
+        val exclusion = MixBlendMode("exclusion")
+        val hue = MixBlendMode("hue")
+        val saturation = MixBlendMode("saturation")
+        val color = MixBlendMode("color")
+        val luminosity = MixBlendMode("luminosity")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/ObjectFit.kt

@@ -0,0 +1,17 @@
+package nl.astraeus.css.properties
+
+class ObjectFit(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val fill = ObjectFit("fill")
+        val contain = ObjectFit("contain")
+        val cover = ObjectFit("cover")
+        val scaleDown = ObjectFit("scale-down")
+        val none = ObjectFit("none")
+        val initial = ObjectFit("initial")
+        val inherit = ObjectFit("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/OutlineWidth.kt

@@ -0,0 +1,14 @@
+package nl.astraeus.css.properties
+
+class OutlineWidth(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val thin = OutlineWidth("thin")
+        val medium = OutlineWidth("medium")
+        val thick = OutlineWidth("thick")
+        val initial = BorderWidth("initial")
+        val inherit = BorderWidth("inherit")
+    }
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Overflow.kt

@@ -0,0 +1,15 @@
+package nl.astraeus.css.properties
+
+class Overflow(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val visible = Overflow("visible")
+        val hidden = Overflow("hidden")
+        val scroll = Overflow("scroll")
+        val auto = Overflow("auto")
+        val initial = BorderWidth("initial")
+        val inherit = BorderWidth("inherit")
+    }
+}

src/commonMain/kotlin/nl/astraeus/css/properties/PageBreak.kt

@@ -0,0 +1,17 @@
+package nl.astraeus.css.properties
+
+class PageBreak(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = PageBreak("auto")
+        val always = PageBreak("always")
+        val avoid = PageBreak("avoid")
+        val left = PageBreak("left")
+        val right = PageBreak("right")
+        val initial = PageBreak("initial")
+        val inherit = PageBreak("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Perspective.kt

@@ -0,0 +1,13 @@
+package nl.astraeus.css.properties
+
+class Perspective(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = Perspective("none")
+        val initial = Perspective("initial")
+        val inherit = Perspective("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/PointerEvents.kt

@@ -0,0 +1,14 @@
+package nl.astraeus.css.properties
+
+class PointerEvents(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = PointerEvents("auto")
+        val none = PointerEvents("none")
+        val initial = PointerEvents("initial")
+        val inherit = PointerEvents("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Position.kt

@@ -0,0 +1,17 @@
+package nl.astraeus.css.properties
+
+class Position(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val static = Position("static")
+        val absolute = Position("absolute")
+        val fixed = Position("fixed")
+        val relative = Position("relative")
+        val sticky = Position("sticky")
+        val initial = Position("initial")
+        val inherit = Position("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Punctuation.kt

@@ -0,0 +1,17 @@
+package nl.astraeus.css.properties
+
+class HangingPunctuation(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = HangingPunctuation("none")
+        val first = HangingPunctuation("first")
+        val last = HangingPunctuation("last")
+        val allowEnd = HangingPunctuation("allow-end")
+        val forceEnd = HangingPunctuation("force-end")
+        val initial = HangingPunctuation("initial")
+        val inherit = HangingPunctuation("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Resize.kt

@@ -0,0 +1,16 @@
+package nl.astraeus.css.properties
+
+class Resize(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = Resize("none")
+        val both = Resize("both")
+        val horizontal = Resize("horizontal")
+        val vertical = Resize("vertical")
+        val initial = Resize("initial")
+        val inherit = Resize("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/ScrollBehavior.kt

@@ -0,0 +1,14 @@
+package nl.astraeus.css.properties
+
+class ScrollBehavior(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = ScrollBehavior("auto")
+        val smooth = ScrollBehavior("smooth")
+        val initial = ScrollBehavior("initial")
+        val inherit = ScrollBehavior("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Span.kt

@@ -5,10 +5,10 @@ class Span(
 ) : CssProperty(value) {
 
     companion object {
-        fun none() = Clip("none")
+        val none = Clip("none")
-        fun all() = Clip("all")
+        val all = Clip("all")
-        fun initial() = Clip("initial")
+        val initial = Clip("initial")
-        fun inherit() = Clip("inherit")
+        val inherit = Clip("inherit")
     }
 
 }

src/commonMain/kotlin/nl/astraeus/css/properties/TableLayout.kt

@@ -0,0 +1,14 @@
+package nl.astraeus.css.properties
+
+class TableLayout(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = TableLayout("auto")
+        val fixed = TableLayout("fixed")
+        val initial = TableLayout("initial")
+        val inherit = TableLayout("auto")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/TextAlign.kt

@@ -0,0 +1,16 @@
+package nl.astraeus.css.properties
+
+class TextAlign(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val left = TextAlign("left")
+        val right = TextAlign("right")
+        val center = TextAlign("center")
+        val justify = TextAlign("justify")
+        val initial = TextAlign("initial")
+        val inherit = TextAlign("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/TextAlignLast.kt

@@ -0,0 +1,19 @@
+package nl.astraeus.css.properties
+
+class TextAlignLast(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = TextAlignLast("auto")
+        val left = TextAlignLast("left")
+        val right = TextAlignLast("right")
+        val center = TextAlignLast("center")
+        val justify = TextAlignLast("justify")
+        val start = TextAlignLast("start")
+        val end = TextAlignLast("end")
+        val initial = TextAlignLast("initial")
+        val inherit = TextAlignLast("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/TextDecorationLine.kt

@@ -0,0 +1,16 @@
+package nl.astraeus.css.properties
+
+class TextDecorationLine(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = TextDecorationLine("none")
+        val underline = TextDecorationLine("underline")
+        val overline = TextDecorationLine("overline")
+        val lineThrough = TextDecorationLine("line-through")
+        val initial = TextDecorationLine("initial")
+        val inherit = TextDecorationLine("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/TextDecorationStyle.kt

@@ -0,0 +1,17 @@
+package nl.astraeus.css.properties
+
+class TextDecorationStyle(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val solid = TextDecorationStyle("solid")
+        val double = TextDecorationStyle("double")
+        val dotted = TextDecorationStyle("dotted")
+        val dashed = TextDecorationStyle("dashed")
+        val wavy = TextDecorationStyle("wavy")
+        val initial = TextDecorationStyle("initial")
+        val inherit = TextDecorationStyle("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/TextJustify.kt

@@ -0,0 +1,16 @@
+package nl.astraeus.css.properties
+
+class TextJustify(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = TextJustify("auto")
+        val interWord = TextJustify("inter-word")
+        val interCharacter = TextJustify("inter-character")
+        val none = TextJustify("none")
+        val initial = TextJustify("initial")
+        val inherit = TextJustify("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/TextTransform.kt

@@ -0,0 +1,16 @@
+package nl.astraeus.css.properties
+
+class TextTransform(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = TextTransform("none")
+        val capitalize = TextTransform("capitalize")
+        val uppercase = TextTransform("uppercase")
+        val lowercase = TextTransform("lowercase")
+        val initial = TextTransform("initial")
+        val inherit = TextTransform("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/TimingFunction.kt

@@ -0,0 +1,22 @@
+package nl.astraeus.css.properties
+
+class TimingFunction(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val linear = TimingFunction("linear")
+        val ease = TimingFunction("ease")
+        val easeIn = TimingFunction("ease-in")
+        val easeOut = TimingFunction("ease-out")
+        val easeInOut = TimingFunction("ease-in-out")
+        val stepStart = TimingFunction("step-start")
+        val stepEnd = TimingFunction("step-end")
+        val initial = TimingFunction("initial")
+        val inherit = TimingFunction("inherit")
+
+        fun steps(steps: Int, start: Boolean) = TimingFunction("steps($steps, ${if (start) { "start" } else { "end" }}")
+        fun cubicBezier(n1: Double, n2: Double, n3: Double, n4: Double) = TimingFunction("cubic-bezier($n1, $n2, $n3, $n4)")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Transform.kt

@@ -0,0 +1,49 @@
+package nl.astraeus.css.properties
+
+class Transform(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val none = Transform("none")
+        val initial = Transform("initial")
+        val inherit = Transform("inherit")
+
+        fun matrix(
+            n1: Double,
+            n2: Double,
+            n3: Double,
+            n4: Double,
+            n5: Double,
+            n6: Double
+        ) = Transform("matrix($n1, $n2, $n3, $n4, $n5, $n6)")
+        fun matrix3d(
+            n01: Double, n02: Double, n03: Double, n04: Double,
+            n05: Double, n06: Double, n07: Double, n08: Double,
+            n09: Double, n10: Double, n11: Double, n12: Double,
+            n13: Double, n14: Double, n15: Double, n16: Double
+        ) = Transform(
+            "matrix3d($n01, $n02, $n03, $n04, $n05, $n06, $n07, $n08, $n09, $n10, $n11, $n12, $n13, $n14, $n15, $n16)"
+        )
+        fun translate(x: Double, y: Double) = Transform("translate($x, $y)")
+        fun translate3d(x: Double, y: Double, z: Double) = Transform("translate3d($x, $y, $z)")
+        fun translateX(x: Double) = Transform("translateX($x)")
+        fun translateY(y: Double) = Transform("translateY($y)")
+        fun translateZ(z: Double) = Transform("translateZ($z)")
+        fun scale(x: Double, y: Double) = Transform("scale($x, $y)")
+        fun scale3d(x: Double, y: Double, z: Double) = Transform("scale3d($x, $y, $z)")
+        fun scaleX(x: Double) = Transform("scaleX($x)")
+        fun scaleY(y: Double) = Transform("scaleY($y)")
+        fun scaleZ(z: Double) = Transform("scaleZ($z)")
+        fun rotate(angle: Double) = Transform("rotate($angle)")
+        fun rotate3d(x: Double, y: Double, z: Double, angle: Double) = Transform("scale3d($x, $y, $z, $angle")
+        fun rotateX(x: Double) = Transform("rotateX($x)")
+        fun rotateY(y: Double) = Transform("rotateY($y)")
+        fun rotateZ(z: Double) = Transform("rotateZ($z)")
+        fun skew(x: Double, y: Double) = Transform("skew($x, $y)")
+        fun skewX(x: Double) = Transform("skew($x)")
+        fun skewY(y: Double) = Transform("skew($y)")
+        fun perspective(length: Measurement) = Transform("perspective(${length.css()})")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/TransformStyle.kt

@@ -0,0 +1,14 @@
+package nl.astraeus.css.properties
+
+class TransformStyle(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val flat = TransformStyle("flat")
+        val preserve3d = TransformStyle("preserve-3d")
+        val initial = TransformStyle("initial")
+        val inherit = TransformStyle("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/UnicodeBidi.kt

@@ -0,0 +1,15 @@
+package nl.astraeus.css.properties
+
+class UnicodeBidi(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val normal = UnicodeBidi("normal")
+        val embed = UnicodeBidi("embed")
+        val bidiOverride = UnicodeBidi("bidi-override")
+        val initial = UnicodeBidi("initial")
+        val inherit = UnicodeBidi("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/UserSelect.kt

@@ -0,0 +1,14 @@
+package nl.astraeus.css.properties
+
+class UserSelect(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = UserSelect("auto")
+        val none = UserSelect("none")
+        val text = UserSelect("text")
+        val all = UserSelect("all")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/VerticalAlign.kt

@@ -0,0 +1,20 @@
+package nl.astraeus.css.properties
+
+class VerticalAlign(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val baseline = VerticalAlign("baseline")
+        val sub = VerticalAlign("sub")
+        val _super = VerticalAlign("super")
+        val top = VerticalAlign("top")
+        val textTop = VerticalAlign("text-top")
+        val middle = VerticalAlign("middle")
+        val bottom = VerticalAlign("bottom")
+        val textBottom = VerticalAlign("text-bottom")
+        val initial = VerticalAlign("initial")
+        val inherit = VerticalAlign("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/Visibility.kt

@@ -0,0 +1,15 @@
+package nl.astraeus.css.properties
+
+class Visibility(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val visible = Visibility("visible")
+        val hidden = Visibility("hidden")
+        val collapse = Visibility("collapse")
+        val initial = Visibility("initial")
+        val inherit = Visibility("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/WhiteSpace.kt

@@ -0,0 +1,17 @@
+package nl.astraeus.css.properties
+
+class WhiteSpace(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val normal = WhiteSpace("normal")
+        val nowrap = WhiteSpace("nowrap")
+        val pre = WhiteSpace("pre")
+        val preLine = WhiteSpace("pre-line")
+        val preWrap = WhiteSpace("pre-wrap")
+        val initial = WhiteSpace("initial")
+        val inherit = WhiteSpace("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/WordBreak.kt

@@ -0,0 +1,16 @@
+package nl.astraeus.css.properties
+
+class WordBreak(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val normal = WordBreak("normal")
+        val breakAll = WordBreak("break-all")
+        val keepAll = WordBreak("keep-all")
+        val breakWord = WordBreak("break-word")
+        val initial = WordBreak("initial")
+        val inherit = WordBreak("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/WordSpacing.kt

@@ -0,0 +1,13 @@
+package nl.astraeus.css.properties
+
+class WordSpacing(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val normal = WordSpacing("normal")
+        val initial = WordSpacing("initial")
+        val inherit = WordSpacing("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/WordWrap.kt

@@ -0,0 +1,14 @@
+package nl.astraeus.css.properties
+
+class WordWrap(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val normal = WordWrap("normal")
+        val breakWord = WordWrap("break-word")
+        val initial = WordWrap("initial")
+        val inherit = WordWrap("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/WritingMode.kt

@@ -0,0 +1,13 @@
+package nl.astraeus.css.properties
+
+class WritingMode(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val horizontalTb = WritingMode("horizontal-tb")
+        val verticalRl = WritingMode("vertical-rl")
+        val verticalLr = WritingMode("vertical-lr")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/properties/ZIndex.kt

@@ -0,0 +1,13 @@
+package nl.astraeus.css.properties
+
+class ZIndex(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        val auto = ZIndex("auto")
+        val initial = ZIndex("initial")
+        val inherit = ZIndex("inherit")
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/style/CssFunctions.kt

@@ -0,0 +1,11 @@
+package nl.astraeus.css.style
+
+import nl.astraeus.css.properties.Color
+
+object CssFunctions {
+
+    fun darken(color: Color, percentage: Int): Color {
+        return color
+    }
+
+}

src/commonMain/kotlin/nl/astraeus/css/style/FontFace.kt

@@ -3,25 +3,36 @@ package nl.astraeus.css.style
 import nl.astraeus.css.properties.*
 
 @CssTagMarker
-open class FontFace(
+open class FontFace : CssGenerator() {
-    var fontFamily: TextProperty? = null,
-    var fontSize: FontSize? = null,
-    var src: TextProperty? = null,
-    var fontStretch: FontStretch? = null,
-    var fontStyle: FontStyle? = null,
-    var fontWeight: FontWeight? = null,
-    var unicodeRange: TextProperty? = null
-) : CssGenerator() {
 
     override fun getValidator(name: String) = null
 
-    override fun getMapping(): Map<String, Any?> = mapOf(
+    fun fontFamily(font: String) {
-        "font-family" to fontFamily,
+        props["font-family"] = listOf(CssProperty(font))
-        "font-size" to fontSize,
+    }
-        "src" to src,
+
-        "font-stretch" to fontStretch,
+    fun fontSize(size: FontSize) {
-        "font-style" to fontStyle,
+        props["font-size"] = listOf(size)
-        "font-weight" to fontWeight,
+    }
-        "unicode-range" to unicodeRange
+
-    )
+    fun src(src: String) {
+        props["src"] = listOf(CssProperty(src))
+    }
+
+    fun fontStretch(stretch: FontStretch) {
+        props["font-stretch"] = listOf(stretch)
+    }
+
+    fun fontStyle(style: FontStyle) {
+        props["font-style"] = listOf(style)
+    }
+
+    fun fontWeight(weight: FontWeight) {
+        props["font-weight"] = listOf(weight)
+    }
+
+    fun unicodeRange(unicodeRange: String) {
+        props["unicode-range"] = listOf(CssProperty(unicodeRange))
+    }
+
 }

src/commonMain/kotlin/nl/astraeus/css/style/KeyFrames.kt

@@ -0,0 +1,16 @@
+package nl.astraeus.css.style
+
+@CssTagMarker
+open class KeyFrames : CssGenerator() {
+    val frames: MutableMap<Int, Css> = mutableMapOf()
+
+    override fun getValidator(name: String): List<Validator>? = listOf()
+
+    fun percentage(percentage: Int, style: Css) {
+        val css = Style()
+
+        style(css)
+
+        frames[percentage] = style
+    }
+}

src/commonMain/kotlin/nl/astraeus/css/style/Style.kt

@@ -1,259 +1,246 @@
 package nl.astraeus.css.style
 
 import nl.astraeus.css.properties.*
-import nl.astraeus.logging.log
 
 typealias Css = Style.() -> Unit
 
+typealias ConditionalCss = ConditionalStyle.() -> Unit
+
 @DslMarker
 annotation class CssTagMarker
 
-abstract class CssGenerator {
+private fun prp(vararg css: CssValue): List<CssProperty> {
-    val definitions: MutableMap<String, Css> = mutableMapOf()
+    val result = mutableListOf<CssProperty>()
-    val extentions: MutableList<Css> = mutableListOf()
 
-    abstract fun getMapping(): Map<String, Any?>
+    for (c in css) {
+        result.add(CssProperty(c.css()))
+    }
+
+    return result
+}
+
+private fun prp(vararg css: String): List<CssProperty> {
+    val result = mutableListOf<CssProperty>()
+
+    for (c in css) {
+        result.add(CssProperty(c))
+    }
+
+    return result
+}
+
+abstract class CssGenerator {
+    val definitions: MutableMap<String, MutableList<Css>> = LinkedHashMap()
+    val props: MutableMap<String, List<CssProperty>> = mutableMapOf()
 
     abstract fun getValidator(name: String): List<Validator>?
 
-    private fun propertyCss(indent: String, name: String, prop: CssProperty, minified: Boolean): String {
+    private fun propertyCss(indent: String, name: String, props: List<CssProperty>): String {
-        getValidator(name)?.forEach {
-            if (!it.validate(prop)) {
-                log.warn { "Validate error '$name' - ${it.getMessage(name)}" }
-            }
-        }
-
-        return if (!minified) {
-            val paddedName = StringBuilder()
-            paddedName.append(indent)
-            paddedName.append(name)
-            paddedName.append(":")
-            while (paddedName.length < 32) {
-                paddedName.append(' ')
-            }
-            "$paddedName${prop.css()};\n"
-        } else {
-            "$name:${prop.css()};"
-        }
-    }
-
-    private fun propertyCss(indent: String, name: String, props: List<*>, minified: Boolean): String {
         val builder = StringBuilder()
 
         getValidator(name)?.forEach {
-            if (!it.validate(props as List<CssProperty>)) {
+            if (!it.validate(props)) {
-                log.warn { "Validate error '$name' - ${it.getListMessage(name)}" }
+                println( "Validate error '$name' - ${it.getMessage(name)}")
             }
         }
 
-        for ((index, prop) in props.withIndex()) {
+        for (prop in props) {
-            if (prop is CssProperty) {
+            if (builder.isNotEmpty()) {
-                getValidator(name)?.forEach {
+                builder.append(" ")
-                    if (!it.validate(prop)) {
-                        log.warn { "Validate error '$name' - ${it.getMessage(name)}" }
-                    }
-                }
-                if (builder.isNotEmpty()) {
-                    builder.append(",")
-                    if (!minified) {
-                        builder.append(" ")
-                    }
-                }
-                builder.append(prop.css())
             }
+            builder.append(prop.css())
         }
 
-        return if (!minified) {
+        val paddedName = StringBuilder()
-            val paddedName = StringBuilder()
+        paddedName.append(indent)
-            paddedName.append(indent)
+        paddedName.append(name)
-            paddedName.append(name)
+        paddedName.append(":")
-            paddedName.append(":")
+        while (paddedName.length < 32) {
-            while (paddedName.length < 32) {
+            paddedName.append(' ')
-                paddedName.append(' ')
-            }
-            "$paddedName$builder;\n"
-        } else {
-            "$name:$builder;"
         }
+        return "$paddedName$builder;\n"
     }
 
-    fun generatePropertyCss(indent: String, minified: Boolean): String {
+    fun generatePropertyCss(indent: String): String {
         val builder = StringBuilder()
 
-        for ((name, prop) in getMapping()) {
+        for ((name, prop) in props) {
-            if (prop is List<*> && prop.isNotEmpty()) {
+            builder.append(propertyCss(indent, name, prop))
-                builder.append(propertyCss(indent, name, prop, minified))
-            } else if (prop is CssProperty) {
-                builder.append(propertyCss(indent, name, prop, minified))
-            }
         }
 
         return builder.toString()
     }
 
-    open fun generateCss(namespace: String = "", indent: String = "  ", minified: Boolean = false): String {
+    open fun generateCss(
+        namespace: String = "",
+        indent: String = "",
+        minified: Boolean = false,
+        warnOnRedeclaration: Boolean = true
+    ): String {
         val builder = StringBuilder()
 
-        for ((name, prop) in definitions) {
+        for (name in definitions.keys) {
+            val props = definitions[name]!!
             val css = StringBuilder()
 
+            if (warnOnRedeclaration && props.size > 1) {
+                css.append("/* style '$name' is defined ${props.size} times! */\n")
+            }
+
             val finalStyle = Style()
 
-            prop(finalStyle)
+            for (prop in props) {
+                prop(finalStyle)
+            }
 
-            css.append(finalStyle.generatePropertyCss(indent, minified))
+            css.append(finalStyle.generatePropertyCss("  $indent"))
 
             if (css.isNotBlank()) {
-                builder.append("\n$namespace $name".trim())
+                builder.append("\n$namespace$name".trim())
-                if (!minified) {
+
-                    builder.append(" ")
+                //builder.append("  $indent")
-                }
+                builder.append(" {\n")
-                builder.append("{")
-                if (!minified) {
-                    builder.append("\n")
-                }
 
                 finalStyle.fontFace?.let { ff ->
-                    if (!minified) {
+                    builder.append("  $indent")
-                        builder.append(indent)
+                    builder.append("@font-face {\n")
-                    }
+                    builder.append(ff.generatePropertyCss( "    $indent"))
-                    builder.append("@font-face {")
+                    builder.append("  $indent")
-                    if (!minified) {
+                    builder.append("}\n")
-                        builder.append("\n")
+                }
-                    }
+
-                    builder.append(ff.generatePropertyCss("  $indent", minified))
+                finalStyle.keyFrames.let { kf ->
-                    builder.append(indent)
+                    kf.keys.sorted().forEach { frameName ->
-                    builder.append("}")
+                        val css = kf[frameName]
-                    if (!minified) {
+
-                        builder.append("\n")
+                        builder.append("  $indent")
+                        builder.append("@keyframes ")
+                        builder.append(frameName)
+                        builder.append(" {\n")
+                        css?.let { css ->
+                            for ((nr, style) in css.frames) {
+                                builder.append("    $indent")
+                                builder.append("${nr}% ")
+                                builder.append("    $indent")
+                                builder.append("{\n")
+
+                                val finalStyle = Style()
+
+                                style(finalStyle)
+
+                                builder.append(finalStyle.generatePropertyCss("      $indent"))
+
+                                builder.append("    $indent")
+                                builder.append("}\n")
+                            }
+
+                            builder.append("  $indent")
+                            builder.append("}\n")
+                        }
                     }
                 }
 
                 builder.append(css)
-                builder.append("}")
+                builder.append("}\n\n")
-                if (!minified) {
+            }
-                    builder.append("\n\n")
+
+            builder.append(finalStyle.generateCss("$namespace$name".trim(), indent))
+        }
+
+        if (this is ConditionalStyle) {
+            this.media.let { mq ->
+                mq.keys.sorted().forEach { mediaName ->
+                    val css = mq[mediaName]
+
+                    builder.append(indent)
+                    builder.append("@media ")
+                    builder.append(mediaName)
+                    builder.append(" {\n")
+                    css?.let { css ->
+                        val mediaStyle = ConditionalStyle()
+
+                        css(mediaStyle)
+
+                        builder.append(mediaStyle.generateCss("", "  $indent"))
+                    }
+
+                    builder.append(indent)
+                    builder.append("}\n")
                 }
             }
 
-            builder.append(finalStyle.generateCss( "$namespace $name".trim(), indent, minified))
+            this.supports.let { mq ->
+                mq.keys.sorted().forEach { mediaName ->
+                    val css = mq[mediaName]
+
+                    builder.append(indent)
+                    builder.append("@supports ")
+                    builder.append(mediaName)
+                    builder.append(" {\n")
+                    css?.let { css ->
+                        val mediaStyle = ConditionalStyle()
+
+                        css(mediaStyle)
+
+                        builder.append(mediaStyle.generateCss("","  $indent"))
+                    }
+
+                    builder.append(indent)
+                    builder.append("}\n")
+                }
+            }
         }
 
-        return builder.toString()
+        return if (minified) {
+            val stripped = StringBuilder()
+            val skip = arrayOf(' ', '\t', '\n', '\r')
+            for (char in builder) {
+                if (!skip.contains(char)) {
+                    stripped.append(char)
+                }
+            }
+            stripped.toString();
+        } else {
+            builder.toString()
+        }
     }
 }
 
-@CssTagMarker
+interface DescriptionProvider {
-open class Style(
+    fun description(): String
-    var alignContent: AlignContent? = null,
+}
-    var alignItems: AlignItems? = null,
-    var alignSelf: AlignSelf? = null,
-    var all: All? = null,
-    var animation: TextProperty? = null,
-    var animationDelay: List<DelayDuration>? = null,
-    var animationDirection: List<AnimationDirection>? = null,
-    var animationDuration: List<DelayDuration>? = null,
-    var animationFillMode: List<AnimationFillMode>? = null,
-    var animationIterationCount: List<Count>? = null,
-    var animationFrame: AnimationFrame? = null,
-    var animationName: List<TextProperty>? = null,
-    var animationPlayState: List<AnimationPlayState>? = null,
-    var animationTimingFunction: List<AnimationTimingFunction>? = null,
-    var backfaceVisibility: BackfaceVisibility? = null,
-    var background: TextProperty? = null,
-    var backgroundAttachment: BackgroundAttachment? = null,
-    var backgroundBlendMode: BackgroundBlendMode? = null,
-    var backgroundClip: ClipOrigin? = null,
-    var backgroundColor: Color? = null,
-    var backgroundImage: Image? = null,
-    var backgroundOrigin: ClipOrigin? = null,
-    var backgroundPosition: List<BackgroundPosition>? = null,
-    var backgroundRepeat: List<BackgroundRepeat>? = null,
-    var backgroundSize: List<BackgroundSize>? = null,
-    var border: TextProperty? = null,
-    var borderBottom: TextProperty? = null,
-    var borderBottomColor: Color? = null,
-    var borderBottomLeftRadius: List<BorderRadius>? = null,
-    var borderBottomRightRadius: List<BorderRadius>? = null,
-    var borderBottomStyle: RuleBorderStyle? = null,
-    var borderBottomWidth: BorderWidth? = null,
-    var borderCollapse: BorderCollapse? = null,
-    var borderColor: List<Color>? = null,
-    var borderImage: TextProperty? = null,
-    var borderImageOutset: Length? = null,
-    var borderImageRepeat: List<ImageRepeat>? = null,
-    var borderImageSlice: List<ImageSlice>? = null,
-    var borderImageSource: List<ImageSource>? = null,
-    var borderImageWidth: List<BorderImageWidth>? = null,
-    var borderLeft: TextProperty? = null,
-    var borderLeftColor: Color? = null,
-    var borderLeftStyle: RuleBorderStyle? = null,
-    var borderLeftWidth: BorderWidth? = null,
-    var borderRadius: BorderRadius? = null,
-    var borderRight: TextProperty? = null,
-    var borderRightColor: Color? = null,
-    var borderRightStyle: RuleBorderStyle? = null,
-    var borderRightWidth: BorderWidth? = null,
-    var borderSpacing: List<BorderSpacing>? = null,
-    var borderStyle: List<RuleBorderStyle>? = null,
-    var borderTop: TextProperty? = null,
-    var borderTopColor: Color? = null,
-    var borderTopLeftRadius: BorderRadius? = null,
-    var borderTopRightRadius: BorderRadius? = null,
-    var borderTopStyle: RuleBorderStyle? = null,
-    var borderTopWidth: BorderWidth? = null,
-    var bottom: Measurement? = null,
-    var boxDecorationBreak: BoxDecorationBreak? = null,
-    var boxShadow: BoxShadow? = null,
-    var boxSizing: BoxSizing? = null,
-    var breakAfter: Break? = null,
-    var breakBefore: Break? = null,
-    var breakInside: Break? = null,
-    var captionSide: CaptionSide? = null,
-    var caretColor: Color? = null,
-    //var charset: TextProperty? = null,
-    var clear: Clear? = null,
-    var clip: Clip? = null,
-    var clipPath: ClipPath? = null,
-    var columnCount: Count? = null,
-    var columnFill: Fill? = null,
-    var columnGap: Measurement? = null,
-    var columnRule: TextProperty? = null,
-    var columnRuleColor: Color? = null,
-    var columnRuleStyle: RuleBorderStyle? = null,
-    var columnRuleWidth: Measurement? = null,
-    var columnSpan: Span? = null,
-    var columnWidth: Measurement? = null,
-    var columns: TextProperty? = null,
-    var content: Content? = null,
-    var counterIncrement: TextProperty? = null,
-    var counterReset: TextProperty? = null,
-    var cursor: TextProperty? = null,
-    var direction: Direction? = null,
-    var display: Display? = null,
-    var emptyCells: EmptyCells? = null,
-    var filter: TextProperty? = null,
-    var flex: TextProperty? = null,
-    var flexBasis: Measurement? = null,
-    var flexDirection: FlexDirection? = null,
-    var flexFlow: TextProperty? = null,
-    var flexGrow: FlexGrowShrink? = null,
-    var flexShrink: FlexGrowShrink? = null,
-    var flexWrap: FlexWrap? = null,
-    var float: Float? = null,
-    var font: TextProperty? = null,
 
-    var color: Color? = null,
+class ValueDescriptionProvider(
-    var fontFamily: TextProperty? = null,
+    val value: String
-    var fontSize: FontSize? = null,
+) : DescriptionProvider {
-    var height: Measurement? = null,
+
-    var left: Measurement? = null,
+    override fun description() = value
-    var top: Measurement? = null,
+
-    var transitionDelay: DelayDuration? = null,
+}
-    var transitionDuration: DelayDuration? = null,
+
-    var width: Measurement? = null
+fun id(name: String) : DescriptionProvider = ValueDescriptionProvider("#$name")
-) : CssGenerator() {
+fun cls(name: String) : DescriptionProvider = ValueDescriptionProvider(".$name")
+fun attr(name: String) : DescriptionProvider = ValueDescriptionProvider("[$name]")
+fun attrEquals(name: String, value: String) : DescriptionProvider = ValueDescriptionProvider("[$name=$value]")
+fun attrContains(name: String, value: String) : DescriptionProvider = ValueDescriptionProvider("[$name*=$value]")
+fun attrEntriesContain(name: String, value: String) : DescriptionProvider = ValueDescriptionProvider("[$name~=$value]")
+fun attrEndsWith(name: String, value: String) : DescriptionProvider = ValueDescriptionProvider("[$name$=$value]")
+fun attrStartsWith(name: String, value: String) : DescriptionProvider = ValueDescriptionProvider("[$name^=$value]")
+
+fun id(name: DescriptionProvider) = ValueDescriptionProvider("#${name.description()}")
+fun cls(name: DescriptionProvider) : DescriptionProvider = ValueDescriptionProvider(".${name.description()}")
+fun attr(name: DescriptionProvider) : DescriptionProvider = ValueDescriptionProvider("[${name.description()}]")
+fun attrEquals(name: DescriptionProvider, value: String) : DescriptionProvider = ValueDescriptionProvider("[${name.description()}=$value]")
+fun attrContains(name: DescriptionProvider, value: String) : DescriptionProvider = ValueDescriptionProvider("[${name.description()}*=$value]")
+fun attrEntriesContain(name: DescriptionProvider, value: String) : DescriptionProvider = ValueDescriptionProvider("[${name.description()}~=$value]")
+fun attrEndsWith(name: DescriptionProvider, value: String) : DescriptionProvider = ValueDescriptionProvider("[${name.description()}$=$value]")
+fun attrStartsWith(name: DescriptionProvider, value: String) : DescriptionProvider = ValueDescriptionProvider("[${name.description()}^=$value]")
+
+@CssTagMarker
+open class Style : CssGenerator() {
     var fontFace: FontFace? = null
+    var keyFrames: MutableMap<String, KeyFrames> = mutableMapOf()
+
     private val validators = mapOf<String, List<Validator>>(
         "background-position" to listOf(InitialInheritSingleValue()),
         "background-size" to listOf(MaxCountValidator(2)),
@@ -261,6 +248,8 @@ open class Style(
             MaxCountValidator(4),
             InitialInheritSingleValue()
         ),
+
+        "animation-iteration-mode" to listOf(MaxCountValidator(4)),
         "animation-timing-function" to listOf(MaxCountValidator(4)),
         "border-image-repeat" to listOf(MaxCountValidator(2)),
         "border-image-slice" to listOf(MaxCountValidator(4)),
@@ -270,122 +259,415 @@ open class Style(
 
     override fun getValidator(name: String) = validators[name]
 
-    override fun getMapping(): Map<String, Any?> = mapOf(
+    private fun addStyle(selector: String, style: Css) {
-        "align-content" to alignContent,
+        definitions[selector] = definitions[selector] ?: mutableListOf()
-        "align-items" to alignItems,
+        definitions[selector]?.add(style)
-        "align-self" to alignSelf,
+    }
-        "all" to all,
-        "animation" to animation,
-        "animation-delay" to animationDelay,
-        "animation-direction" to animationDirection,
-        "animation-duration" to animationDuration,
-        "animation-fill-mode" to animationFillMode,
-        "animation-iteration-count" to animationIterationCount,
-        "animation-frame" to animationFrame,
-        "animation-name" to animationName,
-        "animation-play-state" to animationPlayState,
-        "animation-timing-function" to animationTimingFunction,
-        "backface-visibility" to backfaceVisibility,
-        "background" to background,
-        "background-attachment" to backgroundAttachment,
-        "background-blend-mode" to backgroundBlendMode,
-        "background-clip" to backgroundClip,
-        "background-color" to backgroundColor,
-        "background-image" to backgroundImage,
-        "background-origin" to backgroundOrigin,
-        "background-position" to backgroundPosition,
-        "background-repeat" to backgroundRepeat,
-        "background-size" to backgroundSize,
-        "border" to border,
-        "border-bottom" to borderBottom,
-        "border-bottom-color" to borderBottomColor,
-        "border-bottom-left-radius" to borderBottomLeftRadius,
-        "border-bottom-right-radius" to borderBottomRightRadius,
-        "border-bottom-style" to borderBottomStyle,
-        "border-bottom-width" to borderBottomWidth,
-        "border-collapse" to borderCollapse,
-        "border-color" to borderColor,
-        "border-image" to borderImage,
-        "border-image-outset" to borderImageOutset,
-        "border-image-repeat" to borderImageRepeat,
-        "border-image-slice" to borderImageSlice,
-        "border-image-source" to borderImageSource,
-        "border-image-width" to borderImageWidth,
-        "border-left" to borderLeft,
-        "border-left-color" to borderLeftColor,
-        "border-left-style" to borderLeftStyle,
-        "border-left-width" to borderLeftWidth,
-        "border-radius" to borderRadius,
-        "border-right" to borderRight,
-        "border-right-color" to borderRightColor,
-        "border-right-style" to borderRightStyle,
-        "border-right-width" to borderRightWidth,
-        "border-spacing" to borderSpacing,
-        "border-style" to borderStyle,
-        "border-top" to borderTop,
-        "border-top-color" to borderTopColor,
-        "border-top-left-radius" to borderTopLeftRadius,
-        "border-top-right-radius" to borderTopRightRadius,
-        "border-top-style" to borderTopStyle,
-        "border-top-width" to borderTopWidth,
-        "bottom" to bottom,
-        "box-decoration-break" to boxDecorationBreak,
-        "box-shadow" to boxShadow,
-        "box-sizing" to boxSizing,
-        "break-after" to breakAfter,
-        "break-before" to breakBefore,
-        "break-inside" to breakInside,
-        "caption-side" to captionSide,
-        "caret-color" to caretColor,
-        //"@charset" to charset,
-        "clear" to clear,
-        "clip" to clip,
-        "clip-path" to clipPath,
-        "color" to color,
-        "column-count" to columnCount,
-        "column-fill" to columnFill,
-        "column-gap" to columnGap,
-        "column-rule" to columnRule,
-        "column-rule-color" to columnRuleColor,
-        "column-rule-style" to columnRuleStyle,
-        "column-rule-width" to columnRuleWidth,
-        "column-span" to columnSpan,
-        "column-width" to columnWidth,
-        "columns" to columns,
-        "content" to content,
-        "counter-increment" to counterIncrement,
-        "counter-reset" to counterReset,
-        "cursor" to cursor,
-        "direction" to direction,
-        "display" to display,
-        "empty-cells" to emptyCells,
-        "filter" to filter,
-        "flex" to flex,
-        "float" to float,
-        "font" to font,
 
+    /**
+     * like the scss &
+     * @param selector blabla
+     */
+    fun and(selector: DescriptionProvider, style: Css) {
+        addStyle(selector.description(), style)
+    }
 
-        "font-family" to fontFamily,
+    fun and(selector: String, style: Css) {
-        "font-size" to fontSize,
+        addStyle(selector, style)
-        "height" to height,
+    }
-        "left" to left,
+
-        "top" to top,
+    fun select(selector: DescriptionProvider, style: Css) {
-        "transition-delay" to transitionDelay,
+        addStyle(" ${selector.description()}", style)
-        "transition-duration" to transitionDuration,
+    }
-        "width" to width
-    )
 
     fun select(selector: String, style: Css) {
-        definitions[selector] = style
+        addStyle(" $selector", style)
     }
 
-    fun apply(style: Css) {
+    fun descendant(descName: DescriptionProvider, style: Css) {
-        style(this)
+        addStyle(" ${descName.description()}", style)
     }
 
+    fun descendant(descName: String, style: Css) {
+        addStyle(" $descName", style)
+    }
+
+    fun child(childName: DescriptionProvider, style: Css) {
+        addStyle(" > ${childName.description()}", style)
+    }
+
+    fun child(childName: String, style: Css) {
+        addStyle(" > $childName", style)
+    }
+
+    fun sibling(childName: DescriptionProvider, style: Css) {
+        addStyle(" ~ ${childName.description()}", style)
+    }
+
+    fun sibling(childName: String, style: Css) {
+        addStyle(" ~ $childName", style)
+    }
+
+    fun adjSibling(childName: DescriptionProvider, style: Css) {
+        addStyle(" + ${childName.description()}", style)
+    }
+
+    fun adjSibling(childName: String, style: Css) {
+        addStyle(" + $childName", style)
+    }
+
+    fun active(style: Css) {
+        addStyle(":active", style)
+    }
+
+    fun focus(style: Css) {
+        addStyle(":focus", style)
+    }
+
+    fun focusWithin(style: Css) {
+        addStyle(":focus-within", style)
+    }
+
+    fun hover(style: Css) {
+        addStyle(":hover", style)
+    }
+
+    fun visited(style: Css) {
+        addStyle(":visited", style)
+    }
+
+    fun not(selector: DescriptionProvider, style: Css) {
+        addStyle(":not(${selector.description()})", style)
+    }
+
+    fun plain(name: String, value: String) {
+        props[name] = prp(value)
+    }
+
+    fun plain(name: String, value: CssProperty) {
+        props[name] = prp(value)
+    }
+
+    fun alignContent(value: AlignContent) {         props["align-content"] = prp(value)    }
+    fun alignItems(alignItems: AlignItems) {        props["align-items"] = prp(alignItems) }
+    fun all(all: All) {                             props["all"] = prp(all)                }
+    fun alignSelf(alignSelf: AlignSelf) {           props["align-self"] = prp(alignSelf)   }
+    fun animation(text: String) {                   props["animation"] = prp(text) }
+    fun animationDelay(delay: DelayDuration) {      props["animation-delay"] = prp(delay) }
+    fun animationDirection(direction: AnimationDirection) { props["animation-direction"] = prp(direction) }
+    fun animationDuration(duration: DelayDuration) { props["animation-duration"] = prp(duration) }
+    fun animationFillMode(fillMode: AnimationFillMode) { props["animation-fill-mode"] = prp(fillMode) }
+    fun animationIterationMode(vararg iterationMode: Count) { props["animation-iteration-mode"] = prp(*iterationMode) }
+    fun animationFrame(frame: AnimationFrame) {     props["animation-frame"] = prp(frame) }
+    fun animationName(vararg name: String) {        props["animation-name"] = prp(*name) }
+    fun animationPlayState(vararg state : AnimationPlayState) {
+        props["animation-play-state"] = prp(*state)
+    }
+    fun animationTimingFunction(vararg timingFunction: TimingFunction) {
+        props["animation-timing-function"] = prp(*timingFunction)
+    }
+    fun backfaceVisibility(backfaceVisibility: BackfaceVisibility) { props[""] = prp(backfaceVisibility) }
+    fun background(background: String) { props["background"] = prp(background) }
+    fun backgroundAttachment(attachment: BackgroundAttachment) { props["background-attachment"] = prp(attachment) }
+    fun backgroundBlendMode(blendMode: BackgroundBlendMode) { props["background-blend-mode"] = prp(blendMode) }
+    fun backgroundClip(clip: ClipOrigin) { props["background-clip"] = prp(clip) }
+    fun backgroundColor(color: Color) {             props["background-color"] = prp(color)                    }
+    fun backgroundImage(image: Image) {             props["background-image"] = prp(image) }
+    fun backgroundOrigin(origin: ClipOrigin) {      props["background-origin"] = prp(origin) }
+    fun backgroundPosition(position: BackgroundPosition) { props["background-position"] = prp(position) }
+    fun backgroundRepeat(repeat: BackgroundRepeat) { props["background-repeat"] = prp(repeat) }
+    fun backgroundSize(vararg size: BackgroundSize) { props["background-size"] = prp(*size) }
+    fun border(border: String) {                    props["border"] = prp(border) }
+    fun borderBottom(borderBottom: String) {        props["border-bottom"] = prp(borderBottom) }
+    fun borderBottomColor(color: Color) {           props["border-bottom-color"] = prp(color) }
+    fun borderBottomLeftRadius(vararg radius: BorderRadius) { props["border-bottom-left-radius"] = prp(*radius) }
+    fun borderBottomRightRadius(vararg radius: BorderRadius) { props["border-bottom-right-radius"] = prp(*radius) }
+    fun borderBottomStyle(style: BorderStyle) { props["border-bottom-style"] = prp(style) }
+    fun borderBottomWidth(width: BorderWidth) { props["border-bottom-width"] = prp(width) }
+    fun borderBottomWidth(width: Measurement) { props["border-bottom-width"] = prp(width) }
+    fun borderCollapse(collapse: BorderCollapse) { props["border-collapse"] = prp(collapse) }
+    fun borderColor(vararg color: Color) { props["border-color"] = prp(*color) }
+    fun borderImage(image: String) { props["border-image"] = prp(image) }
+    fun borderImageOutset(imageOutset: Length) { props["border-image-outset"] = prp(imageOutset) }
+    fun borderImageRepeat(vararg repeat: ImageRepeat) { props["border-image-repeat"] = prp(*repeat) }
+    fun borderImageSlice(vararg slice: ImageSlice) { props["border-image-slice"] = prp(*slice) }
+    fun borderImageSource(vararg source: ImageSource) { props["border-image-source"] = prp(*source) }
+    fun borderImageWidth(vararg width: BorderImageWidth) { props["border-image-width"] = prp(*width) }
+    fun borderLeft(left: String) { props["border-left"] = prp(left) }
+    fun borderLeftColor(color: Color) { props["border-left-color"] = prp(color) }
+    fun borderLeftStyle(style: BorderStyle) { props["border-left-style"] = prp(style) }
+    fun borderLeftWidth(width: BorderWidth) { props["border-left-width"] = prp(width) }
+    fun borderLeftWidth(width: Measurement) { props["border-left-width"] = prp(width) }
+    fun borderRadius(radius: Measurement) {         props["border-radius"] = prp(radius)                      }
+    fun borderRadius(
+        topLeftBottomRight: Measurement,
+        topRightBottomLeft: Measurement
+    ) {
+        props["border-radius"] = listOf(
+            topLeftBottomRight, topRightBottomLeft
+        )
+    }
+
+    fun borderRadius(
+        topLeft: Measurement,
+        topRightBottomLeft: Measurement,
+        bottomRight: Measurement
+    ) {
+        props["border-radius"] = listOf(
+            topLeft, topRightBottomLeft, bottomRight
+        )
+    }
+
+    fun borderRadius(
+        topLeft: Measurement,
+        topRight: Measurement,
+        bottomRight: Measurement,
+        bottomLeft: Measurement
+    ) {
+        props["border-radius"] = listOf(
+            topLeft, topRight, bottomRight, bottomLeft
+        )
+    }
+    fun borderRight(border: String) { props["border-right"] = prp(border) }
+    fun borderRightColor(color: Color) { props["border-right-color"] = prp(color) }
+    fun borderRightStyle(style: BorderStyle) { props["border-right-style"] = prp(style) }
+    fun borderRightWidth(width: BorderWidth) { props["border-right-width"] = prp(width) }
+    fun borderRightWidth(width: Measurement) { props["border-right-width"] = prp(width) }
+    fun borderSpacing(vararg spacing: BorderSpacing) { props["border-spacing"] = prp(*spacing) }
+    fun borderStyle(vararg style: BorderStyle) { props["border-style"] = prp(*style) }
+    fun borderTop(border: String) { props["border-top"] = prp(border) }
+    fun borderTopColor(color: Color) { props["border-top-color"] = prp(color) }
+    fun borderTopLeftRadius(radius: BorderRadius) { props["border-top-left-radius"] = prp(radius) }
+    fun borderTopRightRadius(radius: BorderRadius) { props["border-top-right-radius"] = prp(radius) }
+    fun borderTopStyle(style: BorderStyle) { props["border-top-style"] = prp(style) }
+    fun borderTopWidth(width: BorderWidth) { props["border-top-width"] = prp(width) }
+    fun borderTopWidth(width: Measurement) { props["border-top-width"] = prp(width) }
+    fun borderWidth(width: Measurement) { props["border-width"] = prp(width) }
+    fun borderWidth(width: BorderWidth) { props["border-width"] = prp(width) }
+    fun bottom(measurement: Measurement) {          props["bottom"] = prp(measurement) }
+    fun boxDecorationBreak(brk: BoxDecorationBreak) { props["box-decoration-break"] = prp(brk) }
+    fun boxShadow(shadow: BoxShadow) {              props["box-shadow"] = prp(shadow) }
+    fun boxSizing(sizing: BoxSizing) {              props["box-sizing"] = prp(sizing) }
+    fun breakAfter(brk: Break) {                    props["break-after"] = prp(brk) }
+    fun breakBefore(brk: Break) {                   props["break-before"] = prp(brk) }
+    fun breakInside(brk: Break) {                   props["break-inside"] = prp(brk) }
+    fun captionSide(side: CaptionSide) {            props["caption-side"] = prp(side) }
+    fun caretColor(color: Color) {                  props["caret-color"] = prp(color) }
+    fun clear(clear: Clear) {                       props["clear"] = prp(clear) }
+    fun clip(clip: Clip) {                          props["clip"] = prp(clip) }
+    fun clipPath(path: ClipPath) {                  props["clip-path"] = prp(path) }
+    fun color(color: Color) {                       props["color"] = listOf(color)                    }
+    fun columnCount(count: Count) {                 props["column-count"] = prp(count) }
+    fun columnFill(fill: Fill) {                    props["column-fill"] = prp(fill) }
+    fun columnGap(gap: Measurement) {               props["column-gap"] = prp(gap) }
+    fun columnRule(rule: String) {                  props["column-rule"] = prp(rule) }
+    fun columnRuleColor(color: Color) {             props["column-rule-color"] = prp(color) }
+    fun columnRuleStyle(style: BorderStyle) {   props["column-rule-style"] = prp(style) }
+    fun columnRuleWidth(width: Measurement) {       props["column-rule-width"] = prp(width) }
+    fun columnSpan(span: Span) {                    props["column-span"] = prp(span) }
+    fun columnWidth(width: Measurement) {           props["column-width"] = prp(width) }
+    fun column(column: String) {                    props["column"] = prp(column) }
+    fun content(content: Content) {                 props["content"] = prp(content) }
+    fun counterIncrement(increment: String) {       props["counter-increment"] = prp(increment) }
+    fun counterReset(reset: String) {               props["counter-reset"] = prp(reset) }
+    fun cursor(cursor: String) {                    props["cursor"] = prp(cursor) }
+    fun direction(direction: Direction) {           props["direction"] = prp(direction) }
+    fun display(display: Display) {                 props["display"] = prp(display) }
+    fun emptyCells(cells: EmptyCells) {             props["empty-cells"] = prp(cells) }
+    fun filter(filter: String) {                    props["filter"] = prp(filter) }
+    fun flex(flex: String) {                        props["flex"] = prp(flex) }
+    fun flexBasis(basis: Measurement) {             props["flex-basis"] = prp(basis) }
+    fun flexDirection(direction: FlexDirection) {   props["flex-direction"] = prp(direction) }
+    fun flexFlow(flow: String) {                    props["flex-flow"] = prp(flow) }
+    fun flexGrow(grow: FlexGrowShrink) {            props["flex-grow"] = prp(grow) }
+    fun flexShrink(shrink: FlexGrowShrink) {        props["flex-shrink"] = prp(shrink) }
+    fun flexWrap(wrap: FlexWrap) {                  props["flex-wrap"] = prp(wrap) }
+    fun float(cssFloat: CssFloat) {                 props["float"] = prp(cssFloat) }
+    fun font(font: String) {                        props["font"] = prp(font) }
     fun fontFace(face: FontFace.() -> Unit) {
         fontFace = FontFace()
 
         face.invoke(fontFace!!)
     }
+    fun fontFamily(font: String) {                  props["font-family"] = prp(font)    }
+    fun fontFeatureSettings(vararg setting: String) { props["font-feature-settings"] = prp(*setting) }
+    fun fontKerning(kerning: FontKerning) {         props["font-kerking"] = prp(kerning) }
+    fun fontSize(size: FontSize) {                  props["font-size"] = prp(size)    }
+    fun fontSize(size: Measurement) {               props["font-size"] = prp(size)    }
+    fun fontSizeAdjust(number: Double) {            props["font-size-adjust"] = prp(CssProperty("$number")) }
+    fun fontSizeAdjust(adjust: FontSizeAdjust) {    props["font-size-adjust"] = prp(adjust) }
+    fun fontStretch(stretch: FontStretch) {         props["font-stretch"] = prp(stretch) }
+    fun fontStyle(style: FontStyle) {               props["font-style"] = prp(style) }
+    fun fontVariant(variant: FontVariant) {         props["font-variant"] = prp(variant) }
+    fun fontVariantCaps(caps: FontVariantCaps) {    props["font-variant-caps"] = prp(caps) }
+    fun fontWeight(weight: FontWeight) {            props["font-weight"] = prp(weight) }
+    fun grid(grid: String) {                        props["grid"] = prp(grid) }
+    fun gridArea(area: String) {                    props["grid-area"] = prp(area) }
+    fun gridAutoColumns(columns: GridAuto) {        props["grid-auto-columns"] = prp(columns) }
+    fun gridAutoFlow(flow: GridFlow) {              props["grid-auto-flow"] = prp(flow) }
+    fun gridAutoRows(autoRows: GridAuto) {          props["grid-auto-rows"] = prp(autoRows) }
+    fun gridAutoRows(size: Measurement) {           props["grid-auto-rows"] = prp(size) }
+    fun gridColumn(start: GridValue, end: GridValue) { props["grid-column"] = prp(CssProperty("${start.css()}/${end.css()}")) }
+    fun gridColumnEnd(end: GridValue) {         props["grid-column-end"] = prp(end) }
+    fun gridColumnGap(gap: GridValue) {         props["grid-column-gap"] = prp(gap) }
+    fun gridColumnStart(start: GridValue) {     props["grid-column-start"] = prp(start) }
+    fun gridGap(
+        rowGap: Measurement = Measurement.px(0),
+        columnGap: Measurement = Measurement.px(0)
+    ) { props["grid-gap"] = prp(rowGap, columnGap) }
+    fun gridRow(start: GridValue, end: GridValue) { props["grid-row"] = prp(CssProperty("${start.css()}/${end.css()}")) }
+    fun gridRowEnd(end: GridValue) {            props["grid-row-end"] = prp(end) }
+    fun gridRowGap(gap: GridValue) {            props["grid-row-end"] = prp(gap) }
+    fun gridRowStart(start: GridValue) {        props["grid-row-start"] = prp(start) }
+    fun gridTemplate(template: String) {            props["grid-template"] = prp(template) }
+    fun gridTemplateAreas(template: String) {       props["grid-template-areas"] = prp(template) }
+    @Deprecated(
+        "Fixed type, use gridTemplateColumns instead",
+        ReplaceWith("gridTemplateColumns(columns)")
+    )
+    fun gridTemplateColumn(vararg columns: TemplateRowColumn) { props["grid-template-columns"] = prp(*columns) }
+    fun gridTemplateColumns(vararg columns: TemplateRowColumn) { props["grid-template-columns"] = prp(*columns) }
+    fun gridTemplateColumns(vararg columns: Measurement) { props["grid-template-columns"] = prp(*columns) }
+    fun gridTemplateRows(vararg rows: TemplateRowColumn) { props["grid-template-rows"] = prp(*rows) }
+    fun gridTemplateRows(vararg rows: Measurement) { props["grid-template-rows"] = prp(*rows) }
+    fun hangingPunctuation(punctuation: Isolation) { props["hanging-punctuation"] = prp(punctuation) }
+    fun height(height: Measurement) {               props["height"] = prp(height)    }
+    fun hyphens(hyphens: Hyphens) {                 props["hyphens"] = prp(hyphens) }
+    fun import(style: Css) {                        style(this) }
+    fun isolation(isolation: Isolation) {           props["isolation"] = prp(isolation) }
+    fun justifyContent(content: JustifyContent) {   props["justify-content"] = prp(content) }
+    fun keyFrames(animationName: String, frames: KeyFrames.() -> Unit) {
+        val frameCss = KeyFrames()
+
+        frames.invoke(frameCss)
+
+        keyFrames[animationName] = frameCss
+    }
+    fun left(left: Measurement) {                   props["left"] = prp(left)    }
+    fun letterSpacing(length: Measurement) {        props["letter-spacing"] = prp(length) }
+    fun letterSpacing(spacing: LetterSpacing) {     props["letter-spacing"] = prp(spacing) }
+    fun lineHeight(number: Double) {                props["line-height"] = prp("$number") }
+    fun lineHeight(measurement: Measurement) {      props["line-height"] = prp(measurement) }
+    fun lineHeight(height: LineHeight) {            props["line-height"] = prp(height) }
+    fun listStyle(style: String) {                  props["list-style"] = prp(style) }
+    fun listStyleImage(url: String) {               props["list-style-image"] = prp("url('$url')")}
+    fun listStylePosition(position: ListStylePosition) { props["list-style-position"] = prp(position) }
+    fun listStyleType(position: ListStyleType) {    props["list-style-type"] = prp(position) }
+    fun margin(all: Measurement) {                  props["margin"] = prp(all)    }
+    fun margin(
+        topBottom: Measurement,
+        leftRight: Measurement
+    ) {                                             props["margin"] = prp(topBottom, leftRight) }
+    fun margin(top: Measurement, right: Measurement, bottom: Measurement, left: Measurement) {
+        props["margin"] = prp(top, right, bottom, left)
+    }
+    fun marginBottom(bottom: Measurement) {         props["margin-bottom"] = prp(bottom) }
+    fun marginLeft(left: Measurement) {             props["margin-left"] = prp(left) }
+    fun marginRight(right: Measurement) {           props["margin-right"] = prp(right) }
+    fun marginTop(top: Measurement) {               props["margin-top"] = prp(top) }
+    fun maxHeight(height: Measurement) {            props["max-height"] = prp(height) }
+    fun maxWidth(width: Measurement) {              props["max-width"] = prp(width) }
+    fun minHeight(height: Measurement) {            props["min-height"] = prp(height) }
+    fun minWidth(width: Measurement) {              props["min-width"] = prp(width) }
+    fun mixBlendMode(blendMode: MixBlendMode) {     props["mix-blend-mode"] = prp(blendMode) }
+    fun objectFit(fit: ObjectFit) {                 props["object-fit"] = prp(fit) }
+    fun objectPosition(position: String) {          props["object-position"] = prp(position) }
+    fun opacity(opacity: Double) {                  props["opacity"] = prp(opacity.toString()) }
+    fun opacity(opacity: InitialInherit) {          props["opacity"] = prp(opacity.toString()) }
+    fun order(order: Int) {                         props["order"] = prp(order.toString()) }
+    fun order(order: InitialInherit) {              props["order"] = prp(order) }
+    fun outline(outline: String) {                  props["outline"] = prp(outline) }
+    fun outlineColor(color: Color) {                props["outline-color"] = prp(color) }
+    fun outlineOffset(offset: Measurement) {        props["outline-offset"] = prp(offset) }
+    fun outlineStyle(style: BorderStyle) {          props["outline-style"] = prp(style) }
+    fun outlineWidth(width: OutlineWidth) {         props["outline-width"] = prp(width) }
+    fun outlineWidth(width: Measurement) {          props["outline-width"] = prp(width) }
+    fun overflow(overflow: Overflow) {              props["overflow"] = prp(overflow) }
+    fun overflowX(overflow: Overflow) {             props["overflow-x"] = prp(overflow) }
+    fun overflowY(overflow: Overflow) {             props["overflow-y"] = prp(overflow) }
+    fun padding(padding: Measurement) {             props["padding"] = prp(padding) }
+    fun padding(vertical: Measurement, horizontal: Measurement) {
+        props["padding"] = prp(vertical, horizontal)
+    }
+    fun padding(top: Measurement, right: Measurement, bottom: Measurement, left: Measurement) {
+        props["padding"] = prp(top, right, bottom, left)
+    }
+    fun padding(padding: InitialInherit) {          props["padding"] = prp(padding) }
+    fun paddingBottom(padding: Measurement) {       props["padding-bottom"] = prp(padding) }
+    fun paddingBottom(padding: InitialInherit) {    props["padding-bottom"] = prp(padding) }
+    fun paddingLeft(padding: Measurement) {         props["padding-left"] = prp(padding) }
+    fun paddingLeft(padding: InitialInherit) {      props["padding-left"] = prp(padding) }
+    fun paddingRight(padding: Measurement) {        props["padding-right"] = prp(padding) }
+    fun paddingRight(padding: InitialInherit) {     props["padding-right"] = prp(padding) }
+    fun paddingTop(padding: Measurement) {          props["padding-top"] = prp(padding) }
+    fun paddingTop(padding: InitialInherit) {       props["padding-top"] = prp(padding) }
+    fun pageBreakAfter(pageBreak: PageBreak) {      props["page-break-after"] = prp(pageBreak) }
+    fun pageBreakBefore(pageBreak: PageBreak) {     props["page-break-before"] = prp(pageBreak) }
+    fun pageBreakInside(pageBreak: PageBreak) {     props["page-break-inside"] = prp(pageBreak) }
+    fun perspective(length: Measurement) {          props["perspective"] = prp(length) }
+    fun perspective(perspective: Perspective) {     props["perspective"] = prp(perspective) }
+    fun perspectiveOrigin(po: String) {             props["perspective-origin"] = prp(po) }
+    fun pointerEvents(pe: PointerEvents) {          props["pointer-events"] = prp(pe) }
+    fun position(poition: Position) {               props["position"] = prp(poition) }
+    fun quotes(value: String) {                     props["quotes"] = prp(value) }
+    fun resize(resize: Resize) {                    props["resize"] = prp(resize) }
+    fun right(right: Measurement) {                 props["right"] = prp(right) }
+    fun scrollBehavior(sb: ScrollBehavior) {        props["scroll-behavior"] = prp(sb) }
+    fun tabSize(number: Int) {                      props["tab-size"] = prp(number.toString()) }
+    fun tabSize(length: Measurement) {              props["tab-size"] = prp(length) }
+    fun tabSize(ts: InitialInherit) {               props["tab-size"] = prp(ts) }
+    fun tableLayout(tl: TableLayout ) {             props["table-layout"] = prp(tl) }
+    fun textAlign(ta: TextAlign) {                  props["text-align"] = prp(ta) }
+    fun textAlignLast(tal: TextAlignLast) {         props["text-align-last"] = prp(tal) }
+    fun textDecoration(decoration: String) {        props["text-decoration"] = prp(decoration) }
+    fun textDecorationColor(color: Color) {         props["text-decoration-color"] = prp(color) }
+    fun textDecorationLine(tdc: TextDecorationLine) { props["text-decoration-line"] = prp(tdc) }
+    fun textDecorationStyle(tds: TextDecorationStyle) { props["text-decoration-style"] = prp(tds) }
+    fun textIndent(length: Measurement) {           props["text-indent"] = prp(length) }
+    fun textIndent(indent: InitialInherit) {        props["text-indent"] = prp(indent) }
+    fun textJustify(tj: TextJustify) {              props["text-justify"] = prp(tj) }
+    fun textOverflow(to: String) {                  props["text-overflow"] = prp(to) }
+    fun textShadow(ts: String) {                    props["text-shadow"] = prp(ts) }
+    fun textTransform(tt: TextTransform) {          props["text-transform"] = prp(tt) }
+    fun top(top: Measurement) {                     props["top"] = prp(top) }
+    fun transform(transform: Transform) {           props["transform"] = prp(transform) }
+    fun transformOrigin(origin: String) {           props["transform-origin"] = prp(origin) }
+    fun transformStyle(style: TransformStyle) {     props["transform-style"] = prp(style) }
+    fun transition(transition: String) {            props["transition"] = prp(transition) }
+    fun transitionDelay(timeInSeconds: Double) {    props["transition-delay"] = prp("${timeInSeconds}s") }
+    fun transitionDelay(timeInMillis: Int) {        props["transition-delay"] = prp("${timeInMillis}ms") }
+    fun transitionDelay(delay: DelayDuration) {     props["transition-delay"] = prp(delay) }
+    fun transitionDuration(timeInSeconds: Double) { props["transition-duration"] = prp("${timeInSeconds}s") }
+    fun transitionDuration(timeInMillis: Int) {     props["transition-duration"] = prp("${timeInMillis}ms") }
+    fun transitionDuration(td: DelayDuration) {     props["transition-duration"] = prp(td) }
+    fun transitionProperty(property: String) {      props["transition-property"] = prp(property) }
+    fun transitionTimingFunction(function: TimingFunction) { props["transition-timing-function"] = prp(function) }
+    fun unicodeBidi(ub: UnicodeBidi) {              props["unicode-bidi"] = prp(ub) }
+    fun userSelect(us: UserSelect) {                props["user-select"] = prp(us) }
+    fun verticalAlign(length: Measurement) {        props["vertical-align"] = prp(length) }
+    fun verticalAlign(va: VerticalAlign) {          props["vertical-align"] = prp(va) }
+    fun visibility(visibility: Visibility) {        props["visibility"] = prp(visibility) }
+    fun whiteSpace(whiteSpace: WhiteSpace) {        props["white-space"] = prp(whiteSpace) }
+    fun width(width: Measurement) {                 props["width"] = prp(width) }
+    fun wordBreak(wordBreak: WordBreak) {           props["word-break"] = prp(wordBreak) }
+    fun wordSpacing(wordSpacing: Measurement) {     props["word-spacing"] = prp(wordSpacing) }
+    fun wordSpacing(wordSpacing: WordSpacing) {     props["word-spacing"] = prp(wordSpacing) }
+    fun wordWrap(wordWrap: WordWrap) {              props["word-wrap"] = prp(wordWrap) }
+    fun writingMode(writingMode: WritingMode) {     props["writing-mode"] = prp(writingMode) }
+    fun zIndex(zIndex: Int) {                       props["z-index"] = prp(zIndex.toString()) }
+    fun zIndex(zIndex: ZIndex) {                    props["z-index"] = prp(zIndex) }
+}
+
+@CssTagMarker
+open class ConditionalStyle : Style() {
+    var media: MutableMap<String, ConditionalCss> = mutableMapOf()
+    var supports: MutableMap<String, ConditionalCss> = mutableMapOf()
+
+    fun media(definition: String, style: ConditionalCss) {
+        media[definition] = style
+    }
+
+    fun supports(query: String, style: ConditionalCss) {
+        supports[query] = style
+    }
 }

src/commonMain/kotlin/nl/astraeus/css/style/Validator.kt

@@ -4,14 +4,10 @@ import nl.astraeus.css.properties.CssProperty
 
 abstract class Validator {
 
-    open fun validate(property: CssProperty): Boolean = true
-
     open fun validate(properties: List<CssProperty>): Boolean = true
 
     open fun getMessage(name: String): String = "'$name' validation message not defined for $this"
 
-    open fun getListMessage(name: String): String = "'$name' validation message not defined for $this"
-
 }
 
 class MaxCountValidator(
@@ -20,7 +16,7 @@ class MaxCountValidator(
 
     override fun validate(property: List<CssProperty>): Boolean = property.size <= number
 
-    override fun getListMessage(name: String): String = "'$name' should not have more than 4 entries"
+    override fun getMessage(name: String): String = "'$name' should not have more than 4 entries"
 
 }
 
@@ -36,6 +32,6 @@ class InitialInheritSingleValue: Validator() {
         return true
     }
 
-    override fun getListMessage(name: String): String = "'$name' can only have single value when 'initial' or 'inherit'"
+    override fun getMessage(name: String): String = "'$name' can only have single value when 'initial' or 'inherit'"
 
 }

src/commonMain/kotlin/nl/astraeus/logging/Logger.kt

@@ -1,5 +0,0 @@
-package nl.astraeus.logging
-
-import mu.KotlinLogging
-
-val log = KotlinLogging.logger {}

src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt

@@ -1,32 +1,157 @@
 package nl.astraeus.css
 
-import nl.astraeus.css.properties.Color.Companion.hsl
+import nl.astraeus.css.properties.Color
-import nl.astraeus.css.properties.Color.Companion.rgba
+import nl.astraeus.css.properties.Count
-import nl.astraeus.css.properties.Measurement.Companion.em
+import nl.astraeus.css.properties.Display
-import nl.astraeus.css.properties.Measurement.Companion.px
+import nl.astraeus.css.properties.em
+import nl.astraeus.css.properties.hsl
+import nl.astraeus.css.properties.px
+import nl.astraeus.css.properties.rgba
+import nl.astraeus.css.style.attr
+import nl.astraeus.css.style.attrEquals
+import nl.astraeus.css.style.cls
+import nl.astraeus.css.style.id
+import kotlin.test.Test
 
-//import kotlin.test.Test
+class TestCssBuilder {
 
-object TestCssBuilder {
+  @Test
+  fun testBuilder() {
+    val css = style {
 
-    //@Test
+      select(".test") {
-    fun testBuilder() {
+        top(10.px)
-        val css = CssBuilder()
+        left(4.em)
+        backgroundColor(rgba(255, 255, 255, 0.75))
+        animationIterationMode(
+          Count.auto,
+          Count.auto,
+          Count.auto,
+          Count.auto,
+          Count.auto
+        )
 
-        css.style {
+        child("li") {
-
+          color(hsl(200, 50, 50))
-            select(".test") {
-                top = px(10)
-                left = em(5)
-                backgroundColor = rgba(255, 255, 255, 0.75)
-
-                select("> a") {
-                    color = hsl(200, 50, 50)
-                }
-            }
         }
 
-        println(css)
+        select("> a") {
+          color(hsl(200, 50, 50))
+        }
+
+        hover {
+          color(Color.red)
+        }
+
+        child("li") {
+          listStyle("none")
+
+          child("ul") {
+            opacity(0.0)
+            display(Display.none)
+            paddingLeft(20.px)
+            child("li") {
+              listStyle("none")
+
+              child("ul") {
+                paddingLeft(30.px)
+                child("li") {
+                  listStyle("none")
+                }
+              }
+            }
+          }
+
+          hover {
+            child("ul") {
+              opacity(1.0)
+              display(Display.block)
+            }
+          }
+        }
+      }
     }
 
+    println(css.generateCss())
+  }
+
+  @Test
+  fun testClass() {
+    val css2 = style {
+      select(id("my-label")) {
+        color(Color.antiqueWhite)
+      }
+
+      select(cls("my-label")) {
+        color(Color.aliceBlue)
+      }
+
+      // tr.even {}
+      select("tr") {
+        and(cls("even")) {
+          color(Color.gray)
+        }
+
+/*
+        nthChild(2) {
+
+        }
+*/
+
+        // not(bla) {
+        not(cls("bla")) {
+          color(Color.blue)
+        }
+
+      }
+
+      // table .even {}
+      select("tr") {
+        select(cls("even")) {
+          color(Color.green)
+        }
+
+        // [type]
+        select(attr("type")) {
+
+        }
+
+        // [type="checkbox"]
+        select(attrEquals("type", "checkbox")) {
+
+        }
+
+        // table > .odd
+        child(cls("odd")) {
+
+        }
+
+        //adjSibling()
+      }
+
+      select(cls("button")) {
+        fontSize(12.px)
+        color(hsl(200, 50, 50))
+
+        // .button:hover
+        hover {
+          color(hsl(200, 40, 40))
+        }
+
+        child(".green") {
+          color(Color.green)
+        }
+
+        sibling(".red") {
+          color(Color.red)
+        }
+
+        adjSibling(".blue") {
+          color(Color.blue)
+        }
+      }
+    }
+
+    println(css2.generateCss())
+  }
 }

src/jsMain/kotlin/nl/astraeus/css/Test.kt

@@ -1,99 +1,24 @@
 package nl.astraeus.css
 
 import nl.astraeus.css.properties.*
-import nl.astraeus.css.properties.Measurement.Companion.em
-import nl.astraeus.css.properties.Measurement.Companion.px
-import nl.astraeus.css.style.Style
-
-class StyleBase(
-    val mainColor: Color = Color.hsl(128, 50, 50),
-    val mainBackgroundColor: Color = Color.hsl(64, 50, 50),
-    val mainFont: TextProperty = text("Arial")
-)
-
-private fun Style.sizePX(
-    left: Int,
-    top: Int,
-    width: Int,
-    height: Int
-) {
-    this@sizePX.top = px(top)
-    this@sizePX.left = px(left)
-    this@sizePX.width = px(width)
-    this@sizePX.height = px(height)
-}
-
-private fun generateCss(
-    base: StyleBase
-): String {
-    val css = CssBuilder()
-
-    css.style {
-        select("body") {
-            fontFamily = base.mainFont
-            color = base.mainColor
-            backgroundColor = base.mainBackgroundColor
-            alignContent = AlignContent.initial()
-        }
-
-        select(".test") {
-            top = px(10)
-            left = em(5)
-            backgroundColor = Color.rgba(255, 255, 255, 0.75)
-
-            select("> a") {
-                color = Color.hsl(200, 50, 50)
-            }
-        }
-
-        select("nav") {
-            select("ul") {
-                color = Color.hsl(0, 100, 25)
-                backgroundColor = base.mainBackgroundColor
-            }
-            select("li") {
-                sizePX(25, 25, 200, 200)
-
-                select("a") {
-                    width = px(725)
-                    background = text("")
-                    backgroundColor = base.mainBackgroundColor
-                }
-            }
-        }
-    }
-
-    return css.getCss()
-}
-
 fun main() {
-    val css1 = generateCss(StyleBase())
-    val css2 = generateCss(StyleBase(
-        Color.hsl(32, 40, 50),
-        Color.hsl(64, 60, 35),
-        text("Courier")
-    ))
-
-    println(css1)
-    println(css2)
-
     val sd = style {
         select("#pipo") {
-            backgroundColor = Color.hex("eeeeee")
+            backgroundColor(hex(0xeeeeee))
-            fontFamily = text("Arial, Courier")
+            fontFamily("Arial, Courier")
-            animationDelay = listOf(DelayDuration.initial())
+            animationDelay(DelayDuration.initial)
 
             select("div") {
-                color = Color.hex("1b1b1b1")
+                color(hex(0x1b1b1b1))
-                alignContent = AlignContent.flexStart()
+                alignContent(AlignContent.flexStart)
-                animationName = listOf(text("foo"), text("bar"))
+                animationName("animname")
-                animationIterationCount = listOf(
+                animationTimingFunction(
-                    Count.count(3), Count.infinite())
+                    TimingFunction.cubicBezier(0.1, 0.2, 0.3, 0.4),
-                animationTimingFunction = listOf(AnimationTimingFunction.cubicBezier(0.1, 0.2, 0.3, 0.4), AnimationTimingFunction.easeInOut())
+                    TimingFunction.easeInOut
+                )
             }
         }
     }
 
-    println("======")
     println(sd.generateCss())
 }

src/jvmMain/kotlin/nl/astraeus/css/Test.kt

@@ -1,167 +0,0 @@
-package nl.astraeus.css
-
-import nl.astraeus.css.properties.*
-import nl.astraeus.css.properties.AlignContent.Companion.flexStart
-import nl.astraeus.css.style.Css
-import nl.astraeus.css.style.Style
-
-class StyleBase(
-    val mainColor: Color = Color.hsl(128, 50, 50),
-    val mainBackgroundColor: Color = Color.hsl(64, 50, 50),
-    val mainFont: TextProperty = text("Arial")
-)
-
-private fun Style.sizePX(
-    left: Int,
-    top: Int,
-    width: Int,
-    height: Int
-) {
-    this@sizePX.top = Measurement.px(top)
-    this@sizePX.left = Measurement.px(left)
-    this@sizePX.width = Measurement.px(width)
-    this@sizePX.height = Measurement.px(height)
-}
-
-private fun generateCss(
-    base: StyleBase
-): String {
-    val css = CssBuilder()
-
-    css.style {
-        select("body") {
-            fontFamily = base.mainFont
-            color = base.mainColor
-            backgroundColor = base.mainBackgroundColor
-        }
-
-        select(".test") {
-            top = Measurement.px(10)
-            left = Measurement.em(5)
-            backgroundColor = Color.rgba(255, 255, 255, 0.75)
-
-            select("> a") {
-                color = Color.hsl(200, 50, 50)
-            }
-        }
-
-        select("nav") {
-            select("ul") {
-                color = Color.hsl(0, 100, 25)
-                backgroundColor = base.mainBackgroundColor
-            }
-            select("li") {
-                sizePX(25, 25, 200, 200)
-
-                select("a") {
-                    width = Measurement.px(725)
-                    background = text("red initial")
-                    backgroundColor = base.mainBackgroundColor
-                    all = All.initial()
-                }
-            }
-        }
-    }
-
-    return css.getCss()
-}
-
-fun main() {
-    val css1 = generateCss(StyleBase())
-    val css2 = generateCss(StyleBase(
-        Color.hsl(32, 40, 50),
-        Color.hsl(64, 60, 35),
-        text("Courier")
-    ))
-
-    println(css1)
-    println(css2)
-
-    val border = css {
-        borderRadius = BorderRadius(1, 2, 3, 4)
-        borderColor = listOf(Color.hsl(22,66,55))
-
-        select("a") {
-            width = Measurement.px(10)
-        }
-    }
-
-    val border2: Css = {
-        borderRadius = BorderRadius(1, 2, 3, 4)
-        borderColor = listOf(Color.hsl(20,60,50))
-    }
-
-    val font: Css = {
-        fontFamily = text("Arial, Courier")
-        fontSize = FontSize.larger()
-    }
-
-    val sd = style {
-        select("#pipo") {
-            backgroundColor = Color.hex("eeeeee")
-            fontFamily = text("Arial, Courier")
-            animationDelay = listOf(DelayDuration.initial())
-
-            select("div") {
-                fontFace {
-                    fontFamily = text("SanSation")
-                    fontSize = FontSize.larger()
-                    src = text("font/sansation_bold.woff")
-                    fontStretch = FontStretch.condensed()
-                    fontStyle = FontStyle.italic()
-                    fontWeight = FontWeight._600()
-                }
-
-                fontFamily = text("SanSation")
-                color = Color.hex("1b1b1b1")
-                alignContent = flexStart()
-                animationName = listOf(
-                    text("foo"),
-                    text("bar")
-                )
-                select("span") {
-                    animationIterationCount = listOf(
-                        Count.count(3),
-                        Count.infinite()
-                    )
-                    animationTimingFunction = listOf(
-                        AnimationTimingFunction.cubicBezier(0.1, 0.2, 0.3, 0.4),
-                        AnimationTimingFunction.easeInOut()
-                    )
-                }
-                select("border-0") {
-                    apply(border)
-                    borderRadius = BorderRadius(4, 5, 6, 7)
-                }
-                select("border-1") {
-                    apply(border2)
-                    borderRadius = BorderRadius(4, 5, 6, 7)
-                }
-                select("border-2") {
-                    borderRadius = BorderRadius(4, 5, 6, 7)
-                    apply(border2)
-
-                    display = Display.none()
-                    borderBottomWidth = BorderWidth.perc(13)
-                }
-            }
-        }
-    }
-    val borderStyle = style {
-        select(".border") {
-            apply(border)
-            apply(font)
-
-            select("> p") {
-                fontSize = FontSize.smaller()
-            }
-        }
-    }
-
-    println("======")
-    println(sd.generateCss())
-    println("======")
-    println(sd.generateCss(minified = true))
-    println("======")
-    println(borderStyle.generateCss())
-}