Wasm support experimental

compose/base64

@@ -0,0 +1,2 @@
+AGFzbQEAAAABBQFgAAF/AhIBA2VudgZtZW1vcnkCAYACgAIDAgEABwsBB19yZW5kZXIAAApJAUcBA38DQCAAQaAGbCECQQAhAQNAIAEgAmpBAnRBgAhqQf+BgHg2AgAgAUEBaiIBQaAGRw0ACyAAQQFqIgBBkANHDQALQYAICw==
+AGFzbQEAAAABBQFgAAF/AhIBA2VudgZtZW1vcnkCAYACgAIDAgEABwsBB19yZW5kZXIAAApJAUcBA38DQCAAQaAGbCECQQAhAQNAIAEgAmpBAnRBgAhqQf+BgHg2AgAgAUEBaiIBQaAGRw0ACyAAQQFqIgBBkANHDQALQYAICw== -d

compose/frameworks/support

@@ -1 +1 @@
-Subproject commit adf295be1d7ab30f6ab1d291c7f05475b6c50937
+Subproject commit 8c92cdc4f55931657ce157212723e426a0248d24

compose/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

compose/scripts/runGradle

@@ -1,7 +1,6 @@
 #!/bin/bash
 
 cd "$(dirname "$0")"
-
 pushd ..
 ./gradlew $COMPOSE_DEFAULT_GRADLE_ARGS "$@" || exit 1
 popd

examples/web-compose-bird/build.gradle.kts

@@ -2,13 +2,14 @@ import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
 
 plugins {
     kotlin("multiplatform")
-    id("org.jetbrains.compose")
+    //id("org.jetbrains.compose")
 }
 group = "com.theapache64.composebird"
 version = "1.0.0-alpha01"
 
 // Add maven repositories
 repositories {
+    mavenLocal()
     mavenCentral()
     maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
     google()
@@ -19,11 +20,27 @@ kotlin {
         browser()
         binaries.executable()
     }
+    wasm {
+        d8()
+        binaries.executable()
+    }
     sourceSets {
         val jsMain by getting {
             dependencies {
-                implementation(compose.web.core)
+//                implementation(compose.web.core)
-                implementation(compose.runtime)
+//                implementation(compose.runtime)
+                implementation("org.jetbrains.compose.web:web-core-js:1.2.0-SNAPSHOT")
+                implementation("org.jetbrains.compose.web:internal-web-core-runtime-js:1.2.0-SNAPSHOT")
+                implementation("org.jetbrains.compose.runtime:runtime-js:1.3.0-rc01")
+            }
+        }
+        val wasmMain by getting {
+            dependencies {
+//                implementation(compose.web.core)
+//                implementation(compose.runtime)
+                implementation("org.jetbrains.compose.web:web-core-wasm:1.2.0-SNAPSHOT")
+                implementation("org.jetbrains.compose.web:internal-web-core-runtime-wasm:1.2.0-SNAPSHOT")
+                implementation("org.jetbrains.compose.runtime:runtime-wasm:1.3.0-rc01")
             }
         }
     }
@@ -36,3 +53,11 @@ afterEvaluate {
         versions.webpackCli.version = "4.10.0"
     }
 }
+
+project.tasks.withType<org.jetbrains.kotlin.gradle.dsl.KotlinJsCompile>().configureEach {
+    kotlinOptions.freeCompilerArgs += listOf(
+        "-Xklib-enable-signature-clash-checks=false",
+        "-Xplugin=${project.properties["compose.plugin.path"]}",
+        "-Xir-dce"
+    )
+}

examples/web-compose-bird/gradle.properties

@@ -1,3 +1,4 @@
 kotlin.code.style=official
-kotlin.version=1.7.10
+kotlin.version=1.8.255-SNAPSHOT
 compose.version=1.2.0
+compose.plugin.path=/Users/Igor.Yakovlev/.m2/repository/org/jetbrains/compose/compiler/compiler/0.1.0-SNAPSHOT/compiler-0.1.0-SNAPSHOT.jar

examples/web-compose-bird/settings.gradle.kts

