Skip to content

Commit

Permalink
CSS units API is CSSOM-agnostic and supports homogenous arithmetic op…
Browse files Browse the repository at this point in the history 
…erations
  • Loading branch information
@Schahen
Schahen committed Jun 7, 2021
1 parent 5ed9c41 commit 6048760
Show file tree
Hide file tree
Showing 10 changed files with 523 additions and 315 deletions.
24 changes: 12 additions & 12 deletions examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ object AppCSSVariables : CSSVariables {
val wtColorGreyLight by variable<Color>()
val wtColorGreyDark by variable<Color>()

val wtOffsetTopUnit by variable<CSSSizeValue>()
val wtHorizontalLayoutGutter by variable<CSSSizeValue>()
val wtFlowUnit by variable<CSSSizeValue>()

val wtHeroFontSize by variable<CSSSizeValue>()
val wtHeroLineHeight by variable<CSSSizeValue>()
val wtSubtitle2FontSize by variable<CSSSizeValue>()
val wtSubtitle2LineHeight by variable<CSSSizeValue>()
val wtH2FontSize by variable<CSSSizeValue>()
val wtH2LineHeight by variable<CSSSizeValue>()
val wtH3FontSize by variable<CSSSizeValue>()
val wtH3LineHeight by variable<CSSSizeValue>()
val wtOffsetTopUnit by variable<CSSUnitValue>()
val wtHorizontalLayoutGutter by variable<CSSUnitValue>()
val wtFlowUnit by variable<CSSUnitValue>()

val wtHeroFontSize by variable<CSSUnitValue>()
val wtHeroLineHeight by variable<CSSUnitValue>()
val wtSubtitle2FontSize by variable<CSSUnitValue>()
val wtSubtitle2LineHeight by variable<CSSUnitValue>()
val wtH2FontSize by variable<CSSUnitValue>()
val wtH2LineHeight by variable<CSSUnitValue>()
val wtH3FontSize by variable<CSSUnitValue>()
val wtH3LineHeight by variable<CSSUnitValue>()

val wtColCount by variable<Int>()
}
Expand Down
4 changes: 2 additions & 2 deletions examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.CSSSelector

fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
value: CSSSizeValue,
value: CSSUnitValue,
cssSelector: CSSSelector,
rulesBuild: TBuilder.() -> Unit
) {
Expand All @@ -13,7 +13,7 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
}
}

fun CSSBuilder.forMaxWidth(value: CSSSizeValue, builder: CSSBuilder.() -> Unit) {
fun CSSBuilder.forMaxWidth(value: CSSUnitValue, builder: CSSBuilder.() -> Unit) {
mediaMaxWidth(value, self, builder)
}

Expand Down
28 changes: 12 additions & 16 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,24 @@
package com.sample.style

import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.*

object AppCSSVariables : CSSVariables {
val wtColorGreyLight by variable<Color>()
val wtColorGreyDark by variable<Color>()

val wtOffsetTopUnit by variable<CSSSizeValue>()
val wtHorizontalLayoutGutter by variable<CSSSizeValue>()
val wtFlowUnit by variable<CSSSizeValue>()

val wtHeroFontSize by variable<CSSSizeValue>()
val wtHeroLineHeight by variable<CSSSizeValue>()
val wtSubtitle2FontSize by variable<CSSSizeValue>()
val wtSubtitle2LineHeight by variable<CSSSizeValue>()
val wtH2FontSize by variable<CSSSizeValue>()
val wtH2LineHeight by variable<CSSSizeValue>()
val wtH3FontSize by variable<CSSSizeValue>()
val wtH3LineHeight by variable<CSSSizeValue>()
val wtOffsetTopUnit by variable<CSSUnitValue>()
val wtHorizontalLayoutGutter by variable<CSSUnitValue>()
val wtFlowUnit by variable<CSSUnitValue>()

val wtHeroFontSize by variable<CSSUnitValue>()
val wtHeroLineHeight by variable<CSSUnitValue>()
val wtSubtitle2FontSize by variable<CSSUnitValue>()
val wtSubtitle2LineHeight by variable<CSSUnitValue>()
val wtH2FontSize by variable<CSSUnitValue>()
val wtH2LineHeight by variable<CSSUnitValue>()
val wtH3FontSize by variable<CSSUnitValue>()
val wtH3LineHeight by variable<CSSUnitValue>()

val wtColCount by variable<Int>()
}
Expand Down
8 changes: 2 additions & 6 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
package com.sample.style

import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.*

fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
value: CSSSizeValue,
value: CSSUnitValue,
cssSelector: CSSSelector,
rulesBuild: TBuilder.() -> Unit
) {
Expand All @@ -17,7 +13,7 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
}
}

