Swap CSSSizeValue and CSSUnitValue names so to be less intrusive for an outside code

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

@@ -7,18 +7,18 @@ object AppCSSVariables : CSSVariables {
     val wtColorGreyLight by variable<Color>()
     val wtColorGreyDark by variable<Color>()
 
-    val wtOffsetTopUnit by variable<CSSSizeValue>()
+    val wtOffsetTopUnit by variable<CSSUnitValue>()
-    val wtHorizontalLayoutGutter by variable<CSSSizeValue>()
+    val wtHorizontalLayoutGutter by variable<CSSUnitValue>()
-    val wtFlowUnit by variable<CSSSizeValue>()
+    val wtFlowUnit by variable<CSSUnitValue>()
-
+
-    val wtHeroFontSize by variable<CSSSizeValue>()
+    val wtHeroFontSize by variable<CSSUnitValue>()
-    val wtHeroLineHeight by variable<CSSSizeValue>()
+    val wtHeroLineHeight by variable<CSSUnitValue>()
-    val wtSubtitle2FontSize by variable<CSSSizeValue>()
+    val wtSubtitle2FontSize by variable<CSSUnitValue>()
-    val wtSubtitle2LineHeight by variable<CSSSizeValue>()
+    val wtSubtitle2LineHeight by variable<CSSUnitValue>()
-    val wtH2FontSize by variable<CSSSizeValue>()
+    val wtH2FontSize by variable<CSSUnitValue>()
-    val wtH2LineHeight by variable<CSSSizeValue>()
+    val wtH2LineHeight by variable<CSSUnitValue>()
-    val wtH3FontSize by variable<CSSSizeValue>()
+    val wtH3FontSize by variable<CSSUnitValue>()
-    val wtH3LineHeight by variable<CSSSizeValue>()
+    val wtH3LineHeight by variable<CSSUnitValue>()
 
     val wtColCount by variable<Int>()
 }

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

@@ -4,7 +4,7 @@ import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.css.selectors.*
 
 fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
-    value: CSSSizeValue,
+    value: CSSUnitValue,
     cssSelector: CSSSelector,
     rulesBuild: TBuilder.() -> Unit
 ) {
@@ -13,7 +13,7 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
     }
 }
 
-fun CSSBuilder.forMaxWidth(value: CSSSizeValue, builder: CSSBuilder.() -> Unit) {
+fun CSSBuilder.forMaxWidth(value: CSSUnitValue, builder: CSSBuilder.() -> Unit) {
     mediaMaxWidth(value, self, builder)
 }
 

web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt

@@ -314,7 +314,7 @@ external interface StylePropertyValue
 fun String.asStylePropertyValue() = unsafeCast<StylePropertyValue>()
 fun Number.asStylePropertyValue() = unsafeCast<StylePropertyValue>()
 fun CSSStyleValue.asStylePropertyValue() = unsafeCast<StylePropertyValue>()
-fun CSSSizeValue.asStylePropertyValue() = asString().asStylePropertyValue()
+fun CSSUnitValue.asStylePropertyValue() = asString().asStylePropertyValue()
 
 external class StylePropertyMap : StylePropertyMapReadOnly {
     fun set(property: String, vararg values: StylePropertyValue)

web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSMediaRule.kt

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

web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt

@@ -16,7 +16,7 @@ fun StyleBuilder.flexShrink(value: Number) {
     property("flex-shrink", value.asStylePropertyValue())
 }
 
-fun StyleBuilder.opacity(value: CSSUnitValue<CSSUnit.percent>) {
+fun StyleBuilder.opacity(value: CSSSizeValue<CSSUnit.percent>) {
     property("opacity", value(value.value as Double / 100))
 }
 
@@ -193,7 +193,7 @@ class CSSBorder : CustomStyleValue {
     var style: StylePropertyValue? = null
     var color: StylePropertyValue? = null
 
-    fun width(size: CSSSizeValue) {
+    fun width(size: CSSUnitValue) {
         width = size.asStylePropertyValue()
     }
 
@@ -227,7 +227,7 @@ inline fun StyleBuilder.border(crossinline borderBuild: CSSBorder.() -> Unit) {
 }
 
 fun StyleBuilder.border(
-    width: CSSSizeValue? = null,
+    width: CSSUnitValue? = null,
     style: LineStyle? = null,
     color: Color? = null
 ) {
@@ -291,27 +291,27 @@ fun StyleBuilder.position(position: Position) {
     )
 }
 
-fun StyleBuilder.borderRadius(r: CSSSizeValue) {
+fun StyleBuilder.borderRadius(r: CSSUnitValue) {
     property("border-radius", r.asStylePropertyValue())
 }
 
-fun StyleBuilder.borderRadius(topLeft: CSSSizeValue, bottomRight: CSSSizeValue) {
+fun StyleBuilder.borderRadius(topLeft: CSSUnitValue, bottomRight: CSSUnitValue) {
     property("border-radius", "${topLeft.asString()} ${bottomRight.asString()}".asStylePropertyValue())
 }
 
 fun StyleBuilder.borderRadius(
-    topLeft: CSSSizeValue,
+    topLeft: CSSUnitValue,
-    topRightAndBottomLeft: CSSSizeValue,
+    topRightAndBottomLeft: CSSUnitValue,
-    bottomRight: CSSSizeValue
+    bottomRight: CSSUnitValue
 ) {
     property("border-radius", "${topLeft.asString()} ${topRightAndBottomLeft.asString()} ${bottomRight.asString()}".asStylePropertyValue())
 }
 
 fun StyleBuilder.borderRadius(
-    topLeft: CSSSizeValue,
+    topLeft: CSSUnitValue,
-    topRight: CSSSizeValue,
+    topRight: CSSUnitValue,
-    bottomRight: CSSSizeValue,
+    bottomRight: CSSUnitValue,
-    bottomLeft: CSSSizeValue
+    bottomLeft: CSSUnitValue
 ) {
     property(
         "border-radius",
@@ -319,7 +319,7 @@ fun StyleBuilder.borderRadius(
     )
 }
 
-fun StyleBuilder.width(value: CSSSizeValue) {
+fun StyleBuilder.width(value: CSSUnitValue) {
     property("width", value.asStylePropertyValue())
 }
 
@@ -327,7 +327,7 @@ fun StyleBuilder.width(value: CSSAutoValue) {
     property("width", value)
 }
 
-fun StyleBuilder.height(value: CSSSizeValue) {
+fun StyleBuilder.height(value: CSSUnitValue) {
     property("height", value.asStylePropertyValue())
 }
 
@@ -335,7 +335,7 @@ fun StyleBuilder.height(value: CSSAutoValue) {
     property("height", value)
 }
 
-fun StyleBuilder.top(value: CSSSizeValue) {
+fun StyleBuilder.top(value: CSSUnitValue) {
     property("top", value.asStylePropertyValue())
 }
 
@@ -343,7 +343,7 @@ fun StyleBuilder.top(value: CSSAutoValue) {
     property("top", value)
 }
 
-fun StyleBuilder.bottom(value: CSSSizeValue) {
+fun StyleBuilder.bottom(value: CSSUnitValue) {
     property("bottom", value.asStylePropertyValue())
 }
 
@@ -351,7 +351,7 @@ fun StyleBuilder.bottom(value: CSSAutoValue) {
     property("bottom", value)
 }
 
-fun StyleBuilder.left(value: CSSSizeValue) {
+fun StyleBuilder.left(value: CSSUnitValue) {
     property("left", value.asStylePropertyValue())
 }
 
@@ -359,7 +359,7 @@ fun StyleBuilder.left(value: CSSAutoValue) {
     property("left", value)
 }
 
-fun StyleBuilder.right(value: CSSSizeValue) {
+fun StyleBuilder.right(value: CSSUnitValue) {
     property("right", value.asStylePropertyValue())
 }
 
@@ -367,24 +367,24 @@ fun StyleBuilder.right(value: CSSAutoValue) {
     property("right", value)
 }
 
-fun StyleBuilder.fontSize(value: CSSSizeValue) {
+fun StyleBuilder.fontSize(value: CSSUnitValue) {
     property("font-size", value(value))
 }
 
-fun StyleBuilder.margin(value: CSSSizeValue) {
+fun StyleBuilder.margin(value: CSSUnitValue) {
     // marign hasn't Typed OM yet
     property("margin", value(value.asString()))
 }
 
-fun StyleBuilder.marginLeft(value: CSSSizeValue) {
+fun StyleBuilder.marginLeft(value: CSSUnitValue) {
     property("margin-left", value(value.asString()))
 }
 
-fun StyleBuilder.marginTop(value: CSSSizeValue) {
+fun StyleBuilder.marginTop(value: CSSUnitValue) {
     property("margin-top", value(value.asString()))
 }
 
-fun StyleBuilder.padding(value: CSSSizeValue) {
+fun StyleBuilder.padding(value: CSSUnitValue) {
     // padding hasn't Typed OM yet
     property("padding", value(value.asString()))
 }

web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt

@@ -1,6 +1,6 @@
 package org.jetbrains.compose.web.css
 
-interface CSSUnitValue<out T : CSSUnit> : CSSNumericValue {
+interface CSSSizeValue<out T : CSSUnit> : CSSNumericValue {
     val value: Float
     val unit: T
     fun asString(): String = "${value}${unit.value}"
@@ -9,10 +9,10 @@ interface CSSUnitValue<out T : CSSUnit> : CSSNumericValue {
 private class CSSUnitValueTyped<out T : CSSUnit>(
     override val value: Float,
     override val unit: T
-) : CSSUnitValue<T>
+) : CSSSizeValue<T>
 
-typealias CSSSizeValue = CSSUnitValue<CSSUnit>
+typealias CSSUnitValue = CSSSizeValue<CSSUnit>
-typealias CSSpxValue = CSSUnitValue<CSSUnit.px>
+typealias CSSpxValue = CSSSizeValue<CSSUnit.px>
 
 interface CSSUnitRel : CSSUnit
 interface CSSUnitAbs: CSSUnit
@@ -22,7 +22,7 @@ interface CSSUnitFrequency: CSSUnit
 interface CSSUnitResolution: CSSUnit
 interface CSSUnitFlex: CSSUnit
 
-typealias CSSAngleValue = CSSUnitValue<CSSUnitAngle>
+typealias CSSAngleValue = CSSSizeValue<CSSUnitAngle>
 
 sealed interface CSSUnit {
     val value: String
@@ -162,76 +162,76 @@ sealed interface CSSUnit {
 
 
 val Number.number
-    get(): CSSUnitValue<CSSUnit.number> = CSSUnitValueTyped(this.toFloat(), CSSUnit.number)
+    get(): CSSSizeValue<CSSUnit.number> = CSSUnitValueTyped(this.toFloat(), CSSUnit.number)
 
 val Number.percent
-    get() : CSSUnitValue<CSSUnit.percent> = CSSUnitValueTyped(this.toFloat(), CSSUnit.percent)
+    get() : CSSSizeValue<CSSUnit.percent> = CSSUnitValueTyped(this.toFloat(), CSSUnit.percent)
 
 val Number.em
-    get() : CSSUnitValue<CSSUnit.em> = CSSUnitValueTyped(this.toFloat(), CSSUnit.em)
+    get() : CSSSizeValue<CSSUnit.em> = CSSUnitValueTyped(this.toFloat(), CSSUnit.em)
 
 val Number.ex
-    get(): CSSUnitValue<CSSUnit.ex> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ex)
+    get(): CSSSizeValue<CSSUnit.ex> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ex)
 
 val Number.ch
-    get(): CSSUnitValue<CSSUnit.ch> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ch)
+    get(): CSSSizeValue<CSSUnit.ch> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ch)
 
 val Number.cssRem
-    get(): CSSUnitValue<CSSUnit.rem> = CSSUnitValueTyped(this.toFloat(), CSSUnit.rem)
+    get(): CSSSizeValue<CSSUnit.rem> = CSSUnitValueTyped(this.toFloat(), CSSUnit.rem)
 
 val Number.vw
-    get(): CSSUnitValue<CSSUnit.vw> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vw)
+    get(): CSSSizeValue<CSSUnit.vw> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vw)
 
 val Number.vh
-    get(): CSSUnitValue<CSSUnit.vh> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vh)
+    get(): CSSSizeValue<CSSUnit.vh> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vh)
 
 val Number.vmin
-    get(): CSSUnitValue<CSSUnit.vmin> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vmin)
+    get(): CSSSizeValue<CSSUnit.vmin> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vmin)
 
 val Number.vmax
-    get(): CSSUnitValue<CSSUnit.vmax> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vmax)
+    get(): CSSSizeValue<CSSUnit.vmax> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vmax)
 
 val Number.cm
-    get(): CSSUnitValue<CSSUnit.cm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.cm)
+    get(): CSSSizeValue<CSSUnit.cm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.cm)
 
 val Number.mm
-    get(): CSSUnitValue<CSSUnit.mm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.mm)
+    get(): CSSSizeValue<CSSUnit.mm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.mm)
 
 val Number.Q
-    get() : CSSUnitValue<CSSUnit.q> = CSSUnitValueTyped(this.toFloat(), CSSUnit.q)
+    get() : CSSSizeValue<CSSUnit.q> = CSSUnitValueTyped(this.toFloat(), CSSUnit.q)
 
 val Number.pt
-    get(): CSSUnitValue<CSSUnit.pt> = CSSUnitValueTyped(this.toFloat(), CSSUnit.pt)
+    get(): CSSSizeValue<CSSUnit.pt> = CSSUnitValueTyped(this.toFloat(), CSSUnit.pt)
 val Number.pc
-    get(): CSSUnitValue<CSSUnit.pc> = CSSUnitValueTyped(this.toFloat(), CSSUnit.pc)
+    get(): CSSSizeValue<CSSUnit.pc> = CSSUnitValueTyped(this.toFloat(), CSSUnit.pc)
 val Number.px
-    get(): CSSUnitValue<CSSUnit.px> = CSSUnitValueTyped(this.toFloat(), CSSUnit.px)
+    get(): CSSSizeValue<CSSUnit.px> = CSSUnitValueTyped(this.toFloat(), CSSUnit.px)
 
 val Number.deg
-    get(): CSSUnitValue<CSSUnit.deg> = CSSUnitValueTyped(this.toFloat(), CSSUnit.deg)
+    get(): CSSSizeValue<CSSUnit.deg> = CSSUnitValueTyped(this.toFloat(), CSSUnit.deg)
 val Number.grad
-    get(): CSSUnitValue<CSSUnit.grad> = CSSUnitValueTyped(this.toFloat(), CSSUnit.grad)
+    get(): CSSSizeValue<CSSUnit.grad> = CSSUnitValueTyped(this.toFloat(), CSSUnit.grad)
 val Number.rad
-    get(): CSSUnitValue<CSSUnit.rad> = CSSUnitValueTyped(this.toFloat(), CSSUnit.rad)
+    get(): CSSSizeValue<CSSUnit.rad> = CSSUnitValueTyped(this.toFloat(), CSSUnit.rad)
 val Number.turn
-    get(): CSSUnitValue<CSSUnit.turn> = CSSUnitValueTyped(this.toFloat(), CSSUnit.turn)
+    get(): CSSSizeValue<CSSUnit.turn> = CSSUnitValueTyped(this.toFloat(), CSSUnit.turn)
 
 val Number.s
-    get(): CSSUnitValue<CSSUnit.s> = CSSUnitValueTyped(this.toFloat(), CSSUnit.s)
+    get(): CSSSizeValue<CSSUnit.s> = CSSUnitValueTyped(this.toFloat(), CSSUnit.s)
 val Number.ms
-    get(): CSSUnitValue<CSSUnit.ms> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ms)
+    get(): CSSSizeValue<CSSUnit.ms> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ms)
 
 val Number.Hz
-    get(): CSSUnitValue<CSSUnit.hz> = CSSUnitValueTyped(this.toFloat(), CSSUnit.hz)
+    get(): CSSSizeValue<CSSUnit.hz> = CSSUnitValueTyped(this.toFloat(), CSSUnit.hz)
 val Number.kHz
-    get(): CSSUnitValue<CSSUnit.khz> = CSSUnitValueTyped(this.toFloat(), CSSUnit.khz)
+    get(): CSSSizeValue<CSSUnit.khz> = CSSUnitValueTyped(this.toFloat(), CSSUnit.khz)
 
 val Number.dpi
-    get(): CSSUnitValue<CSSUnit.dpi> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dpi)
+    get(): CSSSizeValue<CSSUnit.dpi> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dpi)
 val Number.dpcm
-    get(): CSSUnitValue<CSSUnit.dpcm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dpcm)
+    get(): CSSSizeValue<CSSUnit.dpcm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dpcm)
 val Number.dppx
-    get(): CSSUnitValue<CSSUnit.dppx> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dppx)
+    get(): CSSSizeValue<CSSUnit.dppx> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dppx)
 
 val Number.fr
-    get(): CSSUnitValue<CSSUnit.fr> = CSSUnitValueTyped(this.toFloat(), CSSUnit.fr)
+    get(): CSSSizeValue<CSSUnit.fr> = CSSUnitValueTyped(this.toFloat(), CSSUnit.fr)

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

@@ -5,7 +5,6 @@
 
 package org.jetbrains.compose.web.core.tests
 
-import org.jetbrains.compose.web.css.CSSUnitValue
 import org.jetbrains.compose.web.css.ch
 import org.jetbrains.compose.web.css.cm
 import org.jetbrains.compose.web.css.cssRem