Browse Source

Revert "Commonize CSS interfaces and remove polyfill dependency"

This reverts commit 8e2176b029.
pull/737/head
Shagen Ogandzhanian 3 years ago
parent
commit
3962c5cf23
  1. 1
      web/core/build.gradle.kts
  2. 107
      web/core/src/commonMain/kotlin/androidx/compose/web/css/CSSKT.kt
  3. 155
      web/core/src/commonMain/kotlin/androidx/compose/web/css/CSSTypedOM.kt
  4. 129
      web/core/src/commonMain/kotlin/androidx/compose/web/css/CSSUnits.kt
  5. 10
      web/core/src/commonMain/kotlin/androidx/compose/web/css/keywords.kt
  6. 24
      web/core/src/commonMain/kotlin/androidx/compose/web/css/typing.kt
  7. 544
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt
  8. 28
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSHelpers.kt
  9. 15
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSPolyfill.kt
  10. 171
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt
  11. 9
      web/core/src/jsMain/kotlin/androidx/compose/web/css/keywords.kt
  12. 18
      web/core/src/jsMain/kotlin/androidx/compose/web/css/typing.kt
  13. 2
      web/core/src/jsMain/kotlin/androidx/compose/web/elements/Style.kt
  14. 7
      web/core/src/jsTest/kotlin/StaticComposableTests.kt
  15. 145
      web/core/src/jvmMain/kotlin/androidx/compose/web/css/CSS.kt
  16. 51
      web/core/src/jvmMain/kotlin/androidx/compose/web/css/CSSUnits.kt
  17. 9
      web/core/src/jvmMain/kotlin/androidx/compose/web/css/auto.kt
  18. 20
      web/core/src/jvmMain/kotlin/androidx/compose/web/css/typing.kt

1
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"))
}
}

107
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")
}

155
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

129
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)

10
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

24
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

544
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 org.w3c.dom.css.*
import kotlinx.browser.window
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 {
val value: String
inline fun StyleSheet.deleteRule(index: Int) {
this.asDynamic().deleteRule(index)
}
@JsName("CSSKeywordValueActual")
actual interface CSSKeywordValue : CSSKeywordValueJS, CSSStyleValue {
actual override val value: String
inline val CSSStyleRule.styleMap
get() = this.asDynamic().styleMap.unsafeCast<StylePropertyMap>()
actual companion object {
actual inline operator fun invoke(value: String): CSSKeywordValue =
CSSKeywordValueKT(value)
inline operator fun CSSRuleList.get(index: Int): CSSRule {
return this.asDynamic()[index].unsafeCast<CSSRule>()
}
fun StyleSheet.insertRule(cssRule: String, index: Int? = null): Int {
return if (index != null) {
this.asDynamic().insertRule(cssRule, index).unsafeCast<Int>()
} else {
this.asDynamic().insertRule(cssRule).unsafeCast<Int>()
}
}
actual interface StylePropertyValue {
actual interface String: StylePropertyValue
actual interface Number: StylePropertyValue
actual interface StyleValue: StylePropertyValue, CSSStyleValue
actual companion object {
actual inline operator fun invoke(value: kotlin.String): String = value.unsafeCast<String>()
val ElementCSSInlineStyle.attributeStyleMap
get() = this.asDynamic().attributeStyleMap.unsafeCast<StylePropertyMap>()
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
actual interface CSSNumeric {
actual interface Number : CSSNumeric
actual interface NumericValue : CSSNumeric, CSSNumericValue
actual companion object {
actual inline operator fun invoke(value: kotlin.Number): Number = value.unsafeCast<Number>()
external class CSSVariableReferenceValue(
variable: String,
fallback: CSSUnparsedValue? = definedExternally
) {
val variable: String
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 {
@JsName("operator")
actual val strOperator: String
}
actual val CSSMathValue.operator: CSSMathOperator
get() = CSSMathOperator.valueOf(this.strOperator)
actual external class CSSNumericArray {
actual fun forEach(handler: (CSSNumericValue) -> Unit)
actual val length: Int
actual operator fun get(index: Int): CSSNumericValue
}
actual external interface CSSMathSum : CSSMathValue {
actual val values: CSSNumericArray
}
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
@JsName("percentHint")
actual val strPercentHint: String
}
actual val CSSNumericType.percentHint: CSSNumericBaseType
get() = CSSNumericBaseType.valueOf(this.strPercentHint)
actual external interface CSSNumericValue : CSSStyleValue
actual external interface CSSUnitValue : CSSNumericValue {
actual val value: Number
actual val unit: String
}
actual external 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
}
class StylePropertyMapKT(private val style: CSSStyleDeclaration, private val clearFn: () -> Unit): StylePropertyMap {
override fun set(property: String, value: StylePropertyValue) {
style.setProperty(property, value.toString())
}
fun CSSUnparsedSegment.asString() = this.asDynamic() as? String
fun CSSUnparsedSegment.asCSSVariableReferenceValue() =
this.asDynamic() as? CSSVariableReferenceValue
override fun append(property: String, value: StylePropertyValue) {
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 CSSUnparsedValue(members: Array<CSSUnparsedSegment>) : CSSStyleValue {
// TODO: [Symbol.iterator]() : IterableIterator<CSSUnparsedSegment>
fun forEach(handler: (CSSUnparsedSegment) -> Unit)
val length: Int
override fun delete(property: String) {
style.removeProperty(property)
}
// readonly [index: number]: CSSUnparsedSegment
operator fun get(index: Int): CSSUnparsedSegment
operator fun set(index: Int, value: CSSUnparsedSegment)
}
override fun clear() {
clearFn()
}
external interface CSSKeywordValue : CSSStyleValue {
val value: String
}
override fun has(property: String): Boolean {
return style.getPropertyValue(property) as String? != null
}
@JsName("CSSKeywordValue")
external class CSSKeywordValueJS(value: String) : CSSKeywordValue {
override val value: String
}
fun Any.polyfillStylePropertyMap(jsFieldName: String, style: CSSStyleDeclaration, clearFn: () -> Unit): StylePropertyMap {
val styleMap = this.asDynamic()[jsFieldName]
if (styleMap == undefined) {
val newStyleMap = StylePropertyMapKT(style, clearFn).also {
this.asDynamic()[jsFieldName] = it
}
this.asDynamic()[jsFieldName] = newStyleMap
return newStyleMap
// type CSSNumberish = number | CSSNumericValue
interface CSSNumberish {
companion object {
operator fun invoke(value: Number) = value.unsafeCast<CSSNumberish>()
operator fun invoke(value: CSSNumericValue) =
value.unsafeCast<CSSNumberish>()
}
return styleMap.unsafeCast<StylePropertyMap>()
}
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")
}
inline val StyleSheet.cssRules
get() = this.asDynamic().cssRules.unsafeCast<CSSRuleList>()
external interface CSSNumericType {
val length: Number
val angle: Number
val time: Number
val frequency: Number
val resolution: Number
val flex: Number
val percent: Number
// percentHint: CSSNumericBaseType
}
val CSSNumericType.percentHint
get() = CSSNumericBaseType.valueOf(this.asDynamic().percentHint)
// set(value) { this.asDynamic().percentHint = value.value }
inline fun StyleSheet.deleteRule(index: Int) {
this.asDynamic().deleteRule(index)
external interface CSSNumericValue : CSSStyleValue {
fun add(vararg values: CSSNumberish): CSSNumericValue
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
fun to(unit: String): CSSUnitValue
fun toSum(vararg units: String): CSSMathSum
fun type(): CSSNumericType
}
fun StyleSheet.insertRule(cssRule: String, index: Int? = null): Int {
return if (index != null) {
this.asDynamic().insertRule(cssRule, index).unsafeCast<Int>()
} else {
this.asDynamic().insertRule(cssRule).unsafeCast<Int>()
abstract external class CSSNumericValueJS : CSSNumericValue {
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
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 {
val value: Number
val unit: String
}
inline operator fun CSSRuleList.get(index: Int): CSSRule {
return this.asDynamic()[index].unsafeCast<CSSRule>()
external interface CSSTypedUnitValue<T> : CSSNumericValue {
val value: Number
val unit: T
}
@JsName("CSSUnitValue")
external class CSSUnitValueJS(value: Number, unit: String) : CSSNumericValueJS, CSSUnitValue {
override val value: Number
override val unit: String
}
// declare enum CSSMathOperator {
// 'sum',
// 'product',
// '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 {
// readonly operator: CSSMathOperator
}
val CSSMathValue.operator
get() = CSSMathOperator.valueOf(this.asDynamic().operator)
// set(value) { this.asDynamic().operator = value.value }
external interface StylePropertyMapReadOnly {
external class CSSMathSum(vararg args: CSSNumberish) : CSSMathValue {
val values: CSSNumericArray
}
external class CSSMathProduct(vararg args: CSSNumberish) : CSSMathValue {
val values: CSSNumericArray
}
external class CSSMathNegate(arg: CSSNumberish) : CSSMathValue {
val value: CSSNumericValue
}
external class CSSMathInvert(arg: CSSNumberish) : CSSMathValue {
val value: CSSNumericValue
}
external class CSSMathMin(vararg args: CSSNumberish) : CSSMathValue {
val values: CSSNumericArray
}
external class CSSMathMax(vararg args: CSSNumberish) : CSSMathValue {
val values: CSSNumericArray
}
// 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
// [index: number]: CSSTransformComponent
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
}
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(
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
}
external class CSSSkewX(ax: CSSNumericValue) : CSSTransformComponent {
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 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 {
fun set(property: String, value: StylePropertyValue)
fun append(property: String, value: StylePropertyValue)
fun delete(property: String)
fun clear()
// CSSStyleValue | string
interface StylePropertyValue {
companion object {
operator fun invoke(value: String) = value.unsafeCast<StylePropertyValue>()
operator fun invoke(value: Number) = value.unsafeCast<StylePropertyValue>()
operator fun invoke(value: CSSStyleValue) = value.unsafeCast<StylePropertyValue>()
}
}
@JsName("CSS")
external val CSSJS: CSSTypedOM
fun StylePropertyValue.asString() = this.asDynamic() as? String
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) {
CSSJS
} else CSSKT
external class StylePropertyMap : StylePropertyMapReadOnly {
fun set(property: String, vararg values: StylePropertyValue)
fun append(property: String, vararg values: StylePropertyValue)
fun delete(property: String)
fun clear()
}
val CSSStyleRule.styleMap: StylePropertyMap
get() = polyfillStylePropertyMap(if (useNativeCSSTypedOM) "styleMap" else "styleMapKT", this.style) { cssText = "" }
inline fun Element.computedStyleMap(): StylePropertyMapReadOnly =
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
get() = polyfillStylePropertyMap(if (useNativeCSSTypedOM) "attributeStyleMap" else "attributeStyleMapKT", this.style) { removeAttribute("style") }
@Suppress("unused")
val cssTypedOMPolyfill = CSSTypedOMPolyfill.default(window)

28
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

15
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")
}

171
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
actual external interface CSSnumberValue : CSSUnitValue
actual external interface CSSRelValue : CSSSizeValue
actual external interface CSSpercentValue : CSSRelValue
actual external interface CSSemValue : CSSRelValue
actual external interface CSSexValue : CSSRelValue
actual external interface CSSchValue : CSSRelValue
actual external interface CSSicValue : CSSRelValue
actual external interface CSSremValue : CSSRelValue
actual external interface CSSlhValue : CSSRelValue
actual external interface CSSrlhValue : CSSRelValue
actual external interface CSSvwValue : CSSRelValue
actual external interface CSSvhValue : CSSRelValue
actual external interface CSSviValue : CSSRelValue
actual external interface CSSvbValue : CSSRelValue
actual external interface CSSvminValue : CSSRelValue
actual external interface CSSvmaxValue : CSSRelValue
actual external interface CSScmValue : CSSRelValue
actual external interface CSSmmValue : CSSRelValue
actual external interface CSSQValue : CSSRelValue
actual external interface CSSAbsValue : CSSSizeValue
actual external interface CSSptValue : CSSAbsValue
actual external interface CSSpcValue : CSSAbsValue
actual external interface CSSpxValue : CSSAbsValue
actual external interface CSSangleValue : CSSUnitValue
actual external interface CSSdegValue : CSSangleValue
actual external interface CSSgradValue : CSSangleValue
actual external interface CSSradValue : CSSangleValue
actual external interface CSSturnValue : CSSangleValue
actual external interface CSSTimeValue : CSSUnitValue
actual external interface CSSsValue : CSSTimeValue
actual external interface CSSmsValue : CSSTimeValue
actual external interface CSSFrequencyValue : CSSUnitValue
actual external interface CSSHzValue : CSSFrequencyValue
actual external interface CSSkHzValue : CSSFrequencyValue
actual external interface CSSResolutionValue : CSSUnitValue
actual external interface CSSdpiValue : CSSResolutionValue
actual external interface CSSdpcmValue : CSSResolutionValue
actual external interface CSSdppxValue : CSSResolutionValue
actual external interface CSSFlexValue : CSSUnitValue
actual external interface CSSfrValue : CSSFlexValue
external interface CSSRelValue : CSSSizeValue
external interface CSSpercentValue : CSSRelValue
external interface CSSemValue : CSSRelValue
external interface CSSexValue : CSSRelValue
external interface CSSchValue : CSSRelValue
external interface CSSicValue : CSSRelValue
external interface CSSremValue : CSSRelValue
external interface CSSlhValue : CSSRelValue
external interface CSSrlhValue : CSSRelValue
external interface CSSvwValue : CSSRelValue
external interface CSSvhValue : CSSRelValue
external interface CSSviValue : CSSRelValue
external interface CSSvbValue : CSSRelValue
external interface CSSvminValue : CSSRelValue
external interface CSSvmaxValue : CSSRelValue
external interface CSScmValue : CSSRelValue
external interface CSSmmValue : CSSRelValue
external interface CSSQValue : CSSRelValue
external interface CSSAbsValue : CSSSizeValue
external interface CSSptValue : CSSAbsValue
external interface CSSpcValue : CSSAbsValue
external interface CSSpxValue : CSSAbsValue
external interface CSSangleValue : CSSUnitValue
external interface CSSdegValue : CSSangleValue
external interface CSSgradValue : CSSangleValue
external interface CSSradValue : CSSangleValue
external interface CSSturnValue : CSSangleValue
external interface CSSTimeValue : CSSUnitValue
external interface CSSsValue : CSSTimeValue
external interface CSSmsValue : CSSTimeValue
external interface CSSFrequencyValue : CSSUnitValue
external interface CSSHzValue : CSSFrequencyValue
external interface CSSkHzValue : CSSFrequencyValue
external interface CSSResolutionValue : CSSUnitValue
external interface CSSdpiValue : CSSResolutionValue
external interface CSSdpcmValue : CSSResolutionValue
external interface CSSdppxValue : CSSResolutionValue
external interface CSSFlexValue : CSSUnitValue
external interface CSSfrValue : CSSFlexValue
val Number.number
get(): CSSUnitValue = CSS.number(this)
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>()

9
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>()

18
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>()
}
}

2
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.

7
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 {
val el = it.unsafeCast<HTMLElement>()
root.children[1]?.let { el ->
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(),
)
}
}

145
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")

51
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

9
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 {}

20
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")
}
}
}
Loading…
Cancel
Save