Builder test

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

@@ -2,11 +2,11 @@ package nl.astraeus.css.properties
 
 enum class AlignContentValue(
     val value: String
-) {
+): CssValue {
     STRETCH("stretch"),
     ;
 
-    fun css() = value
+    override fun css() = value
 }
 
 class AlignContent(

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

@@ -1,17 +1,16 @@
 package nl.astraeus.css.properties
 
-class AlignItems(
+enum class AlignItems(
-    value: String
+    val value: String
-) : CssProperty(value) {
+): CssValue {
-
+    STRETCH("stretch"),
-    companion object {
+    CENTER("center"),
-        fun stretch() = AlignItems("stretch")
+    FLEX_START("flex-start"),
-        fun center() = AlignItems("center")
+    FLEX_END("flex-end"),
-        fun flexStart() = AlignItems("flex-start")
+    BASELINE("baseline"),
-        fun flexEnd() = AlignItems("flex-end")
+    INITIAL("initial"),
-        fun baseline() = AlignItems("baseline")
+    INHERIT("inherit"),
-        fun initial() = AlignItems("initial")
+    ;
-        fun inherit() = AlignItems("inherit")
-    }
 
+    override fun css(): String = value
 }

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

@@ -1,17 +1,17 @@
 package nl.astraeus.css.properties
 
-class AlignSelf(
+enum class AlignSelf(
-    value: String
+    val value: String
-) : CssProperty(value) {
+): CssValue {
+    AUTO("auto"),
+    STRETCH("stretch"),
+    CENTER("center"),
+    FLEX_START("flex-start"),
+    FLEX_END("flex-end"),
+    BASELINE("baseline"),
+    INITIAL("initial"),
+    INHERIT("inherit"),
+    ;
 
-    companion object {
+    override fun css(): String = value
-        fun auto() = AlignSelf("auto")
-        fun stretch() = AlignSelf("stretch")
-        fun center() = AlignSelf("center")
-        fun flexStart() = AlignSelf("flex-start")
-        fun flexEnd() = AlignSelf("flex-end")
-        fun baseline() = AlignSelf("baseline")
-        fun initial() = AlignSelf("initial")
-        fun inherit() = AlignSelf("inherit")
-    }
 }

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

@@ -1,14 +1,13 @@
 package nl.astraeus.css.properties
 
-class All(
+enum class All(
-    value: String
+    val value: String
-) : CssProperty(value) {
+): CssValue {
-
+    UNSET("unset"),
-    companion object {
+    REVERT("revert"),
-        fun initial() = All("initial")
+    INITIAL("initial"),
-        fun inherit() = All("inherit")
+    INHERIT("inherit"),
-        fun unset() = All("unset")
+    ;
-        fun revert() = All("revert")
-    }
 
+    override fun css(): String = value
 }

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

@@ -2,9 +2,9 @@ package nl.astraeus.css.properties
 
 open class CssProperty(
     val value: String
-) {
+): CssValue {
 
-    fun css(): String = value
+    override fun css(): String = value
 
 }
 
@@ -13,3 +13,7 @@ fun text(value: String) = TextProperty(value)
 class TextProperty(
     value: String
 ): CssProperty(value)
+
+interface CssValue {
+    fun css(): String
+}

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

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

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

@@ -8,6 +8,16 @@ typealias Css = Style.() -> Unit
 @DslMarker
 annotation class CssTagMarker
 
+private fun toProp(vararg css: CssValue): List<CssProperty> {
+    val result = mutableListOf<CssProperty>()
+
+    for (c in css) {
+        result.add(CssProperty(c.css()))
+    }
+
+    return result
+}
+
 abstract class CssGenerator {
     val definitions: MutableMap<String, Css> = mutableMapOf()
     val properties: MutableMap<String, List<CssProperty>> = mutableMapOf()
@@ -112,10 +122,6 @@ abstract class CssGenerator {
 @CssTagMarker
 open class Style(
 /*
-    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,
@@ -131,7 +137,6 @@ open class Style(
     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,
@@ -156,7 +161,6 @@ open class Style(
     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,
@@ -211,7 +215,6 @@ open class Style(
     var font: TextProperty? = null,
 
     var color: Color? = null,
-    var fontFamily: TextProperty? = null,
     var fontSize: FontSize? = null,
     var height: Measurement? = null,
     var left: Measurement? = null,
@@ -241,10 +244,6 @@ open class Style(
 
 /*
     override fun getMapping(): Map<String, Any?> = mapOf(
-        "align-content" to alignContent,
-        "align-items" to alignItems,
-        "align-self" to alignSelf,
-        "all" to all,
         "animation" to animation,
         "animation-delay" to animationDelay,
         "animation-direction" to animationDirection,
@@ -285,7 +284,6 @@ open class Style(
         "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,
@@ -361,19 +359,55 @@ open class Style(
         face.invoke(fontFace!!)
     }
 
-    fun alignContent(value: AlignContentValue) {
+    fun alignContent(value: AlignContentValue) {    properties["align-content"] = toProp(value)    }
-        properties["align-content"] = listOf(CssProperty(value.css()))
+    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 backgroundColor(color: Color) {             properties["background-color"] = listOf(color)                    }
+    fun borderRadius(radius: Measurement) {         properties["border-radius"] = listOf(radius)                      }
+    fun borderRadius(
+        topLeftBottomRight: Measurement,
+        topRightBottomLeft: Measurement
+    ) {
+        properties["border-radius"] = listOf(
+            topLeftBottomRight, topRightBottomLeft
+        )
     }
 
-    fun margin(all: Measurement) {
+    fun borderRadius(
-        properties["margin"] = listOf(all)
+        topLeft: Measurement,
+        topRightBottomLeft: Measurement,
+        bottomRight: Measurement
+    ) {
+        properties["border-radius"] = listOf(
+            topLeft, topRightBottomLeft, bottomRight
+        )
     }
 
-    fun margin(topBottom: Measurement, leftRight: Measurement) {
+    fun borderRadius(
-        properties["margin"] = listOf(topBottom, leftRight)
+        topLeft: Measurement,
+        topRight: Measurement,
+        bottomRight: Measurement,
+        bottomLeft: Measurement
+    ) {
+        properties["border-radius"] = listOf(
+            topLeft, topRight, bottomRight, bottomLeft
+        )
     }
 
+    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)
     }
+    fun right(right: Measurement) {                 properties["right"] = listOf(right)    }
+    fun top(top: Measurement) {                     properties["top"] = listOf(top)    }
+    fun width(width: Measurement) {                 properties["width"] = listOf(width)    }
+
 }

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

@@ -4,6 +4,8 @@ import nl.astraeus.css.properties.Color.Companion.hsl
 import nl.astraeus.css.properties.Color.Companion.rgba
 import nl.astraeus.css.properties.Measurement.Companion.em
 import nl.astraeus.css.properties.Measurement.Companion.px
+import nl.astraeus.css.properties.em
+import nl.astraeus.css.properties.px
 
 //import kotlin.test.Test
 
@@ -16,12 +18,12 @@ object TestCssBuilder {
         css.style {
 
             select(".test") {
-                top = px(10)
+                top(10.px())
-                left = em(5)
+                left(4.em())
-                backgroundColor = rgba(255, 255, 255, 0.75)
+                backgroundColor(rgba(255, 255, 255, 0.75))
 
                 select("> a") {
-                    color = hsl(200, 50, 50)
+                    //color = hsl(200, 50, 50)
                 }
             }
         }

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

@@ -3,7 +3,7 @@ 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.StyleDefinition
+import nl.astraeus.css.style.Style
 
 class StyleBase(
     val mainColor: Color = Color.hsl(128, 50, 50),
@@ -11,16 +11,16 @@ class StyleBase(
     val mainFont: TextProperty = text("Arial")
 )
 
-private fun StyleDefinition.sizePX(
+private fun Style.sizePX(
     left: Int,
     top: Int,
     width: Int,
     height: Int
 ) {
-    this@sizePX.top = px(top)
+    this@sizePX.top(top.px())
-    this@sizePX.left = px(left)
+    this@sizePX.left(left.px())
-    this@sizePX.width = px(width)
+    this@sizePX.width(width.px())
-    this@sizePX.height = px(height)
+    this@sizePX.height(height.px())
 }
 
 private fun generateCss(
@@ -30,34 +30,34 @@ private fun generateCss(
 
     css.style {
         select("body") {
-            fontFamily = base.mainFont
+//            fontFamily = base.mainFont
-            color = base.mainColor
+//            color = base.mainColor
-            backgroundColor = base.mainBackgroundColor
+//            backgroundColor = base.mainBackgroundColor
-            alignContent = AlignContent.initial()
+//            alignContent = AlignContent.initial()
         }
 
         select(".test") {
-            top = px(10)
+//            top = px(10)
-            left = em(5)
+//            left = em(5)
-            backgroundColor = Color.rgba(255, 255, 255, 0.75)
+//            backgroundColor = Color.rgba(255, 255, 255, 0.75)
-
+//
-            select("> a") {
+//            select("> a") {
-                color = Color.hsl(200, 50, 50)
+//                color = Color.hsl(200, 50, 50)
-            }
+//            }
         }
 
         select("nav") {
             select("ul") {
-                color = Color.hsl(0, 100, 25)
+//                color = Color.hsl(0, 100, 25)
-                backgroundColor = base.mainBackgroundColor
+//                backgroundColor = base.mainBackgroundColor
             }
             select("li") {
                 sizePX(25, 25, 200, 200)
 
                 select("a") {
-                    width = px(725)
+//                    width = px(725)
-                    background = text("")
+//                    background = text("")
-                    backgroundColor = base.mainBackgroundColor
+//                    backgroundColor = base.mainBackgroundColor
                 }
             }
         }
@@ -77,19 +77,19 @@ fun main() {
     println(css1)
     println(css2)
 
-    val sd = css {
+    val sd = style {
         select("#pipo") {
-            backgroundColor = Color.hex("eeeeee")
+//            backgroundColor = Color.hex("eeeeee")
-            fontFamily = text("Arial, Courier")
+//            fontFamily = text("Arial, Courier")
-            animationDelay = listOf(DelayDuration.initial())
+//            animationDelay = listOf(DelayDuration.initial())
 
             select("div") {
-                color = Color.hex("1b1b1b1")
+//                color = Color.hex("1b1b1b1")
-                alignContent = AlignContent.flexStart()
+//                alignContent = AlignContent.flexStart()
-                animationName = listOf(text("foo"), text("bar"))
+//                animationName = listOf(text("foo"), text("bar"))
-                animationIterationCount = listOf(
+//                animationIterationCount = listOf(
-                    Count.count(3), Count.infinite())
+//                    Count.count(3), Count.infinite())
-                animationTimingFunction = listOf(AnimationTimingFunction.cubicBezier(0.1, 0.2, 0.3, 0.4), AnimationTimingFunction.easeInOut())
+//                animationTimingFunction = listOf(AnimationTimingFunction.cubicBezier(0.1, 0.2, 0.3, 0.4), AnimationTimingFunction.easeInOut())
             }
         }
     }

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

@@ -3,6 +3,7 @@ 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
 import nl.astraeus.css.style.Style
 
@@ -99,20 +100,22 @@ fun main() {
 
     val sd = style {
         select("#pipo") {
-//            backgroundColor = Color.hex("eeeeee")
+            backgroundColor(hex("eeeeee"))
-//            fontFamily = text("Arial, Courier")
+            fontFamily("Arial, Courier")
 //            animationDelay = listOf(DelayDuration.initial())
 
             select("div") {
                 fontFace {
-                    fontFamily = text("SanSation")
+                    fontFamily("SanSation")
-                    fontSize = FontSize.larger()
+                    fontSize(FontSize.larger())
-                    src = text("font/sansation_bold.woff")
+                    src("font/sansation_bold.woff")
-                    fontStretch = FontStretch.condensed()
+//                    fontStretch = FontStretch.condensed()
-                    fontStyle = FontStyle.italic()
+//                    fontStyle = FontStyle.italic()
-                    fontWeight = FontWeight._600()
+//                    fontWeight = FontWeight._600()
                 }
 
+                fontFamily("SanSation")
+
 //                fontFamily = text("SanSation")
 //                color = Color.hex("1b1b1b1")
 //                alignContent = flexStart()
@@ -121,6 +124,9 @@ fun main() {
 //                    text("bar")
 //                )
                 select("span") {
+                    alignItems(AlignItems.BASELINE)
+                    alignSelf(AlignSelf.FLEX_START)
+
 //                    animationIterationCount = listOf(
 //                        Count.count(3),
 //                        Count.infinite()