Use CSSStyleSheet so that there's no need to define additional functionality on Stylesheet

web/core/src/jsMain/kotlin/androidx/compose/web/css/BrowserAPI.kt

@@ -6,30 +6,6 @@
 @file:Suppress("UNUSED", "NOTHING_TO_INLINE", "FunctionName")
 package org.jetbrains.compose.web.css
 
-import org.w3c.dom.css.*
-import org.w3c.dom.css.StyleSheet
-
-inline val StyleSheet.cssRules
-    get() = this.asDynamic().cssRules.unsafeCast<CSSRuleList>()
-
-
-inline fun StyleSheet.deleteRule(index: Int) {
-    this.asDynamic().deleteRule(index)
-}
-
-fun StyleSheet.insertRule(cssRule: String, index: Int? = null): Int {
-    return if (index != null) {
-        this.asDynamic().insertRule(cssRule, index).unsafeCast<Int>()
-    } else {
-        this.asDynamic().insertRule(cssRule).unsafeCast<Int>()
-    }
-}
-
-
-inline operator fun CSSRuleList.get(index: Int): CSSRule {
-    return this.asDynamic()[index].unsafeCast<CSSRule>()
-}
-
 @Suppress("NOTHING_TO_INLINE")
 inline fun <T : Any> jsObject(): T =
     js("({})")

web/core/src/jsMain/kotlin/androidx/compose/web/elements/Style.kt

@@ -9,6 +9,7 @@ import org.w3c.dom.css.CSSStyleDeclaration
 import org.w3c.dom.css.CSSStyleRule
 import org.w3c.dom.css.StyleSheet
 import org.jetbrains.compose.web.css.*
+import org.w3c.dom.css.CSSStyleSheet
 
 /**
  * Use this function to mount the <style> tag into the DOM tree.
@@ -43,46 +44,48 @@ inline fun Style(
         },
     ) {
         DomSideEffect(cssRules) { style ->
-            style.sheet?.let { sheet ->
+            (style.sheet as? CSSStyleSheet)?.let { cssStylesheet ->
-                setCSSRules(sheet, cssRules)
+                setCSSRules(cssStylesheet, cssRules)
                 onDispose {
-                    clearCSSRules(sheet)
+                    clearCSSRules(cssStylesheet)
                 }
             }
         }
     }
 }
 
-fun clearCSSRules(sheet: StyleSheet) {
+fun clearCSSRules(sheet: CSSStyleSheet) {
     repeat(sheet.cssRules.length) {
         sheet.deleteRule(0)
     }
 }
 
-fun setCSSRules(sheet: StyleSheet, cssRules: CSSRuleDeclarationList) {
+fun setCSSRules(sheet: CSSStyleSheet, cssRules: CSSRuleDeclarationList) {
     cssRules.forEach { cssRule ->
         sheet.addRule(cssRule)
     }
 }
 
-private fun StyleSheet.addRule(cssRule: String): CSSRule {
+private fun CSSStyleSheet.addRule(cssRule: String): CSSRule? {
     val cssRuleIndex = this.insertRule(cssRule, this.cssRules.length)
-    return this.cssRules[cssRuleIndex]
+    return this.cssRules.item(cssRuleIndex)
 }
 
-private fun CSSGroupingRule.addRule(cssRule: String): CSSRule {
+private fun CSSStyleSheet.addRule(cssRuleDeclaration: CSSRuleDeclaration) {
-    val cssRuleIndex = this.insertRule(cssRule, this.cssRules.length)
+    addRule("${cssRuleDeclaration.header} {}")?.let { cssRule ->
-    return this.cssRules[cssRuleIndex]
+        fillRule(cssRuleDeclaration, cssRule)
+    }
 }
 
-private fun StyleSheet.addRule(cssRuleDeclaration: CSSRuleDeclaration) {
+private fun CSSGroupingRule.addRule(cssRule: String): CSSRule? {
-    val cssRule = addRule("${cssRuleDeclaration.header} {}")
+    val cssRuleIndex = this.insertRule(cssRule, this.cssRules.length)
-    fillRule(cssRuleDeclaration, cssRule)
+    return this.cssRules.item(cssRuleIndex)
 }
 
 private fun CSSGroupingRule.addRule(cssRuleDeclaration: CSSRuleDeclaration) {
-    val cssRule = addRule("${cssRuleDeclaration.header} {}")
+    addRule("${cssRuleDeclaration.header} {}")?.let { cssRule ->
-    fillRule(cssRuleDeclaration, cssRule)
+        fillRule(cssRuleDeclaration, cssRule)
+    }
 }
 
 private fun fillRule(