Use import expression injection to replace with @babel/helper-module-imports

Currently styled-jsx has inconsistence behavior between styled-jsx/style and styled-jsx/css imports.

addDefault helper will emit styled-jsx/style code based on babel sourceType, but resolve tags imported from styled-jsx/css aren't handled if it's in sourceType="script" mode

For example, the code below won't be transpiled

const css = require('styled-jsx/css')

exports.normal = css.resolved`p { color: blue }`
exports.resolved = css`p { color: red }`

But any <style jsx> usage in commonjs module will be transpiled and inject the imports/require.

Import declarations can be easily captured in AST traversal, but require expressions (w/ or w/o module interop) is hard to be captured. Such asstyled-jsx/css is using this way to transpile css related usages.

It's better to only support ESM transform and let other plugin for example (commonjs plugin) to handle the ESM to CJS transform.

Suggested Usage

Use ESModule syntax for jsx styles. If you want to transformed to CJS, use commonjs plugin