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,
@@ -68,8 +68,7 @@ fun <TValue: StylePropertyValue> CSSStyleVariable<TValue>.value(fallback: TValue
 
 fun <TValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null)
         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)
     }

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 {
@@ -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<*>