Revert "Commonize CSS interfaces and remove polyfill dependency"

This reverts commit 8e2176b029.

web/core/build.gradle.kts

@@ -31,6 +31,7 @@ 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

@@ -1,107 +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.
- */
-
-@file:Suppress("UNUSED")
-package org.jetbrains.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

@@ -1,155 +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.
- */
-
-@file:Suppress("UNUSED")
-package org.jetbrains.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

@@ -1,129 +0,0 @@
-@file:Suppress("UNUSED")
-
-package org.jetbrains.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

@@ -1,10 +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
-
-interface CSSAutoValue : CSSKeywordValue
-
-expect val auto: CSSAutoValue

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

@@ -1,24 +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
-
-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,199 +1,347 @@
-/*
- * 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 org.jetbrains.compose.web.css
 
-import org.w3c.dom.HTMLElement
+import kotlinx.browser.window
-import org.w3c.dom.css.*
+import org.w3c.dom.DOMMatrix
+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
 
-actual external interface CSSStyleValue
+inline val StyleSheet.cssRules
+    get() = this.asDynamic().cssRules.unsafeCast<CSSRuleList>()
 
-external interface CSSKeywordValueJS : CSSStyleValue {
+inline fun StyleSheet.deleteRule(index: Int) {
-    val value: String
+    this.asDynamic().deleteRule(index)
 }
 
-@JsName("CSSKeywordValueActual")
+inline val CSSStyleRule.styleMap
-actual interface CSSKeywordValue : CSSKeywordValueJS, CSSStyleValue {
+    get() = this.asDynamic().styleMap.unsafeCast<StylePropertyMap>()
-    actual override val value: String
+
+inline operator fun CSSRuleList.get(index: Int): CSSRule {
+    return this.asDynamic()[index].unsafeCast<CSSRule>()
+}
 
-    actual companion object {
+fun StyleSheet.insertRule(cssRule: String, index: Int? = null): Int {
-        actual inline operator fun invoke(value: String): CSSKeywordValue =
+    return if (index != null) {
-            CSSKeywordValueKT(value)
+        this.asDynamic().insertRule(cssRule, index).unsafeCast<Int>()
+    } else {
+        this.asDynamic().insertRule(cssRule).unsafeCast<Int>()
     }
 }
 
-actual interface StylePropertyValue {
+val ElementCSSInlineStyle.attributeStyleMap
-    actual interface String: StylePropertyValue
+    get() = this.asDynamic().attributeStyleMap.unsafeCast<StylePropertyMap>()
-    actual interface Number: StylePropertyValue
-    actual interface StyleValue: StylePropertyValue, CSSStyleValue
-    actual companion object {
-       actual inline operator fun invoke(value: kotlin.String): String = value.unsafeCast<String>()
 
-       actual inline operator fun invoke(value: kotlin.Number): Number = value.unsafeCast<Number>()
+external interface CSSStyleValue {
+    // toString() : string
+}
 
-       actual inline operator fun invoke(value: CSSStyleValue): StyleValue = value.unsafeCast<StyleValue>()
+@JsName("CSSStyleValue")
+open external class CSSStyleValueJS : CSSStyleValue {
+    companion object {
+        fun parse(property: String, cssText: String): CSSStyleValue
+        fun parseAll(property: String, cssText: String): Array<CSSStyleValue>
     }
 }
 
-// type CSSNumeric = number | CSSNumericValue
+external class CSSVariableReferenceValue(
-actual interface CSSNumeric {
+    variable: String,
-    actual interface Number : CSSNumeric
+    fallback: CSSUnparsedValue? = definedExternally
-    actual interface NumericValue : CSSNumeric, CSSNumericValue
+) {
-    actual companion object {
+    val variable: String
-       actual inline operator fun invoke(value: kotlin.Number): Number = value.unsafeCast<Number>()
+    val fallback: CSSUnparsedValue?
+}
 
-       actual inline operator fun invoke(value: CSSNumericValue): NumericValue = value.unsafeCast<NumericValue>()
+// type CSSUnparsedSegment = String | CSSVariableReferenceValue
+interface CSSUnparsedSegment {
+    companion object {
+        operator fun invoke(value: String) = value.unsafeCast<CSSUnparsedSegment>()
+        operator fun invoke(value: CSSVariableReferenceValue) =
+            value.unsafeCast<CSSUnparsedSegment>()
     }
 }
 
-actual external interface CSSMathValue : CSSNumericValue {
+fun CSSUnparsedSegment.asString() = this.asDynamic() as? String
-    @JsName("operator")
+fun CSSUnparsedSegment.asCSSVariableReferenceValue() =
-    actual val strOperator: String
+    this.asDynamic() as? CSSVariableReferenceValue
+
+external class CSSUnparsedValue(members: Array<CSSUnparsedSegment>) : CSSStyleValue {
+    // TODO: [Symbol.iterator]() : IterableIterator<CSSUnparsedSegment>
+    fun forEach(handler: (CSSUnparsedSegment) -> Unit)
+    val length: Int
+
+    // readonly [index: number]: CSSUnparsedSegment
+    operator fun get(index: Int): CSSUnparsedSegment
+    operator fun set(index: Int, value: CSSUnparsedSegment)
 }
 
-actual val CSSMathValue.operator: CSSMathOperator
+external interface CSSKeywordValue : CSSStyleValue {
-    get() = CSSMathOperator.valueOf(this.strOperator)
+    val value: String
+}
 
-actual external class CSSNumericArray {
+@JsName("CSSKeywordValue")
-    actual fun forEach(handler: (CSSNumericValue) -> Unit)
+external class CSSKeywordValueJS(value: String) : CSSKeywordValue {
+    override val value: String
+}
 
-    actual val length: Int
+// type CSSNumberish = number | CSSNumericValue
+interface CSSNumberish {
+    companion object {
+        operator fun invoke(value: Number) = value.unsafeCast<CSSNumberish>()
+        operator fun invoke(value: CSSNumericValue) =
+            value.unsafeCast<CSSNumberish>()
+    }
+}
 
-    actual operator fun get(index: Int): CSSNumericValue
+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")
 }
 
-actual external interface CSSMathSum : CSSMathValue {
+external interface CSSNumericType {
-    actual val values: CSSNumericArray
+    val length: Number
+    val angle: Number
+    val time: Number
+    val frequency: Number
+    val resolution: Number
+    val flex: Number
+    val percent: Number
+    // percentHint: CSSNumericBaseType
 }
 
-actual interface CSSNumericType {
+val CSSNumericType.percentHint
-    actual val length: Number
+    get() = CSSNumericBaseType.valueOf(this.asDynamic().percentHint)
-    actual val angle: Number
+//    set(value) { this.asDynamic().percentHint = value.value }
-    actual val time: Number
+
-    actual val frequency: Number
+external interface CSSNumericValue : CSSStyleValue {
-    actual val resolution: Number
+    fun add(vararg values: CSSNumberish): CSSNumericValue
-    actual val flex: Number
+    fun sub(vararg values: CSSNumberish): CSSNumericValue
-    actual val percent: Number
+    fun mul(vararg values: CSSNumberish): CSSNumericValue
-    @JsName("percentHint")
+    fun div(vararg values: CSSNumberish): CSSNumericValue
-    actual val strPercentHint: String
+    fun min(vararg values: CSSNumberish): CSSNumericValue
+    fun max(vararg values: CSSNumberish): CSSNumericValue
+
+    fun equals(vararg values: CSSNumberish): Boolean
+
+    fun to(unit: String): CSSUnitValue
+    fun toSum(vararg units: String): CSSMathSum
+    fun type(): CSSNumericType
 }
 
-actual val CSSNumericType.percentHint: CSSNumericBaseType
+abstract external class CSSNumericValueJS : CSSNumericValue {
-    get() = CSSNumericBaseType.valueOf(this.strPercentHint)
+    override fun add(vararg values: CSSNumberish): CSSNumericValue
+    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
 
-actual external interface CSSNumericValue : CSSStyleValue
+    override fun equals(vararg values: CSSNumberish): Boolean
 
-actual external interface CSSUnitValue : CSSNumericValue {
+    override fun to(unit: String): CSSUnitValue
-    actual val value: Number
+    override fun toSum(vararg units: String): CSSMathSum
-    actual val unit: String
+    override fun type(): CSSNumericType
+
+    companion object {
+        fun parse(cssText: String): CSSNumericValue
+    }
 }
 
-actual external interface CSSTypedOM {
+external interface CSSUnitValue : CSSNumericValue {
-    actual fun number(value: Number): CSSnumberValue
+    val value: Number
-    actual fun percent(value: Number): CSSpercentValue
+    val unit: String
-    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
 }
 
+external interface CSSTypedUnitValue<T> : CSSNumericValue {
+    val value: Number
+    val unit: T
+}
 
-class StylePropertyMapKT(private val style: CSSStyleDeclaration, private val clearFn: () -> Unit): StylePropertyMap {
+@JsName("CSSUnitValue")
-    override fun set(property: String, value: StylePropertyValue) {
+external class CSSUnitValueJS(value: Number, unit: String) : CSSNumericValueJS, CSSUnitValue {
-        style.setProperty(property, value.toString())
+    override val value: Number
+    override val unit: String
 }
 
-    override fun append(property: String, value: StylePropertyValue) {
+// declare enum CSSMathOperator {
-        val oldValues = style.getPropertyValue(property)
+//     'sum',
-        if (oldValues == undefined) {
+//     'product',
-            style.setProperty(property, value.toString())
+//     'negate',
-        } else {
+//     'invert',
-            val newValues = listOf(oldValues, value)
+//     'min',
-            style.setProperty(property, newValues.joinToString(", "))
+//     '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 {
+    // readonly operator: CSSMathOperator
 }
 
-    override fun delete(property: String) {
+val CSSMathValue.operator
-        style.removeProperty(property)
+    get() = CSSMathOperator.valueOf(this.asDynamic().operator)
+//    set(value) { this.asDynamic().operator = value.value }
+
+external class CSSMathSum(vararg args: CSSNumberish) : CSSMathValue {
+    val values: CSSNumericArray
 }
 
-    override fun clear() {
+external class CSSMathProduct(vararg args: CSSNumberish) : CSSMathValue {
-        clearFn()
+    val values: CSSNumericArray
 }
 
-    override fun has(property: String): Boolean {
+external class CSSMathNegate(arg: CSSNumberish) : CSSMathValue {
-        return style.getPropertyValue(property) as String? != null
+    val value: CSSNumericValue
 }
+
+external class CSSMathInvert(arg: CSSNumberish) : CSSMathValue {
+    val value: CSSNumericValue
 }
 
-fun Any.polyfillStylePropertyMap(jsFieldName: String, style: CSSStyleDeclaration, clearFn: () -> Unit): StylePropertyMap {
+external class CSSMathMin(vararg args: CSSNumberish) : CSSMathValue {
-    val styleMap = this.asDynamic()[jsFieldName]
+    val values: CSSNumericArray
-    if (styleMap == undefined) {
-        val newStyleMap = StylePropertyMapKT(style, clearFn).also {
-            this.asDynamic()[jsFieldName] = it
 }
-        this.asDynamic()[jsFieldName] = newStyleMap
+
-        return newStyleMap
+external class CSSMathMax(vararg args: CSSNumberish) : CSSMathValue {
+    val values: CSSNumericArray
 }
-    return styleMap.unsafeCast<StylePropertyMap>()
+
+// 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 {
+    // [Symbol.iterator]() : IterableIterator<CSSTransformComponent>
+    fun forEach(handler: (CSSTransformComponent) -> Unit)
+    val length: Int
 
-inline val StyleSheet.cssRules
+    // [index: number]: CSSTransformComponent
-    get() = this.asDynamic().cssRules.unsafeCast<CSSRuleList>()
+    operator fun get(index: Int): CSSTransformComponent
+    operator fun set(index: Int, value: CSSTransformComponent)
+    val is2D: Boolean
+    fun toMatrix(): DOMMatrix
+}
 
+open external class CSSTransformComponent {
+    val is2D: Boolean
+    fun toMatrix(): DOMMatrix
+    // toString() : string
+}
 
-inline fun StyleSheet.deleteRule(index: Int) {
+external class CSSTranslate(
-    this.asDynamic().deleteRule(index)
+    x: CSSNumericValue,
+    y: CSSNumericValue,
+    z: CSSNumericValue? = definedExternally
+) : CSSTransformComponent {
+    val x: CSSNumericValue
+    val y: CSSNumericValue
+    val z: CSSNumericValue
 }
 
-fun StyleSheet.insertRule(cssRule: String, index: Int? = null): Int {
+external class CSSRotate(angle: CSSNumericValue) : CSSTransformComponent {
-    return if (index != null) {
+    constructor(x: CSSNumberish, y: CSSNumberish, z: CSSNumberish, angle: CSSNumericValue)
-        this.asDynamic().insertRule(cssRule, index).unsafeCast<Int>()
+
-    } else {
+    val x: CSSNumberish
-        this.asDynamic().insertRule(cssRule).unsafeCast<Int>()
+    val y: CSSNumberish
+    val z: CSSNumberish
+    val angle: CSSNumericValue
 }
+
+external class CSSScale(
+    x: CSSNumberish,
+    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
+}
 
-inline operator fun CSSRuleList.get(index: Int): CSSRule {
+external class CSSSkewX(ax: CSSNumericValue) : CSSTransformComponent {
-    return this.asDynamic()[index].unsafeCast<CSSRule>()
+    val ax: CSSNumericValue
+}
+
+external class CSSSkewY(ay: CSSNumericValue) : CSSTransformComponent {
+    val ay: CSSNumericValue
 }
 
+/* Note that skew(x,y) is *not* the same as skewX(x) skewY(y),
+     thus the separate interfaces for all three. */
 
