More properties

2020-03-18 19:27:17 +01:00
parent 5b557c8535
commit c40616e691
20 changed files with 564 additions and 392 deletions
--- a/src/commonMain/kotlin/nl/astraeus/css/CssBuilder.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/CssBuilder.kt
@@ -13,7 +13,6 @@ fun style(definition: Css): Style {
    return css
 }

-
 class CssBuilder {
    var definition: Style = Style()

--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Border.kt
+++ b/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")
@@ -78,8 +67,8 @@ class BorderCollapse(
 ): CssProperty(value) {

    companion object {
-        fun separate() = BorderWidth("separate")
-        fun collapse() = BorderWidth("collapse")
+        fun separate() = BorderCollapse("separate")
+        fun collapse() = BorderCollapse("collapse")
    }
 }

@@ -88,13 +77,13 @@ class BorderImageWidth (
 ): CssProperty(value) {

    companion object {
-        fun px(nr: Int) = BorderRadius("${nr}px")
-        fun nr(nr: Int) = Image("$nr")
-        fun perc(nr: Int) = BorderRadius("${nr}%")
-        fun perc(nr: Double) = BorderRadius("${nr}%")
-        fun auto() = BorderWidth("auto")
-        fun initial() = BorderWidth("initial")
-        fun inherit() = BorderWidth("inherit")
+        fun px(nr: Int) = BorderImageWidth("${nr}px")
+        fun nr(nr: Int) = BorderImageWidth("$nr")
+        fun perc(nr: Int) = BorderImageWidth("${nr}%")
+        fun perc(nr: Double) = BorderImageWidth("${nr}%")
+        fun auto() = BorderImageWidth("auto")
+        fun initial() = BorderImageWidth("initial")
+        fun inherit() = BorderImageWidth("inherit")
    }
 }

@@ -103,16 +92,16 @@ class BorderSpacing(
 ): CssProperty(value) {

    companion object {
-        fun px(nr: Int) = BorderRadius("${nr}px")
-        fun em(nr: Int) = BorderRadius("${nr}em")
-        fun em(nr: Double) = BorderRadius("${nr}em")
-        fun perc(nr: Int) = BorderRadius("${nr}%")
-        fun perc(nr: Double) = BorderRadius("${nr}%")
-        fun pc(nr: Int) = BorderRadius("${nr}pc")
-        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")
-        fun inherit() = BorderRadius("inherit")
+        fun px(nr: Int) = BorderSpacing("${nr}px")
+        fun em(nr: Int) = BorderSpacing("${nr}em")
+        fun em(nr: Double) = BorderSpacing("${nr}em")
+        fun perc(nr: Int) = BorderSpacing("${nr}%")
+        fun perc(nr: Double) = BorderSpacing("${nr}%")
+        fun pc(nr: Int) = BorderSpacing("${nr}pc")
+        fun pc(nr: Double) = BorderSpacing("${nr}pc")
+        fun cm(nr: Int) = BorderSpacing("${nr}cm")
+        fun cm(nr: Double) = BorderSpacing("${nr}cm")
+        fun initial() = BorderSpacing("initial")
+        fun inherit() = BorderSpacing("inherit")
    }
 }
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Box.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Box.kt
@@ -5,11 +5,11 @@ class BoxDecorationBreak(
 ): CssProperty(value) {

    companion object {
-        fun slice() = BorderWidth("slice")
-        fun clone() = BorderWidth("clone")
-        fun initial() = BorderWidth("initial")
-        fun inherit() = BorderWidth("inherit")
-        fun unset() = BorderWidth("unset")
+        fun slice() = BoxDecorationBreak("slice")
+        fun clone() = BoxDecorationBreak("clone")
+        fun initial() = BoxDecorationBreak("initial")
+        fun inherit() = BoxDecorationBreak("inherit")
+        fun unset() = BoxDecorationBreak("unset")
    }
 }

--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Caption.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Caption.kt
@@ -5,10 +5,10 @@ class CaptionSide(
 ): CssProperty(value) {

    companion object {
-        fun top() = BoxSizing("top")
-        fun bottom() = BoxSizing("bottom")
-        fun initial() = BoxShadow("initial")
-        fun inherit() = BoxShadow("inherit")
+        fun top() = CaptionSide("top")
+        fun bottom() = CaptionSide("bottom")
+        fun initial() = CaptionSide("initial")
+        fun inherit() = CaptionSide("inherit")
    }

 }
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Count.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Count.kt
@@ -5,15 +5,10 @@ class  Count(
 ) : CssProperty(value) {

    companion object {
-        fun count(number: Int): Count =
-            Count("$number")
-        fun auto(): Count =
-            Count("auto")
-        fun infinite(): Count =
-            Count("infinite")
-        fun initial(): Count =
-            Count("initial")
-        fun inherit(): Count =
-            Count("inherit")
+        fun count(number: Int): Count = Count("$number")
+        fun auto(): Count = Count("auto")
+        fun infinite(): Count = Count("infinite")
+        fun initial(): Count = Count("initial")
+        fun inherit(): Count = Count("inherit")
    }
 }
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Flex.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Flex.kt
@@ -20,9 +20,9 @@ class FlexGrowShrink(
 ) : CssProperty(value) {

    companion object {
-        fun number(number: Int) = FlexDirection("$number")
-        fun initial() = FlexDirection("initial")
-        fun inherit() = FlexDirection("inherit")
+        fun number(number: Int) = FlexGrowShrink("$number")
+        fun initial() = FlexGrowShrink("initial")
+        fun inherit() = FlexGrowShrink("inherit")
    }

 }
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Font.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Font.kt
@@ -14,8 +14,6 @@ class FontSize(
        fun xxLarge() = FontSize("xx-large")
        fun smaller() = FontSize("smaller")
        fun larger() = FontSize("larger")
-        fun initial() = FontSize("initial")
-        fun inherit() = FontSize("inherit")
        fun px(nr: Int) = FontSize("${nr}px")
        fun em(nr: Int) = FontSize("${nr}em")
        fun em(nr: Double) = FontSize("${nr}em")
@@ -25,7 +23,10 @@ class FontSize(
        fun pc(nr: Double) = FontSize("${nr}pc")
        fun cm(nr: Int) = FontSize("${nr}cm")
        fun cm(nr: Double) = FontSize("${nr}cm")
+        fun initial() = FontSize("initial")
+        fun inherit() = FontSize("inherit")
    }
+
 }

 class FontStretch(
@@ -42,6 +43,8 @@ class FontStretch(
        fun semiExpanded() = FontStretch("semi-expanded")
        fun extraExpanded() = FontStretch("extra-expanded")
        fun ultraExpanded() = FontStretch("ultra-expanded")
+        fun initial() = FontWeight("initial")
+        fun inherit() = FontWeight("inherit")
    }

 }
@@ -54,6 +57,8 @@ class FontStyle(
        fun normal() = FontStyle("normal")
        fun italic() = FontStyle("italic")
        fun oblique() = FontStyle("oblique")
+        fun initial() = FontStyle("initial")
+        fun inherit() = FontStyle("inherit")
    }

 }
