jest and node v12 gets stuck while importing file using styled jsx with postcss plugin

[ramasilveyra]

Jest gets stuck while importing file using styled jsx with this plugin.

Repro https://github.com/ramasilveyra/bug-repro-next-styled-jsx-jest.

Not sure if this is the right place to report this bug. If is not I can open another issue in styled jsx or postcss or jest repo.

[joonhocho]

I think this is related to #32.
Upon investigation, I think the problem is due to infinite while loop that is caused by never resolved promise.
https://github.com/giuseppeg/styled-jsx-plugin-postcss/blob/master/index.js#L20

I think to fix this, we need to make everything sync.

This plugin uses postcss-load-plugin that uses cosmiconfig:

cosmiconfig has sync API available https://github.com/davidtheclark/cosmiconfig#synchronous-api.

So we need to fix https://github.com/michael-ciniawsky/postcss-load-plugins/blob/11f7173d8e84a048ba5d8a9afc8b3a3dfa19d362/index.js#L46 here to use sync version.

then https://github.com/giuseppeg/styled-jsx-plugin-postcss/blob/master/processor.js#L20 here can be sync too.

then we don't need the wait while loop anymore.

[ramasilveyra]

Yes, I arrived to a similar place while investigating.

Maybe deasync doesn't play well together with jest (jest mocks globals)? If is that we can try to replace it with execSync, eg: https://joecreager.com/5-reasons-to-avoid-deasync-for-node-js/ 5. There are alternatives. title.

[joonhocho]

It's not just Jest problem. This is not working without Jest as well.
I am using Next.js + styled-jsx + styled-jsx-plugin-postcss and it hangs for the reason I stated.
This plugin just is not working for me at all.

[JosephScript]

Would you like to submit a pull request to fix it?

[assimovt]

@joonhocho have you found the workaround for this issue? Bumped into the same problem.

[StarpTech]

I implemented sync support in postcss-load-plugins

Feel free to provide a first draft pointing to that version.

[StarpTech]

I think this is not the full story. As soon as a postcss plugin is async we can't use the sync version. An error is thrown by postcss. styled-jsx has to support async plugins.

[giuseppeg]

@StarpTech thanks for looking into this and sorry for the troubles! Indeed the problem is that Babel (styled-jsx) is synchronous whereas PostCSS' API is async. When I made this repo (a proof of concept) I used deasync but it is a super hack.

As pointed out by @ramasilveyra the solution here could be to rewrite the plugin to use Node.js' execSync to run a node script that compiles the styles with PostCSS.

Unfortunately I don't have time to make those changes but if anybody feels like submitting a PR, I'd be happy to review, give feedback and merge it if the approach works.