StylePropertyValue does not contain any nested entities

web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt

@@ -19,7 +19,7 @@ fun Layout(content: @Composable () -> Unit) {
                 flexDirection(FlexDirection.Column)
                 height(100.percent)
                 margin(0.px)
-                property("box-sizing", StylePropertyValue("border-box"))
+                property("box-sizing", "border-box".asStylePropertyValue())
             }
         }
     ) {

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

@@ -22,7 +22,7 @@ object WtRows : StyleSheet(AppStylesheet) {
             "margin-left",
             value("calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})")
         )
-        property("box-sizing", StylePropertyValue("border-box"))
+        property("box-sizing", "border-box".asStylePropertyValue())
     }
     
     val wtRowSizeM by style {

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

@@ -343,17 +343,11 @@ fun StylePropertyMapReadOnly.forEach(handler: (String, Array<CSSStyleValue>) ->
 }
 
 // CSSStyleValue | string
-interface StylePropertyValue {
-    companion object {
-        operator fun invoke(value: String) = value.unsafeCast<StylePropertyValue>()
-        operator fun invoke(value: Number) = value.unsafeCast<StylePropertyValue>()
-        operator fun invoke(value: CSSStyleValue) = value.unsafeCast<StylePropertyValue>()
-    }
-}
+interface StylePropertyValue
 
-fun StylePropertyValue.asString() = this.asDynamic() as? String
-fun StylePropertyValue.asNumber() = this.asDynamic() as? Number
-fun StylePropertyValue.asCSSStyleValue(): CSSStyleValue? = this.asDynamic() as? CSSStyleValueJS
+fun String.asStylePropertyValue() = unsafeCast<StylePropertyValue>()
+fun Number.asStylePropertyValue() = unsafeCast<StylePropertyValue>()
+fun CSSStyleValue.asStylePropertyValue() = unsafeCast<StylePropertyValue>()
 
 external class StylePropertyMap : StylePropertyMapReadOnly {
     fun set(property: String, vararg values: StylePropertyValue)

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

@@ -3,7 +3,7 @@ package org.jetbrains.compose.web.css
 
 interface CSSAutoValue : CSSStyleValue
 
-val auto = StylePropertyValue("auto").unsafeCast<CSSAutoValue>()
+val auto = "auto".unsafeCast<CSSAutoValue>()
 
 // type CSSSizeOrAutoValue = CSSSizeValue | CSSAutoValue
 interface CSSSizeOrAutoValue : CSSStyleValue, StylePropertyValue {
@@ -13,8 +13,6 @@ interface CSSSizeOrAutoValue : CSSStyleValue, StylePropertyValue {
     }
 }
 
-fun CSSSizeOrAutoValue.asCSSSizeValue() = this.asDynamic() as? CSSUnitValueJS
-
 enum class Direction {
     rtl,
     ltr;

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

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

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

@@ -5,15 +5,15 @@ fun StyleBuilder.opacity(value: Number) {
 }
 
 fun StyleBuilder.order(value: Int) {
-    property("order", StylePropertyValue(value))
+    property("order", value.asStylePropertyValue())
 }
 
 fun StyleBuilder.flexGrow(value: Number) {
-    property("flex-grow", StylePropertyValue(value))
+    property("flex-grow", value.asStylePropertyValue())
 }
 
 fun StyleBuilder.flexShrink(value: Number) {
-    property("flex-shrink", StylePropertyValue(value))
+    property("flex-shrink", value.asStylePropertyValue())
 }
 
 fun StyleBuilder.opacity(value: CSSpercentValue) {
@@ -194,11 +194,11 @@ class CSSBorder : CustomStyleValue {
     var color: StylePropertyValue? = null
 
     fun width(size: CSSSizeValue) {
-        width = StylePropertyValue(size)
+        width = size.asStylePropertyValue()
     }
 
     fun style(style: LineStyle) {
-        this.style = StylePropertyValue(style.name)
+        this.style = style.name.asStylePropertyValue()
     }
 
     fun color(color: Color) {
@@ -217,7 +217,7 @@ class CSSBorder : CustomStyleValue {
 
     override fun styleValue(): StylePropertyValue {
         val values = listOfNotNull(width, style, color)
-        return StylePropertyValue(values.joinToString(" "))
+        return values.joinToString(" ").asStylePropertyValue()
     }
 }
 
@@ -239,55 +239,55 @@ fun StyleBuilder.border(
 }
 
 fun StyleBuilder.display(displayStyle: DisplayStyle) {
-    property("display", StylePropertyValue(displayStyle.value))
+    property("display", displayStyle.value.asStylePropertyValue())
 }
 
 fun StyleBuilder.flexDirection(flexDirection: FlexDirection) {
-    property("flex-direction", StylePropertyValue(flexDirection.value))
+    property("flex-direction", flexDirection.value.asStylePropertyValue())
 }
 
 fun StyleBuilder.flexWrap(flexWrap: FlexWrap) {
-    property("flex-wrap", StylePropertyValue(flexWrap.value))
+    property("flex-wrap", flexWrap.value.asStylePropertyValue())
 }
 
 fun StyleBuilder.flexFlow(flexDirection: FlexDirection, flexWrap: FlexWrap) {
     property(
         "flex-flow",
-        StylePropertyValue("${flexDirection.value} ${flexWrap.value}")
+        "${flexDirection.value} ${flexWrap.value}".asStylePropertyValue()
     )
 }
 
 fun StyleBuilder.justifyContent(justifyContent: JustifyContent) {
     property(
         "justify-content",
-        StylePropertyValue(justifyContent.value)
+        justifyContent.value.asStylePropertyValue()
     )
 }
 fun StyleBuilder.alignSelf(alignSelf: AlignSelf) {
     property(
         "align-self",
-        StylePropertyValue(alignSelf.value)
+        alignSelf.value.asStylePropertyValue()
     )
 }
 
 fun StyleBuilder.alignItems(alignItems: AlignItems) {
     property(
         "align-items",
-        StylePropertyValue(alignItems.value)
+        alignItems.value.asStylePropertyValue()
     )
 }
 
 fun StyleBuilder.alignContent(alignContent: AlignContent) {
     property(
         "align-content",
-        StylePropertyValue(alignContent.value)
+        alignContent.value.asStylePropertyValue()
     )
 }
 
 fun StyleBuilder.position(position: Position) {
     property(
         "position",
-        StylePropertyValue(position.value)
+        position.value.asStylePropertyValue()
     )
 }
 
@@ -296,11 +296,11 @@ fun StyleBuilder.width(value: CSSSizeOrAutoValue) {
 }
 
 fun StyleBuilder.borderRadius(r: CSSSizeValue) {
-    property("border-radius", StylePropertyValue(r.toString()))
+    property("border-radius", r.toString().asStylePropertyValue())
 }
 
 fun StyleBuilder.borderRadius(topLeft: CSSSizeValue, bottomRight: CSSSizeValue) {
-    property("border-radius", StylePropertyValue("$topLeft $bottomRight"))
+    property("border-radius", "$topLeft $bottomRight".asStylePropertyValue())
 }
 
 fun StyleBuilder.borderRadius(
@@ -308,7 +308,7 @@ fun StyleBuilder.borderRadius(
     topRightAndBottomLeft: CSSSizeValue,
     bottomRight: CSSSizeValue
 ) {
-    property("border-radius", StylePropertyValue("$topLeft $topRightAndBottomLeft $bottomRight"))
+    property("border-radius", "$topLeft $topRightAndBottomLeft $bottomRight".asStylePropertyValue())
 }
 
 fun StyleBuilder.borderRadius(
@@ -317,7 +317,7 @@ fun StyleBuilder.borderRadius(
     bottomRight: CSSSizeValue,
     bottomLeft: CSSSizeValue
 ) {
-    property("border-radius", StylePropertyValue("$topLeft $topRight $bottomRight $bottomLeft"))
+    property("border-radius", "$topLeft $topRight $bottomRight $bottomLeft".asStylePropertyValue())
 }
 
 fun StyleBuilder.width(value: CSSSizeValue) {

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

@@ -1,7 +1,7 @@
 package org.jetbrains.compose.web.css
 
 abstract class Color : CustomStyleValue {
-    override fun styleValue(): StylePropertyValue = StylePropertyValue(toString())
+    override fun styleValue(): StylePropertyValue = toString().asStylePropertyValue()
 
     data class Named(val value: String) : Color() {
         override fun toString(): String = value

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

@@ -12,25 +12,25 @@ interface StyleBuilder {
 }
 
 @Suppress("NOTHING_TO_INLINE")
-inline fun StyleBuilder.value(value: String) = StylePropertyValue(value)
+inline fun StyleBuilder.value(value: String) = value.asStylePropertyValue()
 
 @Suppress("NOTHING_TO_INLINE")
-inline fun StyleBuilder.value(value: Number) = StylePropertyValue(value)
+inline fun StyleBuilder.value(value: Number) = value.asStylePropertyValue()
 
 @Suppress("NOTHING_TO_INLINE")
-inline fun StyleBuilder.value(value: CSSStyleValue) = StylePropertyValue(value)
+inline fun StyleBuilder.value(value: CSSStyleValue) = value.asStylePropertyValue()
 
 fun variableValue(variableName: String, fallback: StylePropertyValue? = null) =
-    StylePropertyValue("var(--$variableName${fallback?.let { ", $it" } ?: ""})")
+    "var(--$variableName${fallback?.let { ", $it" } ?: ""})".asStylePropertyValue()
 
 interface CSSVariableValue<TValue> : StylePropertyValue {
     companion object {
         operator fun <TValue> invoke(value: String) =
-            StylePropertyValue(value).unsafeCast<CSSVariableValue<TValue>>()
+            value.unsafeCast<CSSVariableValue<TValue>>()
         operator fun <TValue> invoke(value: Number) =
-            StylePropertyValue(value).unsafeCast<CSSVariableValue<TValue>>()
+            value.unsafeCast<CSSVariableValue<TValue>>()
         operator fun <TValue : CSSStyleValue> invoke(value: TValue) =
-            StylePropertyValue(value).unsafeCast<CSSVariableValue<TValue>>()
+            value.unsafeCast<CSSVariableValue<TValue>>()
 
         operator fun <TValue> invoke(value: StylePropertyValue) =
             value.unsafeCast<CSSVariableValue<TValue>>()
@@ -65,7 +65,7 @@ fun <TValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null) =
             name,
             fallback?.let {
                 (fallback as? CustomStyleValue)?.styleValue()
-                    ?: StylePropertyValue(fallback.toString())
+                    ?: fallback.toString().asStylePropertyValue()
             }
         )
     )