From c40616e69129e9870bc36941370e9b4d76dbd3b3 Mon Sep 17 00:00:00 2001 From: rnentjes Date: Wed, 18 Mar 2020 19:27:17 +0100 Subject: [PATCH] More properties --- .../kotlin/nl/astraeus/css/CssBuilder.kt | 1 - .../nl/astraeus/css/properties/Border.kt | 51 +- .../kotlin/nl/astraeus/css/properties/Box.kt | 10 +- .../nl/astraeus/css/properties/Caption.kt | 8 +- .../nl/astraeus/css/properties/Count.kt | 15 +- .../kotlin/nl/astraeus/css/properties/Flex.kt | 6 +- .../kotlin/nl/astraeus/css/properties/Font.kt | 65 ++- .../kotlin/nl/astraeus/css/properties/Grid.kt | 70 +++ .../nl/astraeus/css/properties/Hyphens.kt | 15 + .../nl/astraeus/css/properties/Image.kt | 26 +- .../nl/astraeus/css/properties/Isolation.kt | 14 + .../astraeus/css/properties/JustifyContent.kt | 17 + .../astraeus/css/properties/LetterSpacing.kt | 13 + .../nl/astraeus/css/properties/Measurement.kt | 12 +- .../nl/astraeus/css/properties/Punctuation.kt | 17 + .../kotlin/nl/astraeus/css/style/FontFace.kt | 43 +- .../kotlin/nl/astraeus/css/style/KeyFrames.kt | 14 + .../kotlin/nl/astraeus/css/style/Style.kt | 515 ++++++++---------- src/jsMain/kotlin/nl/astraeus/css/Test.kt | 4 +- src/jvmMain/kotlin/nl/astraeus/css/Test.kt | 40 +- 20 files changed, 564 insertions(+), 392 deletions(-) create mode 100644 src/commonMain/kotlin/nl/astraeus/css/properties/Grid.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/properties/Hyphens.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/properties/Isolation.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/properties/JustifyContent.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/properties/LetterSpacing.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/properties/Punctuation.kt create mode 100644 src/commonMain/kotlin/nl/astraeus/css/style/KeyFrames.kt diff --git a/src/commonMain/kotlin/nl/astraeus/css/CssBuilder.kt b/src/commonMain/kotlin/nl/astraeus/css/CssBuilder.kt index f4c3461..aaf55f6 100644 --- 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() diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Border.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Border.kt index 20e53e1..128fc17 100644 --- 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") } } diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Box.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Box.kt index a458e0e..d256920 100644 --- 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") } } diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Caption.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Caption.kt index 83b0c85..279b806 100644 --- 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") } } diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Count.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Count.kt index f895917..944b309 100644 --- 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") } } diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Flex.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Flex.kt index b0f804f..14376a2 100644 --- 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") } } diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Font.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Font.kt index 5ab5da3..95dffc9 100644 --- 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") + } + +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Grid.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Grid.kt new file mode 100644 index 0000000..90d2dbb --- /dev/null +++ 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") + } + +} + diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Hyphens.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Hyphens.kt new file mode 100644 index 0000000..a885df2 --- /dev/null +++ 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") + } + +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Image.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Image.kt index a3b6c4d..9620564 100644 --- 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") } } diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Isolation.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Isolation.kt new file mode 100644 index 0000000..a7e7655 --- /dev/null +++ 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") + } + +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/JustifyContent.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/JustifyContent.kt new file mode 100644 index 0000000..1a8eb9f --- /dev/null +++ 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") + } + +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/LetterSpacing.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/LetterSpacing.kt new file mode 100644 index 0000000..a1b14a6 --- /dev/null +++ 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") + } + +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt index e58f8a1..c995035 100644 --- 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") + } +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Punctuation.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Punctuation.kt new file mode 100644 index 0000000..9943375 --- /dev/null +++ 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") + } + +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/style/FontFace.kt b/src/commonMain/kotlin/nl/astraeus/css/style/FontFace.kt index 632d081..a9f4f57 100644 --- 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 = 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 - ) -*/ } diff --git a/src/commonMain/kotlin/nl/astraeus/css/style/KeyFrames.kt b/src/commonMain/kotlin/nl/astraeus/css/style/KeyFrames.kt new file mode 100644 index 0000000..bde525e --- /dev/null +++ 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 = mutableMapOf() + + override fun getValidator(name: String): List? = listOf() + + fun percentage(percentage: Int, style: Css) { val css = Style() + style(css) + + frames[percentage] = style + } +} diff --git a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt b/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt index f8e60ed..1b778a2 100644 --- 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 { +private fun prp(vararg css: CssValue): List { val result = mutableListOf() for (c in css) { @@ -19,9 +18,19 @@ private fun toProp(vararg css: CssValue): List { return result } +private fun prp(vararg css: String): List { + val result = mutableListOf() + + for (c in css) { + result.add(CssProperty(c)) + } + + return result +} + abstract class CssGenerator { val definitions: MutableMap = mutableMapOf() - val properties: MutableMap> = mutableMapOf() + val props: MutableMap> = mutableMapOf() abstract fun getValidator(name: String): List? @@ -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? = null, - var animationDirection: List? = null, - var animationDuration: List? = null, - var animationFillMode: List? = null, - var animationIterationCount: List? = null, - var animationFrame: AnimationFrame? = null, - var animationName: List? = null, - var animationPlayState: List? = null, - var animationTimingFunction: List? = 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? = null, - var backgroundRepeat: List? = null, - var backgroundSize: List? = null, - var border: TextProperty? = null, - var borderBottom: TextProperty? = null, - var borderBottomColor: Color? = null, - var borderBottomLeftRadius: List? = null, - var borderBottomRightRadius: List? = null, - var borderBottomStyle: RuleBorderStyle? = null, - var borderBottomWidth: BorderWidth? = null, - var borderCollapse: BorderCollapse? = null, - var borderColor: List? = null, - var borderImage: TextProperty? = null, - var borderImageOutset: Length? = null, - var borderImageRepeat: List? = null, - var borderImageSlice: List? = null, - var borderImageSource: List? = null, - var borderImageWidth: List? = 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? = null, - var borderStyle: List? = 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? = 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 = mutableMapOf() private val validators = mapOf>( "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 = 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) } } diff --git a/src/jsMain/kotlin/nl/astraeus/css/Test.kt b/src/jsMain/kotlin/nl/astraeus/css/Test.kt index f494833..78252bb 100644 --- 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()) diff --git a/src/jvmMain/kotlin/nl/astraeus/css/Test.kt b/src/jvmMain/kotlin/nl/astraeus/css/Test.kt index 03a9404..be25974 100644 --- 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()