SyntaxError: Unexpected token - when requiring sheetify in a file using JSX

[m90]

I'm trying to use sheetify in a module that is using JSX syntax:

const { h } = require('preact');
const css = require('sheetify');

const styles = css`:host { color: hotpink; }`;

const HelloThing = () => (
  <h1 class={styles}>Hello!</h1>
);

module.exports = HelloThing;

This gives me:

SyntaxError: Unexpected token (7:2) while parsing file: whatevs.js

My browserify setup in package.json looks like:

    "transform": [
      [
        "sheetify/transform",
        {
          "use": [
            [
              "sheetify-postcss",
              {
                "plugins": [
                  "postcss-cssnext"
                ]
              }
            ]
          ]
        }
      ],
      "babelify"
    ]
  },

Reading #49 makes me think it should work, but apparently it doesn't. Any idea or hint on how this could work?

Edit: i'm running up-to-date browserify@14 / budo@10

[m90]

Interestingly, when I externalize the css call like:

const css = require('sheetify');
module.exports = css`:host { color: hotpink; }`;

and then consume this in the file that is using JSX, it works as expected.

[goto-bus-stop]

yeah the sheetify transform only works with standard JS syntax. it ignores files that do not contain the string 'sheetify' for performance, which is why it works if you move the sheetify call to a file that does not contain JSX.

does your build already include a transform to turn JSX into standard JS function calls? it should work if you swap the order, ie. if you run Babel/Bublé/xyz before sheetify.

[m90]

If I run babelify (or else) before running sheetify this will also remove/transpile the tagged template literals, so sheetify becomes a noop. From what I understand this is also what this part of the README is trying to say:

Well, that might be because you're running babelify before running sheetify. sheetify looks for template strings in your code and then transforms them as inline stylesheets. If these are caught and transformed to ES5 strings by babelify then sheetify ends up sad. So try running sheetify before babelify and you should be good, we hope.

I think in order to solve this one would have to plug acorn-jsx into acorn (which I tried a while ago but failed).

[goto-bus-stop]

Oh of course, you're right. Hmm. in yo-yoify we now detect transpiled template literals and process them too; we could do something similar here

[m90]

That sounds reasonable. I think I should find the time next week to give this a try if that's ok. I'll let you know what comes out of it.

[goto-bus-stop]

Did #141 help? :)

[m90]

Works like a charm!