How do I declare embedded css with Binding.scala

Question

I tried to declare some embedded css with Binding.scala

import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._

@dom def css = <style>
  body {
    background-color: lightblue;
  }
</style>

dom.render(document.head, css)

However, I got the error message:

ScalaFiddle.scala:6: error: not found: type lightblue
      background-color: lightblue;
                        ^
ScalaFiddle.scala:6: error: not found: value background
      background-color: lightblue;
      ^
ScalaFiddle.scala:6: error: not found: value color
      background-color: lightblue;
                 ^

How can I fix it?

Answer 1

You see the error message because { is a special character in Scala's XML literal.

Use a CDATA section in the style element.

@dom def css = <style>
  <![CDATA[
    body {
      background-color: lightblue;
    }
  ]]>
</style>

The { does not have special meaning in the CDATA section any more.

---

Note this CDATA approach only works when coalescing flag is on. See https://github.com/ThoughtWorksInc/Binding.scala/issues/30 and https://github.com/ThoughtWorksInc/Binding.scala/issues/58 if you accidentally turns the flag off.