Styling: adding !important modifier does not set dynamic CSS variable for styling control flow #728
Description
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;
}
}
}