breaking(gatsby-plugin-emotion): update to emotion@11

[theskillwithin]

Upgrade gatsby-plugin-emotion package to use the new @emotion/react dep.

with new emotion update, this package no longer works unless these deps are upgraded

Fixes #28063

[wardpeet]

Thanks for the update! I don't think it's critical ;) as peer deps still hold on to the old versions.

Could you update our examples as well:

• https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image
• https://github.com/gatsbyjs/gatsby/tree/master/examples/using-emotion-prismjs
• https://github.com/gatsbyjs/gatsby/tree/master/examples/using-emotion

[kimbaudi]

looking forward to this update to emotion@11

[theskillwithin]

@wardpeet yes thats a good idea. thanks for your help.

it seems I have tests failing still =[

When reviewing this PR please also check:

https://emotion.sh/docs/emotion-11 - this has all the package renaming

&&

looking at babel-preset-css-prop https://emotion.sh/docs/@emotion/babel-preset-css-prop

A Babel preset to automatically enable Emotion’s css prop when using the classic JSX runtime. If you want to use the new JSX runtimes please do not use this preset but rather just include our @emotion/babel-plugin directly and follow instructions for configuring the new JSX runtimes here.

conclusion

It looks like there is more work that can be done here to improve this gatsby plugin. However I am afraid I do not quite understand whats going on in gatsby-node.js for this plugin. I might have bitten off more than I can chew here.

[kimbaudi]

@theskillwithin - there seems to be a lot of places where you need to replace the following:

• @emotion/core to @emotion/react
• jest-emotion to @emotion/jest
• babel-plugin-emotion to @emotion/babel-plugin

But I think the reason why the test is failing is because emotion v11 changed autoLabel type from a boolean with a default value of true to a string with a default value of dev-only.

So you need to update gatsby-node.js in packages/gatsby-plugin/emotion/src folder.

from:

exports.pluginOptionsSchema = ({ Joi }) =>
  Joi.object({
    ...
    autoLabel: Joi.boolean()
      .default(process.env.NODE_ENV !== `production`)
      .description(
        `This option automatically adds the label property to styles so that class names generated by css or styled include the name of the variable the result is assigned to. You can read more about this option in babel-plugin-emotion's docs: https://emotion.sh/docs/babel-plugin-emotion#autolabel`
      ),
    ...
  })

to:

exports.pluginOptionsSchema = ({ Joi }) =>
  Joi.object({
    ...
    autoLabel: Joi.string()
      .default(`dev-only`)
      .description(
        `This option automatically adds the label property to styles so that class names generated by css or styled include the name of the variable the result is assigned to. You can read more about this option in @emotion/babel-plugin's docs: https://emotion.sh/docs/@emotion/babel-plugin#autolabel`
      ),
    ...
  })

I created a PR on your fork of gatsby repo with the remaining changes (https://github.com/theskillwithin/gatsby/pull/1).
Can you review and apply changes to this commit?

[wardpeet]

Awesome! This looks great, I'll test it out!

Thank you and congrats on your first contribution! 🎉

[LekoArts]

@ward It seems like the changes in https://github.com/theskillwithin/gatsby/pull/1 should also be incorporated

[jHards]

@ward It seems like the changes in theskillwithin#1 should also be incorporated

now merged but checks failing

[kimbaudi]

@jHards - sorry, the ci/circleci: bootstrap is failing because I edited packages/gatsby-admin/src/components/recipes-gui/resource-message.js. I'll fix it.

[kimbaudi]

all checks have passed!

[kimbaudi]

the build failed during integration testing. Not sure what is the cause since the code hasn't changed since the last build. I tried to resolve merge conflict, but the build failed. So I reverted my changes, but the build is still failing...

 FAIL  __tests__/develop.js (10.24s)
  ● gatsby develop › starts a gatsby site on port 8000

    Command failed with exit code 1: /tmp/gatsby-cli-QNNnyx/node_modules/.bin/gatsby develop
    internal/modules/cjs/loader.js:582
        throw err;
        ^

    Error: Cannot find module '/home/circleci/project/integration-tests/gatsby-cli/gatsby-sites/gatsby-develop/.cache/tmp-1699-D13C9Oh9Bssz'

      internal/modules/cjs/loader.js:582
          throw err;
          ^
      Error: Cannot find module '/home/circleci/project/integration-tests/gatsby-cli/gatsby-sites/gatsby-develop/.cache/tmp-1699-FaeQMKUq5j9K'
      at makeError (integration-tests/gatsby-cli/node_modules/execa/lib/error.js:59:11)
      at handlePromise (integration-tests/gatsby-cli/node_modules/execa/index.js:114:26)

[GAO8A]

This appears to be blocking the completion of Tutorial part 4 (and also 5) on the Gatsby website. Is there a temporary work around?

[theskillwithin]

whats going on here?

[wardpeet]

Tested and works great! 🙏 Thank you!