Javascript evaluation behavior

[mistadikay]

Hey! Love this plugin, it helps me to migrate to JSS really quickly.

However, it looks like javascript evaluation is somewhat limited. For example, this will be evaluated:

preJSS`
  content {
    background: ${(props) => `#fff url(${props.bg}) no-repeat`};
  }
`

But this will not:

preJSS`
  content {
    background: #fff url(${(props) => props.bg}) no-repeat;
  }
`

Result will look like this:

.content-0-126 {
    background: #fff url($^var__b4437b02-7ad4-1a12-c124-a6b8a508e7fc) no-repeat;
}

Is it expected behavior? If it is, maybe it makes sense to document it?

[sukazavr]

I have the same issue.
@mistadikay did you find a solution?

[mistadikay]

@sukazavr apparently it's just the way (react-)jss works — you can have functions only as a replacement of property values, but not inside of those values

[sukazavr]

@mistadikay but straight injections doesn't work too:

preJSS`
html {
  font-size: ${baseFontSizePx}px;
}
`

Trinspiled to:

html {
  font-size: $^var__19e1c95c-a11c-54e0-d0eb-f10f33336d5dpx;
}

Is it a function too?

[mistadikay]

yeah, this wouldn't work:

preJSS`
html {
  font-size: ${baseFontSizePx}px;
}
`

this would work:

preJSS`
html {
  font-size: ${baseFontSizePx};
}
`