diff --git a/html/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleScope.kt b/html/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleScope.kt
index 387605d29a2..49678c09c15 100644
--- a/html/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleScope.kt
+++ b/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())
- constructor(name: String, value: Number) : this(name, value.unsafeCast())
+ constructor(name: String, value: String, important: Boolean = false) : this(name, value.unsafeCast(), important)
+ constructor(name: String, value: Number, important: Boolean = false) : this(name, value.unsafeCast(), important)
}
typealias StylePropertyList = List
typealias MutableStylePropertyList = MutableList
@@ -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
}
}
diff --git a/html/core/src/jsMain/kotlin/org/jetbrains/compose/web/dom/Base.kt b/html/core/src/jsMain/kotlin/org/jetbrains/compose/web/dom/Base.kt
index 78862f84dfe..df21f791176 100644
--- a/html/core/src/jsMain/kotlin/org/jetbrains/compose/web/dom/Base.kt
+++ b/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().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) ->
diff --git a/html/core/src/jsMain/kotlin/org/jetbrains/compose/web/dom/Style.kt b/html/core/src/jsMain/kotlin/org/jetbrains/compose/web/dom/Style.kt
index 272e88ffe03..7b77f1ea0dd 100644
--- a/html/core/src/jsMain/kotlin/org/jetbrains/compose/web/dom/Style.kt
+++ b/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()
- 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(
diff --git a/html/core/src/jsTest/kotlin/css/StyleSheetTests.kt b/html/core/src/jsTest/kotlin/css/StyleSheetTests.kt
index ed5ccab253c..8864194ca30 100644
--- a/html/core/src/jsTest/kotlin/css/StyleSheetTests.kt
+++ b/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-"