Minimal documentation for the most basic CSS API

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)

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>,
+        where TValue : CSSVariableValueAs<TValue>,
-          TValue: StylePropertyValue
+              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()
     }
 }

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 &&
+                    it.selector is CSSSelector.CSSClass && it.style == style &&
-                (boundClasses[it.selector.className] ?: emptyList()) == newCssRules
+                    (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<*>