CSSVariableBuilder

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

@@ -2,23 +2,7 @@ package org.jetbrains.compose.web.css
 
 import org.jetbrains.compose.web.css.selectors.CSSSelector
 
-interface CSSStyleRuleBuilder : StylePropertyBuilder {
+    interface CSSStyleRuleBuilder : StylePropertyBuilder, StyleVariableBuilder
-    fun variable(variableName: String, value: StylePropertyValue)
-    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)
-    }
-}
 
 open class CSSRuleBuilderImpl : CSSStyleRuleBuilder, StyleBuilderImpl()
 

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

@@ -16,6 +16,25 @@ interface StylePropertyBuilder {
     fun property(propertyName: String, value: Number) = property(propertyName, StylePropertyValue(value))
 }
 
+interface StyleVariableBuilder {
+    fun variable(variableName: String, value: StylePropertyValue)
+    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)
+    }
+}
+
+
 inline fun variableValue(variableName: String, fallback: StylePropertyValue? = null) =
     "var(--$variableName${fallback?.let { ", $it" } ?: ""})"