feat(emotion): Upgrade emotion to v10

.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'],
     },
   },
 };

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/components/panels/panelBody.jsx

@@ -1,7 +1,8 @@
 import {Flex} from 'grid-emotion';
-import {css, cx} from 'react-emotion';
+import {css} from 'react-emotion';
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 import space from 'app/styles/space';
 import textStyles from 'app/styles/text';
@@ -18,7 +19,7 @@ const PanelBody = ({className, disablePadding, flex, direction, ...props}) => {
 
   return (
     <Comp
-      className={cx(padding, textClassName, className)}
+      className={classNames(padding, textClassName, className)}
       {...props}
       direction={flexDirection}
     />

src/sentry/static/sentry/app/styled.tsx

@@ -0,0 +1,5 @@
+// TODO(ts): Figure out why eslint chokes on this import
+import styled, {CreateStyled} from '@original-emotion/styled'; // eslint-disable-line import/named
+import theme from './utils/theme';
+
+export default styled as CreateStyled<typeof theme>;

tsconfig.json

@@ -5,7 +5,7 @@
     "declaration": false,
     "declarationMap": false,
     "downlevelIteration": true,
-    "inlineSources": true,
+    "inlineSources": false,
     "importHelpers": true,
     "lib": ["esnext", "dom"],
     "module": "esnext",
@@ -30,7 +30,9 @@
     "baseUrl": ".",
     "outDir": "src/sentry/static/sentry/dist",
     "paths": {
-      "app/*": ["src/sentry/static/sentry/app/*"]
+      "app/*": ["src/sentry/static/sentry/app/*"],
+      "@emotion/styled": ["src/sentry/static/sentry/app/styled.tsx"],
+      "@original-emotion/*": ["node_modules/@emotion/*"]
     },
     "plugins": [{"name": "typescript-styled-plugin"}]
   },

webpack.config.js

@@ -322,6 +322,13 @@ let appConfig = {
   resolve: {
     alias: {
       app: path.join(staticPrefix, 'app'),
+      '@emotion/styled': path.join(staticPrefix, 'app', 'styled'),
+      '@original-emotion/styled': path.join(
+        __dirname,
+        'node_modules',
+        '@emotion',
+        'styled'
+      ),
 
       // Aliasing this for getsentry's build, otherwise `less/select2` will not be able
       // to be resolved