trafnar

  <div [width:20px]>

  <div [color:red @hover:blue]>

  <div [width:{someValue}px]>

  <div.foo>
    <div.bar>
      css color:red # this applies to div.bar
        em color:blue # this applies to div.bar em
      
      "hello"
      <em> "world"

  c:red # same as color:red
  d:vtc # same as display:flex flex-direction:column justify-content:center
  x:10px rotate:30deg # same as transform:translateX(10px), rotate(30deg)

   tag Counter
      count = 0
      <self @click=(count++)> "count: {count}"

  css div { background-color: red; display: flex; flex-direction: column; }
    div@hover {background-color:blue;}

  css div background-color: red display: flex flex-direction: column
    div@hover background-color: blue

  css div bgc:red @hover:blue d:vflex

  let count = 0
  tag Counter
    <self @click=(count++)> "Count is: {count}"
  imba.mount <Counter>, document.body

  let count = 0

  def increment
    count++

  tag App
    <self>
      <button @click=increment> "Increment"
      <div> "Count: {count}"

  imba.mount <App>