Fix css selectors: combine, sibling (#1418)

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

@@ -248,8 +248,22 @@ fun combine(vararg selectors: CSSSelector) = CSSSelector.Combine(selectors.toMut
 operator fun CSSSelector.plus(selector: CSSSelector) = combine(this, selector)
 operator fun String.plus(selector: CSSSelector) = combine(selector(this), selector)
 operator fun CSSSelector.plus(selector: String) = combine(this, selector(selector))
-operator fun CSSSelector.Combine.plus(selector: CSSSelector) { this.selectors.add(selector) }
+operator fun CSSSelector.plus(selector: CSSSelector.Combine): CSSSelector.Combine {
-operator fun CSSSelector.Combine.plus(selector: String) { this.selectors.add(selector(selector)) }
+    selector.selectors.add(0, this)
+    return selector
+}
+operator fun String.plus(selector: CSSSelector.Combine): CSSSelector.Combine {
+    selector.selectors.add(0, selector(this))
+    return selector
+}
+operator fun CSSSelector.Combine.plus(selector: CSSSelector): CSSSelector.Combine {
+    this.selectors.add(selector)
+    return this
+}
+operator fun CSSSelector.Combine.plus(selector: String): CSSSelector.Combine {
+    this.selectors.add(selector(selector))
+    return this
+}
 
 fun universal() = CSSSelector.Universal
 fun type(type: String) = CSSSelector.Type(type)
@@ -277,7 +291,7 @@ fun desc(parent: String, selected: String) =
 
 fun child(parent: CSSSelector, selected: CSSSelector) =
     CSSSelector.Child(parent, selected)
-fun sibling(sibling: CSSSelector, selected: CSSSelector) = CSSSelector.Descendant(sibling, selected)
+fun sibling(sibling: CSSSelector, selected: CSSSelector) = CSSSelector.Sibling(sibling, selected)
 fun adjacent(sibling: CSSSelector, selected: CSSSelector) = CSSSelector.Adjacent(sibling, selected)
 
 fun not(selector: CSSSelector) = CSSSelector.PseudoClass.Not(selector)

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

@@ -7,7 +7,8 @@ package org.jetbrains.compose.web.core.tests
 
 import kotlinx.browser.window
 import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.css.selectors.desc
+import org.jetbrains.compose.web.css.selectors.*
+import org.jetbrains.compose.web.css.selectors.plus
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.stringPresentation
 import org.w3c.dom.HTMLElement
@@ -95,6 +96,27 @@ object AppStylesheet : StyleSheet() {
             color(Color.lime)
         }
     }
+
+    val parent by style {
+        (sibling(self, self)) {
+            color(Color.red)
+        }
+    }
+
+    val child by style {
+        (className(parent) + ":hover " + self) {  // Selector + String,  Combine + Selector -> ".parent:hover .child"
+            color(Color.lime)
+        }
+        (className(parent) + self + ":hover") {  // Selector + Selector, Combine + String -> ".parent.child:hover"
+            color(Color.yellow)
+        }
+        ("h1 " + (className(parent) + ":hover")) { // String + Combine -> ".child h1 .parent:hover"
+            color(Color.lavender)
+        }
+        (self + (" div" + id("el"))) {  // Selector + Combine, String + Selector -> ".child div#el"
+            color(Color.green)
+        }
+    }
 }
 
 
@@ -225,4 +247,68 @@ class CSSVariableTests {
             "Nested selector with implicit self isn't generated correctly"
         )
     }
+
+    @Test
+    fun testCombine() = runTest {
+        val generatedRules = AppStylesheet.cssRules.map { it.stringPresentation() }
+
+        // Selector + String,  Combine + Selector
+        assertContains(
+            generatedRules,
+            """
+                .AppStylesheet-parent:hover .AppStylesheet-child {
+                    color: lime;
+                }
+            """.trimIndent(),
+            "Selector isn't generated correctly"
+        )
+
+        // Selector + Selector, Combine + String
+        assertContains(
+            generatedRules,
+            """
+                .AppStylesheet-parent.AppStylesheet-child:hover {
+                    color: yellow;
+                }
+            """.trimIndent(),
+            "Selector isn't generated correctly"
+        )
+
+        // String + Combine
+        assertContains(
+            generatedRules,
+            """
+                .AppStylesheet-child h1 .AppStylesheet-parent:hover {
+                    color: lavender;
+                }
+            """.trimIndent(),
+            "Selector isn't generated correctly"
+        )
+
+        // Selector + Combine, String + Selector
+        assertContains(
+            generatedRules,
+            """
+                .AppStylesheet-child div#el {
+                    color: green;
+                }
+            """.trimIndent(),
+            "Selector isn't generated correctly"
+        )
+    }
+
+    @Test
+    fun testSibling() = runTest {
+        val generatedRules = AppStylesheet.cssRules.map { it.stringPresentation() }
+
+        assertContains(
+            generatedRules,
+            """
+                .AppStylesheet-parent ~ .AppStylesheet-parent {
+                    color: red;
+                }
+            """.trimIndent(),
+            "Sibling selector isn't generated correctly"
+        )
+    }
 }