@@ -74,7 +79,63 @@ class FontWeight(
        fun _700() = FontWeight("700")
        fun _800() = FontWeight("800")
        fun _900() = FontWeight("900")
+        fun initial() = FontWeight("initial")
+        fun inherit() = FontWeight("inherit")
    }

 }

+class FontKerning(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        fun auto() = FontKerning("auto")
+        fun normal() = FontKerning("normal")
+        fun none() = FontKerning("none")
+    }
+
+}
+
+class FontSizeAdjust(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        fun none() = FontSizeAdjust("none")
+        fun initial() = FontSizeAdjust("initial")
+        fun inherit() = FontSizeAdjust("inherit")
+    }
+
+}
+
+class FontVariant(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        fun normal() = FontVariant("normal")
+        fun smallCaps() = FontVariant("small-caps")
+        fun initial() = FontVariant("initial")
+        fun inherit() = FontVariant("inherit")
+    }
+
+}
+
+class FontVariantCaps(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        fun normal() = FontVariantCaps("normal")
+        fun smallCaps() = FontVariantCaps("small-caps")
+        fun allSmallCaps() = FontVariantCaps("all-small-caps")
+        fun petiteCaps() = FontVariantCaps("petite-caps")
+        fun allPetiteCaps() = FontVariantCaps("all-petite-caps")
+        fun unicase() = FontVariantCaps("unicase")
+        fun initial() = FontVariantCaps("initial")
+        fun inherit() = FontVariantCaps("inherit")
+        fun unset() = FontVariantCaps("unset")
+    }
+
+}
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Grid.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Grid.kt
@@ -0,0 +1,70 @@
+package nl.astraeus.css.properties
+
+
+class Grid(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        fun none() = Grid("none")
+        fun initial() = Grid("initial")
+        fun inherit() = Grid("inherit")
+    }
+
+}
+
+class GridAuto(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        fun auto() = GridAuto("auto")
+        fun maxContent() = GridAuto("max-content")
+        fun minContent() = GridAuto("min-content")
+    }
+
+}
+
+class GridFlow(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        fun row() = GridFlow("row")
+        fun column() = GridFlow("column")
+        fun dense() = GridFlow("dense")
+        fun rowDense() = GridFlow("row dense")
+        fun columnDense() = GridFlow("column dense")
+    }
+
+}
+
+class GridRowColumn(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        fun auto() = GridRowColumn("auto")
+        fun span(column: Int) = GridRowColumn("span $column")
+        fun columnLine(line: Int) = GridRowColumn("$line")
+        fun rowLine(line: Int) = GridRowColumn("$line")
+    }
+
+}
+
+class TemplateRowColumn(
+    value: String
+) : CssProperty(value) {
+
+    companion object {
+        fun none() = GridRowColumn("none")
+        fun auto() = GridRowColumn("auto")
+        fun maxContent() = GridRowColumn("max-content")
+        fun minContent() = GridRowColumn("min-content")
+        fun length(length: Measurement) = GridRowColumn(length.value)
+        fun initial() = GridRowColumn("initial")
+        fun inherit() = GridRowColumn("inherit")
+    }
+
+}
+
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Hyphens.kt
+++ b/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 {
+        fun none() = Hyphens("none")
+        fun manual() = Hyphens("manual")
+        fun auto() = Hyphens("auto")
+        fun initial() = Hyphens("initial")
+        fun inherit() = Hyphens("inherit")
+    }
+
+}
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Image.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Image.kt
@@ -17,11 +17,11 @@ class ImageRepeat(
 ) : CssProperty(value) {

    companion object {
-        fun stretch(url: String) = Image("stretch")
-        fun repeat() = Image("repeat")
-        fun round() = Image("round")
-        fun initial() = Image("initial")
-        fun inherit() = Image("inherit")
+        fun stretch(url: String) = ImageRepeat("stretch")
+        fun repeat() = ImageRepeat("repeat")
+        fun round() = ImageRepeat("round")
+        fun initial() = ImageRepeat("initial")
+        fun inherit() = ImageRepeat("inherit")
    }

 }
