More properties

build.gradle.kts

@@ -10,6 +10,8 @@ repositories {
     mavenCentral()
 }
 
+apply(plugin = "kotlin-dce-js")
+
 kotlin {
     /* Targets configuration omitted. 
     *  To find out how to configure the targets, please follow the link:
@@ -27,7 +29,7 @@ kotlin {
         val commonTest by getting {
             dependencies {
                 implementation(kotlin("test-common"))
-                implementation(kotlin("test-annotations-common"))
+                //implementation(kotlin("test-annotations-common"))
             }
         }
         val jsMain by getting {
@@ -38,7 +40,7 @@ kotlin {
         val jsTest by getting {
             dependencies {
                 implementation(kotlin("test-js"))
-                implementation(kotlin("test-annotations-js"))
+                //implementation(kotlin("test-annotations-js"))
             }
         }
         val jvmMain by getting {

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

@@ -0,0 +1,17 @@
+package nl.astraeus.css
+
+enum class AlignContent(
+    val value: String
+) : CssProperty {
+    STRETCH("stretch"),
+    CENTER("center"),
+    FLEX_START("flex-start"),
+    FLEX_END("flex-end"),
+    SPACE_BETWEEN("space-between"),
+    SPACE_AROUND("space-around"),
+    INITIAL("initial"),
+    INHERIT("inherit"),
+    ;
+
+    override fun css(): String = value
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+package nl.astraeus.css
+
+enum class All(
+    val value: String
+) : CssProperty {
+    INITIAL("initial"),
+    INHERIT("inherit"),
+    UNSET("unset"),
+    ;
+
+    override fun css(): String = value
+}

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

@@ -0,0 +1,29 @@
+package nl.astraeus.css
+
+enum class AnimationDirection(
+    val value: String
+) : CssProperty {
+    NORMAL("normal"),
+    REVERSE("reverse"),
+    ALTERNATE("alternate"),
+    ALTERNATE_REVERSE("alternate-reverse"),
+    INITIAL("initial"),
+    INHERIT("inherit"),
+    ;
+
+    override fun css(): String = value
+}
+
+enum class AnimationFillMode(
+    val value: String
+) : CssProperty {
+    NONE("none"),
+    FORWARDS("forwards"),
+    BACKWARDS("backwards"),
+    BOTH("both"),
+    INITIAL("initial"),
+    INHERIT("inherit"),
+    ;
+
+    override fun css(): String = value
+}

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

@@ -1,16 +1,25 @@
 package nl.astraeus.css
 
+fun hex(hex: String): Color = HexColor(hex)
 fun rgb(red: Int, green: Int, blue: Int): Color = RGBColor(red, green, blue)
 fun rgba(red: Int, green: Int, blue: Int, alpha: Double): Color = RGBAColor(red, green, blue, alpha)
 fun hsl(hue: Int, saturation: Int, lightness: Int): Color = HSLColor(hue, saturation, lightness)
 fun hsla(hue: Int, saturation: Int, lightness: Int, alpha: Double): Color = HSLAColor(hue, saturation, lightness, alpha)
 
-open class Color : CssProperty() {
+open class Color : CssProperty {
 
     override fun css(): String = "#xxxxxx"
 
 }
 
+class HexColor(
+    val hex: String
+) : Color() {
+
+    override fun css(): String = "#$hex"
+
+}
+
 class RGBColor(
     val red: Int,
     val green: Int,

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

@@ -0,0 +1,30 @@
+package nl.astraeus.css
+
+
+enum class CountType {
+    NUMBER,
+    INFINITE,
+    INITIAL,
+    INHERIT
+}
+
+class Count(
+    val type: CountType,
+    val number: Int
+) : CssProperty {
+
+    override fun css(): String = when(type) {
+        CountType.NUMBER -> "$number"
+        CountType.INFINITE -> "infinite"
+        CountType.INITIAL -> "initial"
+        CountType.INHERIT -> "inherit"
+    }
+
+    companion object {
+        fun count(number: Int): Count = Count(CountType.NUMBER, number)
+        fun infinite(): Count = Count(CountType.INFINITE, 0)
+        fun initial(): Count = Count(CountType.INITIAL, 0)
+        fun inherit(): Count = Count(CountType.INHERIT, 0)
+    }
+}
+

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

@@ -5,25 +5,49 @@ annotation class CssTagMarker
 
 @CssTagMarker
 open class Style(
-    var color: Color? = null,
+    var alignContent: AlignContent? = null,
+    var alignItems: AlignItems? = null,
+    var alignSelf: AlignSelf? = null,
+    var all: All? = null,
+    var animation: TextProperty? = null,
+    var animationDelay: DelayDuration? = null,
+    var animationDirection: AnimationDirection? = null,
+    var animationDuration: DelayDuration? = null,
+    var animationFillMode: AnimationFillMode? = null,
+    var animationIterationCount: Count? = null,
     var backgroundColor: Color? = null,
+    var color: Color? = null,
+    var fontFamily: TextProperty? = null,
+    var fontSize: FontSize? = null,
+    var height: Measurement? = null,
     var left: Measurement? = null,
     var top: Measurement? = null,
-    var width: Measurement? = null,
+    var transitionDelay: DelayDuration? = null,
-    var height: Measurement? = null,
+    var transitionDuration: DelayDuration? = null,
-    var fontFamily: PlainProperty? = null,
+    var width: Measurement? = null
-    var fontSize: FontSize? = null
 ) {
 
     fun getMapping() = mapOf(
-        "color" to color,
+        "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,
+        "animation-duration" to animationDuration,
+        "animation-fill-mode" to animationFillMode,
+        "animation-iteration-count" to animationIterationCount,
         "background-color" to backgroundColor,
+        "color" to color,
+        "font-family" to fontFamily,
+        "font-size" to fontSize,
+        "height" to height,
         "left" to left,
         "top" to top,
-        "width" to width,
+        "transition-delay" to transitionDelay,
-        "height" to height,
+        "transition-duration" to transitionDuration,
-        "font-family" to fontFamily,
+        "width" to width
-        "font-size" to fontSize
     )
 
     fun propertyCss(indent: String, name: String, prop: CssProperty?): String = if (prop != null) {
@@ -85,8 +109,8 @@ open class StyleDefinition : Style() {
 
 }
 
-fun css(definition: Style.() -> Unit): Style {
+fun css(definition: StyleDefinition.() -> Unit): StyleDefinition {
-    val css = Style()
+    val css = StyleDefinition()
 
     definition(css)
 

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

@@ -1,16 +1,16 @@
 package nl.astraeus.css
 
-abstract class CssProperty {
+interface CssProperty {
 
-    abstract fun css(): String
+    fun css(): String
 
 }
 
-fun plain(value: String) = PlainProperty(value)
+fun text(value: String) = TextProperty(value)
 
-class PlainProperty(
+class TextProperty(
     val value: String
-): CssProperty() {
+): CssProperty {
 
     override fun css(): String = value
 

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

@@ -0,0 +1,25 @@
+package nl.astraeus.css
+
+
+enum class DelayDurationType {
+    TIME,
+    INITIAL,
+    INHERIT
+}
+
+class DelayDuration(
+    val type: DelayDurationType,
+    val seconds: Int
+) : CssProperty {
+
+    override fun css(): String = when(type) {
+        DelayDurationType.TIME -> "${seconds}s"
+        DelayDurationType.INITIAL -> "initial"
+        DelayDurationType.INHERIT -> "inherit"
+    }
+
+}
+
+fun seconds(seconds: Int): DelayDuration = DelayDuration(DelayDurationType.TIME, seconds)
+fun initial(): DelayDuration = DelayDuration(DelayDurationType.INITIAL, 0)
+fun inherit(): DelayDuration = DelayDuration(DelayDurationType.INHERIT, 0)

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

@@ -3,11 +3,13 @@ package nl.astraeus.css
 fun px(nr: Int): Measurement = Measurement(MeasurementType.PX, nr)
 fun em(nr: Int): Measurement = Measurement(MeasurementType.EM, nr)
 fun perc(nr: Int): Measurement = Measurement(MeasurementType.PERCENTAGE, nr)
+fun pc(nr: Int): Measurement = Measurement(MeasurementType.PICAS, nr)
 
 enum class MeasurementType {
     PX,
     EM,
     PERCENTAGE,
+    PICAS,
     OTHER
 }
 
@@ -15,7 +17,7 @@ open class Measurement(
     val type: MeasurementType,
     val intValue: Int = 0,
     val stringValue: String = ""
-) : CssProperty() {
+) : CssProperty {
 
     override fun css(): String = when(type) {
         MeasurementType.PX -> {
@@ -27,6 +29,9 @@ open class Measurement(
         MeasurementType.PERCENTAGE -> {
             "${stringValue}%"
         }
+        MeasurementType.PICAS -> {
+            "${stringValue}pc"
+        }
         else -> {
             error("Unhandled type $type")
         }
@@ -38,7 +43,6 @@ enum class FontSizeType {
     PX,
     EM,
     PERCENTAGE,
-
 }
 
 class FontSize(

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

@@ -1,10 +1,10 @@
 package nl.astraeus.css
 
-import kotlin.test.Test
+//import kotlin.test.Test
 
 object TestCssBuilder {
 
-    @Test
+    //@Test
     fun testBuilder() {
         val css = CssBuilder()
 
@@ -15,7 +15,7 @@ object TestCssBuilder {
                 left = em(5)
                 backgroundColor = rgba(255, 255, 255, 0.75)
 
-                sel("> a") {
+                css("> a") {
                     color = hsl(200, 50, 50)
                 }
             }

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

@@ -3,7 +3,7 @@ package nl.astraeus.css
 class StyleBase(
     val mainColor: Color = hsl(128, 50, 50),
     val mainBackgroundColor: Color = hsl(64, 50, 50),
-    val mainFont: PlainProperty = plain("Arial")
+    val mainFont: TextProperty = text("Arial")
 )
 
 private fun StyleDefinition.sizePX(
@@ -64,9 +64,26 @@ fun main() {
     val css2 = generateCss(StyleBase(
         hsl(32, 40, 50),
         hsl(64, 60, 35),
-        plain("Courier")
+        text("Courier")
     ))
 
     println(css1)
     println(css2)
+
+    val sd = css {
+        css("#pipo") {
+            backgroundColor = hex("eeeeee")
+            fontFamily = text("Arial, Courier")
+            animationDelay = initial()
+
+            css("div") {
+                color = hex("1b1b1b1")
+                alignContent = AlignContent.FLEX_START
+                animationIterationCount = Count.count(3)
+            }
+        }
+    }
+
+    println("======")
+    println(sd.generateCss())
 }