🎨 CSS: implement !important modifier

Sources/CSS/CSSFunction.swift

@@ -7,7 +7,7 @@
 
 import WebFoundation
 
-public final class CSSFunction: CustomStringConvertible {
+public final class CSSFunction: CustomStringConvertible, PropertyValueImportantable, _StringPropertyValue {
     public let value: String
 
     public init (_ value: String) { self.value = value }

Sources/CSS/CSSProperty.swift

@@ -36,10 +36,6 @@ public protocol Property: AnyProperty, PropertiesContent {
     var propertyKey: PropertyKey<Value> { get }
     var propertyValue: Value { get }
     var propertyAliases: [AnyProperty] { get }
-
-
-
-//    var important: Self { get }
 }
 
 extension Property {
@@ -49,11 +45,6 @@ extension Property {
     public var value: String { propertyValue.description }
 
     public var propertyAliases: [AnyProperty] { [] }
-//    /// Adds `!important` to the end of value
-//    public var important: Self {
-//        value += "!important"
-//        return self
-//    }
 }
 
 class _PropertyContent<Value: CustomStringConvertible> {
@@ -72,3 +63,19 @@ extension _Property {
         _content._changeHandler(newValue)
     }
 }
+
+public protocol PropertyValueImportantable {
+    /// Adds **!important** to the value
+    var important: Self { get }
+}
+
+protocol _StringPropertyValue: CustomStringConvertible, PropertyValueImportantable {
+    var value: String { get }
+
+    init (_ value: String)
+}
+
+extension _StringPropertyValue {
+    /// Adds **!important** to the value
+    public var important: Self { .init(value + "!important") }
+}

Sources/CSS/CSSRule.swift

@@ -141,31 +141,31 @@ extension BaseElement: CSSRulable {}
 extension CSSRulable {
     func _addProperty<P: _Property>(_ property: P) {
         let key = property.key
-        _setProperty(key, property.value)
+        _setProperty(key, property.value, important: false)
         if let internalChangeable = property.propertyValue as? _PropertyValueInnerChangeable {
             internalChangeable._changeHandler = {
-                self._setProperty(key, property.propertyValue.description)
+                self._setProperty(key, property.propertyValue.description, important: false)
             }
         }
         property._content._changeHandler = { newValue in
             guard let newValue = newValue else {
                 self._removeProperty(key)
                 return
             }
-            self._setProperty(key, newValue.description)
+            self._setProperty(key, newValue.description, important: false)
         }
     }
 
-    func _addProperty(_ key: String, _ value: String) {
-        _setProperty(key, value)
+    func _addProperty(_ key: String, _ value: String, important: Bool? = nil) {
+        _setProperty(key, value, important: important)
     }
 
-    func _addProperty<V>(_ key: PropertyKey<V>, _ value: V) where V : CustomStringConvertible {
-        _addProperty(key.key, value.description)
+    func _addProperty<V>(_ key: PropertyKey<V>, _ value: V, important: Bool? = nil) where V : CustomStringConvertible {
+        _addProperty(key.key, value.description, important: important)
     }
 
-    func _addProperty<V>(_ key: PropertyKey<V>, value: String) where V : CustomStringConvertible {
-        _addProperty(key.key, value)
+    func _addProperty<V>(_ key: PropertyKey<V>, value: String, important: Bool? = nil) where V : CustomStringConvertible {
+        _addProperty(key.key, value, important: important)
     }
 
     func _removeProperty(_ key: String) {
@@ -183,7 +183,11 @@ extension CSSRulable {
         #endif
     }
 
-    func _setProperty(_ key: String, _ value: String) {
+    func _setProperty(_ key: String, _ value: String, important: Bool?) {
+        var value = value
+        if important == true {
+            value += (important == true ? "!important" : "")
+        }
         #if arch(wasm32)
         if let s = self as? CSSRule {
             s.set(key, value)

Sources/CSS/Color.swift

@@ -12,12 +12,15 @@ protocol _PropertyValueInnerChangeable: AnyObject {
 }
 
 public typealias WColor = Color
-open class Color: CustomStringConvertible, _PropertyValueInnerChangeable, Hashable, ExpressibleByIntegerLiteral {
+open class Color: CustomStringConvertible, _PropertyValueInnerChangeable, Hashable, ExpressibleByIntegerLiteral, PropertyValueImportantable {
     @State public var value: ColorType = .css(.black)
 
     var _changeHandler = {}
 
-    public init (_ value: ColorType) {
+    /// Adds **!important** to the value
+    public var important: Self { .init(value.important) }
+
+    public required init (_ value: ColorType) {
         self.value = value
     }