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.() -> 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" + ) + } }