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-"