More properties

This commit is contained in:
2020-03-21 19:24:07 +01:00
parent c40616e691
commit 7a92e53006
14 changed files with 287 additions and 36 deletions

View File

@@ -18,23 +18,23 @@ class BorderRadius(
}
}
class RuleBorderStyle(
class BorderStyle(
value: String
): CssProperty(value) {
companion object {
fun none() = RuleBorderStyle("none")
fun hidden() = RuleBorderStyle("hidden")
fun dotted() = RuleBorderStyle("dotted")
fun dashed() = RuleBorderStyle("dashed")
fun solid() = RuleBorderStyle("solid")
fun double() = RuleBorderStyle("double")
fun groove() = RuleBorderStyle("groove")
fun ridge() = RuleBorderStyle("ridge")
fun inset() = RuleBorderStyle("inset")
fun outset() = RuleBorderStyle("outset")
fun initial() = RuleBorderStyle("initial")
fun inherit() = RuleBorderStyle("inherit")
fun none() = BorderStyle("none")
fun hidden() = BorderStyle("hidden")
fun dotted() = BorderStyle("dotted")
fun dashed() = BorderStyle("dashed")
fun solid() = BorderStyle("solid")
fun double() = BorderStyle("double")
fun groove() = BorderStyle("groove")
fun ridge() = BorderStyle("ridge")
fun inset() = BorderStyle("inset")
fun outset() = BorderStyle("outset")
fun initial() = BorderStyle("initial")
fun inherit() = BorderStyle("inherit")
}
}
@@ -46,17 +46,6 @@ class BorderWidth(
fun thin() = BorderWidth("thin")
fun medium() = BorderWidth("medium")
fun thick() = BorderWidth("thick")
fun px(nr: Int) = BorderWidth("${nr}px")
fun em(nr: Int) = BorderWidth("${nr}em")
fun em(nr: Double) = BorderWidth("${nr}em")
fun perc(nr: Int) = BorderWidth("${nr}%")
fun perc(nr: Double) = BorderWidth("${nr}%")
fun pc(nr: Int) = BorderWidth("${nr}pc")
fun pc(nr: Double) = BorderWidth("${nr}pc")
fun cm(nr: Int) = BorderWidth("${nr}cm")
fun cm(nr: Double) = BorderWidth("${nr}cm")
fun initial() = BorderWidth("initial")
fun inherit() = BorderWidth("inherit")
}

View File

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

View File

@@ -0,0 +1,48 @@
package nl.astraeus.css.properties
class ListStylePosition(
value: String
) : CssProperty(value) {
companion object {
fun inside() = ListStylePosition("inside")
fun outside() = ListStylePosition("outside")
fun initial() = ListStylePosition("initial")
fun inherit() = ListStylePosition("inherit")
}
}
class ListStyleType(
value: String
) : CssProperty(value) {
companion object {
fun disc() = ListStyleType("disc")
fun armenian() = ListStyleType("armenian")
fun circle() = ListStyleType("circle")
fun cjkIdeographic() = ListStyleType("cjk-ideographic")
fun decimal() = ListStyleType("decimal")
fun decimalLeadingZero() = ListStyleType("decimal-leading-zero")
fun georgian() = ListStyleType("georgian")
fun hebrew() = ListStyleType("hebrew")
fun hiragana() = ListStyleType("hiragana")
fun hiraganaIroha() = ListStyleType("hiragana-iroha")
fun katakana() = ListStyleType("katakana")
fun katakanaIroha() = ListStyleType("katakana-iroha")
fun lowerAlpha() = ListStyleType("lower-alpha")
fun lowerGreek() = ListStyleType("lower-greek")
fun lowerLatin() = ListStyleType("lower-latin")
fun lowerRoman() = ListStyleType("lower-roman")
fun none() = ListStyleType("none")
fun square() = ListStyleType("square")
fun upperAlpha() = ListStyleType("upper-alpha")
fun upperGreek() = ListStyleType("upper-greek")
fun upperLatin() = ListStyleType("upper-latin")
fun upperRoman() = ListStyleType("upper-roman")
fun initial() = ListStyleType("initial")
fun inherit() = ListStyleType("inherit")
}
}

View File

@@ -0,0 +1,25 @@
package nl.astraeus.css.properties
class MixBlendMode(
value: String
) : CssProperty(value) {
companion object {
fun normal() = MixBlendMode("normal")
fun multiply() = MixBlendMode("multiply")
fun screen() = MixBlendMode("screen")
fun overlay() = MixBlendMode("overlay")
fun darken() = MixBlendMode("darken")
fun lighten() = MixBlendMode("lighten")
fun colorDodge() = MixBlendMode("color-dodge")
fun colorBurn() = MixBlendMode("color-burn")
fun difference() = MixBlendMode("difference")
fun exclusion() = MixBlendMode("exclusion")
fun hue() = MixBlendMode("hue")
fun saturation() = MixBlendMode("saturation")
fun color() = MixBlendMode("color")
fun luminosity() = MixBlendMode("luminosity")
}
}

View File

@@ -0,0 +1,17 @@
package nl.astraeus.css.properties
class ObjectFit(
value: String
) : CssProperty(value) {
companion object {
fun fill() = ObjectFit("fill")
fun contain() = ObjectFit("contain")
fun cover() = ObjectFit("cover")
fun scaleDown() = ObjectFit("scale-down")
fun none() = ObjectFit("none")
fun initial() = ObjectFit("initial")
fun inherit() = ObjectFit("inherit")
}
}

View File

@@ -0,0 +1,12 @@
package nl.astraeus.css.properties
class Opacity(
value: String
) : CssProperty(value) {
companion object {
fun initial() = Opacity("initial")
fun inherit() = Opacity("inherit")
}
}

View File

@@ -0,0 +1,12 @@
package nl.astraeus.css.properties
class Order(
value: String
) : CssProperty(value) {
companion object {
fun initial() = Order("initial")
fun inherit() = Order("inherit")
}
}

View File

@@ -0,0 +1,14 @@
package nl.astraeus.css.properties
class OutlineWidth(
value: String
) : CssProperty(value) {
companion object {
fun thin() = OutlineWidth("thin")
fun medium() = OutlineWidth("medium")
fun thick() = OutlineWidth("thick")
fun initial() = BorderWidth("initial")
fun inherit() = BorderWidth("inherit")
}
}

View File

@@ -0,0 +1,15 @@
package nl.astraeus.css.properties
class Overflow(
value: String
) : CssProperty(value) {
companion object {
fun visible() = Overflow("visible")
fun hidden() = Overflow("hidden")
fun scroll() = Overflow("scroll")
fun auto() = Overflow("auto")
fun initial() = BorderWidth("initial")
fun inherit() = BorderWidth("inherit")
}
}

View File

@@ -0,0 +1,12 @@
package nl.astraeus.css.properties
class Padding(
value: String
) : CssProperty(value) {
companion object {
fun initial() = Padding("initial")
fun inherit() = Padding("inherit")
}
}

View File

@@ -0,0 +1,17 @@
package nl.astraeus.css.properties
class PageBreak(
value: String
) : CssProperty(value) {
companion object {
fun auto() = PageBreak("auto")
fun always() = PageBreak("always")
fun avoid() = PageBreak("avoid")
fun left() = PageBreak("left")
fun right() = PageBreak("right")
fun initial() = PageBreak("initial")
fun inherit() = PageBreak("inherit")
}
}

View File

@@ -6,7 +6,9 @@ open class KeyFrames : CssGenerator() {
override fun getValidator(name: String): List<Validator>? = listOf()
fun percentage(percentage: Int, style: Css) { val css = Style()
fun percentage(percentage: Int, style: Css) {
val css = Style()
style(css)
frames[percentage] = style

View File

@@ -133,7 +133,27 @@ abstract class CssGenerator {
builder.append("}\n")
}
}
}
finalStyle.media.let { mq ->
mq.keys.sorted().forEach { mediaName ->
val css = mq[mediaName]
indent(minified, builder, indent)
builder.append("@media ")
builder.append(mediaName)
builder.append(" {\n")
css?.let { css ->
val mediaStyle = Style()
css(mediaStyle)
builder.append(mediaStyle.generatePropertyCss(" $indent", minified))
}
indent(minified, builder, indent)
builder.append("}\n")
}
}
builder.append(css)
@@ -158,6 +178,7 @@ abstract class CssGenerator {
open class Style : CssGenerator() {
var fontFace: FontFace? = null
var keyFrames: MutableMap<String, KeyFrames> = mutableMapOf()
var media: MutableMap<String, Css> = mutableMapOf()
private val validators = mapOf<String, List<Validator>>(
"background-position" to listOf(InitialInheritSingleValue()),
"background-size" to listOf(MaxCountValidator(2)),
@@ -212,8 +233,9 @@ open class Style : CssGenerator() {
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 borderBottomStyle(style: BorderStyle) { props["border-bottom-style"] = prp(style) }
fun borderBottomWidth(width: BorderWidth) { props["border-bottom-width"] = prp(width) }
fun borderBottomWidth(width: Measurement) { 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) }
@@ -224,8 +246,9 @@ open class Style : CssGenerator() {
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 borderLeftStyle(style: BorderStyle) { props["border-left-style"] = prp(style) }
fun borderLeftWidth(width: BorderWidth) { props["border-left-width"] = prp(width) }
fun borderLeftWidth(width: Measurement) { props["border-left-width"] = prp(width) }
fun borderRadius(radius: Measurement) { props["border-radius"] = prp(radius) }
fun borderRadius(
topLeftBottomRight: Measurement,
@@ -258,16 +281,18 @@ open class Style : CssGenerator() {
}
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 borderRightStyle(style: BorderStyle) { props["border-right-style"] = prp(style) }
fun borderRightWidth(width: BorderWidth) { props["border-right-width"] = prp(width) }
fun borderRightWidth(width: Measurement) { 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 borderStyle(vararg style: BorderStyle) { 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 borderTopStyle(style: BorderStyle) { props["border-top-style"] = prp(style) }
fun borderTopWidth(width: BorderWidth) { props["border-top-width"] = prp(width) }
fun borderTopWidth(width: Measurement) { 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) }
@@ -286,7 +311,7 @@ open class Style : CssGenerator() {
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 columnRuleStyle(style: BorderStyle) { 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) }
@@ -317,6 +342,7 @@ open class Style : CssGenerator() {
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 fontSize(size: Measurement) { 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) }
@@ -366,6 +392,10 @@ open class Style : CssGenerator() {
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 listStyle(style: String) { props["list-style"] = prp(style) }
fun listStyleImage(url: String) { props["list-style-image"] = prp("url('$url')")}
fun listStylePosition(position: ListStylePosition) { props["list-style-position"] = prp(position) }
fun listStyleType(position: ListStyleType) { props["list-style-type"] = prp(position) }
fun margin(all: Measurement) { props["margin"] = prp(all) }
fun margin(
topBottom: Measurement,
@@ -374,6 +404,56 @@ open class Style : CssGenerator() {
fun margin(top: Measurement, right: Measurement, bottom: Measurement, left: Measurement) {
props["margin"] = prp(top, right, bottom, left)
}
fun marginBottom(bottom: Measurement) { props["margin-bottom"] = prp(bottom) }
fun marginLeft(left: Measurement) { props["margin-left"] = prp(left) }
fun marginRight(right: Measurement) { props["margin-right"] = prp(right) }
fun marginTop(top: Measurement) { props["margin-top"] = prp(top) }
fun maxHeight(height: Measurement) { props["max-height"] = prp(height) }
fun maxWidth(width: Measurement) { props["max-width"] = prp(width) }
fun media(definition: String, style: Css) {
val css = Style()
style(css)
media[definition] = style
}
fun minHeight(height: Measurement) { props["min-height"] = prp(height) }
fun minWidth(width: Measurement) { props["min-width"] = prp(width) }
fun mixBlendMode(blendMode: MixBlendMode) { props["mix-blend-mode"] = prp(blendMode) }
fun objectFit(fit: ObjectFit) { props["object-fit"] = prp(fit) }
fun objectPosition(position: String) { props["object-position"] = prp(position) }
fun opacity(opacity: Double) { props["opacity"] = prp(opacity.toString()) }
fun opacity(opacity: Opacity) { props["opacity"] = prp(opacity.toString()) }
fun order(order: Int) { props["order"] = prp(order.toString()) }
fun order(order: Order) { props["order"] = prp(order) }
fun outline(outline: String) { props["outline"] = prp(outline) }
fun outlineColor(color: Color) { props["outline-color"] = prp(color) }
fun outlineOffset(offset: Measurement) { props["outline-offset"] = prp(offset) }
fun outlineStyle(style: BorderStyle) { props["outline-style"] = prp(style) }
fun outlineWidth(width: OutlineWidth) { props["outline-width"] = prp(width) }
fun outlineWidth(width: Measurement) { props["outline-width"] = prp(width) }
fun overflow(overflow: Overflow) { props["overflow"] = prp(overflow) }
fun overflowX(overflow: Overflow) { props["overflow-x"] = prp(overflow) }
fun overflowY(overflow: Overflow) { props["overflow-y"] = prp(overflow) }
fun padding(padding: Measurement) { props["padding"] = prp(padding) }
fun padding(padding: Padding) { props["padding"] = prp(padding) }
fun paddingBottom(padding: Measurement) { props["padding-bottom"] = prp(padding) }
fun paddingBottom(padding: Padding) { props["padding-bottom"] = prp(padding) }
fun paddingLeft(padding: Measurement) { props["padding-left"] = prp(padding) }
fun paddingLeft(padding: Padding) { props["padding-left"] = prp(padding) }
fun paddingRight(padding: Measurement) { props["padding-right"] = prp(padding) }
fun paddingRight(padding: Padding) { props["padding-right"] = prp(padding) }
fun paddingTop(padding: Measurement) { props["padding-top"] = prp(padding) }
fun paddingTop(padding: Padding) { props["padding-top"] = prp(padding) }
fun pageBreakAfter(pageBreak: PageBreak) { props["page-break-after"] = prp(pageBreak) }
fun pageBreakBefore(pageBreak: PageBreak) { props["page-break-before"] = prp(pageBreak) }
fun pageBreakInside(pageBreak: PageBreak) { props["page-break-inside"] = prp(pageBreak) }
fun right(right: Measurement) { props["right"] = prp(right) }
fun top(top: Measurement) { props["top"] = prp(top) }
fun width(width: Measurement) { props["width"] = prp(width) }

View File

@@ -146,7 +146,7 @@ fun main() {
select("border-2") {
// borderRadius = BorderRadius(4, 5, 6, 7)
import(border2)
borderStyle(RuleBorderStyle.dashed(), RuleBorderStyle.dotted())
borderStyle(BorderStyle.dashed(), BorderStyle.dotted())
animationPlayState(AnimationPlayState.paused(), AnimationPlayState.running())
keyFrames("mymove") {
@@ -177,6 +177,14 @@ fun main() {
}
}
media("(max-width: 600px)") {
fontSize(12.px())
fontWeight(FontWeight.normal())
}
objectFit(ObjectFit.initial())
pageBreakAfter(PageBreak.auto())
// display = Display.none()
// borderBottomWidth = BorderWidth.perc(13)
}