fun CSSBuilder.forMaxWidth(value: CSSSizeValue, builder: CSSBuilder.() -> Unit) {
fun CSSBuilder.forMaxWidth(value: CSSUnitValue, builder: CSSBuilder.() -> Unit) {
mediaMaxWidth(value, self, builder)
}

Expand Down
105 changes: 4 additions & 101 deletions web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ interface CSSNumberish {
}

fun CSSNumberish.asNumber() = this.asDynamic() as? Number
fun CSSNumberish.asCSSNumericValue(): CSSNumericValue? = this.asDynamic() as? CSSNumericValueJS
fun CSSNumberish.asCSSNumericValue(): CSSNumericValue? = this.asDynamic() as? CSSNumericValue

// declare enum CSSNumericBaseType {
// 'length',
Expand Down Expand Up @@ -124,47 +124,7 @@ val CSSNumericType.percentHint
get() = CSSNumericBaseType.valueOf(this.asDynamic().percentHint)
// set(value) { this.asDynamic().percentHint = value.value }

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 to(unit: String): CSSUnitValue
fun toSum(vararg units: String): CSSMathSum
fun type(): CSSNumericType

@Suppress("NESTED_CLASS_IN_EXTERNAL_INTERFACE")
companion object {
fun parse(cssText: String): CSSNumericValue
}
}

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 to(unit: String): CSSUnitValue
override fun toSum(vararg units: String): CSSMathSum
override fun type(): CSSNumericType
}

external interface CSSUnitValue : CSSNumericValue {
val value: Number
val unit: String
}

@JsName("CSSUnitValue")
external class CSSUnitValueJS(value: Number, unit: String) : CSSNumericValueJS, CSSUnitValue {
override val value: Number
override val unit: String
}
external interface CSSNumericValue : CSSStyleValue

// declare enum CSSMathOperator {
// 'sum',
Expand All @@ -185,9 +145,7 @@ enum class CSSMathOperator(val value: String) {
clamp("clamp")
}

open external class CSSMathValue : CSSNumericValueJS {
// readonly operator: CSSMathOperator
}
open external class CSSMathValue : CSSNumericValue

val CSSMathValue.operator
get() = CSSMathOperator.valueOf(this.asDynamic().operator)
Expand Down Expand Up @@ -217,16 +175,6 @@ 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)
Expand Down Expand Up @@ -340,6 +288,7 @@ external interface StylePropertyValue
fun String.asStylePropertyValue() = unsafeCast<StylePropertyValue>()
fun Number.asStylePropertyValue() = unsafeCast<StylePropertyValue>()
fun CSSStyleValue.asStylePropertyValue() = unsafeCast<StylePropertyValue>()
fun CSSUnitValue.asStylePropertyValue() = asString().asStylePropertyValue()

external class StylePropertyMap : StylePropertyMapReadOnly {
fun set(property: String, vararg values: StylePropertyValue)
Expand All @@ -351,51 +300,5 @@ external class StylePropertyMap : StylePropertyMapReadOnly {
inline fun Element.computedStyleMap(): StylePropertyMapReadOnly =
this.asDynamic().computedStyleMap().unsafeCast<StylePropertyMapReadOnly>()

external class CSS {
companion object {
fun number(value: Number): CSSUnitValue
fun percent(value: Number): CSSpercentValue

// <length>
fun em(value: Number): CSSemValue
fun ex(value: Number): CSSexValue
fun ch(value: Number): CSSchValue
fun rem(value: Number): CSSremValue
fun vw(value: Number): CSSvwValue
fun vh(value: Number): CSSvhValue
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
}
}

@Suppress("unused")
val cssTypedOMPolyfill = CSSTypedOMPolyfill.default(window)
8 changes: 4 additions & 4 deletions web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSMediaRule.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,14 +124,14 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.not(
query: CSSMediaQuery.Invertible
) = CSSMediaQuery.Not(query)

fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.minWidth(value: CSSSizeValue) =
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.minWidth(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("min-width", value.asStylePropertyValue())

fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.maxWidth(value: CSSSizeValue) =
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.maxWidth(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("max-width", value.asStylePropertyValue())

fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.minHeight(value: CSSSizeValue) =
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.minHeight(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("min-height", value.asStylePropertyValue())

fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.maxHeight(value: CSSSizeValue) =
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.maxHeight(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("max-height", value.asStylePropertyValue())
Loading

0 comments on commit 6048760

Please sign in to comment.