flowtype conflict with cssx

[rosskevin]

I got past the eslint errors with the eslint-plugin-cssx!

Next, I also use flowtype.org for my react app, and it chokes on the syntax. I'm wondering if there is a flow preprocessor/api as well so we can take the same approach.

 ❯❯❯ flow                                                                                                                                                                                                     Launching Flow server for /Users/kross/projects/my-relay-starter-kit
Spawned flow server (child pid=66702)
Logs will go to /private/tmp/flow/zSUserszSkrosszSprojectszSmy-relay-starter-kit.log
src/App.js:21
 21:     font-family: Roboto, sans-serif;
                    ^ Unexpected token :

Found 1 error

Reproducing

1. git clone https://github.com/rosskevin/my-relay-starter-kit
2. npm install
3. npm run flow

[krasimir]

I see. I had similar issues with JSX. The trick was to run CSSX transpiler before the one that transpiles JSX. However, in this case we run flow directly and we can't plug in something in between. As a temporary solution I can suggest:

1. We use https://github.com/krasimir/cssx/tree/master/packages/cssx-cli to transpile all the files to a temporary folder
2. We run flow ignoring src
3. We then delete the temporary folder

[rosskevin]

Thanks, I'll use your workaround until we can get a preprocessor in flow.

[krasimir]

@rosskevin is the suggested workaround fixed your problem?

[rosskevin]

This workaround is viable, just not optimal. As-is, I'm not using cssx yet due to this and the ide integration problem (which I filed an issue).

[krasimir]

I see. Unfortunately I don't see any other option at the moment. I mean CSSX is kinda new language and without transpiling the code nothing works on top of it. Regarding the IDE, I totally agree. It's still a problem.

[alexkuz]

If someone still needs this - you can use Flow comments as workaround:

export default useSheet(
  /*::`*/
  <style>
    outroAppInfo {
      display: flex;
      margin-top: 1.5rem;
    }
  </style>
  /*::`*/
)(OutroAppInfo);

(I'm using it with react-jss here) This code will be treated by Flow as template literal and therefore ignored.