Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(babel-preset-gatsby): allow setting importSource on preset-react #29260

Merged
merged 5 commits into from
Feb 25, 2021

Conversation

disintegrator
Copy link
Contributor

@disintegrator disintegrator commented Jan 28, 2021

Description

With React 17's new JSX transform feature, it is possible to pass a custom JSX factory besides React's default one. This is useful when working with libraries like Emotion 11: https://emotion.sh/docs/css-prop#babel-preset.

In order to support this feature in babel-preset-gatsby, this PR adds an option called reactImportSource that is passed down to the underlying @babel/preset-react preset option importSource.

Users of babel-preset-gatsby can then use this like so:

{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "reactRuntime": "automatic",
        "reactImportSource": "@emotion/react"
      }
    ]
  ]
}

With React 17's new JSX transform feature, it is possible to pass a custom JSX factory besides React's default one. This is useful when working with libraries like Emotion 11: https://emotion.sh/docs/css-prop#babel-preset.

In order to support this feature in `babel-preset-gatsby`, this PR adds an option called `reactImportSource` that is passed down to the underlying `@babel/preset-react` preset option `importSource`.

Users of `babel-preset-gatsby` can then use this like so:

```json
{
  "presets": [
    [
      "babel-preset-gatsby",
      { "reactRuntime": "automatic", "reactImportSource": "@emotion/react" }
    ]
  ]
}
```
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jan 28, 2021
@disintegrator disintegrator changed the title feat(babel-preset-gatsby): allow passing importSource to preset-react feat(babel-preset-gatsby): allow setting importSource on preset-react Jan 28, 2021
@vladar vladar added topic: webpack/babel Webpack or babel and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Jan 29, 2021
@disintegrator
Copy link
Contributor Author

@vladar do I need to do anything to make "Cloud Tests" go green?

@laurieontech
Copy link
Contributor

Thanks for the PR @disintegrator! We want to get this in today so I made a few small changes, but wanted to make sure you got credit for the contribution as well.

@laurieontech laurieontech merged commit f72ff77 into gatsbyjs:master Feb 25, 2021
@disintegrator
Copy link
Contributor Author

Fantastic, happy to see this go in! Thanks @laurieontech :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: webpack/babel Webpack or babel
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants