web: Add a fix for css variables

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

@@ -12,6 +12,7 @@ private data class CSSUnitValueTyped<out T : CSSUnit>(
     override val unit: T
 ) : CSSSizeValue<T> {
     override fun newUnit(value: Float): CSSSizeValue<T> = copy(value = value)
+    override fun toString() = asString()
 }
 
 operator fun <T : CSSUnit> CSSSizeValue<T>.times(num: Number): CSSSizeValue<T> = newUnit(value * num.toFloat())

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

@@ -8,8 +8,8 @@ interface StyleBuilder {
 
     fun property(propertyName: String, value: String) = property(propertyName, value.unsafeCast<StylePropertyValue>())
     fun property(propertyName: String, value: Number) = property(propertyName, value.unsafeCast<StylePropertyValue>())
-    fun variable(variableName: String, value: Number) = property(variableName, value.unsafeCast<StylePropertyValue>())
-    fun variable(variableName: String, value: String) = property(variableName, value.unsafeCast<StylePropertyValue>())
+    fun variable(variableName: String, value: Number) = variable(variableName, value.unsafeCast<StylePropertyValue>())
+    fun variable(variableName: String, value: String) = variable(variableName, value.unsafeCast<StylePropertyValue>())
 
     operator fun <TValue> CSSStyleVariable<TValue>.invoke(value: TValue) {
         if (value is CustomStyleValue) {

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

@@ -5,13 +5,7 @@
 
 package org.jetbrains.compose.web.core.tests
 
-import org.jetbrains.compose.web.css.CSSUnitValue
-import org.jetbrains.compose.web.css.CSSVariables
-import org.jetbrains.compose.web.css.Style
-import org.jetbrains.compose.web.css.StyleSheet
-import org.jetbrains.compose.web.css.px
-import org.jetbrains.compose.web.css.value
-import org.jetbrains.compose.web.css.variable
+import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.get
@@ -38,12 +32,18 @@ object AppStylesheet : StyleSheet() {
     }
 
     val classWithRawVariables by style {
-        AppCSSVariables.stringWidth.value("150px")
-        AppCSSVariables.stringHeight.value("170px")
+        AppCSSVariables.stringWidth("150px")
+        AppCSSVariables.stringHeight("170px")
         property("width", AppCSSVariables.stringWidth.value())
         property("height", AppCSSVariables.stringHeight.value())
     }
 
+    val classWithTypedVariables by style {
+        AppCSSVariables.width(100.px)
+        AppCSSVariables.height(200.px)
+        property("width", AppCSSVariables.width.value())
+        property("height", AppCSSVariables.height.value())
+    }
 }
 
 
@@ -76,18 +76,31 @@ class CSSVariableTests {
         assertEquals(300.toDouble(), boundingRect.height)
     }
 
-//    @Test
-//    fun styleRawVariables() = runTest {
-//        composition {
-//            Style(AppStylesheet)
-//            Div({
-//                classes(AppStylesheet.classWithRawVariables)
-//            })
-//        }
-//
-//        val boundingRect = (root.children[1] as HTMLElement).getBoundingClientRect()
-//        assertEquals(150.toDouble(), boundingRect.width)
-//        assertEquals(170.toDouble(), boundingRect.height)
-//    }
+    @Test
+    fun styleRawVariables() = runTest {
+        composition {
+            Style(AppStylesheet)
+            Div({
+                classes(AppStylesheet.classWithRawVariables)
+            })
+        }
+
+        val boundingRect = (root.children[1] as HTMLElement).getBoundingClientRect()
+        assertEquals(150.toDouble(), boundingRect.width)
+        assertEquals(170.toDouble(), boundingRect.height)
+    }
+
+    @Test
+    fun styleTypedVariables() = runTest {
+        composition {
+            Style(AppStylesheet)
+            Div({
+                classes(AppStylesheet.classWithTypedVariables)
+            })
+        }
 
+        val boundingRect = (root.children[1] as HTMLElement).getBoundingClientRect()
+        assertEquals(100.toDouble(), boundingRect.width)
+        assertEquals(200.toDouble(), boundingRect.height)
+    }
 }