Variables don't work in template strings

When you use a template in your tagged template string css, the browserify transform breaks.

var aColor = '#fff'

var css = sf`.some-class {
  background-color: ${aColor};
}`

CssSyntaxError: /Users/bret/repos/hyperamp/renderer/index.js:3:2: Unknown word while parsing file: /Users/bret/repos/hyperamp/renderer/index.js

  1 | .some-class {
  2 |   background-color: ,;
> 3 | }[object Object]
    |  ^

I started down the road of correcting the in-node implementation, but we are going to have to statically analyze the template string during the transform somehow. I’m not too familiar with this kind of thing. Any ideas?

https://github.com/bcomnes/sheetify/commit/112d7b77448da8f7d73bdbf9bba52171ecab329b

This is related to https://github.com/stackcss/sheetify/issues/54 but specific to the way template variables are busted right now vs how :host gets used.

[yoshuawuyts]

Should be fixed in 6.0.1 which has the latest static-eval - holler if something’s not working as expected

[ahdinosaur]

i wrote my thoughts on sheetify static evaluation in https://github.com/stackcss/sheetify/issues/54#issuecomment-247816150. meanwhile support for template strings has been merged into static-eval: https://github.com/substack/static-eval/pull/13. 🍍