github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Simplify assignment signatures in CSS properties

examples_0.5.0-build220 0.5.0-build221
Shagen Ogandzhanian 4 years ago
parent
ee1a8f1ab2
commit
9698698bd0
26 changed files with 217 additions and 201 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt
  2. 10
      examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
  3. 4
      examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt
  4. 10
      examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
  5. 6
      web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt
  6. 2
      web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
  7. 6
      web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
  8. 10
      web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
  9. 6
      web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt
  10. 6
      web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt
  11. 10
      web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt
  12. 18
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
  13. 52
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt
  14. 8
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt
  15. 30
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt
  16. 4
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt
  17. 6
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt
  18. 10
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt
  19. 84
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt
  20. 7
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt
  21. 8
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSMediaRule.kt
  22. 72
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt
  23. 2
      web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt
  24. 2
      web/core/src/jsMain/kotlin/androidx/compose/web/css/Color.kt
  25. 39
      web/core/src/jsMain/kotlin/androidx/compose/web/css/StyleBuilder.kt
  26. 2
      web/core/src/jsTest/kotlin/StaticComposableTests.kt

4
examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt
Unescape View File

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

10
examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
Unescape View File

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

4
examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt
Unescape View File

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

10
examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
Unescape View File

@ -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:")

6
web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt
Unescape View File

@ -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")
}
}
) {

2
web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
Unescape View File

@ -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) }
}
}

6
web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
Unescape View File

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

10
web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
Unescape View File

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

6
web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt
Unescape View File

@ -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 = {

6
web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt
Unescape View File

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

10
web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt
Unescape View File

@ -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)
}
},
) {

18
web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
Unescape View File

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

52
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt
Unescape View File

@ -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)
}
}

8
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt
Unescape View File

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

30
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt
Unescape View File

@ -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)
}
}
}

4
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt
Unescape View File

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

6
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt
Unescape View File

@ -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 {

10
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt
Unescape View File

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

84
web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt
Unescape View File

@ -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)
}
}
}

7
web/core/src/jsMain/kotlin/androidx/compose/web/css/CSS.kt
Unescape View File

@ -36,7 +36,7 @@ fun StyleSheet.insertRule(cssRule: String, index: Int? = null): Int {
val ElementCSSInlineStyle.attributeStyleMap
get() = this.asDynamic().attributeStyleMap.unsafeCast<StylePropertyMap>()
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>) ->
// CSSStyleValue | string
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)
fun append(property: String, vararg values: StylePropertyValue)

8
web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSMediaRule.kt
Unescape View File

@ -125,13 +125,13 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.not(
) = CSSMediaQuery.Not(query)
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.minWidth(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("min-width", value.asStylePropertyValue())
CSSMediaQuery.MediaFeature("min-width", value)
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.maxWidth(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("max-width", value.asStylePropertyValue())
CSSMediaQuery.MediaFeature("max-width", value)
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.minHeight(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("min-height", value.asStylePropertyValue())
CSSMediaQuery.MediaFeature("min-height", value)
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.maxHeight(value: CSSUnitValue) =
CSSMediaQuery.MediaFeature("max-height", value.asStylePropertyValue())
CSSMediaQuery.MediaFeature("max-height", value)

72
web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSProperties.kt
Unescape View File

@ -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<CSSUnit.percent>) {
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<StylePropertyValue>()
}
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<StylePropertyValue>()
}
}
@ -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)
}

2
web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSUnits.kt
Unescape View File

@ -1,6 +1,6 @@
package org.jetbrains.compose.web.css
interface CSSSizeValue<out T : CSSUnit> : CSSNumericValue {
interface CSSSizeValue<out T : CSSUnit> : StylePropertyValue {
val value: Float
val unit: T
fun asString(): String = "${value}${unit.value}"

2
web/core/src/jsMain/kotlin/androidx/compose/web/css/Color.kt
Unescape View File

@ -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<StylePropertyValue>()
data class Named(val value: String) : Color() {
override fun toString(): String = value

39
web/core/src/jsMain/kotlin/androidx/compose/web/css/StyleBuilder.kt
Unescape View File

@ -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<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: String) = property(variableName, value.unsafeCast<StylePropertyValue>())
operator fun <TValue> CSSStyleVariable<TValue>.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<TValue> : StylePropertyValue {
companion object {
@ -65,7 +65,7 @@ fun <TValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null) =
name,
fallback?.let {
(fallback as? CustomStyleValue)?.styleValue()
?: fallback.toString().asStylePropertyValue()
?: fallback.toString().unsafeCast<StylePropertyValue>()
}
)
)
@ -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<StylePropertyValue>())
constructor(name: String, value: Number) : this(name, value.unsafeCast<StylePropertyValue>())
}
typealias StylePropertyList = List<StylePropertyDeclaration>
typealias MutableStylePropertyList = MutableList<StylePropertyDeclaration>

2
web/core/src/jsTest/kotlin/StaticComposableTests.kt
Unescape View File

@ -120,7 +120,7 @@ class StaticComposableTests {
Div(
{
style {
property("border", value("1px solid red"))
property("border", "1px solid red")
}
}
)

Write Preview
Loading…
Cancel
Save