Styling: adding !important modifier does not set dynamic CSS variable for styling control flow

[Namek]

This is a follow-up of the #727 about the case not working in styles. Also, I need to use !important because of this issue of the style ordering: #723

Issue: using an if causes using a dynamically created CSS variable. However, adding the !important modifier stops variables being set (see 2nd screenshot below).

Sandbox:
https://mint-lang.com/sandbox/6sgyVm785ocTDw

type Edge {
  Start
  Middle
  End
}

component Main {
  fun render : Html {
    <div>
      <p>"All text below should NOT be black"</p>
      <hr/>
      <p::test(Edge.Start)>"Hello Wold!"</p>
      <p::test(Edge.Middle)>"Hello Wold!"</p>
      <p::test(Edge.End)>"Hello Wold!"</p>
      <hr/>
      <p::test2(Edge.Start)>"Hello Wold!"</p>
      <p::test2(Edge.Middle)>"Hello Wold!"</p>
      <p::test2(Edge.End)>"Hello Wold!"</p>
    </div>
  }

  style test(edge : Edge) {
    case edge {
      Start => {
        color: red;
      }
      Middle => {
        color: green;
      }
      End => {
        color: brown;
      }
    }
  }

  style test2(edge : Edge) {
    if edge == Edge.Start {
      color: red !important;
    }

    else if edge == Edge.Middle {
      color: green !important;
    }

    else if edge == Edge.End {
      color: brown !important;
    }
  }
}