diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/AlignContent.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/AlignContent.kt index 4a20af6..98e9049 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/properties/AlignContent.kt +++ b/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( diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/AlignItems.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/AlignItems.kt index 070cbb0..87ecf56 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/properties/AlignItems.kt +++ b/src/commonMain/kotlin/nl/astraeus/css/properties/AlignItems.kt @@ -1,17 +1,16 @@ package nl.astraeus.css.properties -class AlignItems( - value: String -) : CssProperty(value) { - - companion object { - fun stretch() = AlignItems("stretch") - fun center() = AlignItems("center") - fun flexStart() = AlignItems("flex-start") - fun flexEnd() = AlignItems("flex-end") - fun baseline() = AlignItems("baseline") - fun initial() = AlignItems("initial") - fun inherit() = AlignItems("inherit") - } +enum class AlignItems( + val value: String +): CssValue { + STRETCH("stretch"), + CENTER("center"), + FLEX_START("flex-start"), + FLEX_END("flex-end"), + BASELINE("baseline"), + INITIAL("initial"), + INHERIT("inherit"), + ; + override fun css(): String = value } diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/AlignSelf.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/AlignSelf.kt index 0c5b3d2..a03043d 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/properties/AlignSelf.kt +++ b/src/commonMain/kotlin/nl/astraeus/css/properties/AlignSelf.kt @@ -1,17 +1,17 @@ package nl.astraeus.css.properties -class AlignSelf( - value: String -) : CssProperty(value) { +enum class AlignSelf( + val value: String +): CssValue { + AUTO("auto"), + STRETCH("stretch"), + CENTER("center"), + FLEX_START("flex-start"), + FLEX_END("flex-end"), + BASELINE("baseline"), + INITIAL("initial"), + INHERIT("inherit"), + ; - companion object { - 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") - } + override fun css(): String = value } diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/All.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/All.kt index 73f0d18..fcbef45 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/properties/All.kt +++ b/src/commonMain/kotlin/nl/astraeus/css/properties/All.kt @@ -1,14 +1,13 @@ package nl.astraeus.css.properties -class All( - value: String -) : CssProperty(value) { - - companion object { - fun initial() = All("initial") - fun inherit() = All("inherit") - fun unset() = All("unset") - fun revert() = All("revert") - } +enum class All( + val value: String +): CssValue { + UNSET("unset"), + REVERT("revert"), + INITIAL("initial"), + INHERIT("inherit"), + ; + override fun css(): String = value } diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt index 2ad023f..dc5e4d3 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt +++ b/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 +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/style/FontFace.kt b/src/commonMain/kotlin/nl/astraeus/css/style/FontFace.kt index 7845bc7..632d081 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/style/FontFace.kt +++ b/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 fontSize: FontSize? = null, - var src: TextProperty? = null, - var fontStretch: FontStretch? = null, - var fontStyle: FontStyle? = null, - var fontWeight: FontWeight? = null, - var unicodeRange: TextProperty? = null +// 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 + 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 = mapOf( "font-family" to fontFamily, diff --git a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt b/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt index 5f9068b..bb1cc06 100644 --- a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt +++ b/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 { + val result = mutableListOf() + + for (c in css) { + result.add(CssProperty(c.css())) + } + + return result +} + abstract class CssGenerator { val definitions: MutableMap = mutableMapOf() val properties: MutableMap> = mutableMapOf() @@ -87,7 +97,7 @@ abstract class CssGenerator { if (!minified) { builder.append("\n") } - builder.append(ff.generatePropertyCss(" $indent", minified)) + builder.append(ff.generatePropertyCss( " $indent", minified)) builder.append(indent) builder.append("}") if (!minified) { @@ -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? = null, var animationDirection: List? = 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? = 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 = 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) { - properties["align-content"] = listOf(CssProperty(value.css())) + 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 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) { - properties["margin"] = listOf(all) + fun borderRadius( + topLeft: Measurement, + topRightBottomLeft: Measurement, + bottomRight: Measurement + ) { + properties["border-radius"] = listOf( + topLeft, topRightBottomLeft, bottomRight + ) } - fun margin(topBottom: Measurement, leftRight: Measurement) { - properties["margin"] = listOf(topBottom, leftRight) + fun borderRadius( + 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) } + } diff --git a/src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt b/src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt index 387574e..0a0b801 100644 --- a/src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt +++ b/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) - left = em(5) - backgroundColor = rgba(255, 255, 255, 0.75) + top(10.px()) + left(4.em()) + backgroundColor(rgba(255, 255, 255, 0.75)) select("> a") { - color = hsl(200, 50, 50) + //color = hsl(200, 50, 50) } } } diff --git a/src/jsMain/kotlin/nl/astraeus/css/Test.kt b/src/jsMain/kotlin/nl/astraeus/css/Test.kt index a3e963a..08419fa 100644 --- a/src/jsMain/kotlin/nl/astraeus/css/Test.kt +++ b/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.left = px(left) - this@sizePX.width = px(width) - this@sizePX.height = px(height) + this@sizePX.top(top.px()) + this@sizePX.left(left.px()) + this@sizePX.width(width.px()) + this@sizePX.height(height.px()) } private fun generateCss( @@ -30,34 +30,34 @@ private fun generateCss( css.style { select("body") { - fontFamily = base.mainFont - color = base.mainColor - backgroundColor = base.mainBackgroundColor - alignContent = AlignContent.initial() +// 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) - } +// 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 +// 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 +// width = px(725) +// background = text("") +// 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") - fontFamily = text("Arial, Courier") - animationDelay = listOf(DelayDuration.initial()) +// backgroundColor = Color.hex("eeeeee") +// fontFamily = text("Arial, Courier") +// animationDelay = listOf(DelayDuration.initial()) select("div") { - color = Color.hex("1b1b1b1") - alignContent = AlignContent.flexStart() - animationName = listOf(text("foo"), text("bar")) - animationIterationCount = listOf( - Count.count(3), Count.infinite()) - animationTimingFunction = listOf(AnimationTimingFunction.cubicBezier(0.1, 0.2, 0.3, 0.4), AnimationTimingFunction.easeInOut()) +// color = Color.hex("1b1b1b1") +// alignContent = AlignContent.flexStart() +// animationName = listOf(text("foo"), text("bar")) +// animationIterationCount = listOf( +// Count.count(3), Count.infinite()) +// animationTimingFunction = listOf(AnimationTimingFunction.cubicBezier(0.1, 0.2, 0.3, 0.4), AnimationTimingFunction.easeInOut()) } } } diff --git a/src/jvmMain/kotlin/nl/astraeus/css/Test.kt b/src/jvmMain/kotlin/nl/astraeus/css/Test.kt index c44aa40..f51b315 100644 --- a/src/jvmMain/kotlin/nl/astraeus/css/Test.kt +++ b/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") -// fontFamily = text("Arial, Courier") + backgroundColor(hex("eeeeee")) + fontFamily("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("SanSation") + fontSize(FontSize.larger()) + src("font/sansation_bold.woff") +// fontStretch = FontStretch.condensed() +// fontStyle = FontStyle.italic() +// 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()