CSSNumeric auto keyword

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

@@ -9,7 +9,6 @@ import org.jetbrains.compose.web.dom.*
 import com.sample.HighlightJs
 import com.sample.components.ContainerInSection
 import com.sample.style.*
-import org.jetbrains.compose.web.css.keywords.auto
 import org.w3c.dom.HTMLElement
 
 private fun HTMLElement.setHighlightedCode(code: String) {
@@ -253,7 +252,7 @@ fun FormattedCodeSnippet(code: String, language: String = "kotlin") {
         style {
             property("max-height", 25.em)
             property("overflow", "auto")
-            height(auto)
+            height(CSSNumeric.Auto)
         }
     }) {
         Code(

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

@@ -252,3 +252,13 @@ external interface AnimationPlayState: StylePropertyEnum {
     }
 }
 inline fun AnimationPlayState(value: String) = value.unsafeCast<AnimationPlayState>()
+
+external interface CSSNumericValue<T : CSSUnit> : StylePropertyValue, CSSVariableValueAs<CSSNumericValue<T>> {
+    companion object {
+        inline val Auto get() = CSSNumericValue("auto")
+        inline val Inherit get() = CSSNumericValue("inherit")
+        inline val Initial get() = CSSNumericValue("initial")
+        inline val Unset get() = CSSNumericValue("unset")
+    }
+}
+inline fun CSSNumericValue(value: String) = value.unsafeCast<CSSNumericValue<Nothing>>()

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

@@ -2,8 +2,6 @@
 
 package org.jetbrains.compose.web.css
 
-external interface CSSNumericValue<T : CSSUnit> : StylePropertyValue, CSSVariableValueAs<CSSNumericValue<T>>
-
 external interface CSSSizeValue<T : CSSUnit> : CSSNumericValue<T> {
     val value: Float
     val unit: T
@@ -27,13 +25,13 @@ external interface CSSUnitFrequency: CSSUnit
 external interface CSSUnitResolution: CSSUnit
 external interface CSSUnitFlex: CSSUnit
 
-typealias CSSAngleValue = CSSSizeValue<out CSSUnitAngle>
-typealias CSSLengthOrPercentageValue = CSSSizeValue<out CSSUnitLengthOrPercentage>
-typealias CSSLengthValue = CSSSizeValue<out CSSUnitLength>
-typealias CSSPercentageValue = CSSSizeValue<out CSSUnitPercentage>
-typealias CSSUnitValue = CSSSizeValue<out CSSUnit>
+typealias CSSAngleValue = CSSNumericValue<out CSSUnitAngle>
+typealias CSSLengthOrPercentageValue = CSSNumericValue<out CSSUnitLengthOrPercentage>
+typealias CSSLengthValue = CSSNumericValue<out CSSUnitLength>
+typealias CSSPercentageValue = CSSNumericValue<out CSSUnitPercentage>
+typealias CSSUnitValue = CSSNumericValue<out CSSUnit>
 typealias CSSNumeric = CSSNumericValue<out CSSUnit>
-typealias CSSpxValue = CSSSizeValue<CSSUnit.px>
+typealias CSSpxValue = CSSNumericValue<CSSUnit.px>
 
 // fake interfaces to distinguish units
 external interface CSSUnit {

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

@@ -1,14 +0,0 @@
-/*
- * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
- * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
- */
-
-package org.jetbrains.compose.web.css.keywords
-
-import org.jetbrains.compose.web.css.CSSKeywordValue
-
-external interface CSSAutoKeyword : CSSKeywordValue
-
-inline val auto: CSSAutoKeyword
-    get() = CSSKeywordValue("auto").unsafeCast<CSSAutoKeyword>()
-

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

@@ -5,24 +5,14 @@
 
 package org.jetbrains.compose.web.css
 
-import org.jetbrains.compose.web.css.keywords.CSSAutoKeyword
-
 fun StyleBuilder.width(value: CSSNumeric) {
     property("width", value)
 }
 
-fun StyleBuilder.width(value: CSSAutoKeyword) {
-    property("width", value)
-}
-
 fun StyleBuilder.height(value: CSSNumeric) {
     property("height", value)
 }
 
-fun StyleBuilder.height(value: CSSAutoKeyword) {
-    property("height", value)
-}
-
 // https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
 fun StyleBuilder.boxSizing(value: String) {
     property("box-sizing", value)

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

@@ -5,8 +5,6 @@
 
 package org.jetbrains.compose.web.css
 
-import org.jetbrains.compose.web.css.keywords.CSSAutoKeyword
-
 fun StyleBuilder.position(position: Position) {
     property(
         "position",
@@ -18,31 +16,14 @@ fun StyleBuilder.top(value: CSSLengthOrPercentageValue) {
     property("top", value)
 }
 
-fun StyleBuilder.top(value: CSSAutoKeyword) {
-    property("top", value)
-}
-
 fun StyleBuilder.bottom(value: CSSLengthOrPercentageValue) {
     property("bottom", value)
 }
 
-fun StyleBuilder.bottom(value: CSSAutoKeyword) {
-    property("bottom", value)
-}
-
 fun StyleBuilder.left(value: CSSLengthOrPercentageValue) {
     property("left", value)
 }
 
-fun StyleBuilder.left(value: CSSAutoKeyword) {
-    property("left", value)
-}
-
 fun StyleBuilder.right(value: CSSLengthOrPercentageValue) {
     property("right", value)
 }
-
-fun StyleBuilder.right(value: CSSAutoKeyword) {
-    property("right", value)
-}
-

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

@@ -4,7 +4,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.css.keywords.auto
 import org.jetbrains.compose.web.dom.Span
 import org.jetbrains.compose.web.dom.Text
 import kotlin.test.Test
@@ -174,7 +173,7 @@ class InlineStyleTests {
         composition {
             Span({
                 style {
-                    height(auto)
+                    height(CSSNumeric.Auto)
                 }
                 id("container")
             })