From 984a26ce1dcf818c793fae8079da3e05ef93fe6d Mon Sep 17 00:00:00 2001
From: Abasov Akif <akif.abasov@jetbrains.com>
Date: Mon, 25 Oct 2021 11:06:07 +0300
Subject: [PATCH] Pass resolved with self selector to nested builder (#1298)

---
 .../jetbrains/compose/web/css/CSSBuilder.kt   | 11 +++---
 .../src/jsTest/kotlin/CSSStylesheetTests.kt   | 35 +++++++++++++++++++
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSBuilder.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSBuilder.kt
index e35a540892..af504f51e9 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSBuilder.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSBuilder.kt
@@ -14,13 +14,14 @@ class CSSBuilderImpl(
     rulesHolder: CSSRulesHolder
 ) : CSSRuleBuilderImpl(), CSSBuilder, CSSRulesHolder by rulesHolder {
     override fun style(selector: CSSSelector, cssRule: CSSBuilder.() -> Unit) {
-        val (style, rules) = buildCSS(root, selector, cssRule)
-        rules.forEach { add(it) }
-        if (selector.contains(self, true) || selector.contains(root, true)) {
-            add(selector, style)
+        val resolvedSelector = if (selector.contains(self, true) || selector.contains(root, true)) {
+            selector
         } else {
-            add(desc(self, selector), style)
+            desc(self, selector)
         }
+        val (style, rules) = buildCSS(root, resolvedSelector, cssRule)
+        rules.forEach { add(it) }
+        add(resolvedSelector, style)
     }
 
     override fun buildRules(rulesBuild: GenericStyleSheetBuilder<CSSBuilder>.() -> Unit) =
diff --git a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
index a00bcabd0a..dda9cf8c8f 100644
--- a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
+++ b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
@@ -78,6 +78,17 @@ object AppStylesheet : StyleSheet() {
             color(Color.lime)
         }
     }
+
+    val withNestedWithImplicitSelf2Layers by style {
+        color(Color.green)
+        "h1" {
+            color(Color.lime)
+            "span" {
+                color(Color.red)
+            }
+        }
+    }
+
     val withNestedWithExplicitSelf by style {
         color(Color.green)
         desc(self, "h1") style {
@@ -190,4 +201,28 @@ class CSSVariableTests {
             "Nested selector with implicit self isn't generated correctly"
         )
     }
+
+    @Test
+    fun nestedStyleWithImplicitSelf2Layers() = runTest {
+        val generatedRules = AppStylesheet.cssRules.map { it.stringPresentation() }
+
+        assertContains(
+            generatedRules,
+            """
+                .AppStylesheet-withNestedWithImplicitSelf2Layers h1 {
+                    color: lime;
+                }
+            """.trimIndent(),
+            "Nested selector with implicit self isn't generated correctly"
+        )
+        assertContains(
+            generatedRules,
+            """
+                .AppStylesheet-withNestedWithImplicitSelf2Layers h1 span {
+                    color: red;
+                }
+            """.trimIndent(),
+            "Nested selector with implicit self isn't generated correctly"
+        )
+    }
 }