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?

Yang Bo · Accepted Answer · 2018-03-28T17:01:25.253

4

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.

edited Mar 28 '18 at 17:01

answered Mar 20 '17 at 16:51

Yang Bo

3,586
3
22
35

This question and answer is moved from https://github.com/ThoughtWorksInc/Binding.scala/wiki/FAQ – Yang Bo Mar 20 '17 at 16:52

score 1 · Answer 2 · answered Mar 28 '18 at 05:39

Using the answer of Yang Bo:

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

Gives me an Exception:

ScalaFiddle.scala:22: error: overloaded method value domBindingSeq with alternatives:
  ( text: String)binding.this.Binding.Constants[raw.this.Text] 
...

See https://scalafiddle.io/sf/ATMVpjV/0

This solved it:

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

See https://scalafiddle.io/sf/ATMVpjV/1

It seems that ScalaFiddle turned off `coalescing` flag. See https://github.com/ThoughtWorksInc/Binding.scala/issues/30 and https://github.com/ThoughtWorksInc/Binding.scala/issues/58 — Yang Bo, Mar 28 '18 at 17:02

How do I declare embedded css with Binding.scala

2 Answers2