Allow sub selectors in conditionals.

[Namek]

Hi, consider the following code:

component Main {
  fun render : Html {
    <div::s(false)>"Hello World!"</div>
  }

  style s(isSelected : Bool) {
    &:hover {
      border: 3px solid blue;
    }

    if (!isSelected) {
      &:not(:hover) {
        border: 3px dashed red;
      }
    }
  }
}

Sandbox: https://mint-lang.com/sandbox/Nr_GNTQ-MiuISg

Expectation: element has red border when it's not hovered
Observation: element doesn't have any border when it's hovered

The :not(:hover) construct works when I delete if (!isSelected) condition.

[ryanprior]

As a workaround, you can invert the conditional like so:

&:not(:hover) {
  if (!isSelected) {
    border: 3px dashed red;
  }
}

My attempt at an explanation is that it doesn't like a whole new css selector being added conditionally. Mint compiles css conditionals using css variables, so in the inverted example that works, it's setting the border depending on the css variable.

@gdotdesign should it be an error to put css selectors inside a conditional, or is there some reasonable way this could be made to work?

[gdotdesign]

As @ryanprior wrote, it's not possible to put sub selectors in if and case statements because of how it's currently implemented.

In theory, it should be possible to make it work. I'll convert this issue to a feature request.