@@ -1,5 +1,6 @@
 pluginManagement {
     repositories {
+        mavenLocal()
         gradlePluginPortal()
         mavenCentral()
         maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
@@ -7,7 +8,7 @@ pluginManagement {
 
     plugins {
         kotlin("multiplatform").version(extra["kotlin.version"] as String)
-        id("org.jetbrains.compose").version(extra["compose.version"] as String)
+        //id("org.jetbrains.compose").version(extra["compose.version"] as String)
     }
 }
 

examples/web-compose-bird/src/wasmMain/kotlin/core/ComposeBirdGame.kt

@@ -0,0 +1,159 @@
+package core
+
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableStateOf
+import data.GameFrame
+import data.Tube
+
+@JsFun("() => new Date().getTime()")
+external fun getTime(): Double
+
+/**
+ * Game logic
+ */
+class ComposeBirdGame : Game {
+
+    companion object {
+        const val COLUMNS = 15
+        const val ROWS = 9
+        const val BIRD_COLUMN = 1
+        private const val TUBES_START_FROM = (COLUMNS * 0.75).toInt()
+        const val TOTAL_TUBES = 10
+        private const val TUBE_HORIZONTAL_DISTANCE = 3
+        private const val TUBE_VERTICAL_DISTANCE = 3
+        private const val TUBE_WEIGHT = 500
+        private const val BIRD_WEIGHT = 300
+    }
+
+    private val tubeGapRange = TUBE_VERTICAL_DISTANCE until ROWS
+    private var tubeLastSteppedAt = 0.0
+    private var birdLastSteppedAt = 0.0
+    private var shouldMoveBirdUp = false
+
+    private val _gameFrame: MutableState<GameFrame> by lazy {
+        mutableStateOf(
+            // First frame
+            GameFrame(
+                birdPos = ROWS / 2,
+                tubes = buildLevel(),
+                isGameOver = false,
+                isGameWon = false,
+                score = 0
+            )
+        )
+    }
+
+    /**
+     * To build a random level
+     */
+    private fun buildLevel(): List<Tube> {
+        return mutableListOf<Tube>().apply {
+            var tubesAdded = 0
+            var tubePosition = 0
+            while (tubesAdded < TOTAL_TUBES) {
+                if (tubePosition > TUBES_START_FROM && tubePosition % TUBE_HORIZONTAL_DISTANCE == 0) { // To give space to each tube
+                    add(
+                        Tube(
+                            tubePosition,
+                            buildRandomTube()
+                        )
+                    )
+                    tubesAdded++
+                }
+                tubePosition++
+            }
+        }
+    }
+
+
+    /**
+     * To build a random vertical tube/pipe
+     */
+    private fun buildRandomTube(): List<Boolean> {
+        // creating a full tube
+        val tube = mutableListOf<Boolean>().apply {
+            repeat(ROWS) {
+                add(true)
+            }
+        }
+
+        // Adding gaps in random middle positions to make it two tubes.
+        val gap1 = tubeGapRange.random()
+        repeat(TUBE_VERTICAL_DISTANCE) { index ->
+            tube[gap1 - index] = false
+        }
+
+        return tube
+    }
+
+    override val gameFrame: State<GameFrame> = _gameFrame
+
+    override fun step() {
+        update {
+            val now = getTime()
+
+            // Stepping tube
+            val tubeDiff = now - tubeLastSteppedAt
+            val newTubes = if (tubeDiff > TUBE_WEIGHT) {
+                tubeLastSteppedAt = now
+                tubes.map {
+                    it.copy(position = it.position - 1)
+                }
+            } else {
+                tubes
+            }
+
+            // Stepping bird position
+            val birdDiff = now - birdLastSteppedAt
+            val newBirdPos = when {
+                shouldMoveBirdUp -> {
+                    birdLastSteppedAt = now
+                    shouldMoveBirdUp = false
+                    birdPos - 1 // move up
+                }
+                birdDiff > BIRD_WEIGHT -> {
+                    birdLastSteppedAt = now
+                    birdPos + 1 // move down
+                }
+                else -> {
+                    birdPos
+                }
+            }
+
+            val newScore = newTubes.filter { it.position < BIRD_COLUMN }.size // All passed tube
+            val newIsGameWon = newScore >= TOTAL_TUBES // If all tubes passed
+
+            // Checking if bird gone out
+            val newIsGameOver = if (newBirdPos < 0 || newBirdPos >= ROWS || isCollidedWithTube(newBirdPos, tubes)) {
+                true
+            } else {
+                isGameOver
+            }
+
+            copy(
+                isGameOver = newIsGameOver,
+                tubes = newTubes,
+                birdPos = newBirdPos,
+                score = newScore,
+                isGameWon = newIsGameWon
+            )
+        }
+    }
+
+    /**
+     * To check if the bird collided with the tube (collision-detection)
+     */
+    private fun isCollidedWithTube(newBirdPos: Int, tubes: List<Tube>): Boolean {
+        val birdTube = tubes.find { it.position == BIRD_COLUMN }
+        return birdTube?.coordinates?.get(newBirdPos) ?: false
+    }
+
+    override fun moveBirdUp() {
+        shouldMoveBirdUp = true
+    }
+
+    private inline fun update(func: GameFrame.() -> GameFrame) {
+        _gameFrame.value = _gameFrame.value.func()
+    }
+}

examples/web-compose-bird/src/wasmMain/kotlin/core/Game.kt

@@ -0,0 +1,13 @@
+package core
+
+import androidx.compose.runtime.State
+import data.GameFrame
+
+/**
+ * A generic game interface
+ */
+interface Game {
+    val gameFrame: State<GameFrame>
+    fun step()
+    fun moveBirdUp()
+}

examples/web-compose-bird/src/wasmMain/kotlin/data/GameFrame.kt

@@ -0,0 +1,9 @@
+package data
+
+data class GameFrame(
+    val birdPos: Int,
+    val tubes: List<Tube>,
+    val isGameOver: Boolean,
+    val isGameWon : Boolean,
+    val score: Int,
+)

examples/web-compose-bird/src/wasmMain/kotlin/data/Tube.kt

@@ -0,0 +1,6 @@
+package data
+
+data class Tube(
+    var position: Int,
+    val coordinates: List<Boolean>
+)

examples/web-compose-bird/src/wasmMain/kotlin/main.kt

@@ -0,0 +1,136 @@
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import core.ComposeBirdGame
+import core.Game
+import data.GameFrame
+import kotlinx.browser.document
+import kotlinx.browser.window
+import kotlinx.coroutines.delay
+import org.jetbrains.compose.web.attributes.InputType
+import org.jetbrains.compose.web.attributes.disabled
+import org.jetbrains.compose.web.css.marginTop
+import org.jetbrains.compose.web.css.px
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.renderComposable
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.events.KeyboardEvent
+import org.w3c.dom.get
+
+fun main() {
+
+    val game: Game = ComposeBirdGame()
+
+    val body = document.getElementsByTagName("body")[0] as HTMLElement
+
+    // Enabling keyboard control
+    body.addEventListener("keyup", {
+        when ((it as KeyboardEvent).keyCode) {
+            38 -> { // Arrow up
+                game.moveBirdUp()
+            }
+        }
+    })
+
+    renderComposable(rootElementId = "root") {
+
+        Div(
+            attrs = {
+                style {
+                    property("text-align", "center")
+                }
+            }
+        ) {
+
+            // The current frame!
+            val gameFrame by game.gameFrame
+
+            // Igniting the game loop
+            LaunchedEffect(Unit) {
+                while (!gameFrame.isGameOver) {
+                    delay(60)
+                    game.step()
+                }
+            }
+
+            Header(gameFrame)
+
+            Div(
+                attrs = {
+                    style {
+                        marginTop(30.px)
+                    }
+                }
+            ) {
+                if (gameFrame.isGameOver || gameFrame.isGameWon) {
+                    GameResult(gameFrame)
+                } else {
+                    // Play area
+                    repeat(ComposeBirdGame.ROWS) { rowIndex ->
+                        Div {
+                            repeat(ComposeBirdGame.COLUMNS) { columnIndex ->
+                                Input(
+                                    InputType.Radio,
+
+                                    attrs = {
+                                        val tube = gameFrame.tubes.find { it.position == columnIndex }
+                                        val isTube = tube?.coordinates?.get(rowIndex) ?: false
+                                        val isBird =
+                                            !isTube && columnIndex == ComposeBirdGame.BIRD_COLUMN && rowIndex == gameFrame.birdPos
+
+                                        // if it's either a tube node or bird, check it
+                                        checked(isTube || isBird)
+
+                                        if (!isBird) {
+                                            // if it's a bird, enable it. (to change to blue color)
+                                            disabled()
+                                        }
+
+
+                                    }
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+
+    }
+}
+
+@Composable
+private fun Header(gameFrame: GameFrame) {
+    // Game title
+    H1 {
+        Text(value = "🐦 Wasm Bird!")
+    }
+
+    // Game score
+    Text(value = "Your Score: ${gameFrame.score} || Top Score: ${ComposeBirdGame.TOTAL_TUBES}")
+}
+
+@Composable
+private fun GameResult(gameFrame: GameFrame) {
+    // Game Status
+    H2 {
+        if (gameFrame.isGameWon) {
+            Text("🚀 Wasm the game! 🚀")
+        } else {
+            // core.Game over
+            Text("💀 Wasm Over 💀")
+        }
+    }
+
+    // Try Again
+    Button(
+        attrs = {
+            onClick {
+                window.location.reload()
+            }
+        }
+    ) {
+        Text("Try Again!")
+    }
+}

examples/web-compose-bird/src/wasmMain/resources/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>compose-bird</title>
+    <style>
+        input[type=radio]{
+            width:25px;
+            height:25px;
+        }
+    </style>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="web-compose-bird-wasm.mjs"></script>
+</body>
+</html>

gradle-plugins/compose/src/main/kotlin/org/jetbrains/compose/ComposeCompilerCompatability.kt

@@ -9,6 +9,10 @@ internal object ComposeCompilerCompatability {
             "1.3.2",
             unsupportedPlatforms = setOf(KotlinPlatformType.js)
         )
+        "1.8.255-SNAPSHOT" -> ComposeCompilerVersion(
+            "1.3.2",
+            //unsupportedPlatforms = setOf(KotlinPlatformType.js)
+        )
         else -> null
     }
 }

gradle-plugins/compose/src/main/kotlin/org/jetbrains/compose/internal/ComposeCompilerArtifactProvider.kt

@@ -19,12 +19,12 @@ internal class ComposeCompilerArtifactProvider(
     private val customPluginString: () -> String?
 ) {
     fun checkTargetSupported(target: KotlinTarget) {
-        require(!unsupportedPlatforms.contains(target.platformType)) {
+//        require(!unsupportedPlatforms.contains(target.platformType)) {
-            "This version of Compose Multiplatform doesn't support Kotlin " +
+//            "This version of Compose Multiplatform doesn't support Kotlin " +
-                "$kotlinVersion for ${target.platformType} target. " +
+//                "$kotlinVersion for ${target.platformType} target. " +
-                "Please see $KOTLIN_COMPATABILITY_LINK " +
+//                "Please see $KOTLIN_COMPATABILITY_LINK " +
-                "to know the latest supported version of Kotlin."
+//                "to know the latest supported version of Kotlin."
-        }
+//        }
     }
 
     private val autoCompilerVersion by lazy {

gradle-plugins/gradle.properties

@@ -6,15 +6,15 @@ compose.version=1.2.0
 # The latest version of Compose Compiler used by Gradle plugin. Used only in tests.
 compose.tests.compiler.version=1.3.2
 # The latest version of Kotlin compatible with compose.tests.compiler.version. Used only in tests.
-compose.tests.compiler.compatible.kotlin.version=1.7.20
+compose.tests.compiler.compatible.kotlin.version=1.8.255-SNAPSHOT
 # The latest version of Kotlin compatible with compose.tests.compiler.version for JS target. Used only on CI.
-compose.tests.js.compiler.compatible.kotlin.version=1.7.10
+compose.tests.js.compiler.compatible.kotlin.version=1.8.255-SNAPSHOT
 # Version of Compose Compiler published by Google.
 # Used to check if our plugin is compatible with it.
 # https://developer.android.com/jetpack/androidx/releases/compose-kotlin
 compose.tests.androidx.compiler.version=1.1.1
-compose.tests.androidx.compiler.compatible.kotlin.version=1.6.10
+compose.tests.androidx.compiler.compatible.kotlin.version=1.8.255-SNAPSHOT
 
 # A version of Gradle plugin, that will be published,
 # unless overridden by COMPOSE_GRADLE_PLUGIN_VERSION env var.
-deploy.version=0.1.0-SNAPSHOT
+deploy.version=1.3.2

templates/web-template/build.gradle.kts

@@ -1,24 +1,36 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
 
+buildscript {
+    repositories {
+        mavenLocal()
+        gradlePluginPortal()
+    }
+}
+
 plugins {
     kotlin("multiplatform")
     id("org.jetbrains.compose")
 }
 
 repositories {
+    mavenLocal()
     mavenCentral()
     maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
     google()
 }
 
 kotlin {
-    js(IR) {
+//    js(IR) {
+//        browser()
+//        binaries.executable()
+//    }
+    wasm {
         browser()
         binaries.executable()
     }
     sourceSets {
-        val jsMain by getting {
+        val wasmMain by getting {
             kotlin.srcDir("src/main/kotlin")
             resources.srcDir("src/main/resources")
 

web/benchmark-core/build.gradle.kts

@@ -1,6 +1,6 @@
 plugins {
     id("org.jetbrains.kotlin.multiplatform")
-    id("org.jetbrains.compose")
+    //id("org.jetbrains.compose")
 }
 
 
@@ -20,7 +20,8 @@ kotlin {
     sourceSets {
         val commonMain by getting {
             dependencies {
-                implementation(compose.runtime)
+                //implementation(compose.runtime)
+                implementation("org.jetbrains.compose.runtime:runtime-js:1.3.0-rc01")
                 implementation(project(":web-core"))
                 implementation(kotlin("stdlib-common"))
             }
@@ -28,6 +29,9 @@ kotlin {
 
         val jsMain by getting {
             dependencies {
+                implementation("org.jetbrains.compose.web:web-core-js:1.2.0-SNAPSHOT")
+                implementation("org.jetbrains.compose.web:internal-web-core-runtime-js:1.2.0-SNAPSHOT")
+                implementation("org.jetbrains.compose.runtime:runtime-js:1.3.0-rc01")
                 implementation(kotlin("stdlib-js"))
             }
         }
@@ -71,3 +75,10 @@ val printBenchmarkResults by tasks.registering {
 }
 
 tasks.named("jsTest") { finalizedBy(printBenchmarkResults) }
+
+project.tasks.withType<org.jetbrains.kotlin.gradle.dsl.KotlinJsCompile>().configureEach {
+    kotlinOptions.freeCompilerArgs += listOf(
+        "-Xklib-enable-signature-clash-checks=false",
+        "-Xplugin=${project.properties["compose.plugin.path"]}"
+    )
+}

web/build.gradle.kts

@@ -2,13 +2,13 @@ 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
+import org.jetbrains.kotlin.gradle.plugin.mpp.pm20.util.targets
 
 plugins {
     kotlin("multiplatform") apply false
 }
 
-val COMPOSE_WEB_VERSION: String = extra["compose.version"] as String
+val COMPOSE_WEB_VERSION: String = (extra["compose.version"] as String) + "-SNAPSHOT"
 val COMPOSE_REPO_USERNAME: String? by project
 val COMPOSE_REPO_KEY: String? by project
 val COMPOSE_WEB_BUILD_WITH_SAMPLES = project.property("compose.web.buildSamples")!!.toString().toBoolean()
@@ -147,19 +147,19 @@ subprojects {
     }
 
     repositories {
-        gradlePluginPortal()
         mavenLocal()
-        mavenCentral()
+        //gradlePluginPortal()
-        maven {
+        //mavenCentral()
-            url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+//        maven {
-        }
+//            url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev")
-        maven {
+//        }
-            url = uri("https://maven.pkg.jetbrains.space/public/p/kotlinx-coroutines/maven")
+//        maven {
-        }
+//            url = uri("https://maven.pkg.jetbrains.space/public/p/kotlinx-coroutines/maven")
-        maven {
+//        }
-            url = uri("https://packages.jetbrains.team/maven/p/ui/dev")
+//        maven {
-        }
+//            url = uri("https://packages.jetbrains.team/maven/p/ui/dev")
-        google()
+//        }
+//        google()
     }
 
     tasks.withType<AbstractTestTask> {

web/buildSrc/build.gradle.kts

@@ -1,6 +1,7 @@
 repositories {
     gradlePluginPortal()
     mavenCentral()
+    mavenLocal()
     maven {
         url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev")
     }

web/buildSrc/gradle.properties

@@ -1 +1 @@
-kotlin.version=1.7.10
+kotlin.version=1.8.255-SNAPSHOT

web/buildSrc/settings.gradle.kts

@@ -2,6 +2,7 @@ pluginManagement {
     val kotlinVersion: String = settings.extra["kotlin.version"] as String
 
     repositories {
+        mavenLocal()
         gradlePluginPortal()
         mavenCentral()
         maven {

web/compose-compiler-integration/build.gradle.kts

@@ -2,7 +2,7 @@ import org.jetbrains.compose.gradle.standardConf
 
 plugins {
     kotlin("multiplatform")
-    id("org.jetbrains.compose")
+    //id("org.jetbrains.compose")
 }
 
 
@@ -22,7 +22,8 @@ kotlin {
         val jsMain by getting {
             dependencies {
                 implementation(kotlin("stdlib-js"))
-                implementation(compose.runtime)
+                //implementation(compose.runtime)
+                implementation("org.jetbrains.compose.runtime:runtime-js:1.3.0-rc01")
                 implementation(project(":web-core"))
             }
         }

web/compose-compiler-integration/main-template/build.gradle.kts

@@ -1,6 +1,6 @@
 plugins {
     kotlin("multiplatform")
-    id("org.jetbrains.compose")
+    //id("org.jetbrains.compose")
 }
 
 repositories {

web/compose-compiler-integration/main-template/lib/build.gradle.kts

@@ -1,6 +1,6 @@
 plugins {
     kotlin("multiplatform")// version "1.5.10"
-    id("org.jetbrains.compose")// version (System.getenv("COMPOSE_INTEGRATION_VERSION") ?: "0.0.0-SNASPHOT")
+    //id("org.jetbrains.compose")// version (System.getenv("COMPOSE_INTEGRATION_VERSION") ?: "0.0.0-SNASPHOT")
 }
 
 repositories {

web/core/build.gradle.kts

@@ -2,12 +2,14 @@ import org.jetbrains.compose.gradle.standardConf
 
 plugins {
     kotlin("multiplatform")
-    id("org.jetbrains.compose")
+    ////id("org.jetbrains.compose")
 }
 
 
 kotlin {
-    jvm()
+//    jvm {
+//
+//    }
     js(IR) {
         browser() {
             testTask {
@@ -18,38 +20,74 @@ kotlin {
         }
         binaries.executable()
     }
+    wasm {
+        browser() {
+            testTask {
+                useKarma {
+                    standardConf()
+                }
+            }
+        }
+    }
 
     sourceSets {
         val commonMain by getting {
             dependencies {
-                implementation(compose.runtime)
+                implementation("org.jetbrains.compose.runtime:runtime:1.3.0-rc01")
+                //implementation(compose.runtime)
             }
         }
 
-        val jsMain by getting {
+        val commonTest by getting {
+            dependencies {
+                implementation(project(":test-utils"))
+                implementation(kotlin("test"))
+            }
+        }
+
+        val jsWasmMain by creating {
+            dependsOn(commonMain)
             languageSettings {
                 optIn("org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi")
             }
             dependencies {
                 implementation(project(":internal-web-core-runtime"))
+                // https://mvnrepository.com/artifact/org.jetbrains.kotlin/kotlin-reflect
             }
         }
 
-        val jsTest by getting {
+        val jsMain by getting {
             languageSettings {
                 optIn("org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi")
-                optIn("org.jetbrains.compose.web.testutils.ComposeWebExperimentalTestsApi")
             }
-            dependencies {
+            dependsOn(jsWasmMain)
-                implementation(project(":test-utils"))
+        }
-                implementation(kotlin("test-js"))
+
+        val wasmMain by getting {
+            languageSettings {
+                optIn("org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi")
             }
+            dependsOn(jsWasmMain)
         }
 
-        val jvmMain by getting {
+        val jsTest by getting {
-            dependencies {
+            languageSettings {
-                implementation(compose.desktop.currentOs)
+                optIn("org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi")
+                optIn("org.jetbrains.compose.web.testutils.ComposeWebExperimentalTestsApi")
             }
         }
+
+//        val jvmMain by getting {
+//            dependencies {
+//                implementation("org.jetbrains.compose.desktop:desktop-jvm-macos-arm64")
+//            }
+//        }
+    }
 }
+
+project.tasks.withType<org.jetbrains.kotlin.gradle.dsl.KotlinJsCompile>().configureEach {
+    kotlinOptions.freeCompilerArgs += listOf(
+        "-Xklib-enable-signature-clash-checks=false",
+        "-Xplugin=${project.properties["compose.plugin.path"]}"
+    )
 }

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

@@ -3,10 +3,6 @@
  * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
  */
 
-@file:Suppress("NOTHING_TO_INLINE")
-
 package org.jetbrains.compose.web.css
 
-external interface CSSKeywordValue : CSSStyleValue
+actual external interface CSSKeywordValue : CSSStyleValue
-
-inline fun CSSKeywordValue(value: String): CSSKeywordValue = CSSStyleValue(value).unsafeCast<CSSKeywordValue>()

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

@@ -1,71 +1,3 @@
-/*
- * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
- * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
- */
-
 package org.jetbrains.compose.web.css
 
-operator fun <T: CSSUnit> CSSSizeValue<T>.times(num: Number): CSSSizeValue<T> = CSSUnitValueTyped(value * num.toFloat(), unit)
+actual external interface CSSCalcOperation<T : CSSUnit>: CSSNumericValue<T>
-operator fun <T: CSSUnit> Number.times(unit: CSSSizeValue<T>): CSSSizeValue<T> = CSSUnitValueTyped(unit.value * toFloat(), unit.unit)
-
-operator fun <T: CSSUnit> CSSSizeValue<T>.div(num: Number): CSSSizeValue<T> = CSSUnitValueTyped(value / num.toFloat(), unit)
-
-operator fun <T: CSSUnit> CSSSizeValue<T>.plus(b: CSSSizeValue<T>): CSSSizeValue<T> = CSSUnitValueTyped(value + b.value, unit)
-operator fun <T: CSSUnit> CSSSizeValue<T>.minus(b: CSSSizeValue<T>): CSSSizeValue<T> = CSSUnitValueTyped(value - b.value, unit)
-operator fun <T: CSSUnit> CSSSizeValue<T>.unaryMinus(): CSSSizeValue<T> = CSSUnitValueTyped(-value, unit)
-operator fun <T: CSSUnit> CSSSizeValue<T>.unaryPlus(): CSSSizeValue<T> = CSSUnitValueTyped(value, unit)
-
-external interface CSSCalcOperation<T : CSSUnit>: CSSNumericValue<T>
-
-data class CSSCalcValue<T : CSSUnit>(
-    var op: CSSCalcOperation<out T>
-) : CSSCalcOperation<T> {
-    override fun toString(): String = "calc$op"
-}
-
-private data class CSSPlus<T : CSSUnit>(
-    var l: CSSNumericValue<out T>,
-    var r: CSSNumericValue<out T>
-) : CSSCalcOperation<T> {
-    override fun toString(): String = "($l + $r)"
-}
-
-private data class CSSMinus<T : CSSUnit>(
-    var l: CSSNumericValue<out T>,
-    var r: CSSNumericValue<out T>
-) : CSSCalcOperation<T> {
-    override fun toString(): String = "($l - $r)"
-}
-
-private data class CSSTimes<T : CSSUnit>(
-    var l: CSSNumericValue<out T>,
-    var r: Number,
-    val left: Boolean = true
-) : CSSCalcOperation<T> {
-    override fun toString(): String = if (left) "($l * $r)" else "($r * $l)"
-}
-
-private data class CSSDiv<T : CSSUnit>(
-    var l: CSSNumericValue<out T>,
-    var r: Number
-) : CSSCalcOperation<T> {
-    override fun toString(): String = "($l / $r)"
-}
-
-operator fun <T: CSSUnit> CSSNumericValue<out T>.plus(b: CSSNumericValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSPlus(this, b))
-operator fun <T: CSSUnit> CSSCalcValue<out T>.plus(b: CSSNumericValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSPlus(this.op, b))
-operator fun <T: CSSUnit> CSSNumericValue<out T>.plus(b: CSSCalcValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSPlus(this, b.op))
-
-operator fun <T: CSSUnit> CSSNumericValue<out T>.minus(b: CSSNumericValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSMinus(this, b))
-operator fun <T: CSSUnit> CSSCalcValue<out T>.minus(b: CSSNumericValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSMinus(this.op, b))
-operator fun <T: CSSUnit> CSSNumericValue<out T>.minus(b: CSSCalcValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSMinus(this, b.op))
-
-operator fun <T: CSSUnit> CSSCalcValue<out T>.times(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSTimes(this.op, b))
-operator fun <T: CSSUnit> Number.times(b: CSSCalcValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSTimes(b.op, this, false))
-
-operator fun <T: CSSUnit> CSSNumericValue<T>.div(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSDiv(this, b))
-operator fun <T: CSSUnit> CSSCalcValue<out T>.div(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSDiv(this.op, b))
-
-operator fun <T: CSSUnit> CSSNumericValue<T>.times(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSTimes(this, b))
-operator fun <T: CSSUnit> Number.times(b: CSSNumericValue<T>): CSSCalcValue<T> = CSSCalcValue(CSSTimes(b, this, false))
-

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

@@ -1,249 +1,8 @@
-@file:Suppress("Unused", "NOTHING_TO_INLINE", "NESTED_CLASS_IN_EXTERNAL_INTERFACE", "INLINE_EXTERNAL_DECLARATION", "WRONG_BODY_OF_EXTERNAL_DECLARATION", "NESTED_EXTERNAL_DECLARATION", "ClassName")
-
 package org.jetbrains.compose.web.css
 
-external interface CSSNumericValue<T : CSSUnit> : StylePropertyValue, CSSVariableValueAs<CSSNumericValue<T>>
+actual external interface CSSNumericValue<T : CSSUnit> : StylePropertyValue, CSSVariableValueAs<CSSNumericValue<T>>
-
-external interface CSSSizeValue<T : CSSUnit> : CSSNumericValue<T> {
-    val value: Float
-    val unit: T
-}
 
-data class CSSUnitValueTyped<T : CSSUnit>(
+actual external interface CSSSizeValue<T : CSSUnit> : CSSNumericValue<T> {
-    override val value: Float,
+    actual val value: Float
-    override val unit: T
+    actual val unit: T
-) : CSSSizeValue<T> {
-    override fun toString(): String = "$value$unit"
 }
-
-interface CSSUnitLengthOrPercentage: CSSUnit
-interface CSSUnitPercentage: CSSUnitLengthOrPercentage
-interface CSSUnitLength: CSSUnitLengthOrPercentage
-interface CSSUnitRel : CSSUnitLength
-interface CSSUnitAbs: CSSUnitLength
-interface CSSUnitAngle: CSSUnit
-interface CSSUnitTime: CSSUnit
-interface CSSUnitFrequency: CSSUnit
-interface CSSUnitResolution: CSSUnit
-interface CSSUnitFlex: CSSUnit
-
-typealias CSSAngleValue = CSSSizeValue<out CSSUnitAngle>
-typealias CSSLengthOrPercentageValue = CSSSizeValue<out CSSUnitLengthOrPercentage>
-typealias CSSLengthValue = CSSSizeValue<out CSSUnitLength>
-typealias CSSPercentageValue = CSSSizeValue<out CSSUnitPercentage>
-typealias CSSUnitValue = CSSSizeValue<out CSSUnit>
-typealias CSSNumeric = CSSNumericValue<out CSSUnit>
-typealias CSSpxValue = CSSSizeValue<CSSUnit.px>
-
-// fake interfaces to distinguish units
-interface CSSUnit {
-    interface percent: CSSUnitPercentage
-
-    interface em: CSSUnitRel
-
-    interface ex: CSSUnitRel
-
-    interface ch: CSSUnitRel
-
-    interface ic: CSSUnitRel
-
-    interface rem: CSSUnitRel
-
-    interface lh: CSSUnitRel
-
-    interface rlh: CSSUnitRel
-
-    interface vw: CSSUnitRel
-
-    interface vh: CSSUnitRel
-
-    interface vi: CSSUnitRel
-
-    interface vb: CSSUnitRel
-
-    interface vmin: CSSUnitRel
-
-    interface vmax: CSSUnitRel
-
-    interface cm: CSSUnitRel
-
-    interface mm: CSSUnitRel
-
-    interface Q: CSSUnitRel
-
-    interface pt: CSSUnitAbs
-
-    interface pc: CSSUnitAbs
-
-    interface px: CSSUnitAbs
-
-    interface deg: CSSUnitAngle
-
-    interface grad: CSSUnitAngle
-
-    interface rad: CSSUnitAngle
-
-    interface turn: CSSUnitAngle
-
-    interface s: CSSUnitTime
-
-    interface ms: CSSUnitTime
-
-    interface Hz: CSSUnitFrequency
-
-    interface kHz: CSSUnitFrequency
-
-    interface dpi: CSSUnitResolution
-
-    interface dpcm: CSSUnitResolution
-
-    interface dppx: CSSUnitResolution
-
-    interface fr: CSSUnitFlex
-
-    interface number: CSSUnit
-
-    companion object {
-        inline val percent get() = "%".unsafeCast<percent>()
-
-        inline val em get() = "em".unsafeCast<em>()
-
-        inline val ex get() = "ex".unsafeCast<ex>()
-
-        inline val ch get() = "ch".unsafeCast<ch>()
-
-        inline val ic get() = "ic".unsafeCast<ic>()
-
-        inline val rem get() = "rem".unsafeCast<rem>()
-
-        inline val lh get() = "lh".unsafeCast<lh>()
-
-        inline val rlh get() = "rlh".unsafeCast<rlh>()
-
-        inline val vw get() = "vw".unsafeCast<vw>()
-
-        inline val vh get() = "vh".unsafeCast<vh>()
-
-        inline val vi get() = "vi".unsafeCast<vi>()
-
-        inline val vb get() = "vb".unsafeCast<vb>()
-
-        inline val vmin get() = "vmin".unsafeCast<vmin>()
-
-        inline val vmax get() = "vmax".unsafeCast<vmax>()
-
-        inline val cm get() = "cm".unsafeCast<cm>()
-
-        inline val mm get() = "mm".unsafeCast<mm>()
-
-        inline val Q get() = "Q".unsafeCast<Q>()
-
-        inline val pt get() = "pt".unsafeCast<pt>()
-
-        inline val pc get() = "pc".unsafeCast<pc>()
-
-        inline val px get() = "px".unsafeCast<px>()
-
-        inline val deg get() = "deg".unsafeCast<deg>()
-
-        inline val grad get() = "grad".unsafeCast<grad>()
-
-        inline val rad get() = "rad".unsafeCast<rad>()
-
-        inline val turn get() = "turn".unsafeCast<turn>()
-
-        inline val s get() = "s".unsafeCast<s>()
-
-        inline val ms get() = "ms".unsafeCast<ms>()
-
-        inline val Hz get() = "Hz".unsafeCast<Hz>()
-
-        inline val kHz get() = "kHz".unsafeCast<kHz>()
-
-        inline val dpi get() = "dpi".unsafeCast<dpi>()
-
-        inline val dpcm get() = "dpcm".unsafeCast<dpcm>()
-
-        inline val dppx get() = "dppx".unsafeCast<dppx>()
-
-        inline val fr get() = "fr".unsafeCast<fr>()
-
-        inline val number get() = "number".unsafeCast<number>()
-    }
-}
-
-
-val Number.number
-    get(): CSSSizeValue<CSSUnit.number> = CSSUnitValueTyped(this.toFloat(), CSSUnit.number)
-
-val Number.percent
-    get() : CSSSizeValue<CSSUnit.percent> = CSSUnitValueTyped(this.toFloat(), CSSUnit.percent)
-
-val Number.em
-    get() : CSSSizeValue<CSSUnit.em> = CSSUnitValueTyped(this.toFloat(), CSSUnit.em)
-
-val Number.ex
-    get(): CSSSizeValue<CSSUnit.ex> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ex)
-
-val Number.ch
-    get(): CSSSizeValue<CSSUnit.ch> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ch)
-
-val Number.cssRem
-    get(): CSSSizeValue<CSSUnit.rem> = CSSUnitValueTyped(this.toFloat(), CSSUnit.rem)
-
-val Number.vw
-    get(): CSSSizeValue<CSSUnit.vw> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vw)
-
-val Number.vh
-    get(): CSSSizeValue<CSSUnit.vh> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vh)
-
-val Number.vmin
-    get(): CSSSizeValue<CSSUnit.vmin> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vmin)
-
-val Number.vmax
-    get(): CSSSizeValue<CSSUnit.vmax> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vmax)
-
-val Number.cm
-    get(): CSSSizeValue<CSSUnit.cm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.cm)
-
-val Number.mm
-    get(): CSSSizeValue<CSSUnit.mm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.mm)
-
-val Number.Q
-    get() : CSSSizeValue<CSSUnit.Q> = CSSUnitValueTyped(this.toFloat(), CSSUnit.Q)
-
-val Number.pt
-    get(): CSSSizeValue<CSSUnit.pt> = CSSUnitValueTyped(this.toFloat(), CSSUnit.pt)
-val Number.pc
-    get(): CSSSizeValue<CSSUnit.pc> = CSSUnitValueTyped(this.toFloat(), CSSUnit.pc)
-val Number.px
-    get(): CSSSizeValue<CSSUnit.px> = CSSUnitValueTyped(this.toFloat(), CSSUnit.px)
-
-val Number.deg
-    get(): CSSSizeValue<CSSUnit.deg> = CSSUnitValueTyped(this.toFloat(), CSSUnit.deg)
-val Number.grad
-    get(): CSSSizeValue<CSSUnit.grad> = CSSUnitValueTyped(this.toFloat(), CSSUnit.grad)
-val Number.rad
-    get(): CSSSizeValue<CSSUnit.rad> = CSSUnitValueTyped(this.toFloat(), CSSUnit.rad)
-val Number.turn
-    get(): CSSSizeValue<CSSUnit.turn> = CSSUnitValueTyped(this.toFloat(), CSSUnit.turn)
-
-val Number.s
-    get(): CSSSizeValue<CSSUnit.s> = CSSUnitValueTyped(this.toFloat(), CSSUnit.s)
-val Number.ms
-    get(): CSSSizeValue<CSSUnit.ms> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ms)
-
-val Number.Hz
-    get(): CSSSizeValue<CSSUnit.Hz> = CSSUnitValueTyped(this.toFloat(), CSSUnit.Hz)
-val Number.kHz
-    get(): CSSSizeValue<CSSUnit.kHz> = CSSUnitValueTyped(this.toFloat(), CSSUnit.kHz)
-
-val Number.dpi
-    get(): CSSSizeValue<CSSUnit.dpi> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dpi)
-val Number.dpcm
-    get(): CSSSizeValue<CSSUnit.dpcm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dpcm)
-val Number.dppx
-    get(): CSSSizeValue<CSSUnit.dppx> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dppx)
-
-val Number.fr
-    get(): CSSSizeValue<CSSUnit.fr> = CSSUnitValueTyped(this.toFloat(), CSSUnit.fr)

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

@@ -1,198 +1,3 @@
-@file:Suppress("unused", "MemberVisibilityCanBePrivate")
-
 package org.jetbrains.compose.web.css
 
-external interface CSSColorValue : StylePropertyValue, CSSVariableValueAs<CSSColorValue>
+actual external interface CSSColorValue : StylePropertyValue, CSSVariableValueAs<CSSColorValue>
-
-object Color {
-
-    @Deprecated("use org.jetbrains.compose.web.css.rgb", ReplaceWith("rgb(r, g, b)"))
-    data class RGB(val r: Number, val g: Number, val b: Number) : CSSColorValue {
-        override fun toString(): String = "rgb($r, $g, $b)"
-    }
-
-    @Deprecated("use org.jetbrains.compose.web.css.rgba", ReplaceWith("rgba(r, g, b, a)"))
-    data class RGBA(val r: Number, val g: Number, val b: Number, val a: Number) : CSSColorValue {
-        override fun toString(): String = "rgba($r, $g, $b, $a)"
-    }
-
-    @Deprecated("use org.jetbrains.compose.web.css.hsl", ReplaceWith("hsl(h, s, l)"))
-    data class HSL(val h: CSSAngleValue, val s: Number, val l: Number) : CSSColorValue {
-        constructor(h: Number, s: Number, l: Number) : this(h.deg, s, l)
-
-        override fun toString(): String = "hsl($h, $s%, $l%)"
-    }
-
-    @Deprecated("use org.jetbrains.compose.web.css.hsla", ReplaceWith("hsla(h, s, l, a)"))
-    data class HSLA(val h: CSSAngleValue, val s: Number, val l: Number, val a: Number) : CSSColorValue {
-        constructor(h: Number, s: Number, l: Number, a: Number) : this(h.deg, s, l, a)
-
-        override fun toString(): String = "hsla($h, $s%, $l%, $a)"
-    }
-
-    inline val aliceblue get() = Color("aliceblue")
-    inline val antiquewhite get() = Color("antiquewhite")
-    inline val aquamarine get() = Color("aquamarine")
-    inline val azure get() = Color("azure")
-    inline val beige get() = Color("beige")
-    inline val bisque get() = Color("bisque")
-    inline val black get() = Color("black")
-    inline val blanchedalmond get() = Color("blanchedalmond")
-    inline val blue get() = Color("blue")
-    inline val blueviolet get() = Color("blueviolet")
-    inline val brown get() = Color("brown")
-    inline val burlywood get() = Color("burlywood")
-    inline val cadetblue get() = Color("cadetblue")
-    inline val chartreuse get() = Color("chartreuse")
-    inline val chocolate get() = Color("chocolate")
-    inline val cornflowerblue get() = Color("cornflowerblue")
-    inline val cornsilk get() = Color("cornsilk")
-    inline val crimson get() = Color("crimson")
-    inline val cyan get() = Color("cyan")
-    inline val darkblue get() = Color("darkblue")
-    inline val darkcyan get() = Color("darkcyan")
-    inline val darkgoldenrod get() = Color("darkgoldenrod")
-    inline val darkgray get() = Color("darkgray")
-    inline val darkgreen get() = Color("darkgreen")
-    inline val darkkhaki get() = Color("darkkhaki")
-    inline val darkmagenta get() = Color("darkmagenta")
-    inline val darkolivegreen get() = Color("darkolivegreen")
-    inline val darkorange get() = Color("darkorange")
-    inline val darkorchid get() = Color("darkorchid")
-    inline val darkred get() = Color("darkred")
-    inline val darksalmon get() = Color("darksalmon")
-    inline val darkslateblue get() = Color("darkslateblue")
-    inline val darkslategray get() = Color("darkslategray")
-    inline val darkturquoise get() = Color("darkturquoise")
-    inline val darkviolet get() = Color("darkviolet")
-    inline val deeppink get() = Color("deeppink")
-    inline val deepskyblue get() = Color("deepskyblue")
-    inline val dimgray get() = Color("dimgray")
-    inline val dodgerblue get() = Color("dodgerblue")
-    inline val firebrick get() = Color("firebrick")
-    inline val floralwhite get() = Color("floralwhite")
-    inline val forestgreen get() = Color("forestgreen")
-    inline val fuchsia get() = Color("fuchsia")
-    inline val gainsboro get() = Color("gainsboro")
-    inline val ghostwhite get() = Color("ghostwhite")
-    inline val goldenrod get() = Color("goldenrod")
-    inline val gold get() = Color("gold")
-    inline val gray get() = Color("gray")
-    inline val green get() = Color("green")
-    inline val greenyellow get() = Color("greenyellow")
-    inline val honeydew get() = Color("honeydew")
-    inline val hotpink get() = Color("hotpink")
-    inline val indianred get() = Color("indianred")
-    inline val indigo get() = Color("indigo")
-    inline val ivory get() = Color("ivory")
-    inline val khaki get() = Color("khaki")
-    inline val lavenderblush get() = Color("lavenderblush")
-    inline val lavender get() = Color("lavender")
-    inline val lawngreen get() = Color("lawngreen")
-    inline val lemonchiffon get() = Color("lemonchiffon")
-    inline val lightblue get() = Color("lightblue")
-    inline val lightcoral get() = Color("lightcoral")
-    inline val lightcyan get() = Color("lightcyan")
-    inline val lightgoldenrodyellow get() = Color("lightgoldenrodyellow")
-    inline val lightgray get() = Color("lightgray")
-    inline val lightgreen get() = Color("lightgreen")
-    inline val lightpink get() = Color("lightpink")
-    inline val lightsalmon get() = Color("lightsalmon")
-    inline val lightseagreen get() = Color("lightseagreen")
-    inline val lightskyblue get() = Color("lightskyblue")
-    inline val lightslategray get() = Color("lightslategray")
-    inline val lightsteelblue get() = Color("lightsteelblue")
-    inline val lightyellow get() = Color("lightyellow")
-    inline val limegreen get() = Color("limegreen")
-    inline val lime get() = Color("lime")
-    inline val linen get() = Color("linen")
-    inline val magenta get() = Color("magenta")
-    inline val maroon get() = Color("maroon")
-    inline val mediumaquamarine get() = Color("mediumaquamarine")
-    inline val mediumblue get() = Color("mediumblue")
-    inline val mediumorchid get() = Color("mediumorchid")
-    inline val mediumpurple get() = Color("mediumpurple")
-    inline val mediumseagreen get() = Color("mediumseagreen")
-    inline val mediumslateblue get() = Color("mediumslateblue")
-    inline val mediumspringgreen get() = Color("mediumspringgreen")
-    inline val mediumturquoise get() = Color("mediumturquoise")
-    inline val mediumvioletred get() = Color("mediumvioletred")
-    inline val midnightblue get() = Color("midnightblue")
-    inline val mintcream get() = Color("mintcream")
-    inline val mistyrose get() = Color("mistyrose")
-    inline val moccasin get() = Color("moccasin")
-    inline val navajowhite get() = Color("navajowhite")
-    inline val navi get() = Color("navi")
-    inline val oldlace get() = Color("oldlace")
-    inline val olivedrab get() = Color("olivedrab")
-    inline val olive get() = Color("olive")
-    inline val orange get() = Color("orange")
-    inline val orangered get() = Color("orangered")
-    inline val orchid get() = Color("orchid")
-    inline val palegoldenrod get() = Color("palegoldenrod")
-    inline val palegreen get() = Color("palegreen")
-    inline val paleturquoise get() = Color("paleturquoise")
-    inline val palevioletred get() = Color("palevioletred")
-    inline val papayawhip get() = Color("papayawhip")
-    inline val peachpuff get() = Color("peachpuff")
-    inline val peru get() = Color("peru")
-    inline val pink get() = Color("pink")
-    inline val plum get() = Color("plum")
-    inline val powderblue get() = Color("powderblue")
-    inline val purple get() = Color("purple")
-    inline val rebeccapurple get() = Color("rebeccapurple")
-    inline val red get() = Color("red")
-    inline val rosybrown get() = Color("rosybrown")
-    inline val royalblue get() = Color("royalblue")
-    inline val saddlebrown get() = Color("saddlebrown")
-    inline val salmon get() = Color("salmon")
-    inline val sandybrown get() = Color("sandybrown")
-    inline val seagreen get() = Color("seagreen")
-    inline val seashell get() = Color("seashell")
-    inline val sienna get() = Color("sienna")
-    inline val silver get() = Color("silver")
-    inline val skyblue get() = Color("skyblue")
-    inline val slateblue get() = Color("slateblue")
-    inline val slategray get() = Color("slategray")
-    inline val snow get() = Color("snow")
-    inline val springgreen get() = Color("springgreen")
-    inline val steelblue get() = Color("steelblue")
-    inline val teal get() = Color("teal")
-    inline val thistle get() = Color("thistle")
-    inline val tomato get() = Color("tomato")
-    inline val turquoise get() = Color("turquoise")
-    inline val violet get() = Color("violet")
-    inline val wheat get() = Color("wheat")
-    inline val white get() = Color("white")
-    inline val whitesmoke get() = Color("whitesmoke")
-    inline val yellowgreen get() = Color("yellowgreen")
-    inline val yellow get() = Color("yellow")
-
-    inline val transparent get() = Color("transparent")
-    inline val currentColor get() = Color("currentColor")
-}
-
-fun Color(name: String): CSSColorValue = name.unsafeCast<CSSColorValue>()
-
-private class RGB(val r: Number, val g: Number, val b: Number): CSSColorValue {
-    override fun toString(): String = "rgb($r, $g, $b)"
-}
-
-private class RGBA(val r: Number, val g: Number, val b: Number, val a: Number) : CSSColorValue {
-    override fun toString(): String = "rgba($r, $g, $b, $a)"
-}
-
-private class HSL(val h: CSSAngleValue, val s: Number, val l: Number) : CSSColorValue {
-    override fun toString(): String = "hsl($h, $s%, $l%)"
-}
-
-private class HSLA(val h: CSSAngleValue, val s: Number, val l: Number, val a: Number) : CSSColorValue {
-    override fun toString(): String = "hsla($h, $s%, $l%, $a)"
-}
-
-fun rgb(r: Number, g: Number, b: Number): CSSColorValue = RGB(r, g, b)
-fun rgba(r: Number, g: Number, b: Number, a: Number): CSSColorValue = RGBA(r, g, b, a)
-fun hsl(h: CSSAngleValue, s: Number, l: Number): CSSColorValue = HSL(h, s, l)
-fun hsl(h: Number, s: Number, l: Number): CSSColorValue = HSL(h.deg, s, l)
-fun hsla(h: CSSAngleValue, s: Number, l: Number, a: Number): CSSColorValue = HSLA(h, s, l, a)
-fun hsla(h: Number, s: Number, l: Number, a: Number): CSSColorValue = HSLA(h.deg, s, l, a)

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

@@ -6,16 +6,11 @@
 @file:Suppress("UNUSED", "NOTHING_TO_INLINE", "FunctionName")
 package org.jetbrains.compose.web.css
 
-external interface StylePropertyValue
+actual external interface StylePropertyValue
 
-external interface StylePropertyNumber: StylePropertyValue
+actual external interface StylePropertyNumber: StylePropertyValue
-external interface StylePropertyString: StylePropertyValue
+actual external interface StylePropertyString: StylePropertyValue
 
-inline fun StylePropertyValue(value: String): StylePropertyString = value.unsafeCast<StylePropertyString>()
+actual external interface CSSStyleValue: StylePropertyValue {
-inline fun StylePropertyValue(value: Number): StylePropertyNumber = value.unsafeCast<StylePropertyNumber>()
+    actual override fun toString(): String
-
-external interface CSSStyleValue: StylePropertyValue {
-    override fun toString(): String
 }
-
-inline fun CSSStyleValue(value: String): CSSStyleValue = StylePropertyValue(value).unsafeCast<CSSStyleValue>()

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

@@ -1,195 +1,3 @@
-/*
- * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
- * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
- */
-
-@file:Suppress("NOTHING_TO_INLINE", "unused")
-
 package org.jetbrains.compose.web.css
 
-import org.jetbrains.compose.web.attributes.HtmlAttrMarker
+actual external interface CSSVariableValueAs<out T : StylePropertyValue>
-import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
-import kotlin.properties.ReadOnlyProperty
-
-@Deprecated(
-    message = "Renamed to StyleScope",
-    replaceWith = ReplaceWith("StyleScope", "org.jetbrains.compose.web.css.StyleScope")
-)
-typealias StyleBuilder = StyleScope
-
-/**
- * StyleScope serves for two main purposes. Passed as a builder context (in [AttrsScope]), it
- * makes it possible to:
- * 1. Add inlined css properties to the element (@see [property])
- * 2. Set values to CSS variables (@see [variable])
- */
-@HtmlAttrMarker
-interface StyleScope {
-    /**
-     * Adds arbitrary CSS property to the inline style of the element
-     * @param propertyName - the name of css property as [per spec](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
-     * @param value - the value, it can be either String or specialized type like [CSSNumeric] or [CSSColorValue]
-     *
-     * Most frequent CSS property values can be set via specialized methods, like [width], [display] etc.
-     *
-     * Example:
-     * ```
-     * Div({
-     *  style {
-     *      property("some-exotic-css-property", "I am a string value")
-     *      property("some-exotic-css-property-width", 5.px)
-     *  }
-     * })
-     * ```
-     */
-    fun property(propertyName: String, value: StylePropertyValue)
-    fun variable(variableName: String, value: StylePropertyValue)
-
-    fun property(propertyName: String, value: String) = property(propertyName, StylePropertyValue(value))
-    fun property(propertyName: String, value: Number) = property(propertyName, StylePropertyValue(value))
-    fun variable(variableName: String, value: String) = variable(variableName, StylePropertyValue(value))
-    fun variable(variableName: String, value: Number) = variable(variableName, StylePropertyValue(value))
-
-    operator fun <TValue : StylePropertyValue> CSSStyleVariable<TValue>.invoke(value: TValue) {
-        variable(name, value.toString())
-    }
-
-    operator fun CSSStyleVariable<StylePropertyString>.invoke(value: String) {
-        variable(name, value)
-    }
-
-    operator fun CSSStyleVariable<StylePropertyNumber>.invoke(value: Number) {
-        variable(name, value)
-    }
-}
-
-internal inline fun variableValue(variableName: String, fallback: StylePropertyValue? = null) =
-    "var(--$variableName${fallback?.let { ", $it" } ?: ""})"
-
-external interface CSSVariableValueAs<out T : StylePropertyValue>
-
-inline fun <TValue> CSSVariableValue(value: StylePropertyValue) =
-    value.unsafeCast<TValue>()
-
-inline fun <TValue> CSSVariableValue(value: String) =
-    CSSVariableValue<TValue>(StylePropertyValue(value))
-
-// after adding `variable` word `add` became ambiguous
-@Deprecated(
-    "use property instead, will remove it soon",
-    ReplaceWith("property(propertyName, value)")
-)
-fun StyleScope.add(
-    propertyName: String,
-    value: StylePropertyValue
-) = property(propertyName, value)
-
-interface CSSVariable {
-    val name: String
-}
-
-class CSSStyleVariable<out TValue : StylePropertyValue>(override val name: String) : CSSVariable
-
-fun <TValue : StylePropertyValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null) =
-    CSSVariableValue<TValue>(
-        variableValue(
-            name,
-            fallback
-        )
-    )
-
-fun <TValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null)
-        where TValue : CSSVariableValueAs<TValue>,
-              TValue : StylePropertyValue =
-    CSSVariableValue<TValue>(
-        variableValue(
-            name,
-            fallback
-        )
-    )
-
-/**
- * Introduces CSS variable that can be later referred anywhere in [StyleSheet]
- *
- * Example:
- * ```
- * object AppCSSVariables {
- *  val width by variable<CSSUnitValue>()
- *  val stringHeight by variable<StylePropertyString>()
- *  val order by variable<StylePropertyNumber>()
- * }
- *
- * object AppStylesheet : StyleSheet() {
- *    val classWithProperties by style {
- *     AppCSSVariables.width(100.px)
- *     property("width", AppCSSVariables.width.value())
- * }
- *```
- *
- */
-fun <TValue : StylePropertyValue> variable() =
-    ReadOnlyProperty<Any?, CSSStyleVariable<TValue>> { _, property ->
-        CSSStyleVariable(property.name)
-    }
-
-interface StyleHolder {
-    @ComposeWebInternalApi
-    val properties: StylePropertyList
-    @ComposeWebInternalApi
-    val variables: StylePropertyList
-}
-
-@Deprecated(
-    message = "Renamed to StyleScopeBuilder",
-    replaceWith = ReplaceWith("StyleScopeBuilder", "org.jetbrains.compose.web.css.StyleScopeBuilder")
-)
-typealias StyleBuilderImpl = StyleScopeBuilder
-
-@Suppress("EqualsOrHashCode")
-open class StyleScopeBuilder : StyleScope, StyleHolder {
-    override val properties: MutableStylePropertyList = mutableListOf()
-    override val variables: MutableStylePropertyList = mutableListOf()
-
-    override fun property(propertyName: String, value: StylePropertyValue) {
-        properties.add(StylePropertyDeclaration(propertyName, value))
-    }
-
-    override fun variable(variableName: String, value: StylePropertyValue) {
-        variables.add(StylePropertyDeclaration(variableName, value))
-    }
-
-    // StylePropertyValue is js native object without equals
-    override fun equals(other: Any?): Boolean {
-        return if (other is StyleHolder) {
-            properties.nativeEquals(other.properties) &&
-                variables.nativeEquals(other.variables)
-        } else false
-    }
-
-    @ComposeWebInternalApi
-    internal fun copyFrom(sb: StyleHolder) {
-        properties.addAll(sb.properties)
-        variables.addAll(sb.variables)
-    }
-}
-
-data class StylePropertyDeclaration(
-    val name: String,
-    val value: StylePropertyValue
-) {
-    constructor(name: String, value: String) : this(name, value.unsafeCast<StylePropertyValue>())
-    constructor(name: String, value: Number) : this(name, value.unsafeCast<StylePropertyValue>())
-}
-typealias StylePropertyList = List<StylePropertyDeclaration>
-typealias MutableStylePropertyList = MutableList<StylePropertyDeclaration>
-
-internal fun StylePropertyList.nativeEquals(properties: StylePropertyList): Boolean {
-    if (this.size != properties.size) return false
-
-    var index = 0
-    return all { prop ->
-        val otherProp = properties[index++]
-        prop.name == otherProp.name &&
-            prop.value.toString() == otherProp.value.toString()
-    }
-}

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

@@ -7,8 +7,4 @@ package org.jetbrains.compose.web.css.keywords
 
 import org.jetbrains.compose.web.css.CSSKeywordValue
 
-external interface CSSAutoKeyword : CSSKeywordValue
+actual external interface CSSAutoKeyword : CSSKeywordValue
-
-inline val auto: CSSAutoKeyword
-    get() = CSSKeywordValue("auto").unsafeCast<CSSAutoKeyword>()
-

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/w3cExtensions.kt

@@ -0,0 +1,54 @@
+package org.jetbrains.compose.web
+
+import org.w3c.dom.events.*
+import org.w3c.dom.css.CSSRule
+import androidx.compose.web.events.*
+import org.jetbrains.compose.web.css.CSSStyleValue
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.svg.SVGElement
+import org.jetbrains.compose.web.css.StylePropertyValue
+import org.jetbrains.compose.web.dom.RadioGroupScope
+import org.jetbrains.compose.web.dom.ElementBuilder
+import org.w3c.dom.Element
+
+@PublishedApi
+internal actual fun <T> SyntheticEvent<*>.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> CSSRule.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> CSSStyleValue.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> Event.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> EventTarget.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> String.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> Number.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> HTMLElement.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> SVGElement.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> StylePropertyValue.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+@ExperimentalComposeWebApi
+internal actual fun <T> RadioGroupScope<*>.unsafeCast(): T = asDynamic().unsafeCast<T>()
+@PublishedApi
+internal actual fun <T> ElementBuilder<*>.unsafeCast(): T = asDynamic().unsafeCast<T>()
+
+@PublishedApi
+internal actual fun Any.unsafeCastBoolean(): Boolean = asDynamic().unsafeCast<Boolean>()
+@PublishedApi
+internal actual fun Any.unsafeCastString(): String = asDynamic().unsafeCast<String>()
+
+@PublishedApi
+internal actual fun Any.getStringProperty(name: String): String? = asDynamic()[name] as String?
+@PublishedApi
+internal actual fun Any.getBooleanProperty(name: String): Boolean? = asDynamic()[name] as Boolean?
+@PublishedApi
+internal actual fun Any.getIntProperty(name: String): Int? = asDynamic()[name] as Int?
+@PublishedApi
+internal actual fun <T> Any.getAnyProperty(name: String): T = asDynamic()[name].unsafeCast<T>()
+
+internal actual fun Element.getAttributeNamesWorkaround(): Array<String> = getAttributeNames()

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

@@ -8,6 +8,7 @@ package org.jetbrains.compose.web.core.tests.css
 import org.jetbrains.compose.web.testutils.*
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.css.*
 import kotlin.test.Test
 import kotlin.test.assertEquals
 

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt

@@ -16,6 +16,7 @@ import org.w3c.dom.HTMLSelectElement
 import org.w3c.dom.HTMLTableCellElement
 import org.w3c.dom.HTMLTableColElement
 import org.w3c.dom.HTMLTextAreaElement
+import org.jetbrains.compose.web.*
 
 fun AttrsScope<HTMLAnchorElement>.href(value: String) =
     attr("href", value)
@@ -120,7 +121,7 @@ fun AttrsScope<HTMLInputElement>.alt(value: String) =
     attr("alt", value) // type: image only
 
 fun AttrsScope<HTMLInputElement>.autoComplete(value: AutoComplete) =
-    attr("autocomplete", value.unsafeCast<String>())
+    attr("autocomplete", value.unsafeCastString())
 
 fun AttrsScope<HTMLInputElement>.autoFocus() =
     attr("autofocus", "")
@@ -231,7 +232,7 @@ fun AttrsScope<HTMLOptionElement>.label(value: String) =
 /* Select attributes */
 
 fun AttrsScope<HTMLSelectElement>.autoComplete(value: AutoComplete) =
-    attr("autocomplete", value.unsafeCast<String>())
+    attr("autocomplete", value.unsafeCastString())
 
 fun AttrsScope<HTMLSelectElement>.autofocus() =
     attr("autofocus", "")
@@ -265,7 +266,7 @@ fun AttrsScope<HTMLOptGroupElement>.disabled() =
 /* TextArea attributes */
 
 fun AttrsScope<HTMLTextAreaElement>.autoComplete(value: AutoComplete) =
-    attr("autocomplete", value.unsafeCast<String>())
+    attr("autocomplete", value.unsafeCastString())
 
 fun AttrsScope<HTMLTextAreaElement>.autoFocus() =
     attr("autofocus", "")

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/attributes/PredefinedAttrValues.kt

@@ -1,6 +1,7 @@
 package org.jetbrains.compose.web.attributes
 
 import org.w3c.dom.events.Event
+import org.jetbrains.compose.web.*
 
 sealed class InputType<T>(val typeStr: String) {
 
@@ -35,20 +36,20 @@ sealed class InputType<T>(val typeStr: String) {
 
     open class InputTypeCheckedValue(name: String) : InputType<Boolean>(name) {
         override fun inputValue(event: Event): Boolean {
-            return event.target?.asDynamic()?.checked?.unsafeCast<Boolean>() ?: false
+            return event.target?.getBooleanProperty("checked") ?: false
         }
     }
 
     open class InputTypeNumberValue(name: String) : InputType<kotlin.Number?>(name) {
         override fun inputValue(event: Event): kotlin.Number? {
-            return event.target?.asDynamic()?.valueAsNumber ?: null
+            return event.target?.getAnyProperty<kotlin.Number>("valueAsNumber")
         }
     }
 
     abstract fun inputValue(event: Event): T
 
     protected fun valueAsString(event: Event): String {
-        return event.target?.asDynamic()?.value?.unsafeCast<String>() ?: ""
+        return event.target?.getStringProperty("value") ?: ""
     }
 
     companion object {

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/attributes/SyntheticEventListener.kt

@@ -15,12 +15,14 @@ import org.w3c.dom.DragEvent
 import org.w3c.dom.TouchEvent
 import org.w3c.dom.clipboard.ClipboardEvent
 import org.w3c.dom.events.*
+import org.jetbrains.compose.web.*
+import org.w3c.dom.events.W3cEventListener
 
 @OptIn(ComposeWebInternalApi::class)
 open class SyntheticEventListener<T : SyntheticEvent<*>> internal constructor(
     val event: String,
     val listener: (T) -> Unit
-) : EventListener, NamedEventListener {
+) : W3cEventListener, NamedEventListener {
 
     override val name: String = event
 
@@ -135,7 +137,7 @@ internal class SelectEventListener<Target: EventTarget>(
     SELECT, listener
 ) {
     override fun handleEvent(event: Event) {
-        listener(SyntheticSelectEvent(event, event.target.unsafeCast<SelectionInfoDetails>()))
+        listener(SyntheticSelectEvent(event, event.target!!.unsafeCast<SelectionInfoDetails>()))
     }
 }
 

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/attributes/builders/SelectAttrsScope.kt

@@ -13,6 +13,7 @@ import org.jetbrains.compose.web.events.SyntheticChangeEvent
 import org.jetbrains.compose.web.events.SyntheticInputEvent
 import org.w3c.dom.HTMLSelectElement
 import org.w3c.dom.events.Event
+import org.jetbrains.compose.web.*
 
 @Deprecated(
     message = "Renamed to SelectAttrsScope",
@@ -42,7 +43,7 @@ private class SelectInputEventListener(
     eventName, listener
 ) {
     override fun handleEvent(event: Event) {
-        val value = event.target?.asDynamic().value?.toString()
+        val value = event.target?.getAnyProperty<Any>("value").toString()
         listener(SyntheticInputEvent(value, event))
     }
 }
@@ -53,7 +54,7 @@ private class SelectChangeEventListener(
     CHANGE, listener
 ) {
     override fun handleEvent(event: Event) {
-        val value = event.target?.asDynamic().value?.toString()
+        val value = event.target?.getAnyProperty<Any>("value").toString()
         listener(SyntheticChangeEvent(value, event))
     }
 }

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/css/BrowserAPI.kt

@@ -13,15 +13,12 @@ import org.w3c.dom.css.CSSRuleList
 internal external class CSSKeyframesRule: CSSRule {
     val name: String
     val cssRules: CSSRuleList
-}
+    internal fun appendRule(cssRule: String)
-
-internal inline fun CSSKeyframesRule.appendRule(cssRule: String) {
-    this.asDynamic().appendRule(cssRule)
 }
 
 @Suppress("NOTHING_TO_INLINE")
 internal inline fun <T : Any> jsObject(): T =
-    js("({})")
+    js("({})") as T
 
 internal inline fun <T : Any> jsObject(builder: T.() -> Unit): T =
     jsObject<T>().apply(builder)

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/css/CSSEnums.kt

@@ -2,9 +2,11 @@
 
 package org.jetbrains.compose.web.css
 
+import org.jetbrains.compose.web.*
+
 interface StylePropertyEnum: StylePropertyString
-inline val StylePropertyEnum.name get() = this.unsafeCast<String>()
+inline val StylePropertyEnum.name get() = this.unsafeCastString()
-inline val StylePropertyEnum.value get() = this.unsafeCast<String>()
+inline val StylePropertyEnum.value get() = this.unsafeCastString()
 
 interface LineStyle: StylePropertyEnum {
     companion object {

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/css/CSSKeywords.kt

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+@file:Suppress("NOTHING_TO_INLINE")
+
+package org.jetbrains.compose.web.css
+
+import org.jetbrains.compose.web.*
+
+expect interface CSSKeywordValue : CSSStyleValue
+
+inline fun CSSKeywordValue(value: String): CSSKeywordValue = CSSStyleValue(value).unsafeCast<CSSKeywordValue>()

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/css/CSSOperations.kt

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+package org.jetbrains.compose.web.css
+
+operator fun <T: CSSUnit> CSSSizeValue<T>.times(num: Number): CSSSizeValue<T> = CSSUnitValueTyped(value * num.toFloat(), unit)
+operator fun <T: CSSUnit> Number.times(unit: CSSSizeValue<T>): CSSSizeValue<T> = CSSUnitValueTyped(unit.value * toFloat(), unit.unit)
+
+operator fun <T: CSSUnit> CSSSizeValue<T>.div(num: Number): CSSSizeValue<T> = CSSUnitValueTyped(value / num.toFloat(), unit)
+
+operator fun <T: CSSUnit> CSSSizeValue<T>.plus(b: CSSSizeValue<T>): CSSSizeValue<T> = CSSUnitValueTyped(value + b.value, unit)
+operator fun <T: CSSUnit> CSSSizeValue<T>.minus(b: CSSSizeValue<T>): CSSSizeValue<T> = CSSUnitValueTyped(value - b.value, unit)
+operator fun <T: CSSUnit> CSSSizeValue<T>.unaryMinus(): CSSSizeValue<T> = CSSUnitValueTyped(-value, unit)
+operator fun <T: CSSUnit> CSSSizeValue<T>.unaryPlus(): CSSSizeValue<T> = CSSUnitValueTyped(value, unit)
+
+expect interface CSSCalcOperation<T : CSSUnit>: CSSNumericValue<T>
+
+data class CSSCalcValue<T : CSSUnit>(
+    var op: CSSCalcOperation<out T>
+) : CSSCalcOperation<T> {
+    override fun toString(): String = "calc$op"
+}
+
+private data class CSSPlus<T : CSSUnit>(
+    var l: CSSNumericValue<out T>,
+    var r: CSSNumericValue<out T>
+) : CSSCalcOperation<T> {
+    override fun toString(): String = "($l + $r)"
+}
+
+private data class CSSMinus<T : CSSUnit>(
+    var l: CSSNumericValue<out T>,
+    var r: CSSNumericValue<out T>
+) : CSSCalcOperation<T> {
+    override fun toString(): String = "($l - $r)"
+}
+
+private data class CSSTimes<T : CSSUnit>(
+    var l: CSSNumericValue<out T>,
+    var r: Number,
+    val left: Boolean = true
+) : CSSCalcOperation<T> {
+    override fun toString(): String = if (left) "($l * $r)" else "($r * $l)"
+}
+
+private data class CSSDiv<T : CSSUnit>(
+    var l: CSSNumericValue<out T>,
+    var r: Number
+) : CSSCalcOperation<T> {
+    override fun toString(): String = "($l / $r)"
+}
+
+operator fun <T: CSSUnit> CSSNumericValue<out T>.plus(b: CSSNumericValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSPlus(this, b))
+operator fun <T: CSSUnit> CSSCalcValue<out T>.plus(b: CSSNumericValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSPlus(this.op, b))
+operator fun <T: CSSUnit> CSSNumericValue<out T>.plus(b: CSSCalcValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSPlus(this, b.op))
+
+operator fun <T: CSSUnit> CSSNumericValue<out T>.minus(b: CSSNumericValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSMinus(this, b))
+operator fun <T: CSSUnit> CSSCalcValue<out T>.minus(b: CSSNumericValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSMinus(this.op, b))
+operator fun <T: CSSUnit> CSSNumericValue<out T>.minus(b: CSSCalcValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSMinus(this, b.op))
+
+operator fun <T: CSSUnit> CSSCalcValue<out T>.times(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSTimes(this.op, b))
+operator fun <T: CSSUnit> Number.times(b: CSSCalcValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSTimes(b.op, this, false))
+
+operator fun <T: CSSUnit> CSSNumericValue<T>.div(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSDiv(this, b))
+operator fun <T: CSSUnit> CSSCalcValue<out T>.div(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSDiv(this.op, b))
+
+operator fun <T: CSSUnit> CSSNumericValue<T>.times(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSTimes(this, b))
+operator fun <T: CSSUnit> Number.times(b: CSSNumericValue<T>): CSSCalcValue<T> = CSSCalcValue(CSSTimes(b, this, false))
+

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/css/CSSUnits.kt

@@ -0,0 +1,249 @@
+@file:Suppress("Unused", "NOTHING_TO_INLINE", "NESTED_CLASS_IN_EXTERNAL_INTERFACE", "INLINE_EXTERNAL_DECLARATION", "WRONG_BODY_OF_EXTERNAL_DECLARATION", "NESTED_EXTERNAL_DECLARATION", "ClassName")
+
+package org.jetbrains.compose.web.css
+
+expect interface CSSNumericValue<T : CSSUnit> : StylePropertyValue, CSSVariableValueAs<CSSNumericValue<T>>
+
+expect interface CSSSizeValue<T : CSSUnit> : CSSNumericValue<T> {
+    val value: Float
+    val unit: T
+}
+
+data class CSSUnitValueTyped<T : CSSUnit>(
+    override val value: Float,
+    override val unit: T
+) : CSSSizeValue<T> {
+    override fun toString(): String = "$value$unit"
+}
+
+interface CSSUnitLengthOrPercentage: CSSUnit
+interface CSSUnitPercentage: CSSUnitLengthOrPercentage
+interface CSSUnitLength: CSSUnitLengthOrPercentage
+interface CSSUnitRel : CSSUnitLength
+interface CSSUnitAbs: CSSUnitLength
+interface CSSUnitAngle: CSSUnit
+interface CSSUnitTime: CSSUnit
+interface CSSUnitFrequency: CSSUnit
+interface CSSUnitResolution: CSSUnit
+interface CSSUnitFlex: CSSUnit
+
+typealias CSSAngleValue = CSSSizeValue<out CSSUnitAngle>
+typealias CSSLengthOrPercentageValue = CSSSizeValue<out CSSUnitLengthOrPercentage>
+typealias CSSLengthValue = CSSSizeValue<out CSSUnitLength>
+typealias CSSPercentageValue = CSSSizeValue<out CSSUnitPercentage>
+typealias CSSUnitValue = CSSSizeValue<out CSSUnit>
+typealias CSSNumeric = CSSNumericValue<out CSSUnit>
+typealias CSSpxValue = CSSSizeValue<CSSUnit.px>
+
+// fake interfaces to distinguish units
+interface CSSUnit {
+    interface percent: CSSUnitPercentage
+
+    interface em: CSSUnitRel
+
+    interface ex: CSSUnitRel
+
+    interface ch: CSSUnitRel
+
+    interface ic: CSSUnitRel
+
+    interface rem: CSSUnitRel
+
+    interface lh: CSSUnitRel
+
+    interface rlh: CSSUnitRel
+
+    interface vw: CSSUnitRel
+
+    interface vh: CSSUnitRel
+
+    interface vi: CSSUnitRel
+
+    interface vb: CSSUnitRel
+
+    interface vmin: CSSUnitRel
+
+    interface vmax: CSSUnitRel
+
+    interface cm: CSSUnitRel
+
+    interface mm: CSSUnitRel
+
+    interface Q: CSSUnitRel
+
+    interface pt: CSSUnitAbs
+
+    interface pc: CSSUnitAbs
+
+    interface px: CSSUnitAbs
+
+    interface deg: CSSUnitAngle
+
+    interface grad: CSSUnitAngle
+
+    interface rad: CSSUnitAngle
+
+    interface turn: CSSUnitAngle
+
+    interface s: CSSUnitTime
+
+    interface ms: CSSUnitTime
+
+    interface Hz: CSSUnitFrequency
+
+    interface kHz: CSSUnitFrequency
+
+    interface dpi: CSSUnitResolution
+
+    interface dpcm: CSSUnitResolution
+
+    interface dppx: CSSUnitResolution
+
+    interface fr: CSSUnitFlex
+
+    interface number: CSSUnit
+
+    companion object {
+        inline val percent get() = "%".unsafeCast<percent>()
+
+        inline val em get() = "em".unsafeCast<em>()
+
+        inline val ex get() = "ex".unsafeCast<ex>()
+
+        inline val ch get() = "ch".unsafeCast<ch>()
+
+        inline val ic get() = "ic".unsafeCast<ic>()
+
+        inline val rem get() = "rem".unsafeCast<rem>()
+
+        inline val lh get() = "lh".unsafeCast<lh>()
+
+        inline val rlh get() = "rlh".unsafeCast<rlh>()
+
+        inline val vw get() = "vw".unsafeCast<vw>()
+
+        inline val vh get() = "vh".unsafeCast<vh>()
+
+        inline val vi get() = "vi".unsafeCast<vi>()
+
+        inline val vb get() = "vb".unsafeCast<vb>()
+
+        inline val vmin get() = "vmin".unsafeCast<vmin>()
+
+        inline val vmax get() = "vmax".unsafeCast<vmax>()
+
+        inline val cm get() = "cm".unsafeCast<cm>()
+
+        inline val mm get() = "mm".unsafeCast<mm>()
+
+        inline val Q get() = "Q".unsafeCast<Q>()
+
+        inline val pt get() = "pt".unsafeCast<pt>()
+
+        inline val pc get() = "pc".unsafeCast<pc>()
+
+        inline val px get() = "px".unsafeCast<px>()
+
+        inline val deg get() = "deg".unsafeCast<deg>()
+
+        inline val grad get() = "grad".unsafeCast<grad>()
+
+        inline val rad get() = "rad".unsafeCast<rad>()
+
+        inline val turn get() = "turn".unsafeCast<turn>()
+
+        inline val s get() = "s".unsafeCast<s>()
+
+        inline val ms get() = "ms".unsafeCast<ms>()
+
+        inline val Hz get() = "Hz".unsafeCast<Hz>()
+
+        inline val kHz get() = "kHz".unsafeCast<kHz>()
+
+        inline val dpi get() = "dpi".unsafeCast<dpi>()
+
+        inline val dpcm get() = "dpcm".unsafeCast<dpcm>()
+
+        inline val dppx get() = "dppx".unsafeCast<dppx>()
+
+        inline val fr get() = "fr".unsafeCast<fr>()
+
+        inline val number get() = "number".unsafeCast<number>()
+    }
+}
+
+
+val Number.number
+    get(): CSSSizeValue<CSSUnit.number> = CSSUnitValueTyped(this.toFloat(), CSSUnit.number)
+
+val Number.percent
+    get() : CSSSizeValue<CSSUnit.percent> = CSSUnitValueTyped(this.toFloat(), CSSUnit.percent)
+
+val Number.em
+    get() : CSSSizeValue<CSSUnit.em> = CSSUnitValueTyped(this.toFloat(), CSSUnit.em)
+
+val Number.ex
+    get(): CSSSizeValue<CSSUnit.ex> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ex)
+
+val Number.ch
+    get(): CSSSizeValue<CSSUnit.ch> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ch)
+
+val Number.cssRem
+    get(): CSSSizeValue<CSSUnit.rem> = CSSUnitValueTyped(this.toFloat(), CSSUnit.rem)
+
+val Number.vw
+    get(): CSSSizeValue<CSSUnit.vw> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vw)
+
+val Number.vh
+    get(): CSSSizeValue<CSSUnit.vh> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vh)
+
+val Number.vmin
+    get(): CSSSizeValue<CSSUnit.vmin> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vmin)
+
+val Number.vmax
+    get(): CSSSizeValue<CSSUnit.vmax> = CSSUnitValueTyped(this.toFloat(), CSSUnit.vmax)
+
+val Number.cm
+    get(): CSSSizeValue<CSSUnit.cm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.cm)
+
+val Number.mm
+    get(): CSSSizeValue<CSSUnit.mm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.mm)
+
+val Number.Q
+    get() : CSSSizeValue<CSSUnit.Q> = CSSUnitValueTyped(this.toFloat(), CSSUnit.Q)
+
+val Number.pt
+    get(): CSSSizeValue<CSSUnit.pt> = CSSUnitValueTyped(this.toFloat(), CSSUnit.pt)
+val Number.pc
+    get(): CSSSizeValue<CSSUnit.pc> = CSSUnitValueTyped(this.toFloat(), CSSUnit.pc)
+val Number.px
+    get(): CSSSizeValue<CSSUnit.px> = CSSUnitValueTyped(this.toFloat(), CSSUnit.px)
+
+val Number.deg
+    get(): CSSSizeValue<CSSUnit.deg> = CSSUnitValueTyped(this.toFloat(), CSSUnit.deg)
+val Number.grad
+    get(): CSSSizeValue<CSSUnit.grad> = CSSUnitValueTyped(this.toFloat(), CSSUnit.grad)
+val Number.rad
+    get(): CSSSizeValue<CSSUnit.rad> = CSSUnitValueTyped(this.toFloat(), CSSUnit.rad)
+val Number.turn
+    get(): CSSSizeValue<CSSUnit.turn> = CSSUnitValueTyped(this.toFloat(), CSSUnit.turn)
+
+val Number.s
+    get(): CSSSizeValue<CSSUnit.s> = CSSUnitValueTyped(this.toFloat(), CSSUnit.s)
+val Number.ms
+    get(): CSSSizeValue<CSSUnit.ms> = CSSUnitValueTyped(this.toFloat(), CSSUnit.ms)
+
+val Number.Hz
+    get(): CSSSizeValue<CSSUnit.Hz> = CSSUnitValueTyped(this.toFloat(), CSSUnit.Hz)
+val Number.kHz
+    get(): CSSSizeValue<CSSUnit.kHz> = CSSUnitValueTyped(this.toFloat(), CSSUnit.kHz)
+
+val Number.dpi
+    get(): CSSSizeValue<CSSUnit.dpi> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dpi)
+val Number.dpcm
+    get(): CSSSizeValue<CSSUnit.dpcm> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dpcm)
+val Number.dppx
+    get(): CSSSizeValue<CSSUnit.dppx> = CSSUnitValueTyped(this.toFloat(), CSSUnit.dppx)
+
+val Number.fr
+    get(): CSSSizeValue<CSSUnit.fr> = CSSUnitValueTyped(this.toFloat(), CSSUnit.fr)

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/css/Color.kt

@@ -0,0 +1,198 @@
+@file:Suppress("unused", "MemberVisibilityCanBePrivate")
+
+package org.jetbrains.compose.web.css
+
+expect interface CSSColorValue : StylePropertyValue, CSSVariableValueAs<CSSColorValue>
+
+object Color {
+
+    @Deprecated("use org.jetbrains.compose.web.css.rgb", ReplaceWith("rgb(r, g, b)"))
+    data class RGB(val r: Number, val g: Number, val b: Number) : CSSColorValue {
+        override fun toString(): String = "rgb($r, $g, $b)"
+    }
+
+    @Deprecated("use org.jetbrains.compose.web.css.rgba", ReplaceWith("rgba(r, g, b, a)"))
+    data class RGBA(val r: Number, val g: Number, val b: Number, val a: Number) : CSSColorValue {
+        override fun toString(): String = "rgba($r, $g, $b, $a)"
+    }
+
+    @Deprecated("use org.jetbrains.compose.web.css.hsl", ReplaceWith("hsl(h, s, l)"))
+    data class HSL(val h: CSSAngleValue, val s: Number, val l: Number) : CSSColorValue {
+        constructor(h: Number, s: Number, l: Number) : this(h.deg, s, l)
+
+        override fun toString(): String = "hsl($h, $s%, $l%)"
+    }
+
+    @Deprecated("use org.jetbrains.compose.web.css.hsla", ReplaceWith("hsla(h, s, l, a)"))
+    data class HSLA(val h: CSSAngleValue, val s: Number, val l: Number, val a: Number) : CSSColorValue {
+        constructor(h: Number, s: Number, l: Number, a: Number) : this(h.deg, s, l, a)
+
+        override fun toString(): String = "hsla($h, $s%, $l%, $a)"
+    }
+
+    inline val aliceblue get() = Color("aliceblue")
+    inline val antiquewhite get() = Color("antiquewhite")
+    inline val aquamarine get() = Color("aquamarine")
+    inline val azure get() = Color("azure")
+    inline val beige get() = Color("beige")
+    inline val bisque get() = Color("bisque")
+    inline val black get() = Color("black")
+    inline val blanchedalmond get() = Color("blanchedalmond")
+    inline val blue get() = Color("blue")
+    inline val blueviolet get() = Color("blueviolet")
+    inline val brown get() = Color("brown")
+    inline val burlywood get() = Color("burlywood")
+    inline val cadetblue get() = Color("cadetblue")
+    inline val chartreuse get() = Color("chartreuse")
+    inline val chocolate get() = Color("chocolate")
+    inline val cornflowerblue get() = Color("cornflowerblue")
+    inline val cornsilk get() = Color("cornsilk")
+    inline val crimson get() = Color("crimson")
+    inline val cyan get() = Color("cyan")
+    inline val darkblue get() = Color("darkblue")
+    inline val darkcyan get() = Color("darkcyan")
+    inline val darkgoldenrod get() = Color("darkgoldenrod")
+    inline val darkgray get() = Color("darkgray")
+    inline val darkgreen get() = Color("darkgreen")
+    inline val darkkhaki get() = Color("darkkhaki")
+    inline val darkmagenta get() = Color("darkmagenta")
+    inline val darkolivegreen get() = Color("darkolivegreen")
+    inline val darkorange get() = Color("darkorange")
+    inline val darkorchid get() = Color("darkorchid")
+    inline val darkred get() = Color("darkred")
+    inline val darksalmon get() = Color("darksalmon")
+    inline val darkslateblue get() = Color("darkslateblue")
+    inline val darkslategray get() = Color("darkslategray")
+    inline val darkturquoise get() = Color("darkturquoise")
+    inline val darkviolet get() = Color("darkviolet")
+    inline val deeppink get() = Color("deeppink")
+    inline val deepskyblue get() = Color("deepskyblue")
+    inline val dimgray get() = Color("dimgray")
+    inline val dodgerblue get() = Color("dodgerblue")
+    inline val firebrick get() = Color("firebrick")
+    inline val floralwhite get() = Color("floralwhite")
+    inline val forestgreen get() = Color("forestgreen")
+    inline val fuchsia get() = Color("fuchsia")
+    inline val gainsboro get() = Color("gainsboro")
+    inline val ghostwhite get() = Color("ghostwhite")
+    inline val goldenrod get() = Color("goldenrod")
+    inline val gold get() = Color("gold")
+    inline val gray get() = Color("gray")
+    inline val green get() = Color("green")
+    inline val greenyellow get() = Color("greenyellow")
+    inline val honeydew get() = Color("honeydew")
+    inline val hotpink get() = Color("hotpink")
+    inline val indianred get() = Color("indianred")
+    inline val indigo get() = Color("indigo")
+    inline val ivory get() = Color("ivory")
+    inline val khaki get() = Color("khaki")
+    inline val lavenderblush get() = Color("lavenderblush")
+    inline val lavender get() = Color("lavender")
+    inline val lawngreen get() = Color("lawngreen")
+    inline val lemonchiffon get() = Color("lemonchiffon")
+    inline val lightblue get() = Color("lightblue")
+    inline val lightcoral get() = Color("lightcoral")
+    inline val lightcyan get() = Color("lightcyan")
+    inline val lightgoldenrodyellow get() = Color("lightgoldenrodyellow")
+    inline val lightgray get() = Color("lightgray")
+    inline val lightgreen get() = Color("lightgreen")
+    inline val lightpink get() = Color("lightpink")
+    inline val lightsalmon get() = Color("lightsalmon")
+    inline val lightseagreen get() = Color("lightseagreen")
+    inline val lightskyblue get() = Color("lightskyblue")
+    inline val lightslategray get() = Color("lightslategray")
+    inline val lightsteelblue get() = Color("lightsteelblue")
+    inline val lightyellow get() = Color("lightyellow")
+    inline val limegreen get() = Color("limegreen")
+    inline val lime get() = Color("lime")
+    inline val linen get() = Color("linen")
+    inline val magenta get() = Color("magenta")
+    inline val maroon get() = Color("maroon")
+    inline val mediumaquamarine get() = Color("mediumaquamarine")
+    inline val mediumblue get() = Color("mediumblue")
+    inline val mediumorchid get() = Color("mediumorchid")
+    inline val mediumpurple get() = Color("mediumpurple")
+    inline val mediumseagreen get() = Color("mediumseagreen")
+    inline val mediumslateblue get() = Color("mediumslateblue")
+    inline val mediumspringgreen get() = Color("mediumspringgreen")
+    inline val mediumturquoise get() = Color("mediumturquoise")
+    inline val mediumvioletred get() = Color("mediumvioletred")
+    inline val midnightblue get() = Color("midnightblue")
+    inline val mintcream get() = Color("mintcream")
+    inline val mistyrose get() = Color("mistyrose")
+    inline val moccasin get() = Color("moccasin")
+    inline val navajowhite get() = Color("navajowhite")
+    inline val navi get() = Color("navi")
+    inline val oldlace get() = Color("oldlace")
+    inline val olivedrab get() = Color("olivedrab")
+    inline val olive get() = Color("olive")
+    inline val orange get() = Color("orange")
+    inline val orangered get() = Color("orangered")
+    inline val orchid get() = Color("orchid")
+    inline val palegoldenrod get() = Color("palegoldenrod")
+    inline val palegreen get() = Color("palegreen")
+    inline val paleturquoise get() = Color("paleturquoise")
+    inline val palevioletred get() = Color("palevioletred")
+    inline val papayawhip get() = Color("papayawhip")
+    inline val peachpuff get() = Color("peachpuff")
+    inline val peru get() = Color("peru")
+    inline val pink get() = Color("pink")
+    inline val plum get() = Color("plum")
+    inline val powderblue get() = Color("powderblue")
+    inline val purple get() = Color("purple")
+    inline val rebeccapurple get() = Color("rebeccapurple")
+    inline val red get() = Color("red")
+    inline val rosybrown get() = Color("rosybrown")
+    inline val royalblue get() = Color("royalblue")
+    inline val saddlebrown get() = Color("saddlebrown")
+    inline val salmon get() = Color("salmon")
+    inline val sandybrown get() = Color("sandybrown")
+    inline val seagreen get() = Color("seagreen")
+    inline val seashell get() = Color("seashell")
+    inline val sienna get() = Color("sienna")
+    inline val silver get() = Color("silver")
+    inline val skyblue get() = Color("skyblue")
+    inline val slateblue get() = Color("slateblue")
+    inline val slategray get() = Color("slategray")
+    inline val snow get() = Color("snow")
+    inline val springgreen get() = Color("springgreen")
+    inline val steelblue get() = Color("steelblue")
+    inline val teal get() = Color("teal")
+    inline val thistle get() = Color("thistle")
+    inline val tomato get() = Color("tomato")
+    inline val turquoise get() = Color("turquoise")
+    inline val violet get() = Color("violet")
+    inline val wheat get() = Color("wheat")
+    inline val white get() = Color("white")
+    inline val whitesmoke get() = Color("whitesmoke")
+    inline val yellowgreen get() = Color("yellowgreen")
+    inline val yellow get() = Color("yellow")
+
+    inline val transparent get() = Color("transparent")
+    inline val currentColor get() = Color("currentColor")
+}
+
+fun Color(name: String): CSSColorValue = name.unsafeCast<CSSColorValue>()
+
+private class RGB(val r: Number, val g: Number, val b: Number): CSSColorValue {
+    override fun toString(): String = "rgb($r, $g, $b)"
+}
+
+private class RGBA(val r: Number, val g: Number, val b: Number, val a: Number) : CSSColorValue {
+    override fun toString(): String = "rgba($r, $g, $b, $a)"
+}
+
+private class HSL(val h: CSSAngleValue, val s: Number, val l: Number) : CSSColorValue {
+    override fun toString(): String = "hsl($h, $s%, $l%)"
+}
+
+private class HSLA(val h: CSSAngleValue, val s: Number, val l: Number, val a: Number) : CSSColorValue {
+    override fun toString(): String = "hsla($h, $s%, $l%, $a)"
+}
+
+fun rgb(r: Number, g: Number, b: Number): CSSColorValue = RGB(r, g, b)
+fun rgba(r: Number, g: Number, b: Number, a: Number): CSSColorValue = RGBA(r, g, b, a)
+fun hsl(h: CSSAngleValue, s: Number, l: Number): CSSColorValue = HSL(h, s, l)
+fun hsl(h: Number, s: Number, l: Number): CSSColorValue = HSL(h.deg, s, l)
+fun hsla(h: CSSAngleValue, s: Number, l: Number, a: Number): CSSColorValue = HSLA(h, s, l, a)
+fun hsla(h: Number, s: Number, l: Number, a: Number): CSSColorValue = HSLA(h.deg, s, l, a)

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/css/StylePropertyValue.kt

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+@file:Suppress("UNUSED", "NOTHING_TO_INLINE", "FunctionName")
+package org.jetbrains.compose.web.css
+
+import org.jetbrains.compose.web.*
+
+expect interface StylePropertyValue
+
+expect interface StylePropertyNumber: StylePropertyValue
+expect interface StylePropertyString: StylePropertyValue
+
+inline fun StylePropertyValue(value: String): StylePropertyString = value.unsafeCast<StylePropertyString>()
+inline fun StylePropertyValue(value: Number): StylePropertyNumber = value.unsafeCast<StylePropertyNumber>()
+
+expect interface CSSStyleValue: StylePropertyValue {
+    actual override fun toString(): String
+}
+
+inline fun CSSStyleValue(value: String): CSSStyleValue = StylePropertyValue(value).unsafeCast<CSSStyleValue>()

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

@@ -0,0 +1,196 @@
+/*
+ * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+@file:Suppress("NOTHING_TO_INLINE", "unused")
+
+package org.jetbrains.compose.web.css
+
+import org.jetbrains.compose.web.attributes.HtmlAttrMarker
+import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
+import kotlin.properties.ReadOnlyProperty
+import org.jetbrains.compose.web.*
+
+@Deprecated(
+    message = "Renamed to StyleScope",
+    replaceWith = ReplaceWith("StyleScope", "org.jetbrains.compose.web.css.StyleScope")
+)
+typealias StyleBuilder = StyleScope
+
+/**
+ * StyleScope serves for two main purposes. Passed as a builder context (in [AttrsScope]), it
+ * makes it possible to:
+ * 1. Add inlined css properties to the element (@see [property])
+ * 2. Set values to CSS variables (@see [variable])
+ */
+@HtmlAttrMarker
+interface StyleScope {
+    /**
+     * Adds arbitrary CSS property to the inline style of the element
+     * @param propertyName - the name of css property as [per spec](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
+     * @param value - the value, it can be either String or specialized type like [CSSNumeric] or [CSSColorValue]
+     *
+     * Most frequent CSS property values can be set via specialized methods, like [width], [display] etc.
+     *
+     * Example:
+     * ```
+     * Div({
+     *  style {
+     *      property("some-exotic-css-property", "I am a string value")
+     *      property("some-exotic-css-property-width", 5.px)
+     *  }
+     * })
+     * ```
+     */
+    fun property(propertyName: String, value: StylePropertyValue)
+    fun variable(variableName: String, value: StylePropertyValue)
+
+    fun property(propertyName: String, value: String) = property(propertyName, StylePropertyValue(value))
+    fun property(propertyName: String, value: Number) = property(propertyName, StylePropertyValue(value))
+    fun variable(variableName: String, value: String) = variable(variableName, StylePropertyValue(value))
+    fun variable(variableName: String, value: Number) = variable(variableName, StylePropertyValue(value))
+
+    operator fun <TValue : StylePropertyValue> CSSStyleVariable<TValue>.invoke(value: TValue) {
+        variable(name, value.toString())
+    }
+
+    operator fun CSSStyleVariable<StylePropertyString>.invoke(value: String) {
+        variable(name, value)
+    }
+
+    operator fun CSSStyleVariable<StylePropertyNumber>.invoke(value: Number) {
+        variable(name, value)
+    }
+}
+
+internal inline fun variableValue(variableName: String, fallback: StylePropertyValue? = null) =
+    "var(--$variableName${fallback?.let { ", $it" } ?: ""})"
+
+expect interface CSSVariableValueAs<out T : StylePropertyValue>
+
+inline fun <TValue> CSSVariableValue(value: StylePropertyValue) =
+    value.unsafeCast<TValue>()
+
+inline fun <TValue> CSSVariableValue(value: String) =
+    CSSVariableValue<TValue>(StylePropertyValue(value))
+
+// after adding `variable` word `add` became ambiguous
+@Deprecated(
+    "use property instead, will remove it soon",
+    ReplaceWith("property(propertyName, value)")
+)
+fun StyleScope.add(
+    propertyName: String,
+    value: StylePropertyValue
+) = property(propertyName, value)
+
+interface CSSVariable {
+    val name: String
+}
+
+class CSSStyleVariable<out TValue : StylePropertyValue>(override val name: String) : CSSVariable
+
+fun <TValue : StylePropertyValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null) =
+    CSSVariableValue<TValue>(
+        variableValue(
+            name,
+            fallback
+        )
+    )
+
+fun <TValue> CSSStyleVariable<TValue>.value(fallback: TValue? = null)
+        where TValue : CSSVariableValueAs<TValue>,
+              TValue : StylePropertyValue =
+    CSSVariableValue<TValue>(
+        variableValue(
+            name,
+            fallback
+        )
+    )
+
+/**
+ * Introduces CSS variable that can be later referred anywhere in [StyleSheet]
+ *
+ * Example:
+ * ```
+ * object AppCSSVariables {
+ *  val width by variable<CSSUnitValue>()
+ *  val stringHeight by variable<StylePropertyString>()
+ *  val order by variable<StylePropertyNumber>()
+ * }
+ *
+ * object AppStylesheet : StyleSheet() {
+ *    val classWithProperties by style {
+ *     AppCSSVariables.width(100.px)
+ *     property("width", AppCSSVariables.width.value())
+ * }
+ *```
+ *
+ */
+fun <TValue : StylePropertyValue> variable() =
+    ReadOnlyProperty<Any?, CSSStyleVariable<TValue>> { _, property ->
+        CSSStyleVariable(property.name)
+    }
+
+interface StyleHolder {
+    @ComposeWebInternalApi
+    val properties: StylePropertyList
+    @ComposeWebInternalApi
+    val variables: StylePropertyList
+}
+
+@Deprecated(
+    message = "Renamed to StyleScopeBuilder",
+    replaceWith = ReplaceWith("StyleScopeBuilder", "org.jetbrains.compose.web.css.StyleScopeBuilder")
+)
+typealias StyleBuilderImpl = StyleScopeBuilder
+
+@Suppress("EqualsOrHashCode")
+open class StyleScopeBuilder : StyleScope, StyleHolder {
+    override val properties: MutableStylePropertyList = mutableListOf()
+    override val variables: MutableStylePropertyList = mutableListOf()
+
+    override fun property(propertyName: String, value: StylePropertyValue) {
+        properties.add(StylePropertyDeclaration(propertyName, value))
+    }
+
+    override fun variable(variableName: String, value: StylePropertyValue) {
+        variables.add(StylePropertyDeclaration(variableName, value))
+    }
+
+    // StylePropertyValue is js native object without equals
+    override fun equals(other: Any?): Boolean {
+        return if (other is StyleHolder) {
+            properties.nativeEquals(other.properties) &&
+                variables.nativeEquals(other.variables)
+        } else false
+    }
+
+    @ComposeWebInternalApi
+    internal fun copyFrom(sb: StyleHolder) {
+        properties.addAll(sb.properties)
+        variables.addAll(sb.variables)
+    }
+}
+
+data class StylePropertyDeclaration(
+    val name: String,
+    val value: StylePropertyValue
+) {
+    constructor(name: String, value: String) : this(name, value.unsafeCast<StylePropertyValue>())
+    constructor(name: String, value: Number) : this(name, value.unsafeCast<StylePropertyValue>())
+}
+typealias StylePropertyList = List<StylePropertyDeclaration>
+typealias MutableStylePropertyList = MutableList<StylePropertyDeclaration>
+
+internal fun StylePropertyList.nativeEquals(properties: StylePropertyList): Boolean {
+    if (this.size != properties.size) return false
+
+    var index = 0
+    return all { prop ->
+        val otherProp = properties[index++]
+        prop.name == otherProp.name &&
+            prop.value.toString() == otherProp.value.toString()
+    }
+}

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/css/keywords/Keywords.kt

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+package org.jetbrains.compose.web.css.keywords
+
+import org.jetbrains.compose.web.css.CSSKeywordValue
+import org.jetbrains.compose.web.*
+
+expect interface CSSAutoKeyword : CSSKeywordValue
+
+inline val auto: CSSAutoKeyword
+    get() = CSSKeywordValue("auto").unsafeCast<CSSAutoKeyword>()
+

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

@@ -12,6 +12,7 @@ import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.css.ElementCSSInlineStyle
 import org.w3c.dom.svg.SVGElement
+import org.jetbrains.compose.web.*
 
 @Composable
 @ExplicitGroupsComposable
@@ -44,13 +45,13 @@ private class DomElementWrapper(override val node: Element): DomNodeWrapper(node
 
     fun updateEventListeners(list: List<NamedEventListener>) {
         currentListeners.forEach {
-            node.removeEventListener(it.name, it)
+            //node.removeEventListener(it.name, it)
         }
 
         currentListeners = list
 
         currentListeners.forEach {
-            node.addEventListener(it.name, it)
+            //node.addEventListener(it.name, it)
         }
     }
 
@@ -79,7 +80,7 @@ private class DomElementWrapper(override val node: Element): DomNodeWrapper(node
     }
 
     fun updateAttrs(attrs: Map<String, String>) {
-        node.getAttributeNames().forEach { name ->
+        node.getAttributeNamesWorkaround().forEach { name ->
             when (name) {
                 "style", "class" -> {
                     // skip style and class here, they're managed in corresponding methods
@@ -101,7 +102,6 @@ private class DomElementWrapper(override val node: Element): DomNodeWrapper(node
     }
 }
 
-
 @OptIn(ComposeWebInternalApi::class)
 @Composable
 fun <TElement : Element> TagElement(

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

@@ -61,6 +61,7 @@ import org.w3c.dom.HTMLUListElement
 import org.w3c.dom.HTMLVideoElement
 import org.w3c.dom.Text
 import org.w3c.dom.css.CSSStyleSheet
+import org.jetbrains.compose.web.*
 
 typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit
 typealias ContentBuilder<T> = @Composable ElementScope<T>.() -> Unit

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/elements/RadioGroup.kt

@@ -5,6 +5,7 @@ import org.jetbrains.compose.web.ExperimentalComposeWebApi
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.attributes.builders.InputAttrsScope
 import org.jetbrains.compose.web.attributes.name
+import org.jetbrains.compose.web.*
 
 typealias RadioInputAttrsBuilder = (InputAttrsScope<Boolean>.() -> Unit)
 

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/elements/Style.kt

@@ -6,7 +6,7 @@ import org.w3c.dom.css.CSSStyleDeclaration
 import org.w3c.dom.css.CSSStyleRule
 import org.jetbrains.compose.web.css.*
 import org.w3c.dom.css.CSSStyleSheet
-
+import org.jetbrains.compose.web.*
 
 internal fun CSSStyleSheet.setCSSRules(cssRules: CSSRuleDeclarationList) {
     cssRules.forEach { cssRule ->

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/events/SyntheticEvent.kt

@@ -2,11 +2,12 @@ package androidx.compose.web.events
 
 import org.w3c.dom.events.Event
 import org.w3c.dom.events.EventTarget
+import org.jetbrains.compose.web.*
 
 open class SyntheticEvent<Element : EventTarget> internal constructor(
     val nativeEvent: Event
 ) {
-    val target: Element = nativeEvent.target.unsafeCast<Element>()
+    val target: Element = nativeEvent.target!!.unsafeCast<Element>()
     val bubbles: Boolean = nativeEvent.bubbles
     val cancelable: Boolean = nativeEvent.cancelable
     val composed: Boolean = nativeEvent.composed

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/events/SyntheticInputEvent.kt

@@ -4,6 +4,7 @@ import androidx.compose.web.events.SyntheticEvent
 import org.w3c.dom.DataTransfer
 import org.w3c.dom.events.Event
 import org.w3c.dom.events.EventTarget
+import org.jetbrains.compose.web.*
 
 // @param nativeEvent: Event - we don't use [org.w3c.dom.events.InputEvent] here,
 // since for cases it can be just [org.w3c.dom.events.Event]
@@ -13,8 +14,8 @@ class SyntheticInputEvent<ValueType, Element : EventTarget> internal constructor
 ) : SyntheticEvent<Element>(
     nativeEvent = nativeEvent
 ) {
-    val data: String? = nativeEvent.asDynamic().data?.unsafeCast<String>()
+    val data: String? = nativeEvent.getStringProperty("data")
-    val dataTransfer: DataTransfer? = nativeEvent.asDynamic().dataTransfer?.unsafeCast<DataTransfer>()
+    val dataTransfer: DataTransfer? = nativeEvent.getAnyProperty<DataTransfer?>("dataTransfer")
-    val inputType: String? = nativeEvent.asDynamic().inputType?.unsafeCast<String>()
+    val inputType: String? = nativeEvent.getStringProperty("inputType")
-    val isComposing: Boolean = nativeEvent.asDynamic().isComposing?.unsafeCast<Boolean>() ?: false
+    val isComposing: Boolean = nativeEvent.getBooleanProperty("isComposing")!!
 }

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/events/SyntheticKeyboardEvent.kt

@@ -3,6 +3,7 @@ package org.jetbrains.compose.web.events
 import androidx.compose.web.events.SyntheticEvent
 import org.w3c.dom.events.EventTarget
 import org.w3c.dom.events.KeyboardEvent
+import org.jetbrains.compose.web.*
 
 class SyntheticKeyboardEvent internal constructor(
     nativeEvent: KeyboardEvent
@@ -15,7 +16,7 @@ class SyntheticKeyboardEvent internal constructor(
     val ctrlKey: Boolean = nativeEvent.ctrlKey
     val isComposing: Boolean = nativeEvent.isComposing
     val key: String = nativeEvent.key
-    val locale: String = nativeEvent.asDynamic().locale.toString()
+    val locale: String = nativeEvent.getStringProperty("locale").toString()
     val location: Int = nativeEvent.location
     val metaKey: Boolean = nativeEvent.metaKey
     val repeat: Boolean = nativeEvent.repeat

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/events/SyntheticMouseEvent.kt

@@ -6,6 +6,7 @@ import org.w3c.dom.HTMLElement
 import org.w3c.dom.events.EventTarget
 import org.w3c.dom.events.MouseEvent
 import org.w3c.dom.events.WheelEvent
+import org.jetbrains.compose.web.*
 
 /**
  * https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
@@ -26,8 +27,8 @@ open class SyntheticMouseEvent internal constructor(
 
     // https://github.com/JetBrains/compose-jb/issues/1053
     // movementX and movementY are undefined in SafariMobile MouseEvent
-    val movementX: Int = (nativeEvent.asDynamic().movementX as? Int) ?: 0
+    val movementX: Int = nativeEvent.getIntProperty("movementX") ?: 0
-    val movementY: Int = (nativeEvent.asDynamic().movementY as? Int) ?: 0
+    val movementY: Int = nativeEvent.getIntProperty("movementY") ?: 0
 
     val offsetX: Double = nativeEvent.offsetX
     val offsetY: Double = nativeEvent.offsetY

web/core/src/jsWasmMain/kotlin/org/jetbrains/compose/web/events/SyntheticSelectEvent.kt

@@ -3,6 +3,7 @@ package org.jetbrains.compose.web.events
 import androidx.compose.web.events.SyntheticEvent
 import org.w3c.dom.events.Event
 import org.w3c.dom.events.EventTarget
+import org.jetbrains.compose.web.*
 
 class SyntheticSelectEvent<Element : EventTarget> internal constructor(
     nativeEvent: Event,
@@ -14,7 +15,7 @@ class SyntheticSelectEvent<Element : EventTarget> internal constructor(
 
 
     fun selection(): String {
-        return nativeEvent.target.asDynamic().value.unsafeCast<String?>()?.substring(
+        return nativeEvent.target?.getStringProperty("value")?.substring(
             selectionStart, selectionEnd
         ) ?: ""
     }