Styling: case control flow doesn't add attributes

[Namek]

Issue: no color is applied in the example below.

https://mint-lang.com/sandbox/kCgrWZIMx8CVeA

type Edge {
  Start
  Middle
  End
}

component Main {
  fun render : Html {
    <div>
      <p::test(Edge.Start)>"Hello Wold!"</p>
      <p::test(Edge.Middle)>"Hello Wold!"</p>
      <p::test(Edge.End)>"Hello Wold!"</p>
    </div>
  }

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

The workaround is to use ifs:

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

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

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

[gdotdesign]

This is a case where you would expect it to be parsed as one thing, but it's parsed as another.

In your code, the case is parsed as a selector and will be compiled to:

.Main_test case edge Start => {
  color: red;
}

.Main_test case edge Middle => {
  color: green;
}

.Main_test case edge End => {
  color: brown;
}

Basically, the case edge is one selector and each branch is a nested selector.

Removing the blocks to make it work:

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

I'm not sure how to resolve this, there are a couple of solutions:

1. Make sure that selectors cannot start with case (with a space after)
2. Try to parse the CSS definitions in a block for a case branch
3. Implement proper CSS selector parsing as per CSS spec (although case edge is a valid selector, not sure about Start => though)

I'll try to do 2. for now and see it that solves this issue.