More properties, val i.o. fun
This commit is contained in:
@@ -5,6 +5,8 @@ import nl.astraeus.logging.log
|
||||
|
||||
typealias Css = Style.() -> Unit
|
||||
|
||||
typealias ConditionalCss = ConditionalStyle.() -> Unit
|
||||
|
||||
@DslMarker
|
||||
annotation class CssTagMarker
|
||||
|
||||
@@ -75,9 +77,58 @@ abstract class CssGenerator {
|
||||
return builder.toString()
|
||||
}
|
||||
|
||||
open fun generateCss(namespace: String = "", indent: String = " ", minified: Boolean = false): String {
|
||||
open fun generateCss(namespace: String = "", indent: String = "", minified: Boolean = false): String {
|
||||
val builder = StringBuilder()
|
||||
|
||||
if (this is ConditionalStyle) {
|
||||
this.media.let { mq ->
|
||||
mq.keys.sorted().forEach { mediaName ->
|
||||
val css = mq[mediaName]
|
||||
|
||||
indent(minified, builder, indent)
|
||||
builder.append("@media ")
|
||||
builder.append(mediaName)
|
||||
builder.append(" {")
|
||||
indent(minified, builder, "\n")
|
||||
css?.let { css ->
|
||||
val mediaStyle = ConditionalStyle()
|
||||
|
||||
css(mediaStyle)
|
||||
|
||||
builder.append(mediaStyle.generateCss("", " $indent", minified))
|
||||
}
|
||||
|
||||
indent(minified, builder, indent)
|
||||
builder.append("}")
|
||||
indent(minified, builder, "\n")
|
||||
}
|
||||
}
|
||||
|
||||
this.supports.let { mq ->
|
||||
mq.keys.sorted().forEach { mediaName ->
|
||||
val css = mq[mediaName]
|
||||
|
||||
indent(minified, builder, indent)
|
||||
builder.append("@supports ")
|
||||
builder.append(mediaName)
|
||||
builder.append(" {")
|
||||
indent(minified, builder, "\n")
|
||||
css?.let { css ->
|
||||
val mediaStyle = ConditionalStyle()
|
||||
|
||||
css(mediaStyle)
|
||||
|
||||
builder.append(mediaStyle.generateCss(""," $indent", minified))
|
||||
}
|
||||
|
||||
indent(minified, builder, indent)
|
||||
builder.append("}")
|
||||
indent(minified, builder, "\n")
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for ((name, prop) in definitions) {
|
||||
val css = StringBuilder()
|
||||
|
||||
@@ -85,20 +136,20 @@ abstract class CssGenerator {
|
||||
|
||||
prop(finalStyle)
|
||||
|
||||
css.append(finalStyle.generatePropertyCss(indent, minified))
|
||||
css.append(finalStyle.generatePropertyCss(" $indent", minified))
|
||||
|
||||
if (css.isNotBlank()) {
|
||||
builder.append("\n$namespace $name".trim())
|
||||
indent(minified, builder, " ")
|
||||
indent(minified, builder, " $indent")
|
||||
builder.append("{")
|
||||
indent(minified, builder, "\n")
|
||||
|
||||
finalStyle.fontFace?.let { ff ->
|
||||
indent(minified, builder, indent)
|
||||
indent(minified, builder, " $indent")
|
||||
builder.append("@font-face {")
|
||||
indent(minified, builder, "\n")
|
||||
builder.append(ff.generatePropertyCss( " $indent", minified))
|
||||
builder.append(indent)
|
||||
builder.append(ff.generatePropertyCss( " $indent", minified))
|
||||
builder.append(" $indent")
|
||||
builder.append("}")
|
||||
indent(minified, builder, "\n")
|
||||
}
|
||||
@@ -107,15 +158,16 @@ abstract class CssGenerator {
|
||||
kf.keys.sorted().forEach { frameName ->
|
||||
val css = kf[frameName]
|
||||
|
||||
indent(minified, builder, indent)
|
||||
indent(minified, builder, " $indent")
|
||||
builder.append("@keyframes ")
|
||||
builder.append(frameName)
|
||||
builder.append(" {\n")
|
||||
builder.append(" {")
|
||||
indent(minified, builder, "\n")
|
||||
css?.let { css ->
|
||||
for ((nr, style) in css.frames) {
|
||||
indent(minified, builder, " $indent")
|
||||
indent(minified, builder, " $indent")
|
||||
builder.append("${nr}% ")
|
||||
indent(minified, builder, " $indent")
|
||||
indent(minified, builder, " $indent")
|
||||
builder.append("{")
|
||||
indent(minified, builder, "\n")
|
||||
|
||||
@@ -123,39 +175,21 @@ abstract class CssGenerator {
|
||||
|
||||
style(finalStyle)
|
||||
|
||||
builder.append(finalStyle.generatePropertyCss(" $indent", minified))
|
||||
builder.append(finalStyle.generatePropertyCss(" $indent", minified))
|
||||
|
||||
indent(minified, builder, " $indent")
|
||||
builder.append("}\n")
|
||||
indent(minified, builder, " $indent")
|
||||
builder.append("}")
|
||||
indent(minified, builder, "\n")
|
||||
}
|
||||
|
||||
indent(minified, builder, indent)
|
||||
builder.append("}\n")
|
||||
indent(minified, builder, " $indent")
|
||||
builder.append("}")
|
||||
indent(minified, builder, "\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)
|
||||
builder.append("}")
|
||||
indent(minified, builder, "\n\n")
|
||||
@@ -178,7 +212,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)),
|
||||
@@ -199,7 +233,7 @@ open class Style : CssGenerator() {
|
||||
definitions[selector] = style
|
||||
}
|
||||
|
||||
fun alignContent(value: AlignContentValue) { props["align-content"] = prp(value) }
|
||||
fun alignContent(value: AlignContent) { 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) }
|
||||
@@ -214,7 +248,7 @@ open class Style : CssGenerator() {
|
||||
fun animationPlayState(vararg state : AnimationPlayState) {
|
||||
props["animation-play-state"] = prp(*state)
|
||||
}
|
||||
fun animationTimingFunction(vararg timingFunction: AnimationTimingFunction) {
|
||||
fun animationTimingFunction(vararg timingFunction: TimingFunction) {
|
||||
props["animation-timing-function"] = prp(*timingFunction)
|
||||
}
|
||||
fun backfaceVisibility(backfaceVisibility: BackfaceVisibility) { props[""] = prp(backfaceVisibility) }
|
||||
@@ -331,7 +365,7 @@ open class Style : CssGenerator() {
|
||||
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 float(cssFloat: CssFloat) { props["float"] = prp(cssFloat) }
|
||||
fun font(font: String) { props["font"] = prp(font) }
|
||||
fun fontFace(face: FontFace.() -> Unit) {
|
||||
fontFace = FontFace()
|
||||
@@ -385,7 +419,6 @@ open class Style : CssGenerator() {
|
||||
|
||||
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) }
|
||||
@@ -410,22 +443,15 @@ open class Style : CssGenerator() {
|
||||
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 opacity(opacity: InitialInherit) { props["opacity"] = prp(opacity.toString()) }
|
||||
fun order(order: Int) { props["order"] = prp(order.toString()) }
|
||||
fun order(order: Order) { props["order"] = prp(order) }
|
||||
fun order(order: InitialInherit) { 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) }
|
||||
@@ -436,26 +462,84 @@ open class Style : CssGenerator() {
|
||||
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 padding(padding: InitialInherit) { props["padding"] = prp(padding) }
|
||||
fun paddingBottom(padding: Measurement) { props["padding-bottom"] = prp(padding) }
|
||||
fun paddingBottom(padding: Padding) { props["padding-bottom"] = prp(padding) }
|
||||
fun paddingBottom(padding: InitialInherit) { props["padding-bottom"] = prp(padding) }
|
||||
fun paddingLeft(padding: Measurement) { props["padding-left"] = prp(padding) }
|
||||
fun paddingLeft(padding: Padding) { props["padding-left"] = prp(padding) }
|
||||
fun paddingLeft(padding: InitialInherit) { props["padding-left"] = prp(padding) }
|
||||
fun paddingRight(padding: Measurement) { props["padding-right"] = prp(padding) }
|
||||
fun paddingRight(padding: Padding) { props["padding-right"] = prp(padding) }
|
||||
fun paddingRight(padding: InitialInherit) { props["padding-right"] = prp(padding) }
|
||||
fun paddingTop(padding: Measurement) { props["padding-top"] = prp(padding) }
|
||||
fun paddingTop(padding: Padding) { props["padding-top"] = prp(padding) }
|
||||
fun paddingTop(padding: InitialInherit) { 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) }
|
||||
fun perspective(length: Measurement) { props["perspective"] = prp(length) }
|
||||
fun perspective(perspective: Perspective) { props["perspective"] = prp(perspective) }
|
||||
fun perspectiveOrigin(po: String) { props["perspective-origin"] = prp(po) }
|
||||
fun pointerEvents(pe: PointerEvents) { props["pointer-events"] = prp(pe) }
|
||||
fun position(poition: Position) { props["position"] = prp(poition) }
|
||||
fun quotes(value: String) { props["quotes"] = prp(value) }
|
||||
fun resize(resize: Resize) { props["resize"] = prp(resize) }
|
||||
fun right(right: Measurement) { props["right"] = prp(right) }
|
||||
fun scrollBehavior(sb: ScrollBehavior) { props["scroll-behavior"] = prp(sb) }
|
||||
fun tabSize(number: Int) { props["tab-size"] = prp(number.toString()) }
|
||||
fun tabSize(length: Measurement) { props["tab-size"] = prp(length) }
|
||||
fun tabSize(ts: InitialInherit) { props["tab-size"] = prp(ts) }
|
||||
fun tableLayout(tl: TableLayout ) { props["table-layout"] = prp(tl) }
|
||||
fun textAlign(ta: TextAlign) { props["text-align"] = prp(ta) }
|
||||
fun textAlignLast(tal: TextAlignLast) { props["text-align-last"] = prp(tal) }
|
||||
fun textDecoration(decoration: String) { props["text-decoration"] = prp(decoration) }
|
||||
fun textDecorationColor(color: Color) { props["text-decoration-color"] = prp(color) }
|
||||
fun textDecorationLine(tdc: TextDecorationLine) { props["text-decoration-line"] = prp(tdc) }
|
||||
fun textDecorationStyle(tds: TextDecorationStyle) { props["text-decoration-style"] = prp(tds) }
|
||||
fun textIndent(length: Measurement) { props["text-indent"] = prp(length) }
|
||||
fun textIndent(indent: InitialInherit) { props["text-indent"] = prp(indent) }
|
||||
fun textJustify(tj: TextJustify) { props["text-justify"] = prp(tj) }
|
||||
fun textOverflow(to: String) { props["text-overflow"] = prp(to) }
|
||||
fun textShadow(ts: String) { props["text-shadow"] = prp(ts) }
|
||||
fun textTransform(tt: TextTransform) { props["text-transform"] = prp(tt) }
|
||||
fun top(top: Measurement) { props["top"] = prp(top) }
|
||||
fun transform(transform: Transform) { props["transform"] = prp(transform) }
|
||||
fun transformOrigin(origin: String) { props["transform-origin"] = prp(origin) }
|
||||
fun transformStyle(style: TransformStyle) { props["transform-style"] = prp(style) }
|
||||
fun transition(transition: String) { props["transition"] = prp(transition) }
|
||||
fun transitionDelay(timeInSeconds: Double) { props["transition-delay"] = prp("${timeInSeconds}s") }
|
||||
fun transitionDelay(timeInMillis: Int) { props["transition-delay"] = prp("${timeInMillis}ms") }
|
||||
fun transitionDelay(delay: DelayDuration) { props["transition-delay"] = prp(delay) }
|
||||
fun transitionDuration(timeInSeconds: Double) { props["transition-duration"] = prp("${timeInSeconds}s") }
|
||||
fun transitionDuration(timeInMillis: Int) { props["transition-duration"] = prp("${timeInMillis}ms") }
|
||||
fun transitionDuration(td: DelayDuration) { props["transition-duration"] = prp(td) }
|
||||
fun transitionProperty(property: String) { props["transition-property"] = prp(property) }
|
||||
fun transitionTimingFunction(function: TimingFunction) { props["transition-timing-function"] = prp(function) }
|
||||
fun unicodeBidi(ub: UnicodeBidi) { props["unicode-bidi"] = prp(ub) }
|
||||
fun userSelect(us: UserSelect) { props["user-select"] = prp(us) }
|
||||
fun verticalAlign(length: Measurement) { props["vertical-align"] = prp(length) }
|
||||
fun verticalAlign(va: VerticalAlign) { props["vertical-align"] = prp(va) }
|
||||
fun visibility(visibility: Visibility) { props["visibility"] = prp(visibility) }
|
||||
fun whiteSpace(whiteSpace: WhiteSpace) { props["white-space"] = prp(whiteSpace) }
|
||||
fun width(width: Measurement) { props["width"] = prp(width) }
|
||||
fun wordBreak(wordBreak: WordBreak) { props["word-break"] = prp(wordBreak) }
|
||||
fun wordSpacing(wordSpacing: Measurement) { props["word-spacing"] = prp(wordSpacing) }
|
||||
fun wordSpacing(wordSpacing: WordSpacing) { props["word-spacing"] = prp(wordSpacing) }
|
||||
fun wordWrap(wordWrap: WordWrap) { props["word-wrap"] = prp(wordWrap) }
|
||||
fun writingMode(writingMode: WritingMode) { props["writing-mode"] = prp(writingMode) }
|
||||
fun zIndex(zIndex: Int) { props["z-index"] = prp(zIndex.toString()) }
|
||||
fun zIndex(zIndex: ZIndex) { props["z-index"] = prp(zIndex) }
|
||||
|
||||
}
|
||||
|
||||
@CssTagMarker
|
||||
open class ConditionalStyle : Style() {
|
||||
var media: MutableMap<String, ConditionalCss> = mutableMapOf()
|
||||
var supports: MutableMap<String, ConditionalCss> = mutableMapOf()
|
||||
|
||||
fun media(definition: String, style: ConditionalCss) {
|
||||
media[definition] = style
|
||||
}
|
||||
|
||||
fun supports(query: String, style: ConditionalCss) {
|
||||
supports[query] = style
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user