Create-react-app: Define custom pragma as global setting?

[FezVrasta]

Emotion 10 is going to provide a custom createElement function and to work, the app needs to use it as custom pragma.

https://github.com/emotion-js/emotion/issues/637

Is there any way to override the default React createElement in a global manner to avoid to define the custom pragma on every single file?

[jgoux]

I'd like to second this.

I'm currently looking at a way to define it using a react-app-rewired approach but it seems that the option is burried deep. 🕳

I ended up here : https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/create.js#L95-L103

It would be great to add the pragma option here and to give us a parameter / env variable to set it properly. 😄

This would be enough so we can hook into the webpack config and pass the option from a rewired plugin :

{
  "presets": [["react-app", { "flow": true, "typescript": false, pragma: 'myCustomPragma' }]]
}

EDIT :

We can actually make it works today by redefining @babel/transform-react-jsx in the webpack config as plugins are executed before presets (so before the react-app preset used by CRA). It requires react-app-rewired and customize-cra if you don't want to eject.

In term of dependencies to add :

yarn add --dev @wordpress/babel-plugin-import-jsx-pragma babel-plugin-emotion@next babel-plugin-transform-react-jsx

babel-plugin-emotion is not required.

Here is the config-overrides.js :

const { override, addBabelPlugin } = require('customize-cra')
module.exports = override(
  addBabelPlugin(['emotion', options]),
   addBabelPlugin([
      '@wordpress/babel-plugin-import-jsx-pragma',
      {
        scopeVariable: 'jsx',
        source: '@emotion/core',
        isDefault: false
      }
    ]),
   addBabelPlugin([
      '@babel/transform-react-jsx',
      {
        pragma: 'jsx'
      }
    ])
)

I still think it would be better to have a proper API from CRA rather than relying on webpack's execution priority.

[FezVrasta]

I wonder if we could use the Yarn resolutions to override @babel/transform-react-jsx with a custom made "transform-emotion-jsx"?

"resolutions": {
  "@babel/transform-react-jsx": "@emotion/transform-emotion-jsx" // fake package name
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[jgoux]

As of today there is still no easy solution to this issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[FezVrasta]

Hey stale bot stop with this shit.

[FezVrasta]

Anyway, for what is worth, if you don't make use of the css property, you can take advantage of most of the Emotion features using the @emotion/styled/macro and @emotion/css/macro Babel macros.

[coreyward]

@FezVrasta Is there an example of that somewhere?

[FezVrasta]

https://emotion.sh/docs/babel-macros#___gatsby

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[FezVrasta]

I'm losing faith in the open source community with all these stale bots that close perfectly legit issues for no apparent reason...

I promise I will never add one to my own projects.

We went from the "+1" comments to the "no bot please don't close this" ones 🤷‍♂️

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[FezVrasta]

NO STALE!

NO _ STALE

👏 IT 👏ISN'T 👏 STALE 👏

IT IS NOT STALE

[iansu]

We have no plans to implement this right now.

[FezVrasta]

@iansu is there any particular reason you're able to share with us?

[iansu]

We don't want to add options to customize our webpack config and we avoid making changes to accommodate individual libraries or tools. You can still use Emotion, or countless other CSS-in-JS libraries, without this.

[FezVrasta]

An option of this kind would allow to use also other React-like libraries such as Preact.

Honestly I wouldn't dismiss this issue that quickly, but I guess it's up to you.

[localjo]

Something like https://github.com/sharegate/craco/ might enable the custom config you want.