@@ -31,14 +31,14 @@ class ImageSlice(
 ) : CssProperty(value) {

    companion object {
-        fun nr(nr: Int) = Image("$nr")
-        fun perc(perc: Int) = Image("$perc%")
-        fun perc(perc: Double) = Image("$perc%")
-        fun stretch(url: String) = Image("stretch")
-        fun repeat() = Image("repeat")
-        fun fill() = Image("fill")
-        fun initial() = Image("initial")
-        fun inherit() = Image("inherit")
+        fun nr(nr: Int) = ImageSlice("$nr")
+        fun perc(perc: Int) = ImageSlice("$perc%")
+        fun perc(perc: Double) = ImageSlice("$perc%")
+        fun stretch(url: String) = ImageSlice("stretch")
+        fun repeat() = ImageSlice("repeat")
+        fun fill() = ImageSlice("fill")
+        fun initial() = ImageSlice("initial")
+        fun inherit() = ImageSlice("inherit")
    }

 }
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Isolation.kt
+++ b/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 {
+        fun auto() = Isolation("auto")
+        fun isolate() = Isolation("isolate")
+        fun initial() = Isolation("initial")
+        fun inherit() = Isolation("inherit")
+    }
+
+}
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/JustifyContent.kt
+++ b/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 {
+        fun flexStart() = JustifyContent("flex-start")
+        fun flexEnd() = JustifyContent("flex-end")
+        fun center() = JustifyContent("center")
+        fun spaceBetween() = JustifyContent("space-between")
+        fun spaceAround() = JustifyContent("space-around")
+        fun initial() = JustifyContent("initial")
+        fun inherit() = JustifyContent("inherit")
+    }
+
+}
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/LetterSpacing.kt
+++ b/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 {
+        fun normal() = LetterSpacing("normal")
+        fun initial() = LetterSpacing("initial")
+        fun inherit() = LetterSpacing("inherit")
+    }
+
+}
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
@@ -1,7 +1,5 @@
 package nl.astraeus.css.properties

-import kotlin.time.AbstractDoubleTimeSource
-
 open class Measurement(
    value: String
 ) : CssProperty(value) {
@@ -11,7 +9,7 @@ open class Measurement(
        fun initial() = Measurement("initial")
        fun inherit() = Measurement("inherit")
        fun normal() = Measurement("normal")
-        fun px(nr: Int) = Measurement("${nr}px")
+        fun px(nr: Int) = if (nr == 0) { Measurement("0") } else { Measurement("${nr}px") }
        fun px(nr: Double) = Measurement("${nr}px")
        fun em(nr: Int) = Measurement("${nr}em")
        fun em(nr: Double) = Measurement("${nr}em")
@@ -30,3 +28,11 @@ fun Int.em(): Measurement = Measurement.em(this)
 fun Double.em(): Measurement = Measurement.em(this)
 fun Int.perc(): Measurement = Measurement.perc(this)
 fun Double.perc(): Measurement = Measurement.perc(this)
+
+open class LineHeight(value: String) : CssProperty(value) {
+    companion object {
+        fun normal() = LineHeight("normal")
+        fun initial() = LineHeight("initial")
+        fun inherit() = LineHeight("inherit")
+    }
+}
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Punctuation.kt
+++ b/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 {
+        fun none() = HangingPunctuation("none")
+        fun first() = HangingPunctuation("first")
+        fun last() = HangingPunctuation("last")
+        fun allowEnd() = HangingPunctuation("allow-end")
+        fun forceEnd() = HangingPunctuation("force-end")
+        fun initial() = HangingPunctuation("initial")
+        fun inherit() = HangingPunctuation("inherit")
+    }
+
+}
--- a/src/commonMain/kotlin/nl/astraeus/css/style/FontFace.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/style/FontFace.kt
@@ -3,39 +3,36 @@ package nl.astraeus.css.style
 import nl.astraeus.css.properties.*

@CssTagMarker
-open class FontFace(
-//    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() {
+open class FontFace : CssGenerator() {

    override fun getValidator(name: String) = null

    fun fontFamily(font: String) {
-        properties["font-family"] = listOf(CssProperty(font))
+        props["font-family"] = listOf(CssProperty(font))
    }

    fun fontSize(size: FontSize) {
-        properties["font-size"] = listOf(size)
+        props["font-size"] = listOf(size)
    }

    fun src(src: String) {
-        properties["src"] = listOf(CssProperty(src))
+        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))
    }

-/*
-    override fun getMapping(): Map<String, Any?> = mapOf(
-        "font-family" to fontFamily,
-        "font-size" to fontSize,
-        "src" to src,
-        "font-stretch" to fontStretch,
-        "font-style" to fontStyle,
-        "font-weight" to fontWeight,
-        "unicode-range" to unicodeRange
-    )
-*/
 }
