Browse Source

Minimal documentation for the most basic CSS API

pull/988/head
Shagen Ogandzhanian 3 years ago
parent
commit
7557522e16
  1. 19
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSMediaRule.kt
  2. 38
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleBuilder.kt
  3. 36
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleSheet.kt

19
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSMediaRule.kt

@ -128,14 +128,33 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.not(
query: CSSMediaQuery.Invertible
) = CSSMediaQuery.Not(query)
/**
* A mediaQuery selector
*
* Example:
* ```
* object CombinedMediaQueries : StyleSheet() {
* media(mediaMinWidth(200.px).and(mediaMaxWidth(400.px))) { ... }
* }
* ```
*/
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMinWidth(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("min-width", value)
/**
* See [mediaMinWidth]
*/
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("max-width", value)
/**
* See [mediaMinWidth]
*/
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMinHeight(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("min-height", value)
/**
* See [mediaMinWidth]
*/
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.madiaMaxHeight(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("max-height", value)

38
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleBuilder.kt

@ -18,7 +18,7 @@ interface StyleBuilder {
fun variable(variableName: String, value: String) = variable(variableName, StylePropertyValue(value))
fun variable(variableName: String, value: Number) = variable(variableName, StylePropertyValue(value))
operator fun <TValue: StylePropertyValue> CSSStyleVariable<TValue>.invoke(value: TValue) {
operator fun <TValue : StylePropertyValue> CSSStyleVariable<TValue>.invoke(value: TValue) {
variable(name, value.toString())
}
@ -34,7 +34,7 @@ interface StyleBuilder {
inline fun variableValue(variableName: String, fallback: StylePropertyValue? = null) =
"var(--$variableName${fallback?.let { ", $it" } ?: ""})"
external interface CSSVariableValueAs<out T: StylePropertyValue>
external interface CSSVariableValueAs<out T : StylePropertyValue>
inline fun <TValue> CSSVariableValue(value: StylePropertyValue) =
value.unsafeCast<TValue>()
@ -56,9 +56,9 @@ interface CSSVariable {
val name: String
}
class CSSStyleVariable<out TValue: StylePropertyValue>(override val name: String) : CSSVariable
class CSSStyleVariable<out TValue : StylePropertyValue>(override val name: String) : CSSVariable
fun <TValue: StylePropertyValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null) =
fun <TValue : StylePropertyValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null) =
CSSVariableValue<TValue>(
variableValue(
name,
@ -67,9 +67,8 @@ fun <TValue: StylePropertyValue> CSSStyleVariable<TValue>.value(fallback: TValue
)
fun <TValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null)
where TValue : CSSVariableValueAs<TValue>,
TValue: StylePropertyValue
=
where TValue : CSSVariableValueAs<TValue>,
TValue : StylePropertyValue =
CSSVariableValue<TValue>(
variableValue(
name,
@ -77,7 +76,26 @@ fun <TValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null)
)
)
fun <TValue: StylePropertyValue> variable() =
/**
* Introduces CSS variable that can be later referred anywhere in [StyleSheet]
*
* Example:
* ```
* object AppCSSVariables {
* val width by variable<CSSUnitValue>()
* val stringHeight by variable<StylePropertyString>()
* val order by variable<StylePropertyNumber>()
* }
*
* object AppStylesheet : StyleSheet() {
* val classWithProperties by style {
* AppCSSVariables.width(100.px)
* property("width", AppCSSVariables.width.value())
* }
*```
*
*/
fun <TValue : StylePropertyValue> variable() =
ReadOnlyProperty<Any?, CSSStyleVariable<TValue>> { _, property ->
CSSStyleVariable(property.name)
}
@ -104,7 +122,7 @@ open class StyleBuilderImpl : StyleBuilder, StyleHolder {
override fun equals(other: Any?): Boolean {
return if (other is StyleHolder) {
properties.nativeEquals(other.properties) &&
variables.nativeEquals(other.variables)
variables.nativeEquals(other.variables)
} else false
}
@ -131,6 +149,6 @@ fun StylePropertyList.nativeEquals(properties: StylePropertyList): Boolean {
return all { prop ->
val otherProp = properties[index++]
prop.name == otherProp.name &&
prop.value.toString() == otherProp.value.toString()
prop.value.toString() == otherProp.value.toString()
}
}

36
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleSheet.kt

@ -47,6 +47,30 @@ open class StyleSheet(
protected fun style(cssRule: CSSBuilder.() -> Unit) = CSSHolder(usePrefix, cssRule)
/**
* Example:
* ```
* object AppStyleSheet : StyleSheet() {
* val bounce by keyframes {
* from {
* property("transform", "translateX(50%)")
* }
*
* to {
* property("transform", "translateX(-50%)")
* }
* }
*
* val myClass by style {
* animation(bounce) {
* duration(2.s)
* timingFunction(AnimationTimingFunction.EaseIn)
* direction(AnimationDirection.Alternate)
* }
* }
* }
* ```
*/
protected fun keyframes(cssKeyframes: CSSKeyframesBuilder.() -> Unit) = CSSKeyframesHolder(usePrefix, cssKeyframes)
companion object {
@ -67,8 +91,8 @@ open class StyleSheet(
val (style, newCssRules) = buildCSS(selfSelector, selfSelector, cssBuild)
val cssRule = cssRules.find {
it is CSSStyleRuleDeclaration &&
it.selector is CSSSelector.CSSClass && it.style == style &&
(boundClasses[it.selector.className] ?: emptyList()) == newCssRules
it.selector is CSSSelector.CSSClass && it.style == style &&
(boundClasses[it.selector.className] ?: emptyList()) == newCssRules
}.unsafeCast<CSSStyleRuleDeclaration?>()
return if (cssRule != null) {
cssRule.selector.unsafeCast<CSSSelector.CSSClass>().className
@ -99,7 +123,13 @@ open class StyleSheet(
}
}
protected class CSSKeyframesHolder(private val usePrefix: Boolean, private val keyframesBuilder: CSSKeyframesBuilder.() -> Unit) {
/**
* See [keyframes]
*/
protected class CSSKeyframesHolder(
private val usePrefix: Boolean,
private val keyframesBuilder: CSSKeyframesBuilder.() -> Unit
) {
operator fun provideDelegate(
sheet: StyleSheet,
property: KProperty<*>

Loading…
Cancel
Save