feat(emotion): Upgrade emotion to v10 (#15106)

* ref(ui): Refactor `cx` from emotion to `classnames`

We generally use the `classnames` library to handle merging/dynamic `className`. No reason to use two different libraries.

* upgrade emotion, add styled wrapper for typings (and related paths), add eslint rules for emotion, update babel plugin

* Refactor usage of emotion `css` being treated as a class name string

* change innerRef --> ref

* refactor grid-emotion props and update to `reflexbox`

* eslint for emotion-setup

* refactor injectGlobal --> Global for emotion upgrade

* Add <CacheProvider>, this is needed to turn speedy off for percy

* refactor <HeaderItem> - fix missing props to styled components, remove innerRef and forwardRef

* Change <Tooltip> logic for when to apply a wrapper, emotion causes the previously expected types to be different

* random TS fixes for styled components

* fix <RadioGroup> animation needing `css`

* forwardRef for Switch

* define a `theme.space` for rebass/grid

* fix DOM attribute warnings with "loading" prop

* fix settings breadcrumb - Box in `reflexbox` has different CSS than grid-emotion

* change <ProviderRow> to remove `Flex` around CircleIndicator as it was squishing it on small widths

* css fixes for percy

* fix featureDisabled logic for custom alerts because emotion

* refactor emotion9 --> emotion10 (imports)

* update snapshots and fix tests

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
+  plugins: ['@typescript-eslint', 'emotion'],
   extends: ['sentry-app/strict'],
   globals: {
     require: false,
@@ -11,7 +11,12 @@ module.exports = {
     tick: true,
     jest: true,
   },
-  rules: {},
+  rules: {
+    'emotion/jsx-import': 'off',
+    'emotion/no-vanilla': 'error',
+    'emotion/import-from-emotion': 'error',
+    'emotion/styled-import': 'error',
+  },
   overrides: [
     {
       files: ['*.ts', '*.tsx'],

.eslintrc.relax.js

@@ -3,4 +3,11 @@ const strict = require('./.eslintrc.js');
 module.exports = {
   ...strict,
   extends: ['sentry-app'],
+
+  rules: {
+    'emotion/jsx-import': 'off',
+    'emotion/no-vanilla': 'warn',
+    'emotion/import-from-emotion': 'error',
+    'emotion/styled-import': 'error',
+  },
 };

babel.config.js

@@ -1,8 +1,19 @@
 /*eslint-env node*/
 module.exports = {
-  presets: ['@babel/react', '@babel/env', '@babel/preset-typescript'],
+  presets: [
+    '@babel/react',
+    '@babel/env',
+    '@babel/preset-typescript',
+    [
+      '@emotion/babel-preset-css-prop',
+      {
+        autoLabel: true,
+        sourceMap: false,
+        labelFormat: '[local]',
+      },
+    ],
+  ],
   plugins: [
-    'emotion',
     'react-hot-loader/babel',
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-proposal-object-rest-spread',
@@ -34,13 +45,19 @@ module.exports = {
       ],
     },
     development: {
-      plugins: [
-        ['emotion', {sourceMap: true, autoLabel: true}],
-        '@babel/plugin-transform-react-jsx-source',
+      presets: [
+        [
+          '@emotion/babel-preset-css-prop',
+          {
+            autoLabel: true,
+            sourceMap: false,
+          },
+        ],
       ],
+      plugins: ['@babel/plugin-transform-react-jsx-source'],
     },
     test: {
-      plugins: [['emotion', {autoLabel: true}], 'dynamic-import-node'],
+      plugins: ['dynamic-import-node'],
     },
   },
 };

docs-ui/components/button.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from '@storybook/addon-info';
 import {action} from '@storybook/addon-actions';

docs-ui/components/checkboxFancy.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from '@storybook/addon-info';
 import {number, boolean} from '@storybook/addon-knobs';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import CheckboxFancy from 'app/components/checkboxFancy';
 

docs-ui/components/colors.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from '@storybook/addon-info';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import theme from 'app/utils/theme';
 

docs-ui/components/emptyMessage.stories.js

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
 import {Panel, PanelHeader} from 'app/components/panels';

docs-ui/components/gridEditable.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from '@storybook/addon-info';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import Button from 'app/components/button';
 import GlobalModal from 'app/components/globalModal';

docs-ui/components/icons.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from '@storybook/addon-info';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import InlineSvg from 'app/components/inlineSvg';
 

docs-ui/components/idBadge.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from '@storybook/addon-info';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import IdBadge from 'app/components/idBadge';