fix Style composable and CSSRulesHolderState (#1889)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt

@@ -263,6 +263,7 @@ fun FormattedCodeSnippet(code: String, language: String = "kotlin") {
                 backgroundColor(Color("transparent"))
             }
         }) {
+            @Suppress("DEPRECATION")
             DomSideEffect(code) {
                 it.setHighlightedCode(code)
             }

examples/web-landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt

@@ -2,7 +2,6 @@ package com.sample.content
 
 import androidx.compose.runtime.*
 import org.jetbrains.compose.web.attributes.ATarget
-import org.jetbrains.compose.web.attributes.AttrsBuilder
 import org.jetbrains.compose.web.attributes.target
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.*

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

@@ -1,20 +1,19 @@
 package org.jetbrains.compose.web.css
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.mutableStateListOf
+import org.jetbrains.compose.web.ExperimentalComposeWebStyleApi
 import org.jetbrains.compose.web.css.selectors.CSSSelector
 import org.jetbrains.compose.web.dom.Style
 import kotlin.properties.ReadOnlyProperty
 import kotlin.reflect.KProperty
 
 class CSSRulesHolderState : CSSRulesHolder {
-    override var cssRules: CSSRuleDeclarationList by mutableStateOf(listOf())
+    override val cssRules = mutableStateListOf<CSSRuleDeclaration>()
+
 
     override fun add(cssRule: CSSRuleDeclaration) {
-        @Suppress("SuspiciousCollectionReassignment")
-        cssRules += cssRule
+        cssRules.add(cssRule)
     }
 }
 

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt

@@ -947,7 +947,7 @@ fun Style(
             }
         },
     ) {
-        DisposableEffect(cssRules) {
+        DisposableEffect(cssRules, cssRules.size) {
             val cssStylesheet = scopeElement.sheet as? CSSStyleSheet
             cssStylesheet?.setCSSRules(cssRules)
             onDispose {

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

@@ -5,12 +5,17 @@
 
 package org.jetbrains.compose.web.core.tests
 
+import androidx.compose.runtime.mutableStateOf
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.stringPresentation
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.get
 import org.jetbrains.compose.web.testutils.*
+import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.HTMLStyleElement
+import org.w3c.dom.css.CSSStyleSheet
+import org.w3c.dom.css.get
 import kotlin.test.*
 
 object AppCSSVariables {
@@ -320,4 +325,76 @@ class CSSVariableTests {
             }
         }
     }
+
+    @Test
+    fun testChildStylesheetsGetApplied() = runTest {
+        val showContent = mutableStateOf(false)
+        composition {
+            Style(TestRootStylesheet2)
+            if (showContent.value) {
+                Div(attrs = {
+                    classes(ChildStylesheet2.content)
+                }) {}
+            }
+        }
+
+        val styleElem = root.children[0] as HTMLStyleElement
+        val cssStyleSheet = styleElem.sheet as CSSStyleSheet
+        assertEquals(1, cssStyleSheet.cssRules.length)
+        assertEquals(".cls1 { padding: 10px; }", cssStyleSheet.cssRules[0]!!.cssText)
+
+        showContent.value = true
+        waitForRecompositionComplete()
+
+        with(root.children[1] as HTMLDivElement) {
+            assertEquals("content", getAttribute("class"))
+        }
+
+        // 2nd recomposition occurs since TestRootStylesheet2 was changed during recomposition
+        // when ChildStylesheet2 was initialised after showContent was set into "true"
+        waitForRecompositionComplete()
+
+        val styleElem2 = root.children[0] as HTMLStyleElement
+        val cssStyleSheet2 = styleElem2.sheet as CSSStyleSheet
+        assertEquals(".cls1 { padding: 10px; }", cssStyleSheet2.cssRules[0]!!.cssText)
+        assertEquals(2, cssStyleSheet2.cssRules.length)
+        assertEquals(".content { color: red; }", cssStyleSheet2.cssRules[1]!!.cssText)
+    }
+
+    @Test
+    fun testChildStylesheetsGetApplied2() = runTest {
+        composition {
+            Style(TestRootStylesheet)
+            Div(attrs = { classes(ChildStylesheet.content) })
+        }
+
+        val styleElem = root.children[0] as HTMLStyleElement
+        val cssStyleSheet = styleElem.sheet as CSSStyleSheet
+        assertEquals(2, cssStyleSheet.cssRules.length)
+        assertEquals(".cls1 { padding: 10px; }", cssStyleSheet.cssRules[0]!!.cssText)
+        assertEquals(".content { color: red; }", cssStyleSheet.cssRules[1]!!.cssText)
+    }
+}
+
+private object TestRootStylesheet : StyleSheet(usePrefix = false) {
+    val cls1 by style {
+        padding(10.px)
+    }
+}
+private object ChildStylesheet : StyleSheet(TestRootStylesheet, usePrefix = false) {
+    val content by style {
+        color(Color.red)
+    }
+}
+
+// Use duplicates for another test to ensure uninitialized objects will be used
+private object TestRootStylesheet2 : StyleSheet(usePrefix = false) {
+    val cls1 by style {
+        padding(10.px)
+    }
+}
+private object ChildStylesheet2 : StyleSheet(TestRootStylesheet2, usePrefix = false) {
+    val content by style {
+        color(Color.red)
+    }
 }