Browse Source

web: Add a fix for css variables

pull/771/head
Oleksandr Karpovich 3 years ago
parent
commit
d2371cb878
  1. 1
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt
  2. 4
      web/core/src/jsMain/kotlin/androidx/compose/web/css/StyleBuilder.kt
  3. 57
      web/core/src/jsTest/kotlin/CSSStylesheetTests.kt

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

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

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

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

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

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