How to use with sheetify? Having issue with one use case

[rook2pawn]

There are two ways I use sheetify. One is css() outside of my nanocomponent and the other I'd like to use but having issue with is dynamic classes.

This is the error i get

bundle.js:1 Error: Parsing file component.js: visitor[(override || node.type)] is not a function

when I put

  createElement(obj) {
    const prefix = css`
      :host > h1 {
        text-align: center;
      }
    `;
    return html` <div  class=${prefix} onclick=${this.click}>

in my nanocomponent. I have it in my createElement before i return some html. It also has the same error if i move that prefix to the constructor. I have no problem if i consume fixed css outside

css("./component.css");
class Component extends Nanocomponent {

Using it this way works just fine. However, I'd like the flexibility of being able to use dynamically generated css through dynamic classes instead of dynamic inline styling, and I was hoping Sheetify would work for this in nanocomponent. i.e. I'd like to do

  createElement(obj) {
    const prefix = css`
      :host > h1 {
        text-align: center;
        font-size:${obj.fontSize};
      }
    `;
    return html` <div  class=${prefix} onclick=${this.click}>

[ungoldman]

I don't think sheetify can be used dynamically this way, as the CSS is extracted by browserify during the build step. See this note in their README:

https://github.com/stackcss/sheetify#dynamic-vs-static

If you need dynamic style properties in the scope of createElement, you can use the style attribute as suggested in their docs.

tl;dr: this is not a nanocomponent issue, sheetify is not designed to work this way.

Hope that helps! Good luck with your project