Commonize CSS interfaces and remove polyfill dependency

web/core/build.gradle.kts

@@ -31,7 +31,6 @@ kotlin {
         val jsMain by getting {
             dependencies {
                 implementation(kotlin("stdlib-js"))
-                implementation(npm("css-typed-om", "0.4.0"))
             }
         }
 

web/core/src/commonMain/kotlin/androidx/compose/web/css/CSSKT.kt

@@ -0,0 +1,107 @@
+/*
+ * 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.
+ */
+
+@file:Suppress("UNUSED")
+package androidx.compose.web.css
+
+abstract class CSSNumericValueKT : CSSNumericValue
+
+private class CSSUnitValueKT(
+    override val value: Number,
+    override val unit: String
+) : CSSNumericValueKT(), 
+    CSSUnitValue, 
+    CSSnumberValue,
+    CSSRelValue,
+    CSSpercentValue,
+    CSSemValue,
+    CSSexValue,
+    CSSchValue,
+    CSSicValue,
+    CSSremValue,
+    CSSlhValue,
+    CSSrlhValue,
+    CSSvwValue,
+    CSSvhValue,
+    CSSviValue,
+    CSSvbValue,
+    CSSvminValue,
+    CSSvmaxValue,
+    CSScmValue,
+    CSSmmValue,
+    CSSQValue,
+    CSSAbsValue,
+    CSSptValue,
+    CSSpcValue,
+    CSSpxValue,
+    CSSangleValue,
+    CSSdegValue,
+    CSSgradValue,
+    CSSradValue,
+    CSSturnValue,
+    CSSTimeValue,
+    CSSsValue,
+    CSSmsValue,
+    CSSFrequencyValue,
+    CSSHzValue,
+    CSSkHzValue,
+    CSSResolutionValue,
+    CSSdpiValue,
+    CSSdpcmValue,
+    CSSdppxValue,
+    CSSFlexValue,
+    CSSfrValue
+{
+    override fun toString(): String = "$value$unit"
+}
+
+object CSSKT: CSSTypedOM {
+    override fun number(value: Number): CSSnumberValue = CSSUnitValueKT(value, "number")
+    override fun percent(value: Number): CSSpercentValue = CSSUnitValueKT(value,  "percent")
+
+    // <length>
+    override fun em(value: Number): CSSemValue = CSSUnitValueKT(value,  "em")
+    override fun ex(value: Number): CSSexValue = CSSUnitValueKT(value,  "ex")
+    override fun ch(value: Number): CSSchValue = CSSUnitValueKT(value,  "ch")
+    override fun ic(value: Number): CSSicValue = CSSUnitValueKT(value,  "ic")
+    override fun rem(value: Number): CSSremValue = CSSUnitValueKT(value,  "rem")
+    override fun lh(value: Number): CSSlhValue = CSSUnitValueKT(value,  "lh")
+    override fun rlh(value: Number): CSSrlhValue = CSSUnitValueKT(value,  "rlh")
+    override fun vw(value: Number): CSSvwValue = CSSUnitValueKT(value,  "vw")
+    override fun vh(value: Number): CSSvhValue = CSSUnitValueKT(value,  "vh")
+    override fun vi(value: Number): CSSviValue = CSSUnitValueKT(value,  "vi")
+    override fun vb(value: Number): CSSvbValue = CSSUnitValueKT(value,  "vb")
+    override fun vmin(value: Number): CSSvminValue = CSSUnitValueKT(value,  "vmin")
+    override fun vmax(value: Number): CSSvmaxValue = CSSUnitValueKT(value,  "vmax")
+    override fun cm(value: Number): CSScmValue = CSSUnitValueKT(value,  "cm")
+    override fun mm(value: Number): CSSmmValue = CSSUnitValueKT(value,  "mm")
+    override fun Q(value: Number): CSSQValue = CSSUnitValueKT(value,  "Qer")
+
+    override fun pt(value: Number): CSSptValue = CSSUnitValueKT(value,  "pt")
+    override fun pc(value: Number): CSSpcValue = CSSUnitValueKT(value,  "pc")
+    override fun px(value: Number): CSSpxValue = CSSUnitValueKT(value,  "px")
+
+    // <angle>
+    override fun deg(value: Number): CSSdegValue = CSSUnitValueKT(value,  "deg")
+    override fun grad(value: Number): CSSgradValue = CSSUnitValueKT(value,  "grad")
+    override fun rad(value: Number): CSSradValue = CSSUnitValueKT(value,  "rad")
+    override fun turn(value: Number): CSSturnValue = CSSUnitValueKT(value,  "turn")
+
+    // <time>
+    override fun s(value: Number): CSSsValue = CSSUnitValueKT(value,  "s")
+    override fun ms(value: Number): CSSmsValue = CSSUnitValueKT(value,  "ms")
+
+    // <frequency> {}
+    override fun Hz(value: Number): CSSHzValue = CSSUnitValueKT(value,  "Hz")
+    override fun kHz(value: Number): CSSkHzValue = CSSUnitValueKT(value,  "kHz")
+
+    // <resolution>
+    override fun dpi(value: Number): CSSdpiValue = CSSUnitValueKT(value,  "dpi")
+    override fun dpcm(value: Number): CSSdpcmValue = CSSUnitValueKT(value,  "dpcm")
+    override fun dppx(value: Number): CSSdppxValue = CSSUnitValueKT(value,  "dppx")
+
+    // <flex>
+    override fun fr(value: Number): CSSfrValue = CSSUnitValueKT(value,  "fr")
+}

web/core/src/commonMain/kotlin/androidx/compose/web/css/CSSTypedOM.kt

@@ -0,0 +1,155 @@
+/*
+ * 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.
+ */
+
+@file:Suppress("UNUSED")
+package androidx.compose.web.css
+
+import kotlin.js.JsName
+
+expect interface CSSStyleValue
+
+expect interface CSSKeywordValue : CSSStyleValue {
+    val value: String
+
+    companion object {
+        operator fun invoke(value: String): CSSKeywordValue
+    }
+}
+
+open class CSSKeywordValueKT(override val value: String) : CSSKeywordValue
+
+// type StylePropertyValue = string | number | CSSStyleValue
+expect interface StylePropertyValue {
+    interface String: StylePropertyValue
+    interface Number: StylePropertyValue
+    interface StyleValue: StylePropertyValue
+    companion object {
+        operator fun invoke(value: kotlin.String): String
+
+        operator fun invoke(value: kotlin.Number): Number
+
+        operator fun invoke(value: CSSStyleValue): StyleValue
+    }
+}
+
+// type CSSNumeric = number | CSSNumericValue
+expect interface CSSNumeric {
+    interface Number: CSSNumeric
+    interface NumericValue: CSSNumeric
+    companion object {
+        operator fun invoke(value: kotlin.Number): Number
+
+        operator fun invoke(value: CSSNumericValue): NumericValue
+    }
+}
+
+enum class CSSMathOperator(val value: String) {
+    sum("sum"),
+    product("product"),
+    negate("negate"),
+    invert("invert"),
+    min("min"),
+    max("max"),
+    clamp("clamp")
+}
+
+expect interface CSSMathValue : CSSNumericValue {
+    val strOperator: String
+}
+
+expect val CSSMathValue.operator: CSSMathOperator
+
+expect class CSSNumericArray {
+    fun forEach(handler: (CSSNumericValue) -> Unit)
+    val length: Int
+
+    operator fun get(index: Int): CSSNumericValue
+}
+
+expect interface CSSMathSum : CSSMathValue {
+    val values: CSSNumericArray
+}
+
+expect interface CSSNumericType {
+    val length: Number
+    val angle: Number
+    val time: Number
+    val frequency: Number
+    val resolution: Number
+    val flex: Number
+    val percent: Number
+    val strPercentHint: String
+}
+
+enum class CSSNumericBaseType(val value: String) {
+    @JsName("_length")
+    length("length"),
+    angle("angle"),
+    time("time"),
+    frequency("frequency"),
+    resolution("resolution"),
+    flex("flex"),
+    percent("percent")
+}
+
+expect val CSSNumericType.percentHint: CSSNumericBaseType
+
+expect interface CSSNumericValue : CSSStyleValue
+
+expect interface CSSUnitValue : CSSNumericValue {
+    val value: Number
+    val unit: String
+}
+
+expect interface CSSTypedOM {
+    fun number(value: Number): CSSnumberValue
+    fun percent(value: Number): CSSpercentValue
+
+    // <length>
+    fun em(value: Number): CSSemValue
+    fun ex(value: Number): CSSexValue
+    fun ch(value: Number): CSSchValue
+    fun ic(value: Number): CSSicValue
+    fun rem(value: Number): CSSremValue
+    fun lh(value: Number): CSSlhValue
+    fun rlh(value: Number): CSSrlhValue
+    fun vw(value: Number): CSSvwValue
+    fun vh(value: Number): CSSvhValue
+    fun vi(value: Number): CSSviValue
+    fun vb(value: Number): CSSvbValue
+    fun vmin(value: Number): CSSvminValue
+    fun vmax(value: Number): CSSvmaxValue
+    fun cm(value: Number): CSScmValue
+    fun mm(value: Number): CSSmmValue
+    fun Q(value: Number): CSSQValue
+
+    fun pt(value: Number): CSSptValue
+    fun pc(value: Number): CSSpcValue
+    fun px(value: Number): CSSpxValue
+
+    // <angle>
+    fun deg(value: Number): CSSdegValue
+    fun grad(value: Number): CSSgradValue
+    fun rad(value: Number): CSSradValue
+    fun turn(value: Number): CSSturnValue
+
+    // <time>
+    fun s(value: Number): CSSsValue
+    fun ms(value: Number): CSSmsValue
+
+    // <frequency>
+    fun Hz(value: Number): CSSHzValue
+    fun kHz(value: Number): CSSkHzValue
+
+    // <resolution>
+    fun dpi(value: Number): CSSdpiValue
+    fun dpcm(value: Number): CSSdpcmValue
+    fun dppx(value: Number): CSSdppxValue
+
+    // <flex>
+    fun fr(value: Number): CSSfrValue
+}
+
+expect val CSS: CSSTypedOM

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

@@ -0,0 +1,129 @@
+@file:Suppress("UNUSED")
+
+package androidx.compose.web.css
+
+// fake interfaces to distinguish units
+expect interface CSSSizeValue : CSSUnitValue
+
+expect interface CSSnumberValue : CSSUnitValue
+
+expect interface CSSRelValue : CSSSizeValue
+expect interface CSSpercentValue : CSSRelValue
+expect interface CSSemValue : CSSRelValue
+expect interface CSSexValue : CSSRelValue
+expect interface CSSchValue : CSSRelValue
+expect interface CSSicValue : CSSRelValue
+expect interface CSSremValue : CSSRelValue
+expect interface CSSlhValue : CSSRelValue
+expect interface CSSrlhValue : CSSRelValue
+expect interface CSSvwValue : CSSRelValue
+expect interface CSSvhValue : CSSRelValue
+expect interface CSSviValue : CSSRelValue
+expect interface CSSvbValue : CSSRelValue
+expect interface CSSvminValue : CSSRelValue
+expect interface CSSvmaxValue : CSSRelValue
+expect interface CSScmValue : CSSRelValue
+expect interface CSSmmValue : CSSRelValue
+expect interface CSSQValue : CSSRelValue
+
+expect interface CSSAbsValue : CSSSizeValue
+expect interface CSSptValue : CSSAbsValue
+expect interface CSSpcValue : CSSAbsValue
+expect interface CSSpxValue : CSSAbsValue
+
+expect interface CSSangleValue : CSSUnitValue
+expect interface CSSdegValue : CSSangleValue
+expect interface CSSgradValue : CSSangleValue
+expect interface CSSradValue : CSSangleValue
+expect interface CSSturnValue : CSSangleValue
+
+expect interface CSSTimeValue : CSSUnitValue
+expect interface CSSsValue : CSSTimeValue
+expect interface CSSmsValue : CSSTimeValue
+
+expect interface CSSFrequencyValue : CSSUnitValue
+expect interface CSSHzValue : CSSFrequencyValue
+expect interface CSSkHzValue : CSSFrequencyValue
+
+expect interface CSSResolutionValue : CSSUnitValue
+expect interface CSSdpiValue : CSSResolutionValue
+expect interface CSSdpcmValue : CSSResolutionValue
+expect interface CSSdppxValue : CSSResolutionValue
+
+expect interface CSSFlexValue : CSSUnitValue
+expect interface CSSfrValue : CSSFlexValue
+
+inline val Number.number
+    get(): CSSUnitValue = CSS.number(this)
+
+inline val Number.percent
+    get(): CSSpercentValue = CSS.percent(this)
+
+inline val Number.em
+    get(): CSSemValue = CSS.em(this)
+inline val Number.ex
+    get(): CSSexValue = CSS.ex(this)
+inline val Number.ch
+    get(): CSSchValue = CSS.ch(this)
+inline val Number.ic
+    get(): CSSicValue = CSS.ic(this)
+inline val Number.rem
+    get(): CSSremValue = CSS.rem(this)
+inline val Number.lh
+    get(): CSSlhValue = CSS.lh(this)
+inline val Number.rlh
+    get(): CSSrlhValue = CSS.rlh(this)
+inline val Number.vw
+    get(): CSSvwValue = CSS.vw(this)
+inline val Number.vh
+    get(): CSSvhValue = CSS.vh(this)
+inline val Number.vi
+    get(): CSSviValue = CSS.vi(this)
+inline val Number.vb
+    get(): CSSvbValue = CSS.vb(this)
+inline val Number.vmin
+    get(): CSSvminValue = CSS.vmin(this)
+inline val Number.vmax
+    get(): CSSvmaxValue = CSS.vmax(this)
+inline val Number.cm
+    get(): CSScmValue = CSS.cm(this)
+inline val Number.mm
+    get(): CSSmmValue = CSS.mm(this)
+inline val Number.Q
+    get(): CSSQValue = CSS.Q(this)
+
+inline val Number.pt
+    get(): CSSptValue = CSS.pt(this)
+inline val Number.pc
+    get(): CSSpcValue = CSS.pc(this)
+inline val Number.px
+    get(): CSSpxValue = CSS.px(this)
+
+inline val Number.deg
+    get(): CSSdegValue = CSS.deg(this)
+inline val Number.grad
+    get(): CSSgradValue = CSS.grad(this)
+inline val Number.rad
+    get(): CSSradValue = CSS.rad(this)
+inline val Number.turn
+    get(): CSSturnValue = CSS.turn(this)
+
+inline val Number.s
+    get(): CSSsValue = CSS.s(this)
+inline val Number.ms
+    get(): CSSmsValue = CSS.ms(this)
+
+inline val Number.Hz
+    get(): CSSHzValue = CSS.Hz(this)
+inline val Number.kHz
+    get(): CSSkHzValue = CSS.kHz(this)
+
+inline val Number.dpi
+    get(): CSSdpiValue = CSS.dpi(this)
+inline val Number.dpcm
+    get(): CSSdpcmValue = CSS.dpcm(this)
+inline val Number.dppx
+    get(): CSSdppxValue = CSS.dppx(this)
+
+inline val Number.fr
+    get(): CSSfrValue = CSS.fr(this)

web/core/src/commonMain/kotlin/androidx/compose/web/css/keywords.kt

@@ -0,0 +1,10 @@
+/*
+ * 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 androidx.compose.web.css
+
+interface CSSAutoValue : CSSKeywordValue
+
+expect val auto: CSSAutoValue

web/core/src/commonMain/kotlin/androidx/compose/web/css/typing.kt

@@ -0,0 +1,24 @@
+/*
+ * 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 androidx.compose.web.css
+
+expect interface CSSSizeOrAutoValue : CSSStyleValue, StylePropertyValue {
+    interface Size : CSSSizeOrAutoValue
+    interface Auto : CSSSizeOrAutoValue
+    companion object {
+        operator fun invoke(value: CSSSizeValue): Size
+        operator fun invoke(value: CSSAutoValue): Auto
+    }
+}
+
+enum class Direction {
+    rtl,
+    ltr;
+
+    override fun toString(): String = this.name
+}
+
+typealias LanguageCode = String

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

@@ -1,348 +1,199 @@
-@file:Suppress("UNUSED")
+/*
+ * 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.
+ */
 
+@file:Suppress("UNUSED", "NOTHING_TO_INLINE")
 package androidx.compose.web.css
 
-import kotlinx.browser.window
+import org.w3c.dom.HTMLElement
-import org.w3c.dom.DOMMatrix
+import org.w3c.dom.css.*
-import org.w3c.dom.DOMMatrixReadOnly
-import org.w3c.dom.Element
-import org.w3c.dom.css.CSSRule
-import org.w3c.dom.css.CSSRuleList
-import org.w3c.dom.css.CSSStyleRule
-import org.w3c.dom.css.ElementCSSInlineStyle
 import org.w3c.dom.css.StyleSheet
 
-inline val StyleSheet.cssRules
+actual external interface CSSStyleValue
-    get() = this.asDynamic().cssRules.unsafeCast<CSSRuleList>()
-
-inline fun StyleSheet.deleteRule(index: Int) {
-    this.asDynamic().deleteRule(index)
-}
-
-inline val CSSStyleRule.styleMap
-    get() = this.asDynamic().styleMap.unsafeCast<StylePropertyMap>()
-
-inline operator fun CSSRuleList.get(index: Int): CSSRule {
-    return this.asDynamic()[index].unsafeCast<CSSRule>()
-}
 
-fun StyleSheet.insertRule(cssRule: String, index: Int? = null): Int {
+external interface CSSKeywordValueJS : CSSStyleValue {
-    return if (index != null) {
+    val value: String
-        this.asDynamic().insertRule(cssRule, index).unsafeCast<Int>()
-    } else {
-        this.asDynamic().insertRule(cssRule).unsafeCast<Int>()
-    }
-}
-
-val ElementCSSInlineStyle.attributeStyleMap
-    get() = this.asDynamic().attributeStyleMap.unsafeCast<StylePropertyMap>()
-
-external interface CSSStyleValue {
-    // toString() : string
-}
-
-@JsName("CSSStyleValue")
-open external class CSSStyleValueJS : CSSStyleValue {
-    companion object {
-        fun parse(property: String, cssText: String): CSSStyleValue
-        fun parseAll(property: String, cssText: String): Array<CSSStyleValue>
-    }
 }
 
-external class CSSVariableReferenceValue(
+@JsName("CSSKeywordValueActual")
-    variable: String,
+actual interface CSSKeywordValue : CSSKeywordValueJS, CSSStyleValue {
-    fallback: CSSUnparsedValue? = definedExternally
+    actual override val value: String
-) {
-    val variable: String
-    val fallback: CSSUnparsedValue?
-}
 
-// type CSSUnparsedSegment = String | CSSVariableReferenceValue
+    actual companion object {
-interface CSSUnparsedSegment {
+        actual inline operator fun invoke(value: String): CSSKeywordValue =
-    companion object {
+            CSSKeywordValueKT(value)
-        operator fun invoke(value: String) = value.unsafeCast<CSSUnparsedSegment>()
-        operator fun invoke(value: CSSVariableReferenceValue) =
-            value.unsafeCast<CSSUnparsedSegment>()
     }
 }
 
-fun CSSUnparsedSegment.asString() = this.asDynamic() as? String
+actual interface StylePropertyValue {
-fun CSSUnparsedSegment.asCSSVariableReferenceValue() =
+    actual interface String: StylePropertyValue
-    this.asDynamic() as? CSSVariableReferenceValue
+    actual interface Number: StylePropertyValue
+    actual interface StyleValue: StylePropertyValue, CSSStyleValue
+    actual companion object {
+       actual inline operator fun invoke(value: kotlin.String): String = value.unsafeCast<String>()
 
-external class CSSUnparsedValue(members: Array<CSSUnparsedSegment>) : CSSStyleValue {
+       actual inline operator fun invoke(value: kotlin.Number): Number = value.unsafeCast<Number>()
-    // TODO: [Symbol.iterator]() : IterableIterator<CSSUnparsedSegment>
-    fun forEach(handler: (CSSUnparsedSegment) -> Unit)
-    val length: Int
 
-    // readonly [index: number]: CSSUnparsedSegment
+       actual inline operator fun invoke(value: CSSStyleValue): StyleValue = value.unsafeCast<StyleValue>()
-    operator fun get(index: Int): CSSUnparsedSegment
-    operator fun set(index: Int, value: CSSUnparsedSegment)
     }
-
-external interface CSSKeywordValue : CSSStyleValue {
-    val value: String
 }
 
-@JsName("CSSKeywordValue")
+// type CSSNumeric = number | CSSNumericValue
-external class CSSKeywordValueJS(value: String) : CSSKeywordValue {
+actual interface CSSNumeric {
-    override val value: String
+    actual interface Number : CSSNumeric
-}
+    actual interface NumericValue : CSSNumeric, CSSNumericValue
+    actual companion object {
+       actual inline operator fun invoke(value: kotlin.Number): Number = value.unsafeCast<Number>()
 
-// type CSSNumberish = number | CSSNumericValue
+       actual inline operator fun invoke(value: CSSNumericValue): NumericValue = value.unsafeCast<NumericValue>()
-interface CSSNumberish {
-    companion object {
-        operator fun invoke(value: Number) = value.unsafeCast<CSSNumberish>()
-        operator fun invoke(value: CSSNumericValue) =
-            value.unsafeCast<CSSNumberish>()
-    }
     }
-
-fun CSSNumberish.asNumber() = this.asDynamic() as? Number
-fun CSSNumberish.asCSSNumericValue(): CSSNumericValue? = this.asDynamic() as? CSSNumericValueJS
-
-// declare enum CSSNumericBaseType {
-//     'length',
-//     'angle',
-//     'time',
-//     'frequency',
-//     'resolution',
-//     'flex',
-//     'percent',
-// }
-enum class CSSNumericBaseType(val value: String) {
-    @JsName("_length")
-    length("length"),
-    angle("angle"),
-    time("time"),
-    frequency("frequency"),
-    resolution("resolution"),
-    flex("flex"),
-    percent("percent")
 }
 
-external interface CSSNumericType {
+actual external interface CSSMathValue : CSSNumericValue {
-    val length: Number
+    @JsName("operator")
-    val angle: Number
+    actual val strOperator: String
-    val time: Number
-    val frequency: Number
-    val resolution: Number
-    val flex: Number
-    val percent: Number
-    // percentHint: CSSNumericBaseType
 }
 
-val CSSNumericType.percentHint
+actual val CSSMathValue.operator: CSSMathOperator
-    get() = CSSNumericBaseType.valueOf(this.asDynamic().percentHint)
+    get() = CSSMathOperator.valueOf(this.strOperator)
-//    set(value) { this.asDynamic().percentHint = value.value }
 
-external interface CSSNumericValue : CSSStyleValue {
+actual external class CSSNumericArray {
-    fun add(vararg values: CSSNumberish): CSSNumericValue
+    actual fun forEach(handler: (CSSNumericValue) -> Unit)
-    fun sub(vararg values: CSSNumberish): CSSNumericValue
-    fun mul(vararg values: CSSNumberish): CSSNumericValue
-    fun div(vararg values: CSSNumberish): CSSNumericValue
-    fun min(vararg values: CSSNumberish): CSSNumericValue
-    fun max(vararg values: CSSNumberish): CSSNumericValue
 
-    fun equals(vararg values: CSSNumberish): Boolean
+    actual val length: Int
 
-    fun to(unit: String): CSSUnitValue
+    actual operator fun get(index: Int): CSSNumericValue
-    fun toSum(vararg units: String): CSSMathSum
-    fun type(): CSSNumericType
 }
 
-abstract external class CSSNumericValueJS : CSSNumericValue {
+actual external interface CSSMathSum : CSSMathValue {
-    override fun add(vararg values: CSSNumberish): CSSNumericValue
+    actual val values: CSSNumericArray
-    override fun sub(vararg values: CSSNumberish): CSSNumericValue
-    override fun mul(vararg values: CSSNumberish): CSSNumericValue
-    override fun div(vararg values: CSSNumberish): CSSNumericValue
-    override fun min(vararg values: CSSNumberish): CSSNumericValue
-    override fun max(vararg values: CSSNumberish): CSSNumericValue
-
-    override fun equals(vararg values: CSSNumberish): Boolean
-
-    override fun to(unit: String): CSSUnitValue
-    override fun toSum(vararg units: String): CSSMathSum
-    override fun type(): CSSNumericType
-
-    companion object {
-        fun parse(cssText: String): CSSNumericValue
-    }
 }
 
-external interface CSSUnitValue : CSSNumericValue {
+actual interface CSSNumericType {
-    val value: Number
+    actual val length: Number
-    val unit: String
+    actual val angle: Number
+    actual val time: Number
+    actual val frequency: Number
+    actual val resolution: Number
+    actual val flex: Number
+    actual val percent: Number
+    @JsName("percentHint")
+    actual val strPercentHint: String
 }
 
-external interface CSSTypedUnitValue<T> : CSSNumericValue {
+actual val CSSNumericType.percentHint: CSSNumericBaseType
-    val value: Number
+    get() = CSSNumericBaseType.valueOf(this.strPercentHint)
-    val unit: T
-}
 
-@JsName("CSSUnitValue")
+actual external interface CSSNumericValue : CSSStyleValue
-external class CSSUnitValueJS(value: Number, unit: String) : CSSNumericValueJS, CSSUnitValue {
-    override val value: Number
-    override val unit: String
-}
 
-// declare enum CSSMathOperator {
+actual external interface CSSUnitValue : CSSNumericValue {
-//     'sum',
+    actual val value: Number
-//     'product',
+    actual val unit: String
-//     'negate',
-//     'invert',
-//     'min',
-//     'max',
-//     'clamp',
-// }
-enum class CSSMathOperator(val value: String) {
-    sum("sum"),
-    product("product"),
-    negate("negate"),
-    invert("invert"),
-    min("min"),
-    max("max"),
-    clamp("clamp")
 }
 
-open external class CSSMathValue : CSSNumericValueJS {
+actual external interface CSSTypedOM {
-    // readonly operator: CSSMathOperator
+    actual fun number(value: Number): CSSnumberValue
+    actual fun percent(value: Number): CSSpercentValue
+    actual fun em(value: Number): CSSemValue
+    actual fun ex(value: Number): CSSexValue
+    actual fun ch(value: Number): CSSchValue
+    actual fun ic(value: Number): CSSicValue
+    actual fun rem(value: Number): CSSremValue
+    actual fun lh(value: Number): CSSlhValue
+    actual fun rlh(value: Number): CSSrlhValue
+    actual fun vw(value: Number): CSSvwValue
+    actual fun vh(value: Number): CSSvhValue
+    actual fun vi(value: Number): CSSviValue
+    actual fun vb(value: Number): CSSvbValue
+    actual fun vmin(value: Number): CSSvminValue
+    actual fun vmax(value: Number): CSSvmaxValue
+    actual fun cm(value: Number): CSScmValue
+    actual fun mm(value: Number): CSSmmValue
+    actual fun Q(value: Number): CSSQValue
+    actual fun pt(value: Number): CSSptValue
+    actual fun pc(value: Number): CSSpcValue
+    actual fun px(value: Number): CSSpxValue
+    actual fun deg(value: Number): CSSdegValue
+    actual fun grad(value: Number): CSSgradValue
+    actual fun rad(value: Number): CSSradValue
+    actual fun turn(value: Number): CSSturnValue
+    actual fun s(value: Number): CSSsValue
+    actual fun ms(value: Number): CSSmsValue
+    actual fun Hz(value: Number): CSSHzValue
+    actual fun kHz(value: Number): CSSkHzValue
+    actual fun dpi(value: Number): CSSdpiValue
+    actual fun dpcm(value: Number): CSSdpcmValue
+    actual fun dppx(value: Number): CSSdppxValue
+    actual fun fr(value: Number): CSSfrValue
 }
 
-val CSSMathValue.operator
-    get() = CSSMathOperator.valueOf(this.asDynamic().operator)
-//    set(value) { this.asDynamic().operator = value.value }
 
-external class CSSMathSum(vararg args: CSSNumberish) : CSSMathValue {
+class StylePropertyMapKT(private val style: CSSStyleDeclaration, private val clearFn: () -> Unit): StylePropertyMap {
-    val values: CSSNumericArray
+    override fun set(property: String, value: StylePropertyValue) {
+        style.setProperty(property, value.toString())
     }
 
-external class CSSMathProduct(vararg args: CSSNumberish) : CSSMathValue {
+    override fun append(property: String, value: StylePropertyValue) {
-    val values: CSSNumericArray
+        val oldValues = style.getPropertyValue(property)
+        if (oldValues == undefined) {
+            style.setProperty(property, value.toString())
+        } else {
+            val newValues = listOf(oldValues, value)
+            style.setProperty(property, newValues.joinToString(", "))
         }
-
-external class CSSMathNegate(arg: CSSNumberish) : CSSMathValue {
-    val value: CSSNumericValue
     }
 
-external class CSSMathInvert(arg: CSSNumberish) : CSSMathValue {
+    override fun delete(property: String) {
-    val value: CSSNumericValue
+        style.removeProperty(property)
     }
 
-external class CSSMathMin(vararg args: CSSNumberish) : CSSMathValue {
+    override fun clear() {
-    val values: CSSNumericArray
+        clearFn()
     }
 
-external class CSSMathMax(vararg args: CSSNumberish) : CSSMathValue {
+    override fun has(property: String): Boolean {
-    val values: CSSNumericArray
+        return style.getPropertyValue(property) as String? != null
     }
-
-// TODO(yavanosta) : conflict with base class properties
-// Since there is no support for this class in any browser, it's better
-// wait for the implementation.
-// declare class CSSMathClamp extends CSSMathValue {
-// constructor(min: CSSNumberish, val: CSSNumberish, max: CSSNumberish)
-//     readonly min: CSSNumericValue
-//     readonly val: CSSNumericValue
-//     readonly max: CSSNumericValue
-// }
-
-external class CSSNumericArray {
-    // TODO: [Symbol.iterator]() : IterableIterator<CSSNumericValue>
-    fun forEach(handler: (CSSNumericValue) -> Unit)
-    val length: Int
-
-    // readonly [index: number]: CSSNumericValue
-    operator fun get(index: Int): CSSNumericValue
 }
 
-external class CSSTransformValue(transforms: Array<CSSTransformComponent>) : CSSStyleValue {
+fun Any.polyfillStylePropertyMap(jsFieldName: String, style: CSSStyleDeclaration, clearFn: () -> Unit): StylePropertyMap {
-    // [Symbol.iterator]() : IterableIterator<CSSTransformComponent>
+    val styleMap = this.asDynamic()[jsFieldName]
-    fun forEach(handler: (CSSTransformComponent) -> Unit)
+    if (styleMap == undefined) {
-    val length: Int
+        val newStyleMap = StylePropertyMapKT(style, clearFn).also {
-
+            this.asDynamic()[jsFieldName] = it
-    // [index: number]: CSSTransformComponent
-    operator fun get(index: Int): CSSTransformComponent
-    operator fun set(index: Int, value: CSSTransformComponent)
-    val is2D: Boolean
-    fun toMatrix(): DOMMatrix
         }
-
+        this.asDynamic()[jsFieldName] = newStyleMap
-open external class CSSTransformComponent {
+        return newStyleMap
-    val is2D: Boolean
-    fun toMatrix(): DOMMatrix
-    // toString() : string
     }
-
+    return styleMap.unsafeCast<StylePropertyMap>()
-external class CSSTranslate(
-    x: CSSNumericValue,
-    y: CSSNumericValue,
-    z: CSSNumericValue? = definedExternally
-) : CSSTransformComponent {
-    val x: CSSNumericValue
-    val y: CSSNumericValue
-    val z: CSSNumericValue
 }
 
-external class CSSRotate(angle: CSSNumericValue) : CSSTransformComponent {
-    constructor(x: CSSNumberish, y: CSSNumberish, z: CSSNumberish, angle: CSSNumericValue)
-
-    val x: CSSNumberish
-    val y: CSSNumberish
-    val z: CSSNumberish
-    val angle: CSSNumericValue
-}
 
-external class CSSScale(
+inline val StyleSheet.cssRules
-    x: CSSNumberish,
+    get() = this.asDynamic().cssRules.unsafeCast<CSSRuleList>()
-    y: CSSNumberish,
-    z: CSSNumberish? = definedExternally
-) : CSSTransformComponent {
-    val x: CSSNumberish
-    val y: CSSNumberish
-    val z: CSSNumberish
-}
 
-external class CSSSkew(ax: CSSNumericValue, ay: CSSNumericValue) : CSSTransformComponent {
-    val ax: CSSNumericValue
-    val ay: CSSNumericValue
-}
 
-external class CSSSkewX(ax: CSSNumericValue) : CSSTransformComponent {
+inline fun StyleSheet.deleteRule(index: Int) {
-    val ax: CSSNumericValue
+    this.asDynamic().deleteRule(index)
 }
 
-external class CSSSkewY(ay: CSSNumericValue) : CSSTransformComponent {
+fun StyleSheet.insertRule(cssRule: String, index: Int? = null): Int {
-    val ay: CSSNumericValue
+    return if (index != null) {
+        this.asDynamic().insertRule(cssRule, index).unsafeCast<Int>()
+    } else {
+        this.asDynamic().insertRule(cssRule).unsafeCast<Int>()
     }
-
-/* Note that skew(x,y) is *not* the same as skewX(x) skewY(y),
-     thus the separate interfaces for all three. */
-
-external class CSSPerspective(length: CSSNumericValue) : CSSTransformComponent {
-    val length: CSSNumericValue
 }
 
-external class CSSMatrixComponent(
-    matrix: DOMMatrixReadOnly,
-    options: CSSMatrixComponentOptions? = definedExternally
-) : CSSTransformComponent {
-    val matrix: DOMMatrix
-}
 
-external interface CSSMatrixComponentOptions {
+inline operator fun CSSRuleList.get(index: Int): CSSRule {
-    val is2D: Boolean
+    return this.asDynamic()[index].unsafeCast<CSSRule>()
 }
 
-external class CSSImageValue : CSSStyleValue
 
-open external class StylePropertyMapReadOnly {
+external interface StylePropertyMapReadOnly {
-    // TODO: [Symbol.iterator]() : IterableIterator<[string, CSSStyleValue[]]>
-
-    fun get(property: String): CSSStyleValue? // CSSStyleValue | undefined
-    fun getAll(property: String): Array<CSSStyleValue>
     fun has(property: String): Boolean
-    val size: Number
 }
 
 fun StylePropertyMapReadOnly.forEach(handler: (String, Array<CSSStyleValue>) -> Unit) {
@@ -354,82 +205,24 @@ fun StylePropertyMapReadOnly.forEach(handler: (String, Array<CSSStyleValue>) ->
     }
 }
 
-// CSSStyleValue | string
+external interface StylePropertyMap : StylePropertyMapReadOnly {
-interface StylePropertyValue {
+    fun set(property: String, value: StylePropertyValue)
-    companion object {
+    fun append(property: String, value: StylePropertyValue)
-        operator fun invoke(value: String) = value.unsafeCast<StylePropertyValue>()
-        operator fun invoke(value: Number) = value.unsafeCast<StylePropertyValue>()
-        operator fun invoke(value: CSSStyleValue) = value.unsafeCast<StylePropertyValue>()
-    }
-}
-
-fun StylePropertyValue.asString() = this.asDynamic() as? String
-fun StylePropertyValue.asNumber() = this.asDynamic() as? Number
-fun StylePropertyValue.asCSSStyleValue(): CSSStyleValue? = this.asDynamic() as? CSSStyleValueJS
-
-external class StylePropertyMap : StylePropertyMapReadOnly {
-    fun set(property: String, vararg values: StylePropertyValue)
-    fun append(property: String, vararg values: StylePropertyValue)
     fun delete(property: String)
     fun clear()
 }
 
-inline fun Element.computedStyleMap(): StylePropertyMapReadOnly =
+@JsName("CSS")
-    this.asDynamic().computedStyleMap().unsafeCast<StylePropertyMapReadOnly>()
+external val CSSJS: CSSTypedOM
-
+
-external class CSS {
+const val useNativeCSSTypedOM = true
-    companion object {
+
-        fun number(value: Number): CSSUnitValue
+actual val CSS: CSSTypedOM = if (useNativeCSSTypedOM && CSSJS != undefined && CSSJS.asDynamic().px != undefined) {
-        fun percent(value: Number): CSSUnitValue
+    CSSJS
-
+} else CSSKT
-        // <length>
+
-        fun em(value: Number): CSSUnitValue
+val CSSStyleRule.styleMap: StylePropertyMap
-        fun ex(value: Number): CSSUnitValue
+    get() = polyfillStylePropertyMap(if (useNativeCSSTypedOM) "styleMap" else "styleMapKT", this.style) { cssText = "" }
-        fun ch(value: Number): CSSUnitValue
-        fun ic(value: Number): CSSUnitValue
-        fun rem(value: Number): CSSUnitValue
-        fun lh(value: Number): CSSUnitValue
-        fun rlh(value: Number): CSSUnitValue
-        fun vw(value: Number): CSSUnitValue
-        fun vh(value: Number): CSSUnitValue
-        fun vi(value: Number): CSSUnitValue
-        fun vb(value: Number): CSSUnitValue
-        fun vmin(value: Number): CSSUnitValue
-        fun vmax(value: Number): CSSUnitValue
-        fun cm(value: Number): CSSUnitValue
-        fun mm(value: Number): CSSUnitValue
-        fun Q(value: Number): CSSUnitValue
-
-        //        function _in(value: Number) : CSSUnitValue
-//        export
-//        { _in as in }
-        fun pt(value: Number): CSSUnitValue
-        fun pc(value: Number): CSSUnitValue
-        fun px(value: Number): CSSUnitValue
-
-        // <angle>
-        fun deg(value: Number): CSSUnitValue
-        fun grad(value: Number): CSSUnitValue
-        fun rad(value: Number): CSSUnitValue
-        fun turn(value: Number): CSSUnitValue
-
-        // <time>
-        fun s(value: Number): CSSUnitValue
-        fun ms(value: Number): CSSUnitValue
-
-        // <frequency>
-        fun Hz(value: Number): CSSUnitValue
-        fun kHz(value: Number): CSSUnitValue
-
-        // <resolution>
-        fun dpi(value: Number): CSSUnitValue
-        fun dpcm(value: Number): CSSUnitValue
-        fun dppx(value: Number): CSSUnitValue
-
-        // <flex>
-        fun fr(value: Number): CSSUnitValue
-    }
-}
 
-@Suppress("unused")
+val HTMLElement.attributeStyleMap: StylePropertyMap
-val cssTypedOMPolyfill = CSSTypedOMPolyfill.default(window)
+    get() = polyfillStylePropertyMap(if (useNativeCSSTypedOM) "attributeStyleMap" else "attributeStyleMapKT", this.style) { removeAttribute("style") }

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

@@ -1,28 +0,0 @@
-@file:Suppress("UNUSED")
-
-package androidx.compose.web.css
-
-interface CSSAutoValue : CSSKeywordValue
-
-val auto = CSSKeywordValueJS("auto").unsafeCast<CSSAutoValue>()
-fun asCSSAutoValue(value: dynamic) = (value as? CSSKeywordValueJS).unsafeCast<CSSAutoValue>()
-
-// type CSSSizeOrAutoValue = CSSSizeValue | CSSAutoValue
-interface CSSSizeOrAutoValue : CSSStyleValue, StylePropertyValue {
-    companion object {
-        operator fun invoke(value: CSSSizeValue) = value.unsafeCast<CSSSizeOrAutoValue>()
-        operator fun invoke(value: CSSAutoValue) = value.unsafeCast<CSSSizeOrAutoValue>()
-    }
-}
-
-fun CSSSizeOrAutoValue.asCSSSizeValue() = this.asDynamic() as? CSSUnitValueJS
-fun CSSSizeOrAutoValue.asCSSAutoValue(): CSSAutoValue = asCSSAutoValue(this.asDynamic())
-
-enum class Direction {
-    rtl,
-    ltr;
-
-    override fun toString(): String = this.name
-}
-
-typealias LanguageCode = String

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

@@ -1,15 +0,0 @@
-package androidx.compose.web.css
-
-import org.w3c.dom.Window
-
-@JsModule("css-typed-om")
-@JsNonModule
-abstract external class CSSTypedOMPolyfill {
-    companion object {
-        fun default(window: Window)
-    }
-}
-
-fun StylePropertyMap.clear() {
-    throw AssertionError("StylePropertyMap::clear isn't polyfilled")
-}

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

@@ -2,126 +2,53 @@
 
 package androidx.compose.web.css
 
-external interface CSSSizeValue : CSSUnitValue
-
 // fake interfaces to distinguish units
-external interface CSSRelValue : CSSSizeValue
+actual external interface CSSSizeValue : CSSUnitValue
-external interface CSSpercentValue : CSSRelValue
+
-external interface CSSemValue : CSSRelValue
+actual external interface CSSnumberValue : CSSUnitValue
-external interface CSSexValue : CSSRelValue
+
-external interface CSSchValue : CSSRelValue
+actual external interface CSSRelValue : CSSSizeValue
-external interface CSSicValue : CSSRelValue
+actual external interface CSSpercentValue : CSSRelValue
-external interface CSSremValue : CSSRelValue
+actual external interface CSSemValue : CSSRelValue
-external interface CSSlhValue : CSSRelValue
+actual external interface CSSexValue : CSSRelValue
-external interface CSSrlhValue : CSSRelValue
+actual external interface CSSchValue : CSSRelValue
-external interface CSSvwValue : CSSRelValue
+actual external interface CSSicValue : CSSRelValue
-external interface CSSvhValue : CSSRelValue
+actual external interface CSSremValue : CSSRelValue
-external interface CSSviValue : CSSRelValue
+actual external interface CSSlhValue : CSSRelValue
-external interface CSSvbValue : CSSRelValue
+actual external interface CSSrlhValue : CSSRelValue
-external interface CSSvminValue : CSSRelValue
+actual external interface CSSvwValue : CSSRelValue
-external interface CSSvmaxValue : CSSRelValue
+actual external interface CSSvhValue : CSSRelValue
-external interface CSScmValue : CSSRelValue
+actual external interface CSSviValue : CSSRelValue
-external interface CSSmmValue : CSSRelValue
+actual external interface CSSvbValue : CSSRelValue
-external interface CSSQValue : CSSRelValue
+actual external interface CSSvminValue : CSSRelValue
-
+actual external interface CSSvmaxValue : CSSRelValue
-external interface CSSAbsValue : CSSSizeValue
+actual external interface CSScmValue : CSSRelValue
-external interface CSSptValue : CSSAbsValue
+actual external interface CSSmmValue : CSSRelValue
-external interface CSSpcValue : CSSAbsValue
+actual external interface CSSQValue : CSSRelValue
-external interface CSSpxValue : CSSAbsValue
+
-
+actual external interface CSSAbsValue : CSSSizeValue
-external interface CSSangleValue : CSSUnitValue
+actual external interface CSSptValue : CSSAbsValue
-external interface CSSdegValue : CSSangleValue
+actual external interface CSSpcValue : CSSAbsValue
-external interface CSSgradValue : CSSangleValue
+actual external interface CSSpxValue : CSSAbsValue
-external interface CSSradValue : CSSangleValue
+
-external interface CSSturnValue : CSSangleValue
+actual external interface CSSangleValue : CSSUnitValue
-
+actual external interface CSSdegValue : CSSangleValue
-external interface CSSTimeValue : CSSUnitValue
+actual external interface CSSgradValue : CSSangleValue
-external interface CSSsValue : CSSTimeValue
+actual external interface CSSradValue : CSSangleValue
-external interface CSSmsValue : CSSTimeValue
+actual external interface CSSturnValue : CSSangleValue
-
+
-external interface CSSFrequencyValue : CSSUnitValue
+actual external interface CSSTimeValue : CSSUnitValue
-external interface CSSHzValue : CSSFrequencyValue
+actual external interface CSSsValue : CSSTimeValue
-external interface CSSkHzValue : CSSFrequencyValue
+actual external interface CSSmsValue : CSSTimeValue
-
+
-external interface CSSResolutionValue : CSSUnitValue
+actual external interface CSSFrequencyValue : CSSUnitValue
-external interface CSSdpiValue : CSSResolutionValue
+actual external interface CSSHzValue : CSSFrequencyValue
-external interface CSSdpcmValue : CSSResolutionValue
+actual external interface CSSkHzValue : CSSFrequencyValue
-external interface CSSdppxValue : CSSResolutionValue
+
-
+actual external interface CSSResolutionValue : CSSUnitValue
-external interface CSSFlexValue : CSSUnitValue
+actual external interface CSSdpiValue : CSSResolutionValue
-external interface CSSfrValue : CSSFlexValue
+actual external interface CSSdpcmValue : CSSResolutionValue
-
+actual external interface CSSdppxValue : CSSResolutionValue
-val Number.number
+
-    get(): CSSUnitValue = CSS.number(this)
+actual external interface CSSFlexValue : CSSUnitValue
-
+actual external interface CSSfrValue : CSSFlexValue
-val Number.percent
-    get(): CSSpercentValue = CSS.percent(this).unsafeCast<CSSpercentValue>()
-
-val Number.em
-    get(): CSSemValue = CSS.em(this).unsafeCast<CSSemValue>()
-val Number.ex
-    get(): CSSexValue = CSS.ex(this).unsafeCast<CSSexValue>()
-val Number.ch
-    get(): CSSchValue = CSS.ch(this).unsafeCast<CSSchValue>()
-val Number.ic
-    get(): CSSicValue = CSS.ic(this).unsafeCast<CSSicValue>()
-val Number.rem
-    get(): CSSremValue = CSS.rem(this).unsafeCast<CSSremValue>()
-val Number.lh
-    get(): CSSlhValue = CSS.lh(this).unsafeCast<CSSlhValue>()
-val Number.rlh
-    get(): CSSrlhValue = CSS.rlh(this).unsafeCast<CSSrlhValue>()
-val Number.vw
-    get(): CSSvwValue = CSS.vw(this).unsafeCast<CSSvwValue>()
-val Number.vh
-    get(): CSSvhValue = CSS.vh(this).unsafeCast<CSSvhValue>()
-val Number.vi
-    get(): CSSviValue = CSS.vi(this).unsafeCast<CSSviValue>()
-val Number.vb
-    get(): CSSvbValue = CSS.vb(this).unsafeCast<CSSvbValue>()
-val Number.vmin
-    get(): CSSvminValue = CSS.vmin(this).unsafeCast<CSSvminValue>()
-val Number.vmax
-    get(): CSSvmaxValue = CSS.vmax(this).unsafeCast<CSSvmaxValue>()
-val Number.cm
-    get(): CSScmValue = CSS.cm(this).unsafeCast<CSScmValue>()
-val Number.mm
-    get(): CSSmmValue = CSS.mm(this).unsafeCast<CSSmmValue>()
-val Number.Q
-    get(): CSSQValue = CSS.Q(this).unsafeCast<CSSQValue>()
-
-val Number.pt
-    get(): CSSptValue = CSS.pt(this).unsafeCast<CSSptValue>()
-val Number.pc
-    get(): CSSpcValue = CSS.pc(this).unsafeCast<CSSpcValue>()
-val Number.px
-    get(): CSSpxValue = CSS.px(this).unsafeCast<CSSpxValue>()
-
-val Number.deg
-    get(): CSSdegValue = CSS.deg(this).unsafeCast<CSSdegValue>()
-val Number.grad
-    get(): CSSgradValue = CSS.grad(this).unsafeCast<CSSgradValue>()
-val Number.rad
-    get(): CSSradValue = CSS.rad(this).unsafeCast<CSSradValue>()
-val Number.turn
-    get(): CSSturnValue = CSS.turn(this).unsafeCast<CSSturnValue>()
-
-val Number.s
-    get(): CSSsValue = CSS.s(this).unsafeCast<CSSsValue>()
-val Number.ms
-    get(): CSSmsValue = CSS.ms(this).unsafeCast<CSSmsValue>()
-
-val Number.Hz
-    get(): CSSHzValue = CSS.Hz(this).unsafeCast<CSSHzValue>()
-val Number.kHz
-    get(): CSSkHzValue = CSS.kHz(this).unsafeCast<CSSkHzValue>()
-
-val Number.dpi
-    get(): CSSdpiValue = CSS.dpi(this).unsafeCast<CSSdpiValue>()
-val Number.dpcm
-    get(): CSSdpcmValue = CSS.dpcm(this).unsafeCast<CSSdpcmValue>()
-val Number.dppx
-    get(): CSSdppxValue = CSS.dppx(this).unsafeCast<CSSdppxValue>()
-
-val Number.fr
-    get(): CSSfrValue = CSS.fr(this).unsafeCast<CSSfrValue>()

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

@@ -0,0 +1,9 @@
+/*
+ * 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 androidx.compose.web.css
+
+actual inline val auto: CSSAutoValue
+    get() = CSSKeywordValue("auto").unsafeCast<CSSAutoValue>()

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

@@ -0,0 +1,18 @@
+/*
+ * 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 androidx.compose.web.css
+
+actual interface CSSSizeOrAutoValue : CSSStyleValue, StylePropertyValue {
+    actual interface Size : CSSSizeOrAutoValue
+    actual interface Auto : CSSSizeOrAutoValue
+    actual companion object {
+        @Suppress("NOTHING_TO_INLINE")
+        actual inline operator fun invoke(value: CSSSizeValue): Size = value.unsafeCast<Size>()
+
+        @Suppress("NOTHING_TO_INLINE")
+        actual inline operator fun invoke(value: CSSAutoValue): Auto = value.unsafeCast<Auto>()
+    }
+}

web/core/src/jsMain/kotlin/androidx/compose/web/elements/Style.kt

@@ -3,19 +3,7 @@ package androidx.compose.web.elements
 import androidx.compose.runtime.Composable
 import androidx.compose.web.attributes.AttrsBuilder
 import androidx.compose.web.attributes.Tag
-import androidx.compose.web.css.CSSGroupingRuleDeclaration
+import androidx.compose.web.css.*
-import androidx.compose.web.css.CSSRuleDeclaration
-import androidx.compose.web.css.CSSRuleDeclarationList
-import androidx.compose.web.css.CSSStyleRuleDeclaration
-import androidx.compose.web.css.StylePropertyMap
-import androidx.compose.web.css.StylePropertyValue
-import androidx.compose.web.css.StyleSheetBuilder
-import androidx.compose.web.css.StyleSheetBuilderImpl
-import androidx.compose.web.css.cssRules
-import androidx.compose.web.css.deleteRule
-import androidx.compose.web.css.get
-import androidx.compose.web.css.insertRule
-import androidx.compose.web.css.styleMap
 import org.w3c.dom.HTMLStyleElement
 import org.w3c.dom.css.CSSGroupingRule
 import org.w3c.dom.css.CSSRule

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

@@ -133,14 +133,15 @@ class StaticComposableTests {
         }
 
         assertEquals("border: 1px solid red;", (root.children[0] as HTMLElement).style.cssText)
-        root.children[1]?.let { el ->
+        root.children[1]?.let {
+            val el = it.unsafeCast<HTMLElement>()
             assertEquals(
                 "green",
-                el.asDynamic().attributeStyleMap.get("border-color").toString(),
+                el.style.getPropertyValue("border-color")
             )
             assertEquals(
                 "3px",
-                el.asDynamic().attributeStyleMap.get("border-width").toString(),
+                el.style.getPropertyValue("border-width"),
             )
         }
     }

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

@@ -0,0 +1,145 @@
+/*
+ * 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.
+ */
+
+@file:Suppress("UNUSED")
+package androidx.compose.web.css
+
+actual interface CSSStyleValue
+
+actual interface CSSKeywordValue : CSSStyleValue {
+    actual val value: String
+
+    actual companion object {
+        actual operator fun invoke(value: String): CSSKeywordValue = CSSKeywordValueKT(value)
+    }
+}
+
+actual interface StylePropertyValue {
+    actual interface String : StylePropertyValue
+    actual interface Number : StylePropertyValue
+    actual interface StyleValue : StylePropertyValue
+    actual companion object {
+        actual operator fun invoke(value: kotlin.String): String = StylePropertyValueJVM(value)
+
+        actual operator fun invoke(value: kotlin.Number): Number = StylePropertyValueJVM(value)
+
+        actual operator fun invoke(value: CSSStyleValue): StyleValue = StylePropertyValueJVM(value)
+    }
+}
+
+sealed class StylePropertyValueJVM: StylePropertyValue {
+    data class String(val value: kotlin.String): StylePropertyValueJVM(), StylePropertyValue.String
+    data class Number(val value: kotlin.Number): StylePropertyValueJVM(), StylePropertyValue.Number
+    data class StyleValue(val value: CSSStyleValue): StylePropertyValueJVM(), StylePropertyValue.StyleValue
+
+    companion object {
+        operator fun invoke(value: kotlin.String) = String(value)
+
+        operator fun invoke(value: kotlin.Number) = Number(value)
+
+        operator fun invoke(value: CSSStyleValue) = StyleValue(value)
+    }
+}
+
+// type CSSNumeric = number | CSSNumericValue
+actual interface CSSNumeric {
+    actual interface Number : CSSNumeric
+    actual interface NumericValue : CSSNumeric
+    actual companion object {
+        actual operator fun invoke(value: kotlin.Number): Number {
+            TODO("Not yet implemented")
+        }
+
+        actual operator fun invoke(value: CSSNumericValue): NumericValue {
+            TODO("Not yet implemented")
+        }
+
+    }
+}
+
+actual val CSSMathValue.operator: CSSMathOperator
+    get() = TODO("Not yet implemented")
+
+actual class CSSNumericArray {
+    actual fun forEach(handler: (CSSNumericValue) -> Unit) {
+    }
+
+    actual val length: Int
+        get() = TODO("Not yet implemented")
+
+    actual operator fun get(index: Int): CSSNumericValue {
+        TODO("Not yet implemented")
+    }
+
+}
+
+actual interface CSSMathSum : CSSMathValue {
+    actual val values: CSSNumericArray
+}
+
+actual val CSSNumericType.percentHint: CSSNumericBaseType
+    get() = TODO("Not yet implemented")
+
+actual interface CSSMathValue : CSSNumericValue {
+    actual val strOperator: String
+}
+
+actual interface CSSNumericType {
+    actual val length: Number
+    actual val angle: Number
+    actual val time: Number
+    actual val frequency: Number
+    actual val resolution: Number
+    actual val flex: Number
+    actual val percent: Number
+    actual val strPercentHint: String
+}
+
+actual interface CSSNumericValue : CSSStyleValue
+
+actual interface CSSUnitValue : CSSNumericValue {
+    actual val value: Number
+    actual val unit: String
+}
+
+actual interface CSSTypedOM {
+    actual fun number(value: Number): CSSnumberValue
+    actual fun percent(value: Number): CSSpercentValue
+    actual fun em(value: Number): CSSemValue
+    actual fun ex(value: Number): CSSexValue
+    actual fun ch(value: Number): CSSchValue
+    actual fun ic(value: Number): CSSicValue
+    actual fun rem(value: Number): CSSremValue
+    actual fun lh(value: Number): CSSlhValue
+    actual fun rlh(value: Number): CSSrlhValue
+    actual fun vw(value: Number): CSSvwValue
+    actual fun vh(value: Number): CSSvhValue
+    actual fun vi(value: Number): CSSviValue
+    actual fun vb(value: Number): CSSvbValue
+    actual fun vmin(value: Number): CSSvminValue
+    actual fun vmax(value: Number): CSSvmaxValue
+    actual fun cm(value: Number): CSScmValue
+    actual fun mm(value: Number): CSSmmValue
+    actual fun Q(value: Number): CSSQValue
+    actual fun pt(value: Number): CSSptValue
+    actual fun pc(value: Number): CSSpcValue
+    actual fun px(value: Number): CSSpxValue
+    actual fun deg(value: Number): CSSdegValue
+    actual fun grad(value: Number): CSSgradValue
+    actual fun rad(value: Number): CSSradValue
+    actual fun turn(value: Number): CSSturnValue
+    actual fun s(value: Number): CSSsValue
+    actual fun ms(value: Number): CSSmsValue
+    actual fun Hz(value: Number): CSSHzValue
+    actual fun kHz(value: Number): CSSkHzValue
+    actual fun dpi(value: Number): CSSdpiValue
+    actual fun dpcm(value: Number): CSSdpcmValue
+    actual fun dppx(value: Number): CSSdppxValue
+    actual fun fr(value: Number): CSSfrValue
+
+}
+
+actual val CSS: CSSTypedOM
+    get() = TODO("Not yet implemented")

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

@@ -0,0 +1,51 @@
+/*
+ * 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 androidx.compose.web.css
+
+// fake interfaces to distinguish units
+actual interface CSSSizeValue : CSSUnitValue
+
+actual interface CSSnumberValue : CSSUnitValue
+
+actual interface CSSRelValue : CSSSizeValue
+actual interface CSSpercentValue : CSSRelValue
+actual interface CSSQValue : CSSRelValue
+actual interface CSSemValue : CSSRelValue
+actual interface CSSexValue : CSSRelValue
+actual interface CSSchValue : CSSRelValue
+actual interface CSSicValue : CSSRelValue
+actual interface CSSremValue : CSSRelValue
+actual interface CSSlhValue : CSSRelValue
+actual interface CSSrlhValue : CSSRelValue
+actual interface CSSvwValue : CSSRelValue
+actual interface CSSvhValue : CSSRelValue
+actual interface CSSviValue : CSSRelValue
+actual interface CSSvbValue : CSSRelValue
+actual interface CSSvminValue : CSSRelValue
+actual interface CSSvmaxValue : CSSRelValue
+actual interface CSScmValue : CSSRelValue
+actual interface CSSmmValue : CSSRelValue
+actual interface CSSAbsValue : CSSSizeValue
+actual interface CSSptValue : CSSAbsValue
+actual interface CSSpcValue : CSSAbsValue
+actual interface CSSpxValue : CSSAbsValue
+actual interface CSSangleValue : CSSUnitValue
+actual interface CSSdegValue : CSSangleValue
+actual interface CSSgradValue : CSSangleValue
+actual interface CSSradValue : CSSangleValue
+actual interface CSSturnValue : CSSangleValue
+actual interface CSSTimeValue : CSSUnitValue
+actual interface CSSsValue : CSSTimeValue
+actual interface CSSmsValue : CSSTimeValue
+actual interface CSSFrequencyValue : CSSUnitValue
+actual interface CSSHzValue : CSSFrequencyValue
+actual interface CSSkHzValue : CSSFrequencyValue
+actual interface CSSResolutionValue : CSSUnitValue
+actual interface CSSdpiValue : CSSResolutionValue
+actual interface CSSdpcmValue : CSSResolutionValue
+actual interface CSSdppxValue : CSSResolutionValue
+actual interface CSSFlexValue : CSSUnitValue
+actual interface CSSfrValue : CSSFlexValue

web/core/src/jvmMain/kotlin/androidx/compose/web/css/auto.kt

@@ -0,0 +1,9 @@
+/*
+ * 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 androidx.compose.web.css
+
+actual val auto: CSSAutoValue
+    get() = object : CSSKeywordValueKT("auto"), CSSAutoValue {}

web/core/src/jvmMain/kotlin/androidx/compose/web/css/typing.kt

@@ -0,0 +1,20 @@
+/*
+ * 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 androidx.compose.web.css
+
+actual interface CSSSizeOrAutoValue : CSSStyleValue, StylePropertyValue {
+    actual interface Size : CSSSizeOrAutoValue
+    actual interface Auto : CSSSizeOrAutoValue
+    actual companion object {
+        actual operator fun invoke(value: CSSSizeValue): Size {
+            TODO("Not yet implemented")
+        }
+
+        actual operator fun invoke(value: CSSAutoValue): Auto {
+            TODO("Not yet implemented")
+        }
+    }
+}