Refactor Styling

[gdotdesign]

This PR contains the improvements and refactoring for the style tag. The related issue is #128

• Remove ampersand from sub selectors
• Change CSS interpolation to #{...} from {...}
• Make selectors and media queries nestable
• Make if available in style
• Make case available in style
• Allow parameters for style
• Allow multiple styles for an element
• Use fallback variables for CSS variables

Breaking changes

• The ampersand & is no longer required for sub selectors. It is still required for pseudos. This was a mistake in my part in the first place, it just made it harder to understand what is going on. It was meant to be compatible with the CSS3 Nesting Module which is still in draft state (after many years).

  This way it's more understandable and more compatible with preprocessors like SASS.

• CSS interpolation is now #{...} instead of {...}. This change was needed for two reasons:

  1. parsing CSS selectors and CSS definition using old syntax were in conflict (ambiguous) in certain cases (a:hover {...} vs display: {...};)), the ampersand & for the selectors was a solution for this but since it was removed for more clarity we need to prefix it.
  2. the old syntax was incompatible with JavaScript interpolation and the soon to be implemented string interpolation. All three will use the same syntax.

New features

• Selectors and media queries can be nested infinitely (even in each other). In the past it was not possible to nest media queries and selectors or even selectors in selectors, this is now possible:

  style base {
    max-width: 300px;
  
    div {
      color: red;
  
      span {
        color: blue;
  
        @media (max-width: 300px) {
          color: yellow;
  
          a {
            font-weight: bold;
  
            @media (max-height: 300px) {
              font-style italic;
            }
          }
        }
      }
    }
  }
  

  The example above will compile to:

  .a {
    max-width: 300px;
  }
  
  .a div {
    color: red;
  }
  
  .a div span {
    color: blue;
  }
  
  @media (max-width: 300px) {
    .a div span {
      color: yellow;
    }
  
    .a div span a {
      font-weight: bold;
    }
  }
  
  @media (max-width: 300px) and (max-height: 300px) {
    .a div span a {
      font-weight: italic;
    }
  }

  Sub selectors will use the descendant operator and media queries will be combied using the and keyword.

• if and case can be used inside style tags (in selectors and media queries as well). You can use them to apply styles conditionally:

  style base {
    background: red;
    color: white;
  
    if (loading) {
      background: white;
      color: blue;
    }
  
    case (status) {
      Status::Loading => color: blue;
      Status::Loaded => color: black;
      Status::Error => color: red;
    }
  }
  

  The else branch can be omitted in this case.

• multiple styles can be added to the same element, they are applied in order:

  component Main {
    style one {
      color: blue;
    }
  
    style two {
      backround: red;
    }
  
    style three {
      background: black;
    }
  
    fun render : Html {
      <div>
        <div::one::two>
        </div>
  
        <div::one::three>
        </div>
      </div>
    }
  }
  

• arguments can now be specified for style blocks:

  component Main {
    style item(color : String) {
      background: red;
      color: #{color};
    }
  
    fun render : Html {
      <div>
        <div::item("red")>
          "I am red!"
        </div>
  
        <div::item("blue")>
          "I am blue!"
        </div>
      </div>
    }
  }
  

[s0kil]

The if statements in style will be evaluated at runtime or compile time?

[gdotdesign]

They are evaluated at runtime into a CSS Variable this is an example of a compiled if https://github.com/mint-lang/mint/blob/refactor-styling/spec/compilers/css_with_if