Rename mediaQuery-related min/maxWidth/Height extensions by adding media prefix

This resolves #886

web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt

@@ -16,7 +16,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
 
     val boxed by style {
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 SwitcherVariables.labelWidth(48.px)
                 SwitcherVariables.labelPadding(5.px)

web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt

@@ -43,7 +43,7 @@ object AppStylesheet : StyleSheet() {
         color(Color.RGBA(39,40,44,.7))
         borderRadius(4.px, 4.px, 4.px)
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 top((-16).px)
             }
@@ -66,7 +66,7 @@ object AppStylesheet : StyleSheet() {
             margin(0.px)
         }
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             CSSSelector.Universal style {
                 AppCSSVariables.wtOffsetTopUnit(16.px)
                 AppCSSVariables.wtFlowUnit(16.px)

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt

@@ -14,7 +14,7 @@ import org.jetbrains.compose.web.css.color
 import org.jetbrains.compose.web.css.display
 import org.jetbrains.compose.web.css.flexDirection
 import org.jetbrains.compose.web.css.flexGrow
-import org.jetbrains.compose.web.css.maxWidth
+import org.jetbrains.compose.web.css.mediaMaxWidth
 import org.jetbrains.compose.web.css.media
 import org.jetbrains.compose.web.css.padding
 import org.jetbrains.compose.web.css.percent
@@ -50,7 +50,7 @@ object WtCards : StyleSheet(AppStylesheet) {
         property("box-sizing", "border-box")
         property("padding", "24px 32px")
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style { padding(16.px) }
         }
     }

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt

@@ -5,7 +5,7 @@ import org.jetbrains.compose.web.css.CSSUnitValue
 import org.jetbrains.compose.web.css.GenericStyleSheetBuilder
 import org.jetbrains.compose.web.css.StyleSheet
 import org.jetbrains.compose.web.css.flexGrow
-import org.jetbrains.compose.web.css.maxWidth
+import org.jetbrains.compose.web.css.mediaMaxWidth
 import org.jetbrains.compose.web.css.media
 import org.jetbrains.compose.web.css.percent
 import org.jetbrains.compose.web.css.px
@@ -16,7 +16,7 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
     cssSelector: CSSSelector,
     rulesBuild: TBuilder.() -> Unit
 ) {
-    media(maxWidth(value)) {
+    media(mediaMaxWidth(value)) {
         cssSelector style rulesBuild
     }
 }

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt

@@ -1,11 +1,6 @@
 package com.sample.style
 
-import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.css.selectors.*
-import org.jetbrains.compose.web.attributes.*
-import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.*
 
 object WtContainer : StyleSheet(AppStylesheet) {
     val wtContainer by style {
@@ -16,7 +11,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
         property("padding-right", 22.px)
         property("max-width", 1276.px)
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 property("max-width", 100.percent)
                 property("padding-left", 16.px)
@@ -24,7 +19,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
             }
         }
 
-        media(maxWidth(1276.px)) {
+        media(mediaMaxWidth(1276.px)) {
             self style {
                 property("max-width", 996.px)
                 property("padding-left", 996.px)
@@ -32,7 +27,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
             }
         }
 
-        media(maxWidth(1000.px)) {
+        media(mediaMaxWidth(1000.px)) {
             self style {
                 property("max-width", 100.percent)
                 property("padding-left", 22.px)

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtDisplay.kt

@@ -1,11 +1,6 @@
 package com.sample.style
 
-import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.css.selectors.*
-import org.jetbrains.compose.web.attributes.*
-import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.*
 
 object WtDisplay : StyleSheet(AppStylesheet) {
     val wtDisplayNone by style {
@@ -13,7 +8,7 @@ object WtDisplay : StyleSheet(AppStylesheet) {
     }
 
     val wtDisplayMdBlock by style {
-        media(maxWidth(1000.px)) {
+        media(mediaMaxWidth(1000.px)) {
             self style {
                 display(DisplayStyle.Block)
             }
@@ -21,7 +16,7 @@ object WtDisplay : StyleSheet(AppStylesheet) {
     }
 
     val wtDisplayMdNone by style {
-        media(maxWidth(1000.px)) {
+        media(mediaMaxWidth(1000.px)) {
             self style {
                 display(DisplayStyle.None)
             }

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt

@@ -1,11 +1,6 @@
 package com.sample.style
 
-import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.css.selectors.*
-import org.jetbrains.compose.web.attributes.*
-import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.*
 
 object WtOffsets : StyleSheet(AppStylesheet) {
     val wtTopOffset96 by style {
@@ -29,7 +24,7 @@ object WtOffsets : StyleSheet(AppStylesheet) {
     }
     
     val wtTopOffsetSm12 by style {
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 marginTop(12.px)
             }
@@ -37,7 +32,7 @@ object WtOffsets : StyleSheet(AppStylesheet) {
     }
 
     val wtTopOffsetSm24 by style {
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 marginTop(24.px)
             }

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt

@@ -1,11 +1,6 @@
 package com.sample.style
 
-import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.css.selectors.*
-import org.jetbrains.compose.web.attributes.*
-import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.*
 
 object WtRows : StyleSheet(AppStylesheet) {
     
@@ -28,7 +23,7 @@ object WtRows : StyleSheet(AppStylesheet) {
     val wtRowSizeM by style {
         AppCSSVariables.wtHorizontalLayoutGutter(16.px)
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 AppCSSVariables.wtHorizontalLayoutGutter(8.px)
             }

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt

@@ -2,9 +2,6 @@ package com.sample.style
 
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.css.selectors.*
-import org.jetbrains.compose.web.attributes.*
-import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.*
 
 object WtTexts : StyleSheet(AppStylesheet) {
 
@@ -17,7 +14,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("line-height", 64.px)
         property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px))
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 AppCSSVariables.wtHeroFontSize(42.px)
                 AppCSSVariables.wtHeroLineHeight(48.px)
@@ -39,7 +36,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("line-height", 40.px)
         property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px))
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 AppCSSVariables.wtSubtitle2FontSize(24.px)
                 AppCSSVariables.wtSubtitle2LineHeight(32.px)
@@ -126,7 +123,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("line-height", 40.px)
         property("line-height", AppCSSVariables.wtH2LineHeight.value(40.px))
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 AppCSSVariables.wtH2FontSize(24.px)
                 AppCSSVariables.wtH2LineHeight(32.px)
@@ -214,7 +211,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
             property("border-radius", 24.px)
         }
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 property("margin-right", 8.px)
                 property("margin-left", 8.px)

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

@@ -128,14 +128,14 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.not(
     query: CSSMediaQuery.Invertible
 ) = CSSMediaQuery.Not(query)
 
-fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.minWidth(value: CSSUnitValue) =
+fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMinWidth(value: CSSUnitValue) =
     CSSMediaQuery.MediaFeature("min-width", value)
 
-fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.maxWidth(value: CSSUnitValue) =
+fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(value: CSSUnitValue) =
     CSSMediaQuery.MediaFeature("max-width", value)
 
-fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.minHeight(value: CSSUnitValue) =
+fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMinHeight(value: CSSUnitValue) =
     CSSMediaQuery.MediaFeature("min-height", value)
 
-fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.maxHeight(value: CSSUnitValue) =
+fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.madiaMaxHeight(value: CSSUnitValue) =
     CSSMediaQuery.MediaFeature("max-height", value)

web/core/src/jsTest/kotlin/CSSStylesheetTests.kt

@@ -50,13 +50,13 @@ object AppStylesheet : StyleSheet() {
         color("lime")
         backgroundColor("lime")
 
-        media(minWidth(20000.px)) {
+        media(mediaMinWidth(20000.px)) {
             self style {
                 color("red")
             }
         }
 
-        media(minWidth(20.px)) {
+        media(mediaMinWidth(20.px)) {
             self style {
                 backgroundColor("green")
             }

web/core/src/jsTest/kotlin/MediaQueryTests.kt

@@ -5,15 +5,14 @@
 
 package org.jetbrains.compose.web.core.tests
 
-import org.jetbrains.compose.web.css.CSSMediaQuery
 import org.jetbrains.compose.web.css.CSSMediaRuleDeclaration
 import org.jetbrains.compose.web.css.StyleSheet
 import org.jetbrains.compose.web.css.and
-import org.jetbrains.compose.web.css.maxHeight
-import org.jetbrains.compose.web.css.maxWidth
+import org.jetbrains.compose.web.css.madiaMaxHeight
+import org.jetbrains.compose.web.css.mediaMaxWidth
 import org.jetbrains.compose.web.css.media
-import org.jetbrains.compose.web.css.minHeight
-import org.jetbrains.compose.web.css.minWidth
+import org.jetbrains.compose.web.css.mediaMinHeight
+import org.jetbrains.compose.web.css.mediaMinWidth
 import org.jetbrains.compose.web.css.px
 import kotlin.test.Test
 import kotlin.test.assertEquals
@@ -22,20 +21,20 @@ class MediaQueryTests {
 
     private object CombinedMediaQueries : StyleSheet() {
         val combine by style {
-            media(minWidth(200.px).and(maxWidth(400.px))) {
+            media(mediaMinWidth(200.px).and(mediaMaxWidth(400.px))) {
             }
 
-            media(minWidth(300.px), maxWidth(500.px)) {
+            media(mediaMinWidth(300.px), mediaMaxWidth(500.px)) {
             }
         }
     }
 
     private object MediaFeatures : StyleSheet() {
         val features by style {
-            media(minWidth(200.px)) {}
-            media(minHeight(300.px)) {}
-            media(maxWidth(500.px)) {}
-            media(maxHeight(600.px)) {}
+            media(mediaMinWidth(200.px)) {}
+            media(mediaMinHeight(300.px)) {}
+            media(mediaMaxWidth(500.px)) {}
+            media(madiaMaxHeight(600.px)) {}
         }
     }
 

web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/Sample.kt

@@ -79,7 +79,7 @@ object AppStyleSheet : StyleSheet() {
             color(MyCSSVariables.myVar.value())
         }
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 backgroundColor(MyCSSVariables.myVar.value())
                 property("color", MyCSSVariables.myVar2.value())
@@ -180,7 +180,7 @@ fun main() {
                 color("red")
             }
 
-            media(minWidth(500.px) and maxWidth(700.px)) {
+            media(mediaMinWidth(500.px) and mediaMaxWidth(700.px)) {
                 className(MyClassName) style {
                     fontSize(40.px)
                 }

web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt

@@ -71,7 +71,7 @@ class TestCases1 {
 private object AppStyleSheet : StyleSheet() {
     val textClass by style {
         color("rgba(0, 200, 0, 0.92)")
-        media(maxWidth(600.px)) {
+        media(mediaMaxWidth(600.px)) {
             self style {
                 color("rgba(255, 200, 0, 0.99)")
             }