rnentjes/kotlin-css-generator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Builder test

Browse Source
This commit is contained in:
rnentjes
2020-03-01 15:22:19 +01:00
parent 1f819c925f
commit 5a0eeac2fe
10 changed files with 166 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/commonMain/kotlin/nl/astraeus/css/properties/AlignContent.kt
View File

@@ -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(

25
src/commonMain/kotlin/nl/astraeus/css/properties/AlignItems.kt
View File

@@ -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
}

26
src/commonMain/kotlin/nl/astraeus/css/properties/AlignSelf.kt
View File

@@ -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
}

19
src/commonMain/kotlin/nl/astraeus/css/properties/All.kt
View File

@@ -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
}

8
src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
View File

@@ -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
}

26
src/commonMain/kotlin/nl/astraeus/css/style/FontFace.kt
View File

@@ -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<String, Any?> = mapOf(
"font-family" to fontFamily,

72
src/commonMain/kotlin/nl/astraeus/css/style/Style.kt
View File

@@ -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()
@@ -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<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) {
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) }
}

10
src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt
View File

@@ -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)
}
}
}

64
src/jsMain/kotlin/nl/astraeus/css/Test.kt
View File

@@ -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())
}
}
}

22
src/jvmMain/kotlin/nl/astraeus/css/Test.kt
View File

@@ -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()