Enable warning as errors by default in web (#1803)

web/benchmark-core/src/jsTest/kotlin/BenchmarkTests.kt

@@ -40,7 +40,7 @@ class BenchmarkTests {
 
         val avgMs = durations.map { it.toInt(DurationUnit.MILLISECONDS) }.average().toInt()
 
-        val browserName = window.navigator.userAgent.toLowerCase().let {
+        val browserName = window.navigator.userAgent.lowercase().let {
             when {
                 it.contains("chrome") -> "chrome"
                 it.contains("firefox") -> "firefox"

web/build.gradle.kts

@@ -1,5 +1,8 @@
+import org.gradle.api.tasks.testing.AbstractTestTask
 import org.gradle.api.tasks.testing.logging.TestExceptionFormat
 import org.jetbrains.compose.gradle.kotlinKarmaConfig
+import org.jetbrains.kotlin.gradle.dsl.kotlinExtension
+import org.jetbrains.kotlin.gradle.plugin.mpp.pm20.targets
 
 plugins {
     kotlin("multiplatform") apply false
@@ -33,7 +36,25 @@ subprojects {
     group = "org.jetbrains.compose.web"
     version = COMPOSE_WEB_VERSION
 
-    tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
+    if ((project.name != "web-widgets") && (project.name != "web-integration-widgets")) {
+        afterEvaluate {
+            if (plugins.hasPlugin("org.jetbrains.kotlin.multiplatform")) {
+                project.kotlinExtension.targets.forEach { target ->
+                    target.compilations.forEach { compilation ->
+                        compilation.kotlinOptions {
+                            allWarningsAsErrors = true
+                            // see https://kotlinlang.org/docs/opt-in-requirements.html
+                            freeCompilerArgs += "-opt-in=kotlin.RequiresOptIn"
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+
+    tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile>() {
         kotlinOptions.jvmTarget = "11"
     }
 
@@ -53,16 +74,6 @@ subprojects {
     }
 
     pluginManager.withPlugin("kotlin-multiplatform") {
-        configure<org.jetbrains.kotlin.gradle.dsl.KotlinMultiplatformExtension> {
-            sourceSets {
-                all {
-                    languageSettings {
-                        optIn("org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi")
-                        optIn("kotlin.RequiresOptIn")
-                    }
-                }
-            }
-        }
         val printTestBundleSize by tasks.registering {
             dependsOn(tasks.named("jsTest"))
             doLast {
@@ -81,6 +92,7 @@ subprojects {
         }
     }
 
+
     if (isSampleProject()) {
         val printBundleSize by tasks.registering {
             dependsOn(tasks.named("jsBrowserDistribution"))

web/compose-compiler-integration/src/jsMain/kotlin/CrossmoduleTestsDependencies.kt

@@ -36,6 +36,7 @@ class ClassSavesComposableIntoVar(c: @Composable () -> Unit) {
     var composableVar: @Composable () -> Unit = c
 }
 
+@Suppress("UNNECESSARY_LATEINIT")
 class ClassSavesComposableIntoLateinitVar(c: @Composable () -> Unit) {
     lateinit var composableVar: @Composable () -> Unit
 
@@ -57,6 +58,7 @@ class ClassSavesTypedComposableIntoVar<T>(c: @Composable (T) -> Unit) {
 }
 
 
+@Suppress("UNNECESSARY_LATEINIT")
 class ClassSavesTypedComposableIntoLateinitVar<T>(c: @Composable (T) -> Unit) {
     lateinit var composableVar: @Composable (T) -> Unit
 

web/core/build.gradle.kts

@@ -27,13 +27,19 @@ kotlin {
         }
 
         val jsMain by getting {
+            languageSettings {
+                optIn("org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi")
+            }
             dependencies {
-                implementation(kotlin("stdlib-js"))
                 implementation(project(":internal-web-core-runtime"))
             }
         }
 
         val jsTest by getting {
+            languageSettings {
+                optIn("org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi")
+                optIn("org.jetbrains.compose.web.testutils.ComposeWebExperimentalTestsApi")
+            }
             dependencies {
                 implementation(project(":test-utils"))
                 implementation(kotlin("test-js"))
@@ -45,11 +51,5 @@ kotlin {
                 implementation(compose.desktop.currentOs)
             }
         }
-
-        all {
-            languageSettings {
-                useExperimentalAnnotation("org.jetbrains.compose.web.testutils.ComposeWebExperimentalTestsApi")
-            }
-        }
     }
 }

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/InternalControlledInputUtils.kt

@@ -6,6 +6,7 @@
 package org.jetbrains.compose.web.attributes.builders
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.NonRestartableComposable
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.dom.ElementScope
@@ -65,7 +66,8 @@ private fun updateRadioGroupIfNeeded(element: HTMLInputElement) {
 @Composable
 @NonRestartableComposable
 internal fun ElementScope<HTMLInputElement>.DisposeRadioGroupEffect() {
-    DisposableRefEffect { ref ->
+    DisposableEffect(null) {
+        val ref = scopeElement
         onDispose {
             controlledRadioGroups[ref.name]?.remove(ref)
             if (controlledRadioGroups[ref.name]?.isEmpty() == true) {

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

@@ -2,7 +2,7 @@ package org.jetbrains.compose.web.css
 
 import org.jetbrains.compose.web.css.selectors.CSSSelector
 
-interface CSSStyleRuleBuilder : StyleBuilder
+interface CSSStyleRuleBuilder : StyleScope
 
 open class CSSRuleBuilderImpl : CSSStyleRuleBuilder, StyleScopeBuilder()
 

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

@@ -77,7 +77,7 @@ inline fun <TValue> CSSVariableValue(value: String) =
     "use property instead, will remove it soon",
     ReplaceWith("property(propertyName, value)")
 )
-fun StyleBuilder.add(
+fun StyleScope.add(
     propertyName: String,
     value: StylePropertyValue
 ) = property(propertyName, value)

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

@@ -168,6 +168,7 @@ internal fun buildCSS(
 }
 
 @Composable
+@Suppress("NOTHING_TO_INLINE")
 inline fun Style(
     styleSheet: CSSRulesHolder
 ) {

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

@@ -31,35 +31,35 @@ data class CSSAnimation(
     }
 }
 
-inline fun CSSAnimation.duration(vararg values: CSSSizeValue<out CSSUnitTime>) {
+fun CSSAnimation.duration(vararg values: CSSSizeValue<out CSSUnitTime>) {
     this.duration = values.toList()
 }
 
-inline fun CSSAnimation.timingFunction(vararg values: AnimationTimingFunction) {
+fun CSSAnimation.timingFunction(vararg values: AnimationTimingFunction) {
     this.timingFunction = values.toList()
 }
 
-inline fun CSSAnimation.delay(vararg values: CSSSizeValue<out CSSUnitTime>) {
+fun CSSAnimation.delay(vararg values: CSSSizeValue<out CSSUnitTime>) {
     this.delay = values.toList()
 }
 
-inline fun CSSAnimation.iterationCount(vararg values: Int?) {
+fun CSSAnimation.iterationCount(vararg values: Int?) {
     this.iterationCount = values.toList()
 }
 
-inline fun CSSAnimation.direction(vararg values: AnimationDirection) {
+fun CSSAnimation.direction(vararg values: AnimationDirection) {
     this.direction = values.toList()
 }
 
-inline fun CSSAnimation.fillMode(vararg values: AnimationFillMode) {
+fun CSSAnimation.fillMode(vararg values: AnimationFillMode) {
     this.fillMode = values.toList()
 }
 
-inline fun CSSAnimation.playState(vararg values: AnimationPlayState) {
+fun CSSAnimation.playState(vararg values: AnimationPlayState) {
     this.playState = values.toList()
 }
 
-fun StyleBuilder.animation(
+fun StyleScope.animation(
     keyframesName: String,
     builder: CSSAnimation.() -> Unit
 ) {
@@ -67,9 +67,9 @@ fun StyleBuilder.animation(
     property("animation", animation)
 }
 
-inline fun StyleBuilder.animation(
+fun StyleScope.animation(
     keyframes: CSSNamedKeyframes,
-    noinline builder: CSSAnimation.() -> Unit
+    builder: CSSAnimation.() -> Unit
 ) = animation(keyframes.name, builder)
 
 

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

@@ -6,45 +6,45 @@
 package org.jetbrains.compose.web.css
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
-fun StyleBuilder.backgroundAttachment(value: String) {
+fun StyleScope.backgroundAttachment(value: String) {
     property("background-attachment", value)
 }
 
-fun StyleBuilder.backgroundClip(value: String) {
+fun StyleScope.backgroundClip(value: String) {
     property("background-clip", value)
 }
 
-fun StyleBuilder.backgroundColor(value: CSSColorValue) {
+fun StyleScope.backgroundColor(value: CSSColorValue) {
     property("background-color", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
-fun StyleBuilder.backgroundImage(value: String) {
+fun StyleScope.backgroundImage(value: String) {
     property("background-image", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
-fun StyleBuilder.backgroundOrigin(value: String) {
+fun StyleScope.backgroundOrigin(value: String) {
     property("background-origin", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
-fun StyleBuilder.backgroundPosition(value: String) {
+fun StyleScope.backgroundPosition(value: String) {
     property("background-position", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
-fun StyleBuilder.backgroundRepeat(value: String) {
+fun StyleScope.backgroundRepeat(value: String) {
     property("background-repeat", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
-fun StyleBuilder.backgroundSize(value: String) {
+fun StyleScope.backgroundSize(value: String) {
     property("background-size", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/background
-fun StyleBuilder.background(value: String) {
+fun StyleScope.background(value: String) {
     property("background", value)
 }
 

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

@@ -23,23 +23,23 @@ class CSSBorder : CSSStyleValue {
     }
 }
 
-inline fun CSSBorder.width(size: CSSNumeric) {
+fun CSSBorder.width(size: CSSNumeric) {
     width = size
 }
 
-inline fun CSSBorder.style(style: LineStyle) {
+fun CSSBorder.style(style: LineStyle) {
     this.style = style
 }
 
-inline fun CSSBorder.color(color: CSSColorValue) {
+fun CSSBorder.color(color: CSSColorValue) {
     this.color = color
 }
 
-inline fun StyleBuilder.border(crossinline borderBuild: CSSBorder.() -> Unit) {
+fun StyleScope.border(borderBuild: CSSBorder.() -> Unit) {
     property("border", CSSBorder().apply(borderBuild))
 }
 
-fun StyleBuilder.border(
+fun StyleScope.border(
     width: CSSLengthValue? = null,
     style: LineStyle? = null,
     color: CSSColorValue? = null
@@ -51,15 +51,15 @@ fun StyleBuilder.border(
     }
 }
 
-fun StyleBuilder.borderRadius(r: CSSNumeric) {
+fun StyleScope.borderRadius(r: CSSNumeric) {
     property("border-radius", r)
 }
 
-fun StyleBuilder.borderRadius(topLeft: CSSNumeric, bottomRight: CSSNumeric) {
+fun StyleScope.borderRadius(topLeft: CSSNumeric, bottomRight: CSSNumeric) {
     property("border-radius", "$topLeft $bottomRight")
 }
 
-fun StyleBuilder.borderRadius(
+fun StyleScope.borderRadius(
     topLeft: CSSNumeric,
     topRightAndBottomLeft: CSSNumeric,
     bottomRight: CSSNumeric
@@ -67,7 +67,7 @@ fun StyleBuilder.borderRadius(
     property("border-radius", "$topLeft $topRightAndBottomLeft $bottomRight")
 }
 
-fun StyleBuilder.borderRadius(
+fun StyleScope.borderRadius(
     topLeft: CSSNumeric,
     topRight: CSSNumeric,
     bottomRight: CSSNumeric,
@@ -79,15 +79,15 @@ fun StyleBuilder.borderRadius(
     )
 }
 
-fun StyleBuilder.borderWidth(width: CSSNumeric) {
+fun StyleScope.borderWidth(width: CSSNumeric) {
     property("border-width", width)
 }
 
-fun StyleBuilder.borderWidth(topLeft: CSSNumeric, bottomRight: CSSNumeric) {
+fun StyleScope.borderWidth(topLeft: CSSNumeric, bottomRight: CSSNumeric) {
     property("border-width", "$topLeft $bottomRight")
 }
 
-fun StyleBuilder.borderWidth(
+fun StyleScope.borderWidth(
     topLeft: CSSNumeric,
     topRightAndBottomLeft: CSSNumeric,
     bottomRight: CSSNumeric
@@ -95,7 +95,7 @@ fun StyleBuilder.borderWidth(
     property("border-width", "$topLeft $topRightAndBottomLeft $bottomRight")
 }
 
-fun StyleBuilder.borderWidth(
+fun StyleScope.borderWidth(
     topLeft: CSSNumeric,
     topRight: CSSNumeric,
     bottomRight: CSSNumeric,

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

@@ -7,107 +7,107 @@ package org.jetbrains.compose.web.css
 
 import org.jetbrains.compose.web.css.keywords.CSSAutoKeyword
 
-fun StyleBuilder.width(value: CSSNumeric) {
+fun StyleScope.width(value: CSSNumeric) {
     property("width", value)
 }
 
-fun StyleBuilder.width(value: CSSAutoKeyword) {
+fun StyleScope.width(value: CSSAutoKeyword) {
     property("width", value)
 }
 
-fun StyleBuilder.height(value: CSSNumeric) {
+fun StyleScope.height(value: CSSNumeric) {
     property("height", value)
 }
 
-fun StyleBuilder.height(value: CSSAutoKeyword) {
+fun StyleScope.height(value: CSSAutoKeyword) {
     property("height", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
-fun StyleBuilder.boxSizing(value: String) {
+fun StyleScope.boxSizing(value: String) {
     property("box-sizing", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width
-fun StyleBuilder.outlineWidth(value: String) {
+fun StyleScope.outlineWidth(value: String) {
     property("outline-width", value)
 }
 
-fun StyleBuilder.outlineWidth(value: CSSNumeric) {
+fun StyleScope.outlineWidth(value: CSSNumeric) {
     property("outline-width", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color
-fun StyleBuilder.outlineColor(value: CSSColorValue) {
+fun StyleScope.outlineColor(value: CSSColorValue) {
     property("outline-color", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style
-fun StyleBuilder.outlineStyle(value: String) {
+fun StyleScope.outlineStyle(value: String) {
     property("outline-style", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/outline
-fun StyleBuilder.outline(style: String) {
+fun StyleScope.outline(style: String) {
     property("outline", style)
 }
 
-fun StyleBuilder.outline(colorOrStyle: String, styleOrWidth: String) {
+fun StyleScope.outline(colorOrStyle: String, styleOrWidth: String) {
     property("outline", "$colorOrStyle $styleOrWidth")
 }
 
-fun StyleBuilder.outline(style: String, width: CSSNumeric) {
+fun StyleScope.outline(style: String, width: CSSNumeric) {
     property("outline", "$style $width")
 }
 
-fun StyleBuilder.outline(color: CSSColorValue, style: String, width: String) {
+fun StyleScope.outline(color: CSSColorValue, style: String, width: String) {
     property("outline", "$color $style $width")
 }
 
-fun StyleBuilder.outline(color: CSSColorValue, style: String, width: CSSNumeric) {
+fun StyleScope.outline(color: CSSColorValue, style: String, width: CSSNumeric) {
     property("outline", "$color $style $width")
 }
 
-fun StyleBuilder.outline(color: String, style: String, width: String) {
+fun StyleScope.outline(color: String, style: String, width: String) {
     property("outline", "$color $style $width")
 }
 
-fun StyleBuilder.outline(color: String, style: String, width: CSSNumeric) {
+fun StyleScope.outline(color: String, style: String, width: CSSNumeric) {
     property("outline", "$color $style $width")
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
-fun StyleBuilder.minWidth(value: String) {
+fun StyleScope.minWidth(value: String) {
     property("min-width", value)
 }
 
-fun StyleBuilder.minWidth(value: CSSNumeric) {
+fun StyleScope.minWidth(value: CSSNumeric) {
     property("min-width", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
-fun StyleBuilder.maxWidth(value: String) {
+fun StyleScope.maxWidth(value: String) {
     property("max-width", value)
 }
 
-fun StyleBuilder.maxWidth(value: CSSNumeric) {
+fun StyleScope.maxWidth(value: CSSNumeric) {
     property("max-width", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
-fun StyleBuilder.minHeight(value: String) {
+fun StyleScope.minHeight(value: String) {
     property("min-height", value)
 }
 
-fun StyleBuilder.minHeight(value: CSSNumeric) {
+fun StyleScope.minHeight(value: CSSNumeric) {
     property("min-height", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
-fun StyleBuilder.maxHeight(value: String) {
+fun StyleScope.maxHeight(value: String) {
     property("max-height", value)
 }
 
-fun StyleBuilder.maxHeight(value: CSSNumeric) {
+fun StyleScope.maxHeight(value: CSSNumeric) {
     property("max-height", value)
 }

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

@@ -5,7 +5,7 @@
 
 package org.jetbrains.compose.web.css
 
-fun StyleBuilder.color(value: CSSColorValue) {
+fun StyleScope.color(value: CSSColorValue) {
     // color hasn't Typed OM yet
     property("color", value)
 }

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

@@ -99,7 +99,7 @@ private class FilterBuilderImplementation : FilterBuilder {
 }
 
 @ExperimentalComposeWebApi
-fun StyleBuilder.filter(filterContext: FilterBuilder.() -> Unit) {
+fun StyleScope.filter(filterContext: FilterBuilder.() -> Unit) {
     val builder = FilterBuilderImplementation()
     property("filter", builder.apply(filterContext).toString())
 }

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

@@ -7,91 +7,91 @@ package org.jetbrains.compose.web.css
 
 import org.w3c.dom.css.CSS
 
-fun StyleBuilder.flexDirection(flexDirection: FlexDirection) {
+fun StyleScope.flexDirection(flexDirection: FlexDirection) {
     property("flex-direction", flexDirection.value)
 }
 
-fun StyleBuilder.flexWrap(flexWrap: FlexWrap) {
+fun StyleScope.flexWrap(flexWrap: FlexWrap) {
     property("flex-wrap", flexWrap.value)
 }
 
-fun StyleBuilder.flexFlow(flexDirection: FlexDirection, flexWrap: FlexWrap) {
+fun StyleScope.flexFlow(flexDirection: FlexDirection, flexWrap: FlexWrap) {
     property(
         "flex-flow",
         "${flexDirection.value} ${flexWrap.value}"
     )
 }
 
-fun StyleBuilder.justifyContent(justifyContent: JustifyContent) {
+fun StyleScope.justifyContent(justifyContent: JustifyContent) {
     property(
         "justify-content",
         justifyContent.value
     )
 }
-fun StyleBuilder.alignSelf(alignSelf: AlignSelf) {
+fun StyleScope.alignSelf(alignSelf: AlignSelf) {
     property(
         "align-self",
         alignSelf.value
     )
 }
 
-fun StyleBuilder.alignItems(alignItems: AlignItems) {
+fun StyleScope.alignItems(alignItems: AlignItems) {
     property(
         "align-items",
         alignItems.value
     )
 }
 
-fun StyleBuilder.alignContent(alignContent: AlignContent) {
+fun StyleScope.alignContent(alignContent: AlignContent) {
     property(
         "align-content",
         alignContent.value
     )
 }
 
-fun StyleBuilder.order(value: Int) {
+fun StyleScope.order(value: Int) {
     property("order", value)
 }
 
-fun StyleBuilder.flexGrow(value: Number) {
+fun StyleScope.flexGrow(value: Number) {
     property("flex-grow", value)
 }
 
-fun StyleBuilder.flexShrink(value: Number) {
+fun StyleScope.flexShrink(value: Number) {
     property("flex-shrink", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
-fun StyleBuilder.flexBasis(value: String) {
+fun StyleScope.flexBasis(value: String) {
     property("flex-basis", value)
 }
 
-fun StyleBuilder.flexBasis(value: CSSNumeric) {
+fun StyleScope.flexBasis(value: CSSNumeric) {
     property("flex-basis", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/flex
-fun StyleBuilder.flex(value: String) {
+fun StyleScope.flex(value: String) {
     property("flex", value)
 }
 
-fun StyleBuilder.flex(value: Int) {
+fun StyleScope.flex(value: Int) {
     property("flex", value)
 }
 
-fun StyleBuilder.flex(value: CSSNumeric) {
+fun StyleScope.flex(value: CSSNumeric) {
     property("flex", value)
 }
 
-fun StyleBuilder.flex(flexGrow: Int, flexBasis: CSSNumeric) {
+fun StyleScope.flex(flexGrow: Int, flexBasis: CSSNumeric) {
     property("flex", "${flexGrow} ${flexBasis}")
 }
 
-fun StyleBuilder.flex(flexGrow: Int, flexShrink: Int) {
+fun StyleScope.flex(flexGrow: Int, flexShrink: Int) {
     property("flex", "${flexGrow} ${flexShrink}")
 }
 
-fun StyleBuilder.flex(flexGrow: Int, flexShrink: Int, flexBasis: CSSNumeric) {
+fun StyleScope.flex(flexGrow: Int, flexShrink: Int, flexBasis: CSSNumeric) {
     property("flex", "${flexGrow} ${flexShrink} ${flexBasis}")
 }
 

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

@@ -6,174 +6,174 @@
 package org.jetbrains.compose.web.css
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
-fun StyleBuilder.gridColumn(value: String) {
+fun StyleScope.gridColumn(value: String) {
     property("grid-column", value)
 }
 
-fun StyleBuilder.gridColumn(start: String, end: String) {
+fun StyleScope.gridColumn(start: String, end: String) {
     property("grid-column", "$start / $end")
 }
 
-fun StyleBuilder.gridColumn(start: String, end: Int) {
+fun StyleScope.gridColumn(start: String, end: Int) {
     property("grid-column", "$start / $end")
 }
 
-fun StyleBuilder.gridColumn(start: Int, end: String) {
+fun StyleScope.gridColumn(start: Int, end: String) {
     property("grid-column", "$start / $end")
 }
 
-fun StyleBuilder.gridColumn(start: Int, end: Int) {
+fun StyleScope.gridColumn(start: Int, end: Int) {
     property("grid-column", "$start / $end")
 }
 
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start
-fun StyleBuilder.gridColumnStart(value: String) {
+fun StyleScope.gridColumnStart(value: String) {
     property("grid-column-start", value)
 }
 
-fun StyleBuilder.gridColumnStart(value: Int) {
+fun StyleScope.gridColumnStart(value: Int) {
     property("grid-column-start", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end
-fun StyleBuilder.gridColumnEnd(value: String) {
+fun StyleScope.gridColumnEnd(value: String) {
     property("grid-column-end", value)
 }
 
-fun StyleBuilder.gridColumnEnd(value: Int) {
+fun StyleScope.gridColumnEnd(value: Int) {
     property("grid-column-end", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
-fun StyleBuilder.gridRow(value: String) {
+fun StyleScope.gridRow(value: String) {
     property("grid-row", value)
 }
 
-fun StyleBuilder.gridRow(start: String, end: String) {
+fun StyleScope.gridRow(start: String, end: String) {
     property("grid-row", "$start / $end")
 }
 
-fun StyleBuilder.gridRow(start: String, end: Int) {
+fun StyleScope.gridRow(start: String, end: Int) {
     property("grid-row", "$start / $end")
 }
 
-fun StyleBuilder.gridRow(start: Int, end: String) {
+fun StyleScope.gridRow(start: Int, end: String) {
     property("grid-row", "$start / $end")
 }
 
-fun StyleBuilder.gridRow(start: Int, end: Int) {
+fun StyleScope.gridRow(start: Int, end: Int) {
     property("grid-row", "$start / $end")
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start
-fun StyleBuilder.gridRowStart(value: String) {
+fun StyleScope.gridRowStart(value: String) {
     property("grid-row-start", value)
 }
 
-fun StyleBuilder.gridRowStart(value: Int) {
+fun StyleScope.gridRowStart(value: Int) {
     property("grid-row-start", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end
-fun StyleBuilder.gridRowEnd(value: String) {
+fun StyleScope.gridRowEnd(value: String) {
     property("grid-row-end", value)
 }
 
-fun StyleBuilder.gridRowEnd(value: Int) {
+fun StyleScope.gridRowEnd(value: Int) {
     property("grid-row-end", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
-fun StyleBuilder.gridTemplateColumns(value: String) {
+fun StyleScope.gridTemplateColumns(value: String) {
     property("grid-template-columns", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
-fun StyleBuilder.gridAutoColumns(value: String) {
+fun StyleScope.gridAutoColumns(value: String) {
     property("grid-auto-columns", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
-fun StyleBuilder.gridAutoFlow(value: GridAutoFlow) {
+fun StyleScope.gridAutoFlow(value: GridAutoFlow) {
     property("grid-auto-flow", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
-fun StyleBuilder.gridTemplateRows(value: String) {
+fun StyleScope.gridTemplateRows(value: String) {
     property("grid-template-rows", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
-fun StyleBuilder.gridAutoRows(value: String) {
+fun StyleScope.gridAutoRows(value: String) {
     property("grid-auto-rows", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
-fun StyleBuilder.gridArea(rowStart: String) {
+fun StyleScope.gridArea(rowStart: String) {
     property("grid-area", rowStart)
 }
 
-fun StyleBuilder.gridArea(rowStart: String, columnStart: String) {
+fun StyleScope.gridArea(rowStart: String, columnStart: String) {
     property("grid-area", "$rowStart / $columnStart")
 }
 
-fun StyleBuilder.gridArea(rowStart: String, columnStart: String, rowEnd: String) {
+fun StyleScope.gridArea(rowStart: String, columnStart: String, rowEnd: String) {
     property("grid-area", "$rowStart / $columnStart / $rowEnd")
 }
 
-fun StyleBuilder.gridArea(rowStart: String, columnStart: String, rowEnd: String, columnEnd: String) {
+fun StyleScope.gridArea(rowStart: String, columnStart: String, rowEnd: String, columnEnd: String) {
     property("grid-area", "$rowStart / $columnStart / $rowEnd / $columnEnd")
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
-fun StyleBuilder.gridTemplateAreas(vararg rows: String) {
+fun StyleScope.gridTemplateAreas(vararg rows: String) {
     property("grid-template-areas", rows.joinToString(" ") { "\"$it\"" })
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
-fun StyleBuilder.justifySelf(value: String) {
+fun StyleScope.justifySelf(value: String) {
     property("justify-self", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
-fun StyleBuilder.justifyItems(value: String) {
+fun StyleScope.justifyItems(value: String) {
     property("justify-items", value)
 }
 
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
-fun StyleBuilder.alignSelf(value: String) {
+fun StyleScope.alignSelf(value: String) {
     property("align-self", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
-fun StyleBuilder.alignItems(value: String) {
+fun StyleScope.alignItems(value: String) {
     property("align-items", value)
 }
 
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
-fun StyleBuilder.placeSelf(value: String) {
+fun StyleScope.placeSelf(value: String) {
     property("place-self", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
-fun StyleBuilder.rowGap(value: CSSNumeric) {
+fun StyleScope.rowGap(value: CSSNumeric) {
     property("row-gap", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
-fun StyleBuilder.columnGap(value: CSSNumeric) {
+fun StyleScope.columnGap(value: CSSNumeric) {
     property("column-gap", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/gap
-fun StyleBuilder.gap(value: CSSNumeric) {
+fun StyleScope.gap(value: CSSNumeric) {
     property("gap", value)
 }
 
-fun StyleBuilder.gap(rowGap: CSSNumeric, columnGap: CSSNumeric) {
+fun StyleScope.gap(rowGap: CSSNumeric, columnGap: CSSNumeric) {
     property("gap", "$rowGap $columnGap")
 }
 

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

@@ -6,22 +6,22 @@
 package org.jetbrains.compose.web.css
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image
-fun StyleBuilder.listStyleImage(value: String) {
+fun StyleScope.listStyleImage(value: String) {
     property("list-style-image", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position
-fun StyleBuilder.listStylePosition(value: String) {
+fun StyleScope.listStylePosition(value: String) {
     property("list-style-position", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
-fun StyleBuilder.listStyleType(value: String) {
+fun StyleScope.listStyleType(value: String) {
     property("list-style-type", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
-fun StyleBuilder.listStyle(value: String) {
+fun StyleScope.listStyle(value: String) {
     property("list-style", value)
 }
 

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

@@ -6,28 +6,28 @@
 package org.jetbrains.compose.web.css
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/margin
-fun StyleBuilder.margin(vararg value: CSSNumeric) {
+fun StyleScope.margin(vararg value: CSSNumeric) {
     // margin hasn't Typed OM yet
     property("margin", value.joinToString(" "))
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
-fun StyleBuilder.marginBottom(value: CSSNumeric) {
+fun StyleScope.marginBottom(value: CSSNumeric) {
     property("margin-bottom", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
-fun StyleBuilder.marginLeft(value: CSSNumeric) {
+fun StyleScope.marginLeft(value: CSSNumeric) {
     property("margin-left", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
-fun StyleBuilder.marginRight(value: CSSNumeric) {
+fun StyleScope.marginRight(value: CSSNumeric) {
     property("margin-right", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
-fun StyleBuilder.marginTop(value: CSSNumeric) {
+fun StyleScope.marginTop(value: CSSNumeric) {
     property("margin-top", value)
 }
 

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

@@ -6,17 +6,17 @@
 package org.jetbrains.compose.web.css
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
-fun StyleBuilder.overflowX(value: String) {
+fun StyleScope.overflowX(value: String) {
     property("overflow-x", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
-fun StyleBuilder.overflowY(value: String) {
+fun StyleScope.overflowY(value: String) {
     property("overflow-y", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
-fun StyleBuilder.overflow(value: String) {
+fun StyleScope.overflow(value: String) {
     property("overflow", value)
 }
 

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

@@ -6,27 +6,27 @@
 package org.jetbrains.compose.web.css
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/padding
-fun StyleBuilder.padding(vararg value: CSSNumeric) {
+fun StyleScope.padding(vararg value: CSSNumeric) {
     // padding hasn't Typed OM yet
     property("padding", value.joinToString(" "))
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
-fun StyleBuilder.paddingBottom(value: CSSNumeric) {
+fun StyleScope.paddingBottom(value: CSSNumeric) {
     property("padding-bottom", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
-fun StyleBuilder.paddingLeft(value: CSSNumeric) {
+fun StyleScope.paddingLeft(value: CSSNumeric) {
     property("padding-left", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
-fun StyleBuilder.paddingRight(value: CSSNumeric) {
+fun StyleScope.paddingRight(value: CSSNumeric) {
     property("padding-right", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
-fun StyleBuilder.paddingTop(value: CSSNumeric) {
+fun StyleScope.paddingTop(value: CSSNumeric) {
     property("padding-top", value)
 }

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

@@ -7,42 +7,42 @@ package org.jetbrains.compose.web.css
 
 import org.jetbrains.compose.web.css.keywords.CSSAutoKeyword
 
-fun StyleBuilder.position(position: Position) {
+fun StyleScope.position(position: Position) {
     property(
         "position",
         position.value
     )
 }
 
-fun StyleBuilder.top(value: CSSLengthOrPercentageValue) {
+fun StyleScope.top(value: CSSLengthOrPercentageValue) {
     property("top", value)
 }
 
-fun StyleBuilder.top(value: CSSAutoKeyword) {
+fun StyleScope.top(value: CSSAutoKeyword) {
     property("top", value)
 }
 
-fun StyleBuilder.bottom(value: CSSLengthOrPercentageValue) {
+fun StyleScope.bottom(value: CSSLengthOrPercentageValue) {
     property("bottom", value)
 }
 
-fun StyleBuilder.bottom(value: CSSAutoKeyword) {
+fun StyleScope.bottom(value: CSSAutoKeyword) {
     property("bottom", value)
 }
 
-fun StyleBuilder.left(value: CSSLengthOrPercentageValue) {
+fun StyleScope.left(value: CSSLengthOrPercentageValue) {
     property("left", value)
 }
 
-fun StyleBuilder.left(value: CSSAutoKeyword) {
+fun StyleScope.left(value: CSSAutoKeyword) {
     property("left", value)
 }
 
-fun StyleBuilder.right(value: CSSLengthOrPercentageValue) {
+fun StyleScope.right(value: CSSLengthOrPercentageValue) {
     property("right", value)
 }
 
-fun StyleBuilder.right(value: CSSAutoKeyword) {
+fun StyleScope.right(value: CSSAutoKeyword) {
     property("right", value)
 }
 

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

@@ -5,15 +5,15 @@
 
 package org.jetbrains.compose.web.css
 
-fun StyleBuilder.opacity(value: Number) {
+fun StyleScope.opacity(value: Number) {
     property("opacity", value)
 }
 
-fun StyleBuilder.opacity(value: CSSSizeValue<CSSUnit.percent>) {
+fun StyleScope.opacity(value: CSSSizeValue<CSSUnit.percent>) {
     property("opacity", (value.value / 100))
 }
 
-fun StyleBuilder.display(displayStyle: DisplayStyle) {
+fun StyleScope.display(displayStyle: DisplayStyle) {
     property("display", displayStyle.value)
 }
 

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

@@ -6,87 +6,87 @@
 package org.jetbrains.compose.web.css
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
-fun StyleBuilder.fontFamily(vararg value: String) {
+fun StyleScope.fontFamily(vararg value: String) {
     property("font-family", value.joinToString(", ") { if (it.contains(" ")) "\"$it\"" else it })
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
-fun StyleBuilder.fontSize(value: CSSNumeric) {
+fun StyleScope.fontSize(value: CSSNumeric) {
     property("font-size", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
-fun StyleBuilder.fontStyle(value: String) {
+fun StyleScope.fontStyle(value: String) {
     property("font-style", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
-fun StyleBuilder.fontWeight(value: String) {
+fun StyleScope.fontWeight(value: String) {
     property("font-weight", value)
 }
 
-fun StyleBuilder.fontWeight(value: Int) {
+fun StyleScope.fontWeight(value: Int) {
     property("font-weight", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
-fun StyleBuilder.lineHeight(value: String) {
+fun StyleScope.lineHeight(value: String) {
     property("line-height", value)
 }
 
-fun StyleBuilder.lineHeight(value: CSSNumeric) {
+fun StyleScope.lineHeight(value: CSSNumeric) {
     property("line-height", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/font
-fun StyleBuilder.font(value: String) {
+fun StyleScope.font(value: String) {
     property("font", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
-fun StyleBuilder.letterSpacing(value: String) {
+fun StyleScope.letterSpacing(value: String) {
     property("letter-spacing", value)
 }
 
-fun StyleBuilder.letterSpacing(value: CSSNumeric) {
+fun StyleScope.letterSpacing(value: CSSNumeric) {
     property("letter-spacing", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
-fun StyleBuilder.textAlign(value: String) {
+fun StyleScope.textAlign(value: String) {
     property("text-align", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
-fun StyleBuilder.textDecorationColor(value: CSSColorValue) {
+fun StyleScope.textDecorationColor(value: CSSColorValue) {
     property("text-decoration-color", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style
-fun StyleBuilder.textDecorationStyle(value: String) {
+fun StyleScope.textDecorationStyle(value: String) {
     property("text-decoration-style", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness
-fun StyleBuilder.textDecorationThickness(value: String) {
+fun StyleScope.textDecorationThickness(value: String) {
     property("text-decoration-thickness", value)
 }
 
-fun StyleBuilder.textDecorationThickness(value: CSSNumeric) {
+fun StyleScope.textDecorationThickness(value: CSSNumeric) {
     property("text-decoration-thickness", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
-fun StyleBuilder.textDecorationLine(value: String) {
+fun StyleScope.textDecorationLine(value: String) {
     property("text-decoration-line", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
-fun StyleBuilder.textDecoration(value: String) {
+fun StyleScope.textDecoration(value: String) {
     property("text-decoration", value)
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
-fun StyleBuilder.whiteSpace(value: String) {
+fun StyleScope.whiteSpace(value: String) {
     property("white-space", value)
 }

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

@@ -198,7 +198,7 @@ private class TransformBuilderImplementation : TransformBuilder {
 }
 
 @ExperimentalComposeWebApi
-fun StyleBuilder.transform(transformContext: TransformBuilder.() -> Unit) {
+fun StyleScope.transform(transformContext: TransformBuilder.() -> Unit) {
     val transformBuilder = TransformBuilderImplementation()
     property("transform", transformBuilder.apply(transformContext).toString())
 }

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

@@ -6,6 +6,6 @@
 package org.jetbrains.compose.web.css
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
-fun StyleBuilder.cursor(vararg value: String) {
+fun StyleScope.cursor(vararg value: String) {
     property("cursor", value.joinToString(", "))
 }

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

@@ -13,14 +13,13 @@ import org.w3c.dom.HTMLElement
 import org.w3c.dom.css.ElementCSSInlineStyle
 import org.w3c.dom.svg.SVGElement
 
-@OptIn(ComposeCompilerApi::class)
 @Composable
 @ExplicitGroupsComposable
-private inline fun <TScope, T> ComposeDomNode(
-    noinline factory: () -> T,
+private fun <TScope, T> ComposeDomNode(
+    factory: () -> T,
     elementScope: TScope,
-    noinline attrsSkippableUpdate: @Composable SkippableUpdater<T>.() -> Unit,
-    noinline content: (@Composable TScope.() -> Unit)?
+    attrsSkippableUpdate: @Composable SkippableUpdater<T>.() -> Unit,
+    content: (@Composable TScope.() -> Unit)?
 ) {
     currentComposer.startNode()
     if (currentComposer.inserting) {

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

@@ -52,6 +52,7 @@ interface ElementScope<out TElement : Element> : DOMScope<TElement> {
     @Composable
     @NonRestartableComposable
     @Deprecated("DisposableRefEffect is deprecated, use regular DisposableEffect instead and access element via scopeElement() if needed")
+    @Suppress("DEPRECATION")
     fun DisposableRefEffect(
         effect: DisposableEffectScope.(TElement) -> DisposableEffectResult
     ) {
@@ -81,6 +82,7 @@ interface ElementScope<out TElement : Element> : DOMScope<TElement> {
     fun DomSideEffect(effect: DomEffectScope.(TElement) -> Unit)
 }
 
+@Suppress("DEPRECATION")
 abstract class ElementScopeBase<out TElement : Element> : ElementScope<TElement> {
     private var nextDisposableDomEffectKey = 0
     abstract val element: TElement
@@ -96,7 +98,6 @@ abstract class ElementScopeBase<out TElement : Element> : ElementScope<TElement>
 
     @Composable
     @NonRestartableComposable
-    @OptIn(ComposeCompilerApi::class)
     override fun DomSideEffect(
         key: Any?,
         effect: DomEffectScope.(TElement) -> Unit

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

@@ -65,6 +65,7 @@ typealias ContentBuilder<T> = @Composable ElementScope<T>.() -> Unit
 
 private open class ElementBuilderImplementation<TElement : Element>(private val tagName: String) : ElementBuilder<TElement> {
     private val el: Element by lazy { document.createElement(tagName) }
+    @Suppress("UNCHECKED_CAST")
     override fun create(): TElement = el.cloneNode() as TElement
 }
 

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

@@ -13,6 +13,7 @@ import org.w3c.dom.get
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
+@Suppress("DEPRECATION")
 class CssSelectorsTests {
 
     private object TestSimpleDescendantsSelectorStyleSheet: StyleSheet() {

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

@@ -15,6 +15,7 @@ import kotlin.test.Test
 import kotlin.test.assertContentEquals
 import kotlin.test.assertEquals
 
+@Suppress("DEPRECATION")
 class DomSideEffectTests {
 
     @Test

web/core/src/jsTest/kotlin/css/CSSDisplayTests.kt

@@ -32,7 +32,7 @@ class CSSDisplayTests {
             }
         }
 
-        enumValues.forEachIndexed { index, displayStyle ->
+        enumValues.forEach { displayStyle ->
             assertEquals(
                 displayStyle.value,
                 (nextChild()).style.display

web/core/src/jsTest/kotlin/css/PositionTests.kt

@@ -74,7 +74,7 @@ class PositionTests {
             }
         }
 
-        enumValues.forEachIndexed { index, position ->
+        enumValues.forEach { position ->
             assertEquals(
                 "position: ${position.value};",
                 nextChild().style.cssText

web/core/src/jsTest/kotlin/elements/AttributesTests.kt

@@ -353,7 +353,7 @@ class AttributesTests {
             if (flag) {
                 Div(attrs = {
                     ref { div ->
-                        (div as HTMLDivElement).innerText = "Text set using ref {}"
+                        div.innerText = "Text set using ref {}"
                         onDispose {
                             div.innerText = ""
                         }
@@ -412,7 +412,7 @@ class AttributesTests {
 
             Div(attrs = {
                 attrsCallCounter += 1
-                ref { div ->
+                ref { _ ->
                     refInitCounter += 1
                     onDispose {
                         refDisposeCounter += 1
@@ -446,6 +446,7 @@ class AttributesTests {
                     id("id$readKey")
                 }
             ) {
+            @Suppress("DEPRECATION")
                 DisposableRefEffect(readKey) {
                     val p = document.createElement("p").also { it.innerHTML = "Key=$readKey" }
                     it.appendChild(p)

web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/CodeSnippetSamples.kt

@@ -1,6 +1,7 @@
 package org.jetbrains.compose.web.sample
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import org.jetbrains.compose.web.attributes.InputType
@@ -70,8 +71,9 @@ fun CodeSnippet(code: String, language: String = "kotlin") {
                 classes(language)
             }
         ) {
-            DomSideEffect(code) {
-                it.setHighlightedCode(code)
+            DisposableEffect(code) {
+                scopeElement.setHighlightedCode(code)
+                onDispose {  }
             }
         }
     }

web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/Sample.kt

@@ -201,7 +201,7 @@ fun main() {
                 opacity(0.3)
             }
 
-            className(MyClassName) + hover() style {
+            className(MyClassName) + hover style {
                 opacity(1)
             }
 

web/svg/build.gradle.kts

@@ -35,16 +35,13 @@ kotlin {
         }
 
         val jsTest by getting {
+            languageSettings {
+                optIn("org.jetbrains.compose.web.testutils.ComposeWebExperimentalTestsApi")
+            }
             dependencies {
                 implementation(project(":test-utils"))
                 implementation(kotlin("test-js"))
             }
         }
-
-        all {
-            languageSettings {
-                useExperimentalAnnotation("org.jetbrains.compose.web.testutils.ComposeWebExperimentalTestsApi")
-            }
-        }
     }
 }

web/test-utils/build.gradle.kts

@@ -25,13 +25,7 @@ kotlin {
         val commonMain by getting {
             dependencies {
                 implementation(kotlin("stdlib-common"))
-            }
-        }
-        val jsMain by getting {
-            dependencies {
                 implementation(project(":internal-web-core-runtime"))
-                implementation(project(":web-core"))
-                implementation(kotlin("stdlib-js"))
             }
         }
         val jsTest by getting {

web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt

@@ -69,6 +69,8 @@ class TestScope : CoroutineScope by MainScope() {
      * Subsequent calls will return next child reference every time.
      */
     fun nextChild() = childrenIterator.next() as HTMLElement
+
+    @Suppress("UNCHECKED_CAST")
     fun <T> nextChild() = childrenIterator.next() as T
 
     /**
@@ -96,7 +98,7 @@ class TestScope : CoroutineScope by MainScope() {
      */
     suspend fun waitForChanges(element: HTMLElement) {
         suspendCoroutine<Unit> { continuation ->
-            val observer = MutationObserver { mutations, observer ->
+            val observer = MutationObserver { _, observer ->
                 continuation.resume(Unit)
                 observer.disconnect()
             }