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

Author: billyvg

.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';
 

docs-ui/components/issueSyncListElement.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';
 

docs-ui/components/platformIcon.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';
 

package.json

@@ -17,6 +17,9 @@
     "@babel/preset-react": "^7.7.0",
     "@babel/preset-typescript": "^7.7.2",
     "@babel/runtime": "~7.7.2",
+    "@emotion/babel-preset-css-prop": "^10.0.27",
+    "@emotion/core": "^10.0.27",
+    "@emotion/styled": "^10.0.27",
     "@sentry/apm": "5.10.1",
     "@sentry/browser": "5.10.1",
     "@sentry/integrations": "5.10.1",
@@ -43,7 +46,6 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
-    "babel-plugin-emotion": "9.2.11",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "bootstrap": "3.4.0",
     "classnames": "2.2.0",
@@ -60,13 +62,12 @@
     "dompurify": "^2.0.7",
     "echarts": "4.2.1",
     "echarts-for-react": "2.0.14",
-    "emotion": "9.2.12",
-    "emotion-theming": "9.2.9",
+    "emotion": "10.0.27",
+    "emotion-theming": "10.0.27",
     "file-loader": "^3.0.1",
     "focus-visible": "^5.0.2",
     "fuse.js": "^3.4.6",
     "gettext-parser": "1.3.1",
-    "grid-emotion": "^2.1.0",
     "intersection-observer": "^0.7.0",
     "ios-device-list": "^1.1.30",
     "jed": "^1.1.0",
@@ -95,7 +96,6 @@
     "react-date-range": "^1.0.0-beta",
     "react-document-title": "2.0.3",
     "react-dom": "16.7.0",
-    "react-emotion": "9.2.12",
     "react-hot-loader": "4.12.16",
     "react-keydown": "^1.9.7",
     "react-lazyload": "^2.3.0",
@@ -107,6 +107,7 @@
     "react-select": "^1.2.1",
     "react-sparklines": "1.7.0",
     "react-virtualized": "^9.20.1",
+    "reflexbox": "^4.0.6",
     "reflux": "0.4.1",
     "regenerator-runtime": "^0.13.3",
     "scroll-to-element": "^2.0.0",
@@ -145,6 +146,7 @@
     "enzyme-to-json": "3.4.3",
     "eslint": "5.11.1",
     "eslint-config-sentry-app": "1.27.0",
+    "eslint-plugin-emotion": "^10.0.14",
     "jest": "24.9.0",
     "jest-canvas-mock": "^2.2.0",
     "jest-junit": "^9.0.0",

src/sentry/static/sentry/app/actionCreators/indicator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import {DEFAULT_TOAST_DURATION} from 'app/constants';
 import {t, tct} from 'app/locale';

src/sentry/static/sentry/app/actionCreators/modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {css} from 'react-emotion';
+import {css} from '@emotion/core';
 import {ModalHeader, ModalBody, ModalFooter} from 'react-bootstrap';
 
 import ModalActions from 'app/actions/modalActions';
@@ -14,6 +14,7 @@ export type ModalRenderProps = {
 
 export type ModalOptions = {
   onClose?: () => void;
+  modalCss?: ReturnType<typeof css>;
   modalClassName?: string;
   dialogClassName?: string;
   type?: string;
@@ -73,7 +74,7 @@ export function openDiffModal(options: ModalOptions) {
     .then(mod => mod.default)
     .then(Modal => {
       // This is the only way to style the different Modal children
-      const diffModalCss = css`
+      const modalCss = css`
         .modal-dialog {
           display: flex;
           margin: 0;
@@ -95,7 +96,7 @@ export function openDiffModal(options: ModalOptions) {
       `;
 
       openModal(deps => <Modal {...deps} {...options} />, {
-        modalClassName: diffModalCss,
+        modalCss,
       });
     });
 }
@@ -200,7 +201,7 @@ export function openDebugFileSourceModal(options: ModalOptions = {}) {
 
 export async function openInviteMembersModal(options = {}) {
   const mod = await import(/* webpackChunkName: "InviteMembersModal" */ 'app/components/modals/inviteMembersModal');
-  const {default: Modal, modalClassName} = mod;
+  const {default: Modal, modalCss} = mod;
 
-  openModal(deps => <Modal {...deps} {...options} />, {modalClassName});
+  openModal(deps => <Modal {...deps} {...options} />, {modalCss});
 }

src/sentry/static/sentry/app/components/acl/featureDisabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import {selectText} from 'app/utils/selectText';
 import {t, tct} from 'app/locale';
@@ -32,7 +32,7 @@ type Props = {
    * Attaches additional styles to the FeatureDisabled component to make it
    * look consistent within the Alert.
    */
-  alert?: boolean | React.ReactElement;
+  alert?: boolean | React.ElementType;
   /**
    * Do not show the help toggle. The description will always be rendered.
    */
@@ -118,7 +118,7 @@ class FeatureDisabled extends React.Component<Props, State> {
       return this.renderFeatureDisabled();
     }
 
-    const AlertComponent = typeof alert === 'function' ? alert : Alert;
+    const AlertComponent = typeof alert === 'boolean' ? Alert : alert;
 
     return (
       <AlertComponent type="warning" icon="icon-lock">

src/sentry/static/sentry/app/components/actions/actionLink.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 

src/sentry/static/sentry/app/components/activity/author.tsx

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const ActivityAuthor = styled('span')`
   font-weight: 600;

src/sentry/static/sentry/app/components/activity/item/avatar.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import UserAvatar from 'app/components/avatar/userAvatar';
 import InlineSvg from 'app/components/inlineSvg';

src/sentry/static/sentry/app/components/activity/item/bubble.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * This creates a bordered box that has a left pointing arrow

src/sentry/static/sentry/app/components/activity/item/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import DateTime from 'app/components/dateTime';
 import TimeSince from 'app/components/timeSince';

src/sentry/static/sentry/app/components/activity/note/editorTools.tsx

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const EditorTools = styled('span')`
   display: none;

src/sentry/static/sentry/app/components/activity/note/header.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import {t} from 'app/locale';
 import ActivityAuthor from 'app/components/activity/author';

src/sentry/static/sentry/app/components/activity/note/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import ActivityItem from 'app/components/activity/item';
 import SentryTypes from 'app/sentryTypes';

src/sentry/static/sentry/app/components/activity/note/input.jsx

@@ -1,7 +1,7 @@
 import {MentionsInput, Mention} from 'react-mentions';
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import {t} from 'app/locale';
 import Button from 'app/components/button';

src/sentry/static/sentry/app/components/alert.tsx

@@ -1,9 +1,9 @@
-import {css} from 'emotion';
+import {css} from '@emotion/core';
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import color from 'color';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import InlineSvg from 'app/components/inlineSvg';
 import TextBlock from 'app/views/settings/components/text/textBlock';

src/sentry/static/sentry/app/components/alertLink.tsx

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 import {LocationDescriptor} from 'history';
 

src/sentry/static/sentry/app/components/alertMessage.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import Alert from 'app/components/alert';
 import AlertActions from 'app/actions/alertActions';

src/sentry/static/sentry/app/components/alerts/toastIndicator.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import posed from 'react-pose';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import {t} from 'app/locale';
 import InlineSvg from 'app/components/inlineSvg';

src/sentry/static/sentry/app/components/assigneeSelector.tsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Reflux from 'reflux';
 import createReactClass from 'create-react-class';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import SentryTypes from 'app/sentryTypes';
 import {User} from 'app/types';