-external interface StylePropertyMapReadOnly {
+external class CSSPerspective(length: CSSNumericValue) : CSSTransformComponent {
+    val length: CSSNumericValue
+}
+
+external class CSSMatrixComponent(
+    matrix: DOMMatrixReadOnly,
+    options: CSSMatrixComponentOptions? = definedExternally
+) : CSSTransformComponent {
+    val matrix: DOMMatrix
+}
+
+external interface CSSMatrixComponentOptions {
+    val is2D: Boolean
+}
+
+external class CSSImageValue : CSSStyleValue
+
+open external class 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) {
@@ -205,24 +353,82 @@ fun StylePropertyMapReadOnly.forEach(handler: (String, Array<CSSStyleValue>) ->
     }
 }
 
-external interface StylePropertyMap : StylePropertyMapReadOnly {
+// CSSStyleValue | string
-    fun set(property: String, value: StylePropertyValue)
+interface StylePropertyValue {
-    fun append(property: String, value: StylePropertyValue)
+    companion object {
-    fun delete(property: String)
+        operator fun invoke(value: String) = value.unsafeCast<StylePropertyValue>()
-    fun clear()
+        operator fun invoke(value: Number) = value.unsafeCast<StylePropertyValue>()
+        operator fun invoke(value: CSSStyleValue) = value.unsafeCast<StylePropertyValue>()
+    }
 }
 
-@JsName("CSS")
+fun StylePropertyValue.asString() = this.asDynamic() as? String
-external val CSSJS: CSSTypedOM
+fun StylePropertyValue.asNumber() = this.asDynamic() as? Number
-
+fun StylePropertyValue.asCSSStyleValue(): CSSStyleValue? = this.asDynamic() as? CSSStyleValueJS
-const val useNativeCSSTypedOM = true
 
-actual val CSS: CSSTypedOM = if (useNativeCSSTypedOM && CSSJS != undefined && CSSJS.asDynamic().px != undefined) {
+external class StylePropertyMap : StylePropertyMapReadOnly {
-    CSSJS
+    fun set(property: String, vararg values: StylePropertyValue)
-} else CSSKT
+    fun append(property: String, vararg values: StylePropertyValue)
+    fun delete(property: String)
+    fun clear()
+}
 
-val CSSStyleRule.styleMap: StylePropertyMap
+inline fun Element.computedStyleMap(): StylePropertyMapReadOnly =
-    get() = polyfillStylePropertyMap(if (useNativeCSSTypedOM) "styleMap" else "styleMapKT", this.style) { cssText = "" }
+    this.asDynamic().computedStyleMap().unsafeCast<StylePropertyMapReadOnly>()
+
+external class CSS {
+    companion object {
+        fun number(value: Number): CSSUnitValue
+        fun percent(value: Number): CSSUnitValue
+
+        // <length>
+        fun em(value: Number): CSSUnitValue
+        fun ex(value: Number): CSSUnitValue
+        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
+    }
+}
 
-val HTMLElement.attributeStyleMap: StylePropertyMap
+@Suppress("unused")
-    get() = polyfillStylePropertyMap(if (useNativeCSSTypedOM) "attributeStyleMap" else "attributeStyleMapKT", this.style) { removeAttribute("style") }
+val cssTypedOMPolyfill = CSSTypedOMPolyfill.default(window)

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

@@ -0,0 +1,28 @@
+@file:Suppress("UNUSED")
+
+package org.jetbrains.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

@@ -0,0 +1,15 @@
+package org.jetbrains.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,53 +2,126 @@
 
 package org.jetbrains.compose.web.css
 
+external interface CSSSizeValue : CSSUnitValue
+
 // fake interfaces to distinguish units
-actual external interface CSSSizeValue : CSSUnitValue
+external interface CSSRelValue : CSSSizeValue
-
+external interface CSSpercentValue : CSSRelValue
-actual external interface CSSnumberValue : CSSUnitValue
+external interface CSSemValue : CSSRelValue
-
+external interface CSSexValue : CSSRelValue
-actual external interface CSSRelValue : CSSSizeValue
+external interface CSSchValue : CSSRelValue
-actual external interface CSSpercentValue : CSSRelValue
+external interface CSSicValue : CSSRelValue
-actual external interface CSSemValue : CSSRelValue
+external interface CSSremValue : CSSRelValue
-actual external interface CSSexValue : CSSRelValue
+external interface CSSlhValue : CSSRelValue
-actual external interface CSSchValue : CSSRelValue
+external interface CSSrlhValue : CSSRelValue
-actual external interface CSSicValue : CSSRelValue
+external interface CSSvwValue : CSSRelValue
-actual external interface CSSremValue : CSSRelValue
+external interface CSSvhValue : CSSRelValue
-actual external interface CSSlhValue : CSSRelValue
+external interface CSSviValue : CSSRelValue
-actual external interface CSSrlhValue : CSSRelValue
+external interface CSSvbValue : CSSRelValue
-actual external interface CSSvwValue : CSSRelValue
+external interface CSSvminValue : CSSRelValue
-actual external interface CSSvhValue : CSSRelValue
+external interface CSSvmaxValue : CSSRelValue
-actual external interface CSSviValue : CSSRelValue
+external interface CSScmValue : CSSRelValue
-actual external interface CSSvbValue : CSSRelValue
+external interface CSSmmValue : CSSRelValue
-actual external interface CSSvminValue : CSSRelValue
+external interface CSSQValue : CSSRelValue
-actual external interface CSSvmaxValue : CSSRelValue
+
-actual external interface CSScmValue : CSSRelValue
+external interface CSSAbsValue : CSSSizeValue
-actual external interface CSSmmValue : CSSRelValue
+external interface CSSptValue : CSSAbsValue
-actual external interface CSSQValue : CSSRelValue
+external interface CSSpcValue : CSSAbsValue
-
+external interface CSSpxValue : CSSAbsValue
-actual external interface CSSAbsValue : CSSSizeValue
+
-actual external interface CSSptValue : CSSAbsValue
+external interface CSSangleValue : CSSUnitValue
-actual external interface CSSpcValue : CSSAbsValue
+external interface CSSdegValue : CSSangleValue
-actual external interface CSSpxValue : CSSAbsValue
+external interface CSSgradValue : CSSangleValue
-
+external interface CSSradValue : CSSangleValue
-actual external interface CSSangleValue : CSSUnitValue
+external interface CSSturnValue : CSSangleValue
-actual external interface CSSdegValue : CSSangleValue
+
-actual external interface CSSgradValue : CSSangleValue
+external interface CSSTimeValue : CSSUnitValue
-actual external interface CSSradValue : CSSangleValue
+external interface CSSsValue : CSSTimeValue
-actual external interface CSSturnValue : CSSangleValue
+external interface CSSmsValue : CSSTimeValue
-
+
-actual external interface CSSTimeValue : CSSUnitValue
+external interface CSSFrequencyValue : CSSUnitValue
-actual external interface CSSsValue : CSSTimeValue
+external interface CSSHzValue : CSSFrequencyValue
-actual external interface CSSmsValue : CSSTimeValue
+external interface CSSkHzValue : CSSFrequencyValue
-
+
-actual external interface CSSFrequencyValue : CSSUnitValue
+external interface CSSResolutionValue : CSSUnitValue
-actual external interface CSSHzValue : CSSFrequencyValue
+external interface CSSdpiValue : CSSResolutionValue
-actual external interface CSSkHzValue : CSSFrequencyValue
+external interface CSSdpcmValue : CSSResolutionValue
-
+external interface CSSdppxValue : CSSResolutionValue
-actual external interface CSSResolutionValue : CSSUnitValue
+
-actual external interface CSSdpiValue : CSSResolutionValue
+external interface CSSFlexValue : CSSUnitValue
-actual external interface CSSdpcmValue : CSSResolutionValue
+external interface CSSfrValue : CSSFlexValue
-actual external interface CSSdppxValue : CSSResolutionValue
+
-
+val Number.number
-actual external interface CSSFlexValue : CSSUnitValue
+    get(): CSSUnitValue = CSS.number(this)
-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

@@ -1,9 +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
-
-actual inline val auto: CSSAutoValue
-    get() = CSSKeywordValue("auto").unsafeCast<CSSAutoValue>()

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

@@ -1,18 +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
-
-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,13 +3,13 @@ package org.jetbrains.compose.web.dom
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.attributes.AttrsBuilder
 import org.jetbrains.compose.web.attributes.Tag
-import org.jetbrains.compose.web.css.*
 import org.w3c.dom.HTMLStyleElement
 import org.w3c.dom.css.CSSGroupingRule
 import org.w3c.dom.css.CSSRule
 import org.w3c.dom.css.CSSStyleDeclaration
 import org.w3c.dom.css.CSSStyleRule
 import org.w3c.dom.css.StyleSheet
+import org.jetbrains.compose.web.css.*
 
 /**
  * Use this function to mount the <style> tag into the DOM tree.

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

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

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

@@ -1,145 +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.
- */
-
-@file:Suppress("UNUSED")
-package org.jetbrains.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

@@ -1,51 +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
-
-// 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

@@ -1,9 +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
-
-actual val auto: CSSAutoValue
-    get() = object : CSSKeywordValueKT("auto"), CSSAutoValue {}

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

@@ -1,20 +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
-
-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")
-        }
-    }
-}