chore(deps): update emotion monorepo to v11 (major) (#182)

* chore(deps): update emotion monorepo to v11

* chore(deps): update emotion to v11

* chore(deps): temporarily add emotion css prop types globally

* chore(deps): explicitly include className prop on stylable components

...and specify jsxImportSource for TypeScript.

@see https://emotion.sh/docs/emotion-11#css-prop-types
@see emotion-js/emotion#2111 (comment)

* chore(deps): avoid the need for explicit className prop on AdditionalInfo children

Co-authored-by: Renovate Bot <[email protected]>
Co-authored-by: Justin Hall <[email protected]>

.eslintrc.js

@@ -7,12 +7,4 @@ module.exports = {
     'prettier/react',
     'prettier/@typescript-eslint',
   ],
-  plugins: ['emotion'],
-  rules: {
-    // 'emotion/jsx-import': 'error',
-    'emotion/no-vanilla': 'error',
-    'emotion/import-from-emotion': 'error',
-    'emotion/styled-import': 'error',
-    'emotion/syntax-preference': ['error', 'string'],
-  },
 };

package.json

@@ -40,14 +40,14 @@
   },
   "private": true,
   "dependencies": {
-    "@emotion/core": "10.1.1",
-    "@emotion/styled": "10.0.27",
+    "@emotion/react": "11.1.1",
+    "@emotion/styled": "11.0.0",
     "@use-it/event-listener": "0.1.6",
     "@wkovacs64/normalize.css": "8.0.1",
     "@xstate/react": "1.0.3",
     "dotenv": "8.2.0",
     "gatsby": "2.28.0",
-    "gatsby-plugin-emotion": "4.5.0",
+    "gatsby-plugin-emotion": "5.0.0",
     "gatsby-plugin-manifest": "2.8.0",
     "gatsby-plugin-netlify": "2.7.0",
     "gatsby-plugin-offline": "3.6.0",
@@ -96,7 +96,6 @@
     "cz-conventional-changelog": "3.3.0",
     "eslint": "7.14.0",
     "eslint-plugin-cypress": "2.11.2",
-    "eslint-plugin-emotion": "10.0.27",
     "eslint-plugin-wkovacs64": "10.0.0",
     "gatsby-plugin-typescript": "2.8.0",
     "husky": "4.3.0",

src/components/footer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { FaGithub } from 'react-icons/fa';
 import { light, dark } from '../theme';

src/components/layout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css, Global, ClassNames } from '@emotion/core';
+import { css, Global, ClassNames } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconContext } from 'react-icons';
 import useDarkMode from 'use-dark-mode';

src/components/main.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { mq } from '../utils';
 
 interface MainProps {

src/components/noscript-message.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { light } from '../theme';
 import { mq } from '../utils';
 

src/components/password-through-lense.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ColorMap, LabelMap } from '../legend';
 import { light, dark } from '../theme';

src/components/results.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { ColorMap, LabelMap } from '../legend';
 import PasswordThroughLense from './password-through-lense';
@@ -9,48 +8,46 @@ import PwnedInfo from './pwned-info';
 const AdditionalInfo = styled.section`
   display: flex;
   flex-wrap: wrap;
+
+  > * {
+    flex: 1;
+    margin-top: 2rem;
+  }
 `;
 
 interface ResultsProps {
+  className?: string;
   colors: ColorMap;
   labels: LabelMap;
   passwordInput: string;
   passwordToCheck: string;
 }
 
 function Results({
+  className,
   colors,
   labels,
   passwordInput,
   passwordToCheck,
   ...props
 }: ResultsProps): JSX.Element {
   return (
-    <section data-testid="results" {...props}>
+    <section data-testid="results" className={className} {...props}>
       <PasswordThroughLense
         colors={colors}
         labels={labels}
         password={passwordInput}
       />
       <AdditionalInfo>
-        <Legend
-          css={css`
-            flex: 1;
-            margin-top: 2rem;
-          `}
-          colors={colors}
-          labels={labels}
-        />
-        <PwnedInfo
-          css={css`
-            flex: 1;
-            margin-top: 2rem;
-          `}
-          password={passwordToCheck}
-        />
+        <Legend colors={colors} labels={labels} />
+        <PwnedInfo password={passwordToCheck} />
       </AdditionalInfo>
     </section>
   );
 }
 
+Results.defaultProps = {
+  className: '',
+};
+
 export default Results;

src/pages/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import useEventListener from '@use-it/event-listener';
 import debounce from 'lodash/debounce';

tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "target": "esnext",
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
     "esModuleInterop": true,
     "noEmit": true,
     "strict": true,