--- a/src/commonMain/kotlin/nl/astraeus/css/style/KeyFrames.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/style/KeyFrames.kt
@@ -0,0 +1,14 @@
+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
+    }
+}
--- a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt
@@ -2,14 +2,13 @@ package nl.astraeus.css.style

 import nl.astraeus.css.properties.*
 import nl.astraeus.logging.log
-import kotlin.time.Duration

 typealias Css = Style.() -> Unit

@DslMarker
 annotation class CssTagMarker

-private fun toProp(vararg css: CssValue): List<CssProperty> {
+private fun prp(vararg css: CssValue): List<CssProperty> {
    val result = mutableListOf<CssProperty>()

    for (c in css) {
@@ -19,9 +18,19 @@ private fun toProp(vararg css: CssValue): List<CssProperty> {
    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, Css> = mutableMapOf()
-    val properties: MutableMap<String, List<CssProperty>> = mutableMapOf()
+    val props: MutableMap<String, List<CssProperty>> = mutableMapOf()

    abstract fun getValidator(name: String): List<Validator>?

@@ -37,9 +46,7 @@ abstract class CssGenerator {
        for (prop in props) {
            if (builder.isNotEmpty()) {
                builder.append(",")
-                if (!minified) {
-                    builder.append(" ")
-                }
+                indent(minified, builder, " ")
            }
            builder.append(prop.css())
        }
@@ -61,7 +68,7 @@ abstract class CssGenerator {
    fun generatePropertyCss(indent: String, minified: Boolean): String {
        val builder = StringBuilder()

-        for ((name, prop) in properties) {
+        for ((name, prop) in props) {
            builder.append(propertyCss(indent, name, prop, minified))
        }

@@ -82,35 +89,56 @@ abstract class CssGenerator {

            if (css.isNotBlank()) {
                builder.append("\n$namespace $name".trim())
-                if (!minified) {
-                    builder.append(" ")
-                }
+                indent(minified, builder, " ")
                builder.append("{")
-                if (!minified) {
-                    builder.append("\n")
-                }
+                indent(minified, builder, "\n")

                finalStyle.fontFace?.let { ff ->
-                    if (!minified) {
-                        builder.append(indent)
-                    }
+                    indent(minified, builder, indent)
                    builder.append("@font-face {")
-                    if (!minified) {
-                        builder.append("\n")
-                    }
+                    indent(minified, builder, "\n")
                    builder.append(ff.generatePropertyCss( "  $indent", minified))
                    builder.append(indent)
                    builder.append("}")
-                    if (!minified) {
-                        builder.append("\n")
+                    indent(minified, builder, "\n")
+                }
+
+                finalStyle.keyFrames.let { kf ->
+                    kf.keys.sorted().forEach { frameName ->
+                        val css = kf[frameName]
+
+                        indent(minified, builder, indent)
+                        builder.append("@keyframes ")
+                        builder.append(frameName)
+                        builder.append(" {\n")
+                        css?.let { css ->
+                            for ((nr, style) in css.frames) {
+                                indent(minified, builder, "  $indent")
+                                builder.append("${nr}% ")
+                                indent(minified, builder, "  $indent")
+                                builder.append("{")
+                                indent(minified, builder, "\n")
+
+                                val finalStyle = Style()
+
+                                style(finalStyle)
+
+                                builder.append(finalStyle.generatePropertyCss("    $indent", minified))
+
+                                indent(minified, builder, "  $indent")
+                                builder.append("}\n")
+                            }
+
+                            indent(minified, builder, indent)
+                            builder.append("}\n")
+                        }
                    }
+
                }

                builder.append(css)
                builder.append("}")
-                if (!minified) {
-                    builder.append("\n\n")
-                }
+                indent(minified, builder, "\n\n")
            }

            builder.append(finalStyle.generateCss( "$namespace $name".trim(), indent, minified))
@@ -118,115 +146,18 @@ abstract class CssGenerator {

        return builder.toString()
    }
+
+    private fun indent(minified: Boolean, builder: StringBuilder, indent: String) {
+        if (!minified) {
+            builder.append(indent)
+        }
+    }
 }

@CssTagMarker
-open class Style(
-/*
-    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 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 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,
-    var fontSize: FontSize? = null,
-    var height: Measurement? = null,
-    var left: Measurement? = null,
-    var margin: List<Measurement>? = null,
-    var top: Measurement? = null,
-    var transitionDelay: DelayDuration? = null,
-    var transitionDuration: DelayDuration? = null,
-    var width: Measurement? = null
-*/
-) : CssGenerator() {
+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)),
@@ -243,163 +174,64 @@ open class Style(

    override fun getValidator(name: String) = validators[name]

-/*
-    override fun getMapping(): Map<String, Any?> = mapOf(
-        "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-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,
-
-
-        "font-family" to fontFamily,
-        "font-size" to fontSize,
-        "height" to height,
-        "left" to left,
-        "margin" to margin,
-        "top" to top,
-        "transition-delay" to transitionDelay,
-        "transition-duration" to transitionDuration,
-        "width" to width
-    )
-*/
-
    fun select(selector: String, style: Css) {
        definitions[selector] = style
    }

-    fun apply(style: Css) {
-        style(this)
-    }
-
-    fun fontFace(face: FontFace.() -> Unit) {
-        fontFace = FontFace()
-
-        face.invoke(fontFace!!)
-    }
-
-    fun alignContent(value: AlignContentValue) {    properties["align-content"] = toProp(value)    }
-    fun alignItems(alignItems: AlignItems) {        properties["align-items"] = toProp(alignItems) }
-    fun all(all: All) {                             properties["all"] = toProp(all)                }
-    fun alignSelf(alignSelf: AlignSelf) {           properties["align-self"] = toProp(alignSelf)   }
-    fun animation(text: String) {                   properties["animation"] = listOf(CssProperty(text)) }
-    fun animationDelay(delay: DelayDuration) {      properties["animation-delay"] = listOf(delay) }
-    fun animationDirection(direction: AnimationDirection) { properties["animation-direction"] = listOf(direction) }
-    fun animationDuration(duration: DelayDuration) { properties["animation-duration"] = listOf(duration) }
-    fun animationFillMode(fillMode: AnimationFillMode) { properties["animation-fill-mode"] = listOf(fillMode) }
-    fun animationIterationMode(vararg iterationMode: Count) { properties["animation-iteration-mode"] = iterationMode.toList() }
-    fun animationFrame(frame: AnimationFrame) {     properties["animation-frame"] = listOf(frame) }
-    fun animationName(vararg name: String) {        properties["animation-name"] = name.toList().map { an -> CssProperty(an) } }
+    fun alignContent(value: AlignContentValue) {    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) {
-        properties["animation-play-state"] = state.toList()
+        props["animation-play-state"] = prp(*state)
    }
    fun animationTimingFunction(vararg timingFunction: AnimationTimingFunction) {
-        properties["animation-timing-function"] = timingFunction.toList()
+        props["animation-timing-function"] = prp(*timingFunction)
    }
-
-
-    /*
-
-        "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,
-     */
-    fun color(color: Color) {                       properties["color"] = listOf(color)                    }
-    fun backgroundColor(color: Color) {             properties["background-color"] = listOf(color)                    }
-    fun borderRadius(radius: Measurement) {         properties["border-radius"] = listOf(radius)                      }
+    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: RuleBorderStyle) { props["border-bottom-style"] = prp(style) }
+    fun borderBottomWidth(width: BorderWidth) { 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: RuleBorderStyle) { props["border-left-style"] = prp(style) }
+    fun borderLeftWidth(width: BorderWidth) { props["border-left-width"] = prp(width) }
+    fun borderRadius(radius: Measurement) {         props["border-radius"] = prp(radius)                      }
    fun borderRadius(
        topLeftBottomRight: Measurement,
        topRightBottomLeft: Measurement
    ) {
-        properties["border-radius"] = listOf(
+        props["border-radius"] = listOf(
            topLeftBottomRight, topRightBottomLeft
        )
    }
@@ -409,7 +241,7 @@ open class Style(
        topRightBottomLeft: Measurement,
        bottomRight: Measurement
    ) {
-        properties["border-radius"] = listOf(
+        props["border-radius"] = listOf(
            topLeft, topRightBottomLeft, bottomRight
        )
    }
@@ -420,23 +252,130 @@ open class Style(
        bottomRight: Measurement,
        bottomLeft: Measurement
    ) {
-        properties["border-radius"] = listOf(
+        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: RuleBorderStyle) { props["border-right-style"] = prp(style) }
+    fun borderRightWidth(width: BorderWidth) { props["border-right-width"] = prp(width) }
+    fun borderSpacing(vararg spacing: BorderSpacing) { props["border-spacing"] = prp(*spacing) }
+    fun borderStyle(vararg style: RuleBorderStyle) { 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: RuleBorderStyle) { props["border-top-style"] = prp(style) }
+    fun borderTopWidth(width: BorderWidth) { props["border-top-width"] = prp(width) }
+    fun bottom(measurement: Measurement) {          props["bottom"] = prp(measurement) }
+    fun boxDecorationBreak(brk: BoxDecorationBreak) { props["box-decoration-break"] = prp(brk) }
+    fun boxShaduw(shadow: BoxShadow) {              props["box-shaduw"] = 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: RuleBorderStyle) {   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(float: Float) {                       props["float"] = prp(float) }
+    fun font(font: String) {                        props["font"] = prp(font) }
+    fun fontFace(face: FontFace.() -> Unit) {
+        fontFace = FontFace()

-    fun bottom(bottom: Measurement) {               properties["bottom"] = listOf(bottom)    }
-    fun fontFamily(font: String) {                  properties["font-family"] = listOf(CssProperty(font))    }
-    fun fontSize(size: Measurement) {               properties["font-size"] = listOf(size)    }
-    fun height(height: Measurement) {               properties["height"] = listOf(height)    }
-    fun left(left: Measurement) {                   properties["left"] = listOf(left)    }
-    fun margin(all: Measurement) {                  properties["margin"] = listOf(all)    }
-    fun margin(topBottom: Measurement, leftRight: Measurement) { properties["margin"] = listOf(topBottom, leftRight) }
-    fun margin(top: Measurement, right: Measurement, bottom: Measurement, left: Measurement) {
-        properties["margin"] = listOf(top, right, bottom, left)
+        face.invoke(fontFace!!)
    }
-    fun right(right: Measurement) {                 properties["right"] = listOf(right)    }
-    fun top(top: Measurement) {                     properties["top"] = listOf(top)    }
-    fun width(width: Measurement) {                 properties["width"] = listOf(width)    }
+    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 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: GridRowColumn, end: GridRowColumn) { props["grid-column"] = prp(start, end) }
+    fun gridColumnEnd(end: GridRowColumn) {         props["grid-column-end"] = prp(end) }
+    fun gridColumnGap(gap: GridRowColumn) {         props["grid-column-gap"] = prp(gap) }
+    fun gridColumnStart(start: GridRowColumn) {     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: GridRowColumn, end: GridRowColumn) { props["grid-row"] = prp(start, end) }
+    fun gridRowEnd(end: GridRowColumn) {            props["grid-row-end"] = prp(end) }
+    fun gridRowGap(gap: GridRowColumn) {            props["grid-row-end"] = prp(gap) }
+    fun gridRowStart(start: GridRowColumn) {        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) }
+    fun gridTemplateColumn(vararg columns: TemplateRowColumn) { props["grid-template-columns"] = prp(*columns) }
+    fun gridTemplateRows(vararg rows: TemplateRowColumn) { 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["letter-spacing"] = prp("$number") }
+    fun lineHeight(measurement: Measurement) {      props["line-height"] = prp(measurement) }
+    fun lineHeight(height: LineHeight) {            props["line-height"] = prp(height) }
+    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 right(right: Measurement) {                 props["right"] = prp(right)    }
+    fun top(top: Measurement) {                     props["top"] = prp(top)    }
+    fun width(width: Measurement) {                 props["width"] = prp(width)    }

 }
--- a/src/jsMain/kotlin/nl/astraeus/css/Test.kt
+++ b/src/jsMain/kotlin/nl/astraeus/css/Test.kt
@@ -2,8 +2,6 @@ package nl.astraeus.css

 import nl.astraeus.css.properties.*
 import nl.astraeus.css.properties.Color.Companion.hex
-import nl.astraeus.css.properties.Measurement.Companion.em
-import nl.astraeus.css.properties.Measurement.Companion.px
 import nl.astraeus.css.style.Style

 class StyleBase(
@@ -82,7 +80,7 @@ fun main() {
    val sd = style {
        select("#pipo") {
            backgroundColor(hex("ffeedd"))
-            fontFamily("Arial, Courier")
+            `fontFamily`("Arial, Courier")
 //            backgroundColor = Color.hex("eeeeee")
 //            fontFamily = text("Arial, Courier")
 //            animationDelay = listOf(DelayDuration.initial())
--- a/src/jvmMain/kotlin/nl/astraeus/css/Test.kt
+++ b/src/jvmMain/kotlin/nl/astraeus/css/Test.kt
@@ -1,7 +1,6 @@
 package nl.astraeus.css

 import nl.astraeus.css.properties.*
-import nl.astraeus.css.properties.AlignContent.Companion.flexStart
 import nl.astraeus.css.properties.AlignContentValue.*
 import nl.astraeus.css.properties.Color.Companion.hex
 import nl.astraeus.css.style.Css
@@ -137,18 +136,47 @@ fun main() {
 //                    )
                }
                select("border-0") {
-                    apply(border)
+                    import(border)
 //                    borderRadius = BorderRadius(4, 5, 6, 7)
                }
                select("border-1") {
-                    apply(border2)
+                    import(border2)
 //                    borderRadius = BorderRadius(4, 5, 6, 7)
                }
                select("border-2") {
 //                    borderRadius = BorderRadius(4, 5, 6, 7)
-                    apply(border2)
+                    import(border2)
+                    borderStyle(RuleBorderStyle.dashed(), RuleBorderStyle.dotted())
                    animationPlayState(AnimationPlayState.paused(), AnimationPlayState.running())

+                    keyFrames("mymove") {
+                        percentage(0) {
+                            top(0.px())
+                        }
+                        percentage(50) {
+                            top(60.px())
+                        }
+                        percentage(100) {
+                            top(90.px())
+                        }
+                    }
+
+                    keyFrames("yourmove") {
+                        percentage(0) {
+                            top(10.px())
+                        }
+                        percentage(40) {
+                            top(20.px())
+                        }
+                        percentage(60) {
+                            top(30.px())
+                        }
+                        percentage(80) {
+                            top(50.px())
+                            color(Color.hex("0000ff"))
+                        }
+                    }
+
 //                    display = Display.none()
 //                    borderBottomWidth = BorderWidth.perc(13)
                }
@@ -158,8 +186,8 @@ fun main() {

    val borderStyle = style {
        select(".border") {
-            apply(border)
-            apply(font)
+            import(border)
+            import(font)

            select("> p") {
 //                fontSize = FontSize.smaller()