Minimal support for font and its derivatives in CSS API

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt

@@ -164,10 +164,6 @@ fun StyleBuilder.right(value: CSSAutoKeyword) {
     property("right", value)
 }
 
-fun StyleBuilder.fontSize(value: CSSNumeric) {
-    property("font-size", value)
-}
-
 fun StyleBuilder.margin(value: CSSNumeric) {
     // marign hasn't Typed OM yet
     property("margin", value)

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/font.kt

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+package org.jetbrains.compose.web.css
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
+fun StyleBuilder.fontFamily(vararg value: String) {
+    property("font-family", value.joinToString(", ") { if (it.contains(" ")) "\"$it\"" else it })
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
+fun StyleBuilder.fontSize(value: CSSNumeric) {
+    property("font-size", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
+fun StyleBuilder.fontStyle(value: String) {
+    property("font-style", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+fun StyleBuilder.fontWeight(value: String) {
+    property("font-weight", value)
+}
+
+fun StyleBuilder.fontWeight(value: Int) {
+    property("font-weight", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+fun StyleBuilder.lineHeight(value: String) {
+    property("line-height", value)
+}
+
+fun StyleBuilder.lineHeight(value: CSSNumeric) {
+    property("line-height", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/font
+fun StyleBuilder.font(value: String) {
+    property("font", value)
+}

web/core/src/jsTest/kotlin/css/CSSFontTests.kt

@@ -0,0 +1,140 @@
+/*
+ * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+package org.jetbrains.compose.web.core.tests.css
+
+import kotlinx.browser.window
+import org.jetbrains.compose.web.core.tests.runTest
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.get
+import kotlin.test.Test
+import kotlin.test.assertEquals
+
+class CSSFontTests {
+
+    @Test
+    fun fontSize() = runTest {
+        composition {
+            Div({
+                style {
+                    fontSize(20.em)
+                }
+            })
+        }
+
+        assertEquals("20em", (root.children[0] as HTMLElement).style.fontSize)
+    }
+
+    @Test
+    fun fontStyle() = runTest {
+        composition {
+            Div({
+                style {
+                    fontStyle("italic")
+                }
+            })
+            Div({
+                style {
+                    fontStyle("oblique")
+                }
+            })
+        }
+
+        assertEquals("italic", (root.children[0] as HTMLElement).style.fontStyle)
+        assertEquals("oblique", (root.children[1] as HTMLElement).style.fontStyle)
+    }
+
+    @Test
+    fun fontWeight() = runTest {
+        composition {
+            Div({
+                style {
+                    fontWeight("bold")
+                }
+            })
+            Div({
+                style {
+                    fontWeight("bolder")
+                }
+            })
+            Div({
+                style {
+                    fontWeight("lighter")
+                }
+            })
+            Div({
+                style {
+                    fontWeight(100)
+                }
+            })
+            Div({
+                style {
+                    fontWeight(800)
+                }
+            })
+        }
+
+        assertEquals("bold", (root.children[0] as HTMLElement).style.fontWeight)
+        assertEquals("bolder", (root.children[1] as HTMLElement).style.fontWeight)
+        assertEquals("lighter", (root.children[2] as HTMLElement).style.fontWeight)
+        assertEquals("100", (root.children[3] as HTMLElement).style.fontWeight)
+        assertEquals("800", (root.children[4] as HTMLElement).style.fontWeight)
+    }
+
+    @Test
+    fun lineHeight() = runTest {
+        composition {
+            Div({
+                style {
+                    lineHeight("normal")
+                }
+            })
+            Div({
+                style {
+                    lineHeight(2.em)
+                }
+            })
+        }
+
+        assertEquals("normal", (root.children[0] as HTMLElement).style.lineHeight)
+        assertEquals("2em", (root.children[1] as HTMLElement).style.lineHeight)
+    }
+
+    @Test
+    fun fontFamily() = runTest {
+        composition {
+            Div({
+                style {
+                    fontFamily("Gill Sans Extrabold", "sans-serif")
+                }
+            })
+            Div({
+                style {
+                    fontFamily("sans-serif")
+                }
+            })
+        }
+
+        assertEquals("\"Gill Sans Extrabold\", sans-serif", (root.children[0] as HTMLElement).style.fontFamily)
+        assertEquals("sans-serif", (root.children[1] as HTMLElement).style.fontFamily)
+    }
+
+    @Test
+    fun fontFamily2() = runTest {
+        composition {
+            Div({
+                style {
+                    font("italic bold .8em/1.2 Arial, sans-serif")
+                }
+            })
+        }
+
+        assertEquals("italic bold 0.8em / 1.2 Arial, sans-serif", (root.children[0] as HTMLElement).style.font)
+    }
+
+
+}