gatsby-starter-blog-theme printing "Functions that are interpolated in css calls will be stringified" error in console

Description

Fresh Gatsby instance created using the command gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme-core is printing a “Functions that are interpolated in css calls will be stringified” error in browser console

Steps to reproduce

1. On a machine with gatsby and yarn installed globally run gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme-core
2. go into newly created folder and run gatsby develop
3. view the site in chrome and open the developer tools -> console. You should be able to see the error

Minimal Reproduction https://github.com/seetdev-opensource/interpolated-in-css-calls-error

Expected result

No “Functions that are interpolated in css calls will be stringified” error in browser console should be printed

Actual result

“Functions that are interpolated in css calls will be stringified” was printed twice

Environment

System: OS: macOS Mojave 10.14.6 CPU: (8) x64 Intel® Core™ i7-8569U CPU @ 2.80GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 13.3.0 - ~/.nvm/versions/node/v13.3.0/bin/node Yarn: 1.21.1 - ~/.nvm/versions/node/v13.3.0/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v13.3.0/bin/npm Languages: Python: 3.7.3 - /Users/darrens/miniconda3/bin/python Browsers: Chrome: 79.0.3945.88 Firefox: 69.0.3 Safari: 13.0.4 npmPackages: gatsby: ^2.18.12 => 2.18.12 gatsby-theme-blog: ^1.2.7 => 1.2.7 npmGlobalPackages: gatsby-cli: 2.8.22

Additional Information The error messages appear to be caused by the following block of code around lines 57-62 of packages/gatsby-theme-blog/src/components/header.js

const iconCss = [
  css({
    pointerEvents: `none`,
  }),
  { margin: 4 }, // Explicitly leave margin out of theme-ui, this positioning should not change based on theme
]

I can make the error go away if I change the same block of in node_modules to the following:

const iconCss = [
  {
    pointerEvents: "none",
  },
  { margin: 4 }, // Explicitly leave margin out of theme-ui, this positioning should not change based on theme
]

Not sure if it might be related but issue 997 in emotion-js/emotion mention something about not being able to compose themed css in emotion 10. The same issue mentioned that it might be fixed in version 11.

[bochap]

I will create the PR for this.

[samovertonjr]

Awesome! Get a PR up for this and you should be good to go.