From 9698698bd02935f761ccbb05ddff934177eaf6c1 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Tue, 8 Jun 2021 18:29:19 +0200 Subject: [PATCH] Simplify assignment signatures in CSS properties --- .../kotlin/com/sample/components/Layout.kt | 4 +- .../kotlin/com/sample/content/CodeSnippets.kt | 10 +-- .../kotlin/com/sample/content/Header.kt | 4 +- .../kotlin/com/sample/content/IntroSection.kt | 10 +-- .../kotlin/com/sample/components/Layout.kt | 6 +- .../content/AboutComposeWebLibsSection.kt | 2 +- .../com/sample/content/CodeSamplesSwitcher.kt | 6 +- .../kotlin/com/sample/content/CodeSnippets.kt | 10 +-- .../kotlin/com/sample/content/Footer.kt | 6 +- .../kotlin/com/sample/content/Header.kt | 6 +- .../kotlin/com/sample/content/IntroSection.kt | 10 +-- .../kotlin/com/sample/style/Stylesheet.kt | 18 ++-- .../jsMain/kotlin/com/sample/style/WtCard.kt | 52 +++++++----- .../jsMain/kotlin/com/sample/style/WtCol.kt | 8 +- .../kotlin/com/sample/style/WtContainer.kt | 30 +++---- .../kotlin/com/sample/style/WtOffest.kt | 4 +- .../jsMain/kotlin/com/sample/style/WtRow.kt | 6 +- .../kotlin/com/sample/style/WtSection.kt | 10 +-- .../jsMain/kotlin/com/sample/style/WtText.kt | 84 +++++++++---------- .../kotlin/androidx/compose/web/css/CSS.kt | 7 +- .../androidx/compose/web/css/CSSMediaRule.kt | 8 +- .../androidx/compose/web/css/CSSProperties.kt | 72 ++++++++-------- .../androidx/compose/web/css/CSSUnits.kt | 2 +- .../kotlin/androidx/compose/web/css/Color.kt | 2 +- .../androidx/compose/web/css/StyleBuilder.kt | 39 +++++---- .../jsTest/kotlin/StaticComposableTests.kt | 2 +- 26 files changed, 217 insertions(+), 201 deletions(-) diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt index b5b910c445..a9ff66bd6f 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt @@ -17,7 +17,7 @@ fun Layout(content: @Composable () -> Unit) { flexDirection(FlexDirection.Column) height(100.percent) margin(0.px) - property("box-sizing", StylePropertyValue("border-box")) + property("box-sizing", "border-box".asStylePropertyValue()) } }) { content() @@ -29,7 +29,7 @@ fun MainContentLayout(content: @Composable () -> Unit) { Main({ style { property("flex", value("1 0 auto")) - property("box-sizing", value("border-box")) + property("box-sizing", "border-box".asStylePropertyValue()) } }) { content() diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt index 47c0b4f335..da619556c8 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt @@ -237,7 +237,7 @@ private fun TitledCodeSample(title: String, code: String) { style { backgroundColor(Color.RGBA(39, 40, 44, 0.05)) borderRadius(8.px, 8.px, 8.px) - property("padding", value("12px 16px")) + property("padding", "12px 16px".asStylePropertyValue()) } }) { FormattedCodeSnippet(code = code) @@ -248,16 +248,16 @@ private fun TitledCodeSample(title: String, code: String) { fun FormattedCodeSnippet(code: String, language: String = "kotlin") { Pre({ style { - property("max-height", value(25.em)) - property("overflow", value("auto")) + property("max-height", 25.em.asStylePropertyValue()) + property("overflow", "auto".asStylePropertyValue()) height(auto) } }) { Code({ classes("language-$language", "hljs") style { - property("font-family", value("'JetBrains Mono', monospace")) - property("tab-size", value(4)) + property("font-family", "'JetBrains Mono', monospace".asStylePropertyValue()) + property("tab-size", 4.asStylePropertyValue()) fontSize(10.pt) backgroundColor(Color("transparent")) } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt index d4a7348792..e5e372a9ac 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt @@ -50,8 +50,8 @@ private fun LanguageButton() { onClick { window.alert("Oops! This feature is yet to be implemented") } }) { Img(src = "ic_lang.svg", attrs = { style { - property("padding-left", value(8.px)) - property("padding-right", value(8.px)) + property("padding-left", 8.px.asStylePropertyValue()) + property("padding-right", 8.px.asStylePropertyValue()) }}) {} Text("English") } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt index 7e625bcc47..e83fc2a561 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt @@ -41,7 +41,7 @@ fun Intro() { classes(WtTexts.wtHero) style { display(DisplayStyle.InlineBlock) - property("white-space", value("nowrap")) + property("white-space", "nowrap".asStylePropertyValue()) } }) { Text("Web") @@ -124,12 +124,12 @@ private fun IntroCodeSample() { marginTop(24.px) backgroundColor(Color.RGBA(39, 40, 44, 0.05)) borderRadius(8.px) - property("font-family", value("'JetBrains Mono', monospace")) + property("font-family", "'JetBrains Mono', monospace".asStylePropertyValue()) } }) { Div({ style { - property("padding", value("12px 16px")) + property("padding", "12px 16px".asStylePropertyValue()) } }) { FormattedCodeSnippet( @@ -162,7 +162,7 @@ private fun IntroCodeSample() { private fun IntroCodeSampleResult() { Div({ style { - property("padding", value("12px 16px")) + property("padding", "12px 16px".asStylePropertyValue()) display(DisplayStyle.Flex) flexDirection(FlexDirection.Row) alignItems(AlignItems.Center) @@ -171,7 +171,7 @@ private fun IntroCodeSampleResult() { Span({ classes(WtTexts.wtText2) style { - property("margin-right", value(8.px)) + property("margin-right", 8.px.asStylePropertyValue()) } }) { Text("Result:") diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt index 23ab725972..2d54b6dac5 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt @@ -19,7 +19,7 @@ fun Layout(content: @Composable () -> Unit) { flexDirection(FlexDirection.Column) height(100.percent) margin(0.px) - property("box-sizing", "border-box".asStylePropertyValue()) + property("box-sizing", "border-box") } } ) { @@ -32,8 +32,8 @@ fun MainContentLayout(content: @Composable () -> Unit) { Main( attrs = { style { - property("flex", value("1 0 auto")) - property("box-sizing", value("border-box")) + property("flex", "1 0 auto") + property("box-sizing", "border-box") } } ) { diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt index c8fd078d90..4d96233552 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt @@ -88,7 +88,7 @@ private fun CardWithList(card: CardWithListPresentation) { }) { card.list.forEachIndexed { ix, it -> Li(attrs = { - style { property("padding-top", value(24.px)) } + style { property("padding-top", 24.px) } }) { Text(it) } } } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt index 6c19f5e20f..59e9595be3 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt @@ -28,9 +28,9 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) { display(DisplayStyle.InlineBlock) property("width", SwitcherVariables.labelWidth.value(56.px)) property("padding", SwitcherVariables.labelPadding.value(10.px)) - property("transition", value("all 0.3s")) - property("text-align", value("center")) - property("box-sizing", value("border-box")) + property("transition", "all 0.3s") + property("text-align", "center") + property("box-sizing", "border-box") border { style(LineStyle.Solid) diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt index 8543e2369b..9c2db63100 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt @@ -241,7 +241,7 @@ private fun TitledCodeSample(title: String, code: String) { style { backgroundColor(Color.RGBA(39, 40, 44, 0.05)) borderRadius(8.px, 8.px, 8.px) - property("padding", value("12px 16px")) + property("padding", "12px 16px") } } ) { @@ -253,8 +253,8 @@ private fun TitledCodeSample(title: String, code: String) { fun FormattedCodeSnippet(code: String, language: String = "kotlin") { Pre(attrs = { style { - property("max-height", value(25.em)) - property("overflow", value("auto")) + property("max-height", 25.em) + property("overflow", "auto") height(auto) } }) { @@ -262,8 +262,8 @@ fun FormattedCodeSnippet(code: String, language: String = "kotlin") { attrs = { classes("language-$language", "hljs") style { - property("font-family", value("'JetBrains Mono', monospace")) - property("tab-size", value(4)) + property("font-family", "'JetBrains Mono', monospace") + property("tab-size", 4) fontSize(10.pt) backgroundColor(Color("transparent")) } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt index 2783d018e9..759c8a512e 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt @@ -14,13 +14,13 @@ fun PageFooter() { Footer(attrs = { style { flexShrink(0) - property("box-sizing", value("border-box")) + property("box-sizing", "border-box") } }) { Section(attrs = { classes(WtSections.wtSectionBgGrayDark) style { - property("padding", value("24px 0")) + property("padding", "24px 0") } }) { Div(attrs = { classes(WtContainer.wtContainer) }) { @@ -61,7 +61,7 @@ private fun CopyrightInFooter() { style { justifyContent(JustifyContent.SpaceEvenly) flexWrap(FlexWrap.Wrap) - property("padding", value("0px 12px")) + property("padding", "0px 12px") } }) { Span(attrs = { diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt index 7513215e56..edbb943b9b 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt @@ -54,13 +54,13 @@ private fun LanguageButton() { classes(WtTexts.wtButton, WtTexts.wtLangButton) onClick { window.alert("Oops! This feature is yet to be implemented") } style { - property("cursor", value("pointer")) + property("cursor", "pointer") } }) { Img(src = "ic_lang.svg", attrs = { style { - property("padding-left", value(8.px)) - property("padding-right", value(8.px)) + property("padding-left", 8.px) + property("padding-right", 8.px) } }) Text("English") diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt index 2a0670c61e..0ac9e6b137 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt @@ -38,7 +38,7 @@ fun Intro() { classes(WtTexts.wtHero) style { display(DisplayStyle.InlineBlock) - property("white-space", value("nowrap")) + property("white-space", "nowrap") } }) { Text("Web") @@ -121,12 +121,12 @@ private fun IntroCodeSample() { marginTop(24.px) backgroundColor(Color.RGBA(39, 40, 44, 0.05)) borderRadius(8.px) - property("font-family", value("'JetBrains Mono', monospace")) + property("font-family", "'JetBrains Mono', monospace") } }) { Div(attrs = { style { - property("padding", value("12px 16px")) + property("padding", "12px 16px") } }) { FormattedCodeSnippet( @@ -159,7 +159,7 @@ private fun IntroCodeSample() { private fun IntroCodeSampleResult() { Div(attrs = { style { - property("padding", value("12px 16px")) + property("padding", "12px 16px") display(DisplayStyle.Flex) flexDirection(FlexDirection.Row) alignItems(AlignItems.Center) @@ -169,7 +169,7 @@ private fun IntroCodeSampleResult() { attrs = { classes(WtTexts.wtText2) style { - property("margin-right", value(8.px)) + property("margin-right", 8.px) } }, ) { diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt index abfd7baae1..909ac35d08 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt @@ -26,14 +26,14 @@ object AppCSSVariables : CSSVariables { object AppStylesheet : StyleSheet() { val composeLogo by style { - property("max-width", value(100.percent)) + property("max-width", 100.percent) } val composeTitleTag by style { - property("padding", value("5px 12px")) - property("letter-spacing", value("normal")) - property("font-weight", value(400)) - property("line-height", value(24.px)) + property("padding", "5px 12px") + property("letter-spacing", "normal") + property("font-weight", 400) + property("line-height", 24.px) position(Position.Relative) top((-32).px) @@ -54,7 +54,7 @@ object AppStylesheet : StyleSheet() { "label, a, button" style { property( "font-family", - value("system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif") + "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" ) } @@ -83,13 +83,13 @@ object AppStylesheet : StyleSheet() { property( "flex-basis", - value("calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)") + "calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)" ) property( "max-width", - value("calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)") + "calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)" ) - property("box-sizing", value("border-box")) + property("box-sizing", "border-box") } } } \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt index da64cf84f7..3c8af92bc8 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt @@ -1,23 +1,37 @@ 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.* +import org.jetbrains.compose.web.css.AlignItems +import org.jetbrains.compose.web.css.Color +import org.jetbrains.compose.web.css.DisplayStyle +import org.jetbrains.compose.web.css.FlexDirection +import org.jetbrains.compose.web.css.LineStyle +import org.jetbrains.compose.web.css.Position +import org.jetbrains.compose.web.css.StyleSheet +import org.jetbrains.compose.web.css.alignItems +import org.jetbrains.compose.web.css.backgroundColor +import org.jetbrains.compose.web.css.border +import org.jetbrains.compose.web.css.color +import org.jetbrains.compose.web.css.display +import org.jetbrains.compose.web.css.flexDirection +import org.jetbrains.compose.web.css.flexGrow +import org.jetbrains.compose.web.css.maxWidth +import org.jetbrains.compose.web.css.media +import org.jetbrains.compose.web.css.padding +import org.jetbrains.compose.web.css.percent +import org.jetbrains.compose.web.css.position +import org.jetbrains.compose.web.css.px object WtCards : StyleSheet(AppStylesheet) { val wtCard by style { display(DisplayStyle.Flex) flexDirection(FlexDirection.Column) border(1.px, LineStyle.Solid) - property("min-height", value(0)) - property("box-sizing", value("border-box")) + property("min-height", 0) + property("box-sizing", "border-box") } - + val wtCardThemeLight by style { - border(color = Color.RGBA(39,40,44,.2)) + border(color = Color.RGBA(39, 40, 44, .2)) color("#27282c") backgroundColor("white") } @@ -27,28 +41,28 @@ object WtCards : StyleSheet(AppStylesheet) { color(Color.RGBA(255, 255, 255, 0.6)) border(0.px) } - + val wtCardSection by style { position(Position.Relative) - property("overflow", value("auto")) - property("flex", value("1 1 auto")) - property("min-height", value(0)) - property("box-sizing", value("border-box")) - property("padding", value("24px 32px")) + property("overflow", "auto") + property("flex", "1 1 auto") + property("min-height", 0) + property("box-sizing", "border-box") + property("padding", "24px 32px") media(maxWidth(640.px)) { self style { padding(16.px) } } } - + val wtVerticalFlex by style { display(DisplayStyle.Flex) flexDirection(FlexDirection.Column) alignItems(AlignItems.FlexStart) } - + val wtVerticalFlexGrow by style { flexGrow(1) - property("max-width", value(100.percent)) + property("max-width", 100.percent) } } \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt index ff2d88504f..c9707223f6 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt @@ -110,19 +110,19 @@ object WtCols : StyleSheet(AppStylesheet) { forMaxWidth(640.px) { AppCSSVariables.wtColCount(0) flexGrow(1) - property("max-width", value(100.percent)) + property("max-width", 100.percent) } } val wtColAutoFill by style { AppCSSVariables.wtColCount(0) flexGrow(1) - property("max-width", value(100.percent)) + property("max-width", 100.percent) } val wtColInline by style { AppCSSVariables.wtColCount(0) - property("max-width", value(100.percent)) - property("flex-basis", value("auto")) + property("max-width", 100.percent) + property("flex-basis", "auto") } } \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt index 816761fa22..fc2ef401ec 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt @@ -9,34 +9,34 @@ import org.jetbrains.compose.web.* object WtContainer : StyleSheet(AppStylesheet) { val wtContainer by style { - property("margin-left", value("auto")) - property("margin-right", value("auto")) - property("box-sizing", value("border-box")) - property("padding-left", value(22.px)) - property("padding-right", value(22.px)) - property("max-width", value(1276.px)) + property("margin-left", "auto") + property("margin-right", "auto") + property("box-sizing", "border-box") + property("padding-left", 22.px) + property("padding-right", 22.px) + property("max-width", 1276.px) media(maxWidth(640.px)) { self style { - property("max-width", value(100.percent)) - property("padding-left", value(16.px)) - property("padding-right", value(16.px)) + property("max-width", 100.percent) + property("padding-left", 16.px) + property("padding-right", 16.px) } } media(maxWidth(1276.px)) { self style { - property("max-width", value(996.px)) - property("padding-left", value(22.px)) - property("padding-right", value(22.px)) + property("max-width", 996.px) + property("padding-left", 996.px) + property("padding-right", 22.px) } } media(maxWidth(1000.px)) { self style { - property("max-width", value(100.percent)) - property("padding-left", value(22.px)) - property("padding-right", value(22.px)) + property("max-width", 100.percent) + property("padding-left", 22.px) + property("padding-right", 22.px) } } } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt index 328386dfed..a1aa20f0e8 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt @@ -12,7 +12,7 @@ object WtOffsets : StyleSheet(AppStylesheet) { marginTop(96.px) property( "margin-top", - value("calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})") + "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" ) } @@ -20,7 +20,7 @@ object WtOffsets : StyleSheet(AppStylesheet) { marginTop(24.px) property( "margin-top", - value("calc(1*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})") + "calc(1*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" ) } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt index d26d9915c2..59b94b9a3e 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt @@ -16,13 +16,13 @@ object WtRows : StyleSheet(AppStylesheet) { property( "margin-right", - value("calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})") + "calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})" ) property( "margin-left", - value("calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})") + "calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})" ) - property("box-sizing", "border-box".asStylePropertyValue()) + property("box-sizing", "border-box") } val wtRowSizeM by style { diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt index 61a00c3b37..0263c903d2 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt @@ -9,14 +9,12 @@ import org.jetbrains.compose.web.* object WtSections : StyleSheet(AppStylesheet) { val wtSection by style { - property("box-sizing", value("border-box")) - property("padding-bottom", value(96.px)) - property("padding-top", value(1.px)) + property("box-sizing", "border-box") + property("padding-bottom", 96.px) + property("padding-top", 1.px) property( propertyName = "padding-bottom", - value = value( - "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" - ) + value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" ) backgroundColor("#fff") } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt index 5d5f847706..d2025f0a81 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt @@ -12,9 +12,9 @@ object WtTexts : StyleSheet(AppStylesheet) { color("#27282c") fontSize(60.px) property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px)) - property("letter-spacing", value((-1.5).px)) - property("font-weight", value(900)) - property("line-height", value(64.px)) + property("letter-spacing", (-1.5).px) + property("font-weight", 900) + property("line-height", 64.px) property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px)) media(maxWidth(640.px)) { @@ -26,7 +26,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property( "font-family", - value("Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif") + "Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" ) } @@ -34,9 +34,9 @@ object WtTexts : StyleSheet(AppStylesheet) { color("#27282c") fontSize(28.px) property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px)) - property("letter-spacing", value("normal")) - property("font-weight", value(300)) - property("line-height", value(40.px)) + property("letter-spacing", "normal") + property("font-weight", 300) + property("line-height", 40.px) property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) media(maxWidth(640.px)) { @@ -48,20 +48,20 @@ object WtTexts : StyleSheet(AppStylesheet) { property( "font-family", - value("Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif") + "Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" ) } val wtText1 by style { color(Color.RGBA(39, 40, 44, .7)) fontSize(18.px) - property("letter-spacing", value("normal")) - property("font-weight", value(400)) - property("line-height", value(28.px)) + property("letter-spacing", "normal") + property("font-weight", 400) + property("line-height", 28.px) property( "font-family", - value("system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif") + "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" ) } @@ -72,26 +72,26 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtText2 by style { color(Color.RGBA(39, 40, 44, .7)) fontSize(15.px) - property("letter-spacing", value("normal")) - property("font-weight", value(400)) - property("line-height", value(24.px)) + property("letter-spacing", "normal") + property("font-weight", 400) + property("line-height", 24.px) property( "font-family", - value("system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif") + "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" ) } val wtText3 by style { color(Color.RGBA(39, 40, 44, .7)) fontSize(12.px) - property("letter-spacing", value("normal")) - property("font-weight", value(400)) - property("line-height", value(16.px)) + property("letter-spacing", "normal") + property("font-weight", 400) + property("line-height", 16.px) property( "font-family", - value("system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif") + "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" ) } @@ -108,12 +108,12 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtLink by style { - property("border-bottom", value("1px solid transparent")) - property("text-decoration", value("none")) + property("border-bottom", "1px solid transparent") + property("text-decoration", "none") color("#167dff") hover(self) style { - property("border-bottom-color", value("#167dff")) + property("border-bottom-color", "#167dff") } } @@ -121,9 +121,9 @@ object WtTexts : StyleSheet(AppStylesheet) { color("#27282c") fontSize(31.px) property("font-size", AppCSSVariables.wtH2FontSize.value(31.px)) - property("letter-spacing", value((-.5).px)) - property("font-weight", value(700)) - property("line-height", value(40.px)) + property("letter-spacing", (-.5).px) + property("font-weight", 700) + property("line-height", 40.px) property("line-height", AppCSSVariables.wtH2LineHeight.value(40.px)) media(maxWidth(640.px)) { @@ -135,7 +135,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property( "font-family", - value("Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif") + "Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" ) } @@ -147,14 +147,14 @@ object WtTexts : StyleSheet(AppStylesheet) { color("#27282c") fontSize(21.px) property("font-size", AppCSSVariables.wtH3FontSize.value(20.px)) - property("letter-spacing", value("normal")) - property("font-weight", value(700)) - property("line-height", value(28.px)) + property("letter-spacing", "normal") + property("font-weight", 700) + property("line-height", 28.px) property("line-height", AppCSSVariables.wtH3LineHeight.value(28.px)) property( "font-family", - value("system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif") + "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" ) } @@ -167,12 +167,12 @@ object WtTexts : StyleSheet(AppStylesheet) { backgroundColor("#167dff") fontSize(15.px) display(DisplayStyle.InlineBlock) - property("text-decoration", value("none")) - property("border-radius", value("24px")) - property("padding", value("12px 32px")) - property("line-height", value(24.px)) - property("font-weight", value(400)) - property("width", value("fit-content")) + property("text-decoration", "none") + property("border-radius", 24.px) + property("padding", "12px 32px") + property("line-height", 24.px) + property("font-weight", 400) + property("width", "fit-content") hover(self) style { backgroundColor(Color.RGBA(22, 125, 255, .8)) @@ -186,7 +186,7 @@ object WtTexts : StyleSheet(AppStylesheet) { backgroundColor(Color("transparent")) border(0.px) - property("outline", value("none")) + property("outline", "none") hover(self) style { backgroundColor(Color.RGBA(255, 255, 255, 0.1)) @@ -203,7 +203,7 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtSocialButtonItem by style { - property("margin-right", value(16.px)) + property("margin-right", 16.px) marginLeft(16.px) padding(12.px) backgroundColor("transparent") @@ -211,13 +211,13 @@ object WtTexts : StyleSheet(AppStylesheet) { hover(self) style { backgroundColor(Color.RGBA(255, 255, 255, 0.1)) - property("border-radius", value("24px")) + property("border-radius", 24.px) } media(maxWidth(640.px)) { self style { - property("margin-right", value(8.px)) - property("margin-left", value(8.px)) + property("margin-right", 8.px) + property("margin-left", 8.px) } } } diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt index a9e1d4766c..6de379f1bf 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt @@ -36,7 +36,7 @@ fun StyleSheet.insertRule(cssRule: String, index: Int? = null): Int { val ElementCSSInlineStyle.attributeStyleMap get() = this.asDynamic().attributeStyleMap.unsafeCast() -external interface CSSStyleValue +external interface CSSStyleValue : StylePropertyValue @JsName("CSSStyleValue") open external class CSSStyleValueJS : CSSStyleValue { @@ -285,11 +285,6 @@ fun StylePropertyMapReadOnly.forEach(handler: (String, Array) -> // CSSStyleValue | string external interface StylePropertyValue -fun String.asStylePropertyValue() = unsafeCast() -fun Number.asStylePropertyValue() = unsafeCast() -fun CSSStyleValue.asStylePropertyValue() = unsafeCast() -fun CSSUnitValue.asStylePropertyValue() = asString().asStylePropertyValue() - external class StylePropertyMap : StylePropertyMapReadOnly { fun set(property: String, vararg values: StylePropertyValue) fun append(property: String, vararg values: StylePropertyValue) diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSMediaRule.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSMediaRule.kt index efa7bf6e1f..7b004b83c6 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSMediaRule.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSMediaRule.kt @@ -125,13 +125,13 @@ fun GenericStyleSheetBuilder.not( ) = CSSMediaQuery.Not(query) fun GenericStyleSheetBuilder.minWidth(value: CSSUnitValue) = - CSSMediaQuery.MediaFeature("min-width", value.asStylePropertyValue()) + CSSMediaQuery.MediaFeature("min-width", value) fun GenericStyleSheetBuilder.maxWidth(value: CSSUnitValue) = - CSSMediaQuery.MediaFeature("max-width", value.asStylePropertyValue()) + CSSMediaQuery.MediaFeature("max-width", value) fun GenericStyleSheetBuilder.minHeight(value: CSSUnitValue) = - CSSMediaQuery.MediaFeature("min-height", value.asStylePropertyValue()) + CSSMediaQuery.MediaFeature("min-height", value) fun GenericStyleSheetBuilder.maxHeight(value: CSSUnitValue) = - CSSMediaQuery.MediaFeature("max-height", value.asStylePropertyValue()) + CSSMediaQuery.MediaFeature("max-height", value) diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt index 0547dc226a..2b682ceeb1 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt @@ -1,27 +1,27 @@ package org.jetbrains.compose.web.css fun StyleBuilder.opacity(value: Number) { - property("opacity", value(value)) + property("opacity", value) } fun StyleBuilder.order(value: Int) { - property("order", value.asStylePropertyValue()) + property("order", value) } fun StyleBuilder.flexGrow(value: Number) { - property("flex-grow", value.asStylePropertyValue()) + property("flex-grow", value) } fun StyleBuilder.flexShrink(value: Number) { - property("flex-shrink", value.asStylePropertyValue()) + property("flex-shrink", value) } fun StyleBuilder.opacity(value: CSSSizeValue) { - property("opacity", value(value.value as Double / 100)) + property("opacity", (value.value as Double / 100)) } fun StyleBuilder.color(value: String) { - property("color", value(value)) + property("color", value) } fun StyleBuilder.color(value: Color) { @@ -38,7 +38,7 @@ fun StyleBuilder.backgroundColor(value: Color) { } fun StyleBuilder.backgroundColor(value: String) { - property("background-color", value(value)) + property("background-color", value) } enum class LineStyle { @@ -189,16 +189,16 @@ enum class Position(val value: String) { } class CSSBorder : CustomStyleValue { - var width: StylePropertyValue? = null + var width: CSSUnitValue? = null var style: StylePropertyValue? = null var color: StylePropertyValue? = null fun width(size: CSSUnitValue) { - width = size.asStylePropertyValue() + width = size } fun style(style: LineStyle) { - this.style = style.name.asStylePropertyValue() + this.style = style.name.unsafeCast() } fun color(color: Color) { @@ -216,8 +216,8 @@ class CSSBorder : CustomStyleValue { } override fun styleValue(): StylePropertyValue { - val values = listOfNotNull(width, style, color) - return values.joinToString(" ").asStylePropertyValue() + val values = listOfNotNull(width?.asString(), style, color) + return values.joinToString(" ").unsafeCast() } } @@ -239,64 +239,64 @@ fun StyleBuilder.border( } fun StyleBuilder.display(displayStyle: DisplayStyle) { - property("display", displayStyle.value.asStylePropertyValue()) + property("display", displayStyle.value) } fun StyleBuilder.flexDirection(flexDirection: FlexDirection) { - property("flex-direction", flexDirection.value.asStylePropertyValue()) + property("flex-direction", flexDirection.value) } fun StyleBuilder.flexWrap(flexWrap: FlexWrap) { - property("flex-wrap", flexWrap.value.asStylePropertyValue()) + property("flex-wrap", flexWrap.value) } fun StyleBuilder.flexFlow(flexDirection: FlexDirection, flexWrap: FlexWrap) { property( "flex-flow", - "${flexDirection.value} ${flexWrap.value}".asStylePropertyValue() + "${flexDirection.value} ${flexWrap.value}" ) } fun StyleBuilder.justifyContent(justifyContent: JustifyContent) { property( "justify-content", - justifyContent.value.asStylePropertyValue() + justifyContent.value ) } fun StyleBuilder.alignSelf(alignSelf: AlignSelf) { property( "align-self", - alignSelf.value.asStylePropertyValue() + alignSelf.value ) } fun StyleBuilder.alignItems(alignItems: AlignItems) { property( "align-items", - alignItems.value.asStylePropertyValue() + alignItems.value ) } fun StyleBuilder.alignContent(alignContent: AlignContent) { property( "align-content", - alignContent.value.asStylePropertyValue() + alignContent.value ) } fun StyleBuilder.position(position: Position) { property( "position", - position.value.asStylePropertyValue() + position.value ) } fun StyleBuilder.borderRadius(r: CSSUnitValue) { - property("border-radius", r.asStylePropertyValue()) + property("border-radius", r) } fun StyleBuilder.borderRadius(topLeft: CSSUnitValue, bottomRight: CSSUnitValue) { - property("border-radius", "${topLeft.asString()} ${bottomRight.asString()}".asStylePropertyValue()) + property("border-radius", "${topLeft.asString()} ${bottomRight.asString()}") } fun StyleBuilder.borderRadius( @@ -304,7 +304,7 @@ fun StyleBuilder.borderRadius( topRightAndBottomLeft: CSSUnitValue, bottomRight: CSSUnitValue ) { - property("border-radius", "${topLeft.asString()} ${topRightAndBottomLeft.asString()} ${bottomRight.asString()}".asStylePropertyValue()) + property("border-radius", "${topLeft.asString()} ${topRightAndBottomLeft.asString()} ${bottomRight.asString()}") } fun StyleBuilder.borderRadius( @@ -315,12 +315,12 @@ fun StyleBuilder.borderRadius( ) { property( "border-radius", - "${topLeft.asString()} ${topRight.asString()} ${bottomRight.asString()} ${bottomLeft.asString()}".asStylePropertyValue() + "${topLeft.asString()} ${topRight.asString()} ${bottomRight.asString()} ${bottomLeft.asString()}" ) } fun StyleBuilder.width(value: CSSUnitValue) { - property("width", value.asStylePropertyValue()) + property("width", value) } fun StyleBuilder.width(value: CSSAutoValue) { @@ -328,7 +328,7 @@ fun StyleBuilder.width(value: CSSAutoValue) { } fun StyleBuilder.height(value: CSSUnitValue) { - property("height", value.asStylePropertyValue()) + property("height", value) } fun StyleBuilder.height(value: CSSAutoValue) { @@ -336,7 +336,7 @@ fun StyleBuilder.height(value: CSSAutoValue) { } fun StyleBuilder.top(value: CSSLengthOrPercentageValue) { - property("top", value.asStylePropertyValue()) + property("top", value) } fun StyleBuilder.top(value: CSSAutoValue) { @@ -344,7 +344,7 @@ fun StyleBuilder.top(value: CSSAutoValue) { } fun StyleBuilder.bottom(value: CSSLengthOrPercentageValue) { - property("bottom", value.asStylePropertyValue()) + property("bottom", value) } fun StyleBuilder.bottom(value: CSSAutoValue) { @@ -352,7 +352,7 @@ fun StyleBuilder.bottom(value: CSSAutoValue) { } fun StyleBuilder.left(value: CSSLengthOrPercentageValue) { - property("left", value.asStylePropertyValue()) + property("left", value) } fun StyleBuilder.left(value: CSSAutoValue) { @@ -360,7 +360,7 @@ fun StyleBuilder.left(value: CSSAutoValue) { } fun StyleBuilder.right(value: CSSLengthOrPercentageValue) { - property("right", value.asStylePropertyValue()) + property("right", value) } fun StyleBuilder.right(value: CSSAutoValue) { @@ -368,23 +368,23 @@ fun StyleBuilder.right(value: CSSAutoValue) { } fun StyleBuilder.fontSize(value: CSSUnitValue) { - property("font-size", value(value)) + property("font-size", value) } fun StyleBuilder.margin(value: CSSUnitValue) { // marign hasn't Typed OM yet - property("margin", value(value.asString())) + property("margin", value) } fun StyleBuilder.marginLeft(value: CSSUnitValue) { - property("margin-left", value(value.asString())) + property("margin-left", value) } fun StyleBuilder.marginTop(value: CSSUnitValue) { - property("margin-top", value(value.asString())) + property("margin-top", value) } fun StyleBuilder.padding(value: CSSUnitValue) { // padding hasn't Typed OM yet - property("padding", value(value.asString())) + property("padding", value) } diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt index bddd044435..ef3e1218db 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt @@ -1,6 +1,6 @@ package org.jetbrains.compose.web.css -interface CSSSizeValue : CSSNumericValue { +interface CSSSizeValue : StylePropertyValue { val value: Float val unit: T fun asString(): String = "${value}${unit.value}" diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/Color.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/Color.kt index 8d33ac3570..9faebab38e 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/Color.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/Color.kt @@ -1,7 +1,7 @@ package org.jetbrains.compose.web.css abstract class Color : CustomStyleValue { - override fun styleValue(): StylePropertyValue = toString().asStylePropertyValue() + override fun styleValue(): StylePropertyValue = toString().unsafeCast() data class Named(val value: String) : Color() { override fun toString(): String = value diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/css/StyleBuilder.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/css/StyleBuilder.kt index 981be4152f..a3875aae15 100644 --- a/web/core/src/jsMain/kotlin/androidx/compose/web/css/StyleBuilder.kt +++ b/web/core/src/jsMain/kotlin/androidx/compose/web/css/StyleBuilder.kt @@ -6,22 +6,22 @@ interface StyleBuilder { fun property(propertyName: String, value: StylePropertyValue) fun variable(variableName: String, value: StylePropertyValue) + fun property(propertyName: String, value: String) = property(propertyName, value.unsafeCast()) + fun property(propertyName: String, value: Number) = property(propertyName, value.unsafeCast()) + fun variable(variableName: String, value: Number) = property(variableName, value.unsafeCast()) + fun variable(variableName: String, value: String) = property(variableName, value.unsafeCast()) + operator fun CSSStyleVariable.invoke(value: TValue) { - variable(this.name, (value as? CustomStyleValue)?.styleValue() ?: value(value.toString())) + if (value is CustomStyleValue) { + variable(name, value.styleValue()) + } else { + variable(name, value.toString()) + } } } -@Suppress("NOTHING_TO_INLINE") -inline fun StyleBuilder.value(value: String) = value.asStylePropertyValue() - -@Suppress("NOTHING_TO_INLINE") -inline fun StyleBuilder.value(value: Number) = value.asStylePropertyValue() - -@Suppress("NOTHING_TO_INLINE") -inline fun StyleBuilder.value(value: CSSStyleValue) = value.asStylePropertyValue() - fun variableValue(variableName: String, fallback: StylePropertyValue? = null) = - "var(--$variableName${fallback?.let { ", $it" } ?: ""})".asStylePropertyValue() + "var(--$variableName${fallback?.let { ", $it" } ?: ""})" interface CSSVariableValue : StylePropertyValue { companion object { @@ -65,7 +65,7 @@ fun CSSStyleVariable.value(fallback: TValue? = null) = name, fallback?.let { (fallback as? CustomStyleValue)?.styleValue() - ?: fallback.toString().asStylePropertyValue() + ?: fallback.toString().unsafeCast() } ) ) @@ -85,11 +85,17 @@ open class StyleBuilderImpl : StyleBuilder, StyleHolder { override val variables: MutableStylePropertyList = mutableListOf() override fun property(propertyName: String, value: StylePropertyValue) { - properties.add(StylePropertyDeclaration(propertyName, value)) + properties.add(when (value) { + is CSSSizeValue<*> -> StylePropertyDeclaration(propertyName, value.asString()) + else -> StylePropertyDeclaration(propertyName, value) + }) } override fun variable(variableName: String, value: StylePropertyValue) { - variables.add(StylePropertyDeclaration(variableName, value)) + variables.add(when (value) { + is CSSSizeValue<*> -> StylePropertyDeclaration(variableName, value.asString()) + else -> StylePropertyDeclaration(variableName, value) + }) } // StylePropertyValue is js native object without equals @@ -104,7 +110,10 @@ open class StyleBuilderImpl : StyleBuilder, StyleHolder { data class StylePropertyDeclaration( val name: String, val value: StylePropertyValue -) +) { + constructor(name: String, value: String) : this(name, value.unsafeCast()) + constructor(name: String, value: Number) : this(name, value.unsafeCast()) +} typealias StylePropertyList = List typealias MutableStylePropertyList = MutableList diff --git a/web/core/src/jsTest/kotlin/StaticComposableTests.kt b/web/core/src/jsTest/kotlin/StaticComposableTests.kt index 53153396e9..96867767ac 100644 --- a/web/core/src/jsTest/kotlin/StaticComposableTests.kt +++ b/web/core/src/jsTest/kotlin/StaticComposableTests.kt @@ -120,7 +120,7 @@ class StaticComposableTests { Div( { style { - property("border", value("1px solid red")) + property("border", "1px solid red") } } )