Add support of important in compose html css dsl

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

@@ -42,11 +42,14 @@ interface StyleScope {
      * })
      * ```
      */
-    fun property(propertyName: String, value: StylePropertyValue)
+    fun property(propertyName: String, value: StylePropertyValue, important: Boolean)
+    fun property(propertyName: String, value: StylePropertyValue) = property(propertyName, value, false)
     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 property(propertyName: String, value: String, important: Boolean) = property(propertyName, StylePropertyValue(value), important)
+    fun property(propertyName: String, value: String) = property(propertyName, value, false)
+    fun property(propertyName: String, value: Number, important: Boolean) = property(propertyName, StylePropertyValue(value), important)
+    fun property(propertyName: String, value: Number) = property(propertyName, value, false)
     fun variable(variableName: String, value: String) = variable(variableName, StylePropertyValue(value))
     fun variable(variableName: String, value: Number) = variable(variableName, StylePropertyValue(value))
 
@@ -150,8 +153,8 @@ 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 property(propertyName: String, value: StylePropertyValue, important: Boolean) {
+        properties.add(StylePropertyDeclaration(propertyName, value, important))
     }
 
     override fun variable(variableName: String, value: StylePropertyValue) {
@@ -175,10 +178,11 @@ open class StyleScopeBuilder : StyleScope, StyleHolder {
 
 data class StylePropertyDeclaration(
     val name: String,
-    val value: StylePropertyValue
+    val value: StylePropertyValue,
+    val important: Boolean = false,
 ) {
-    constructor(name: String, value: String) : this(name, value.unsafeCast<StylePropertyValue>())
-    constructor(name: String, value: Number) : this(name, value.unsafeCast<StylePropertyValue>())
+    constructor(name: String, value: String, important: Boolean = false) : this(name, value.unsafeCast<StylePropertyValue>(), important)
+    constructor(name: String, value: Number, important: Boolean = false) : this(name, value.unsafeCast<StylePropertyValue>(), important)
 }
 typealias StylePropertyList = List<StylePropertyDeclaration>
 typealias MutableStylePropertyList = MutableList<StylePropertyDeclaration>
@@ -190,6 +194,7 @@ internal fun StylePropertyList.nativeEquals(properties: StylePropertyList): Bool
     return all { prop ->
         val otherProp = properties[index++]
         prop.name == otherProp.name &&
-            prop.value.toString() == otherProp.value.toString()
+            prop.value.toString() == otherProp.value.toString() &&
+                prop.important == otherProp.important
     }
 }

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

@@ -67,8 +67,9 @@ private class DomElementWrapper(override val node: Element): DomNodeWrapper(node
 
                 val style = node.unsafeCast<ElementCSSInlineStyle>().style
 
-                styleApplier.properties.forEach { (name, value) ->
-                    style.setProperty(name, value.toString())
+                styleApplier.properties.forEach { (name, value, important) ->
+                    if (important) error("important")
+                    style.setProperty(name, value.toString(), if (important) "important" else "")
                 }
 
                 styleApplier.variables.forEach { (name, value) ->

html/core/src/jsMain/kotlin/org/jetbrains/compose/web/dom/Style.kt

@@ -54,8 +54,8 @@ private fun fillRule(
     when (cssRuleDeclaration) {
         is CSSStyledRuleDeclaration -> {
             val cssStyleRule = cssRule.unsafeCast<CSSStyleRule>()
-            cssRuleDeclaration.style.properties.forEach { (name, value) ->
-                setProperty(cssStyleRule.style, name, value)
+            cssRuleDeclaration.style.properties.forEach { (name, value, important) ->
+                setProperty(cssStyleRule.style, name, value, important)
             }
             cssRuleDeclaration.style.variables.forEach { (name, value) ->
                 setVariable(cssStyleRule.style, name, value)
@@ -86,8 +86,8 @@ fun CSSRuleDeclaration.stringPresentation(
     strings.add("$baseIndent${cssRuleDeclaration.header} {")
     when (cssRuleDeclaration) {
         is CSSStyledRuleDeclaration -> {
-            cssRuleDeclaration.style.properties.forEach { (name, value) ->
-                strings.add("$baseIndent$indent$name: $value;")
+            cssRuleDeclaration.style.properties.forEach { (name, value, important) ->
+                strings.add("$baseIndent$indent$name: $value${if (important) " !important" else ""};")
             }
             cssRuleDeclaration.style.variables.forEach { (name, value) ->
                 strings.add("$baseIndent$indent--$name: $value;")
@@ -111,9 +111,10 @@ fun CSSRuleDeclaration.stringPresentation(
 internal fun setProperty(
     style: CSSStyleDeclaration,
     name: String,
-    value: StylePropertyValue
+    value: StylePropertyValue,
+    important: Boolean
 ) {
-    style.setProperty(name, value.toString())
+    style.setProperty(name, value.toString(), if (important) "important" else "")
 }
 
 internal fun setVariable(

html/core/src/jsTest/kotlin/css/StyleSheetTests.kt

@@ -42,6 +42,33 @@ class StyleSheetTests {
         )
     }
 
+    @Test
+    fun useImportantStyleSheet() {
+        val styleSheet = object : StyleSheet(usePrefix = false) {
+            val someClassName by style {
+                property("color", "red", true)
+            }
+        }
+
+        val childStyleSheet = object : StyleSheet(styleSheet, usePrefix = false) {
+            val someClassName by style {
+                property("color", "green", false)
+            }
+        }
+
+        assertContentEquals(
+            listOf(".someClassName { color: red !important;}", ".someClassName { color: green;}"),
+            styleSheet.serializeRules(),
+            "styleSheet rules"
+        )
+
+        assertContentEquals(
+            listOf(".someClassName { color: red !important;}", ".someClassName { color: green;}"),
+            childStyleSheet.serializeRules(),
+            "childStyleSheet rules"
+        )
+    }
+
     @Test
     fun stylesheetCorrectlyUsingIncomingPrefix() {
         val testPrefixParent = "test_prefix_parent-"