From e25c3d915e52aa44dd9b7eddbbddcb332bd91441 Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Tue, 23 Oct 2018 06:33:58 +1000 Subject: [PATCH] Use Emotion 10 (#455) * Use Emotion 10 * Update * Update * Update emotion again * Remove now unnecessary options to babel-plugin-emotion --- .eslintrc.js | 6 +- package.json | 8 +- .../client/components/AnimateHeight.js | 4 +- .../admin-ui/client/components/Animation.js | 5 +- .../client/components/CreateItemModal.js | 2 +- .../admin-ui/client/components/ListTable.js | 4 +- .../admin-ui/client/components/PageError.js | 3 +- .../admin-ui/client/components/PageLoading.js | 3 +- packages/admin-ui/client/components/Popout.js | 2 +- packages/admin-ui/client/index.js | 4 +- .../admin-ui/client/pages/Home/components.js | 5 +- packages/admin-ui/client/pages/Item/Footer.js | 6 +- packages/admin-ui/client/pages/Item/index.js | 6 +- .../client/pages/List/ColumnSelect.js | 3 +- .../pages/List/Filters/AddFilterPopout.js | 4 +- .../client/pages/List/Filters/PopoutForm.js | 4 +- .../admin-ui/client/pages/List/ListDetails.js | 6 +- .../admin-ui/client/pages/List/Management.js | 4 +- .../admin-ui/client/pages/List/SortSelect.js | 6 +- packages/admin-ui/client/pages/Signin.js | 2 +- packages/admin-ui/client/pages/Signout.js | 2 +- .../pages/StyleGuide/Components/Grid.js | 2 +- .../pages/StyleGuide/Components/Loading.js | 6 +- .../pages/StyleGuide/Components/Modals.js | 2 +- .../admin-ui/client/pages/StyleGuide/Icons.js | 6 +- .../client/pages/StyleGuide/Palette.js | 4 +- .../admin-ui/client/pages/StyleGuide/index.js | 4 +- packages/admin-ui/client/public.js | 4 +- packages/admin-ui/package.json | 7 +- packages/admin-ui/server/getWebpackConfig.js | 5 +- packages/arch/package.json | 17 +- packages/arch/packages/alert/index.js | 2 +- packages/arch/packages/badge/index.js | 2 +- packages/arch/packages/button/icon.js | 4 +- packages/arch/packages/button/loading.js | 5 +- packages/arch/packages/button/primitives.js | 4 +- packages/arch/packages/confirm/index.js | 6 +- packages/arch/packages/controls/primitives.js | 2 +- .../arch/packages/day-picker/DayPicker.js | 6 +- packages/arch/packages/dialog/primitives.js | 6 +- packages/arch/packages/drawer/index.js | 6 +- packages/arch/packages/dropdown/index.js | 2 +- packages/arch/packages/input/HiddenInput.js | 3 +- packages/arch/packages/input/Input.js | 4 +- packages/arch/packages/layout/index.js | 6 +- packages/arch/packages/loading/index.js | 3 +- packages/arch/packages/lozenge/index.js | 2 +- packages/arch/packages/modal-utils/Blanket.js | 2 +- packages/arch/packages/navbar/PrimaryNav.js | 2 +- packages/arch/packages/navbar/SecondaryNav.js | 2 +- packages/arch/packages/navbar/common.js | 2 +- packages/arch/packages/pagination/Page.js | 2 +- .../arch/packages/pagination/Pagination.js | 2 +- packages/arch/packages/pill/index.js | 5 +- packages/arch/packages/popout/index.js | 2 +- .../arch/packages/typography/primitives.js | 5 +- packages/fields/package.json | 1 + .../fields/types/CalendarDay/views/Field.js | 4 +- .../types/CloudinaryImage/views/Cell.js | 3 +- .../types/CloudinaryImage/views/Field.js | 4 +- packages/fields/types/File/views/Cell.js | 3 +- packages/fields/types/File/views/Field.js | 4 +- packages/fields/types/Password/views/Field.js | 4 +- .../fields/types/Relationship/views/Field.js | 4 +- packages/fields/types/Select/views/Field.js | 4 +- packages/fields/types/Select/views/Filter.js | 4 +- packages/fields/types/Text/views/Field.js | 4 +- packages/ui/package.json | 5 +- packages/ui/src/globalStyles.js | 7 +- packages/ui/src/primitives/alert.js | 2 +- packages/ui/src/primitives/badge.js | 2 +- packages/ui/src/primitives/buttons/icon.js | 4 +- packages/ui/src/primitives/buttons/loading.js | 5 +- .../ui/src/primitives/buttons/primitives.js | 4 +- packages/ui/src/primitives/fields.js | 2 +- packages/ui/src/primitives/filters.js | 4 +- packages/ui/src/primitives/forms/Controls.js | 2 +- packages/ui/src/primitives/forms/DayPicker.js | 4 +- packages/ui/src/primitives/forms/index.js | 4 +- packages/ui/src/primitives/layout.js | 6 +- packages/ui/src/primitives/loading.js | 3 +- packages/ui/src/primitives/lozenge.js | 2 +- packages/ui/src/primitives/modals/common.js | 2 +- packages/ui/src/primitives/modals/confirm.js | 6 +- packages/ui/src/primitives/modals/dialog.js | 6 +- packages/ui/src/primitives/modals/drawer.js | 6 +- packages/ui/src/primitives/modals/dropdown.js | 2 +- packages/ui/src/primitives/modals/popout.js | 2 +- .../src/primitives/navigation/PrimaryNav.js | 2 +- .../src/primitives/navigation/SecondaryNav.js | 2 +- .../ui/src/primitives/navigation/common.js | 2 +- .../primitives/navigation/pagination/Page.js | 2 +- .../navigation/pagination/Pagination.js | 2 +- packages/ui/src/primitives/pill.js | 5 +- packages/ui/src/primitives/typography.js | 5 +- yarn.lock | 183 +++++++++++++++++- 96 files changed, 417 insertions(+), 138 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3c0cc275255..fdc6a69b975 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,7 +7,7 @@ module.exports = { jest: true, 'cypress/globals': true, }, - plugins: ['react', 'jest', 'cypress', 'import', 'flowtype'], + plugins: ['react', 'jest', 'cypress', 'import', 'flowtype', 'emotion'], rules: { curly: ['error', 'multi-line'], 'jsx-quotes': 'error', @@ -53,6 +53,10 @@ module.exports = { // this stops ESLint from throwing errors 'flowtype/define-flow-type': 'error', 'flowtype/use-flow-type': 'error', + 'emotion/jsx-import': 'error', + 'emotion/no-vanilla': 'error', + 'emotion/import-from-emotion': 'error', + 'emotion/styled-import': 'error', }, extends: ['plugin:jest/recommended'], diff --git a/package.json b/package.json index 31ecfca44f5..72e3fc39248 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ }, "dependencies": { "@atlaskit/build-releases": "^2.1.3", + "@emotion/core": "^10.0.0-beta.5", + "@emotion/styled": "^10.0.0-beta.5", "apollo-cache-inmemory": "^1.2.10", "apollo-client": "^2.4.2", "apollo-errors": "^1.9.0", @@ -37,7 +39,7 @@ "babel-core": "^6.26.0", "babel-eslint": "^10.0.1", "babel-loader": "^7.1.4", - "babel-plugin-emotion": "^9.1.0", + "babel-plugin-emotion": "^10.0.0-beta.5", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-react-jsx-source": "^6.22.0", @@ -56,9 +58,10 @@ "date-fns": "^1.29.0", "dotenv-safe": "^6.0.0", "dumb-passwords": "^0.2.1", - "emotion": "^9.1.1", + "emotion": "^10.0.0-beta.5", "eslint": "^5.6.1", "eslint-junit": "^1.0.1", + "eslint-plugin-emotion": "10.0.0-beta.2", "eslint-plugin-flowtype": "^2.50.3", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jest": "^21.24.1", @@ -109,7 +112,6 @@ "react-copy-to-clipboard": "^5.0.1", "react-document-title": "^2.0.3", "react-dom": "^16.5.2", - "react-emotion": "^9.1.1", "react-focus-marshal": "^1.0.1", "react-focus-trap": "^2.6.0", "react-media": "^1.8.0", diff --git a/packages/admin-ui/client/components/AnimateHeight.js b/packages/admin-ui/client/components/AnimateHeight.js index 43536f19d04..146a7342745 100644 --- a/packages/admin-ui/client/components/AnimateHeight.js +++ b/packages/admin-ui/client/components/AnimateHeight.js @@ -1,6 +1,8 @@ // @flow -import React, { Component, type Element, type Ref, type Node } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component, type Element, type Ref, type Node } from 'react'; import NodeResolver from 'react-node-resolver'; const transition = 'height 220ms cubic-bezier(0.2, 0, 0, 1)'; diff --git a/packages/admin-ui/client/components/Animation.js b/packages/admin-ui/client/components/Animation.js index aaa4201c7b6..48bb65454f5 100644 --- a/packages/admin-ui/client/components/Animation.js +++ b/packages/admin-ui/client/components/Animation.js @@ -1,5 +1,6 @@ -import React, { Component } from 'react'; -import { keyframes } from 'react-emotion'; +/** @jsx jsx */ +import { jsx, keyframes } from '@emotion/core'; +import { Component } from 'react'; const pulse = keyframes` from { transform: scale3d(1, 1, 1); } diff --git a/packages/admin-ui/client/components/CreateItemModal.js b/packages/admin-ui/client/components/CreateItemModal.js index 47af182360d..ccd82b265e6 100644 --- a/packages/admin-ui/client/components/CreateItemModal.js +++ b/packages/admin-ui/client/components/CreateItemModal.js @@ -1,6 +1,6 @@ import React, { Component, Fragment } from 'react'; import { Mutation } from 'react-apollo'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Button } from '@voussoir/ui/src/primitives/buttons'; import { Drawer } from '@voussoir/ui/src/primitives/modals'; diff --git a/packages/admin-ui/client/components/ListTable.js b/packages/admin-ui/client/components/ListTable.js index ea83d108bc7..9db1a5f6605 100644 --- a/packages/admin-ui/client/components/ListTable.js +++ b/packages/admin-ui/client/components/ListTable.js @@ -1,5 +1,7 @@ +/** @jsx jsx */ +import { jsx } from '@emotion/core'; import React, { Component } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Link } from 'react-router-dom'; import { ShieldIcon, InfoIcon, TrashcanIcon, ArrowRightIcon } from '@voussoir/icons'; diff --git a/packages/admin-ui/client/components/PageError.js b/packages/admin-ui/client/components/PageError.js index 8ad27a328bc..80e0433ac9a 100644 --- a/packages/admin-ui/client/components/PageError.js +++ b/packages/admin-ui/client/components/PageError.js @@ -1,4 +1,5 @@ -import React from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; import { StopIcon } from '@voussoir/icons'; import { colors } from '@voussoir/ui/src/theme'; diff --git a/packages/admin-ui/client/components/PageLoading.js b/packages/admin-ui/client/components/PageLoading.js index 1c78c4c9bd5..6771abd7914 100644 --- a/packages/admin-ui/client/components/PageLoading.js +++ b/packages/admin-ui/client/components/PageLoading.js @@ -1,4 +1,5 @@ -import React from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; import { LoadingIndicator } from '@voussoir/ui/src/primitives/loading'; export default function PageLoading() { diff --git a/packages/admin-ui/client/components/Popout.js b/packages/admin-ui/client/components/Popout.js index c5e6d20dc72..cc25c986bf5 100644 --- a/packages/admin-ui/client/components/Popout.js +++ b/packages/admin-ui/client/components/Popout.js @@ -1,7 +1,7 @@ // @flow import React, { Fragment, type ComponentType, type Node, type Ref } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Button } from '@voussoir/ui/src/primitives/buttons'; import { Popout as PopoutModal } from '@voussoir/ui/src/primitives/modals'; diff --git a/packages/admin-ui/client/index.js b/packages/admin-ui/client/index.js index 227308d3322..afe83891ad8 100644 --- a/packages/admin-ui/client/index.js +++ b/packages/admin-ui/client/index.js @@ -3,10 +3,9 @@ import ReactDOM from 'react-dom'; import { ApolloProvider } from 'react-apollo'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import { ToastProvider } from 'react-toast-notifications'; -import { injectGlobal } from 'emotion'; +import { Global } from '@emotion/core'; import globalStyles from '@voussoir/ui/src/globalStyles'; -injectGlobal(globalStyles); import apolloClient from './apolloClient'; @@ -25,6 +24,7 @@ const Keystone = () => ( + {adminMeta => { const { adminPath } = adminMeta; diff --git a/packages/admin-ui/client/pages/Home/components.js b/packages/admin-ui/client/pages/Home/components.js index d207994908d..c351ddb4459 100644 --- a/packages/admin-ui/client/pages/Home/components.js +++ b/packages/admin-ui/client/pages/Home/components.js @@ -1,5 +1,6 @@ -import React from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import styled from '@emotion/styled'; import { Link } from 'react-router-dom'; import withPseudoState from 'react-pseudo-state'; diff --git a/packages/admin-ui/client/pages/Item/Footer.js b/packages/admin-ui/client/pages/Item/Footer.js index 278ae1caea5..254b2dad1cd 100644 --- a/packages/admin-ui/client/pages/Item/Footer.js +++ b/packages/admin-ui/client/pages/Item/Footer.js @@ -1,6 +1,8 @@ -import React, { Component } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component } from 'react'; import PropTypes from 'prop-types'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import raf from 'raf-schd'; import { Button, LoadingButton } from '@voussoir/ui/src/primitives/buttons'; import { colors } from '@voussoir/ui/src/theme'; diff --git a/packages/admin-ui/client/pages/Item/index.js b/packages/admin-ui/client/pages/Item/index.js index d8d14cde3ea..9d8ba19d721 100644 --- a/packages/admin-ui/client/pages/Item/index.js +++ b/packages/admin-ui/client/pages/Item/index.js @@ -1,5 +1,7 @@ -import React, { Component, Fragment } from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component, Fragment } from 'react'; +import styled from '@emotion/styled'; import { Mutation, Query } from 'react-apollo'; import { Link, withRouter } from 'react-router-dom'; import { CopyToClipboard } from 'react-copy-to-clipboard'; diff --git a/packages/admin-ui/client/pages/List/ColumnSelect.js b/packages/admin-ui/client/pages/List/ColumnSelect.js index 57073d297c5..9d431b234e1 100644 --- a/packages/admin-ui/client/pages/List/ColumnSelect.js +++ b/packages/admin-ui/client/pages/List/ColumnSelect.js @@ -1,4 +1,5 @@ -import React from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; import { CheckIcon, DashIcon, XIcon } from '@voussoir/icons'; import { colors } from '@voussoir/ui/src/theme'; import { OptionPrimitive } from '@voussoir/ui/src/primitives/filters'; diff --git a/packages/admin-ui/client/pages/List/Filters/AddFilterPopout.js b/packages/admin-ui/client/pages/List/Filters/AddFilterPopout.js index 67d36e33da2..4df4f74dbe6 100644 --- a/packages/admin-ui/client/pages/List/Filters/AddFilterPopout.js +++ b/packages/admin-ui/client/pages/List/Filters/AddFilterPopout.js @@ -1,4 +1,6 @@ -import React, { Component, createRef } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component, createRef } from 'react'; import { Transition, TransitionGroup } from 'react-transition-group'; import { ChevronLeftIcon, ChevronRightIcon, AlertIcon } from '@voussoir/icons'; diff --git a/packages/admin-ui/client/pages/List/Filters/PopoutForm.js b/packages/admin-ui/client/pages/List/Filters/PopoutForm.js index e22d073374d..ad73a4d17a4 100644 --- a/packages/admin-ui/client/pages/List/Filters/PopoutForm.js +++ b/packages/admin-ui/client/pages/List/Filters/PopoutForm.js @@ -1,4 +1,6 @@ -import React, { Component, Fragment } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component, Fragment } from 'react'; import { colors, gridSize } from '@voussoir/ui/src/theme'; import { Popout } from '../../../components/Popout'; diff --git a/packages/admin-ui/client/pages/List/ListDetails.js b/packages/admin-ui/client/pages/List/ListDetails.js index c680ad68727..781e819b255 100644 --- a/packages/admin-ui/client/pages/List/ListDetails.js +++ b/packages/admin-ui/client/pages/List/ListDetails.js @@ -1,5 +1,7 @@ -import React, { Component, createRef, Fragment } from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component, createRef, Fragment } from 'react'; +import styled from '@emotion/styled'; import { withRouter } from 'react-router-dom'; import { FoldIcon, PlusIcon, SearchIcon, UnfoldIcon, XIcon } from '@voussoir/icons'; diff --git a/packages/admin-ui/client/pages/List/Management.js b/packages/admin-ui/client/pages/List/Management.js index 4445461ad71..2dcdec4446e 100644 --- a/packages/admin-ui/client/pages/List/Management.js +++ b/packages/admin-ui/client/pages/List/Management.js @@ -1,6 +1,8 @@ /* global ENABLE_DEV_FEATURES */ -import React, { Component, Fragment } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component, Fragment } from 'react'; import { SettingsIcon, TrashcanIcon } from '@voussoir/icons'; import { FlexGroup } from '@voussoir/ui/src/primitives/layout'; diff --git a/packages/admin-ui/client/pages/List/SortSelect.js b/packages/admin-ui/client/pages/List/SortSelect.js index 5b65613afd1..3707d5ee69e 100644 --- a/packages/admin-ui/client/pages/List/SortSelect.js +++ b/packages/admin-ui/client/pages/List/SortSelect.js @@ -1,5 +1,7 @@ -import React, { Component } from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component } from 'react'; +import styled from '@emotion/styled'; import { ChevronDownIcon, ChevronUpIcon } from '@voussoir/icons'; import { OptionPrimitive } from '@voussoir/ui/src/primitives/filters'; import { colors } from '@voussoir/ui/src/theme'; diff --git a/packages/admin-ui/client/pages/Signin.js b/packages/admin-ui/client/pages/Signin.js index 4673429ff84..fb4437307b5 100644 --- a/packages/admin-ui/client/pages/Signin.js +++ b/packages/admin-ui/client/pages/Signin.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Alert } from '@voussoir/ui/src/primitives/alert'; import { Input } from '@voussoir/ui/src/primitives/forms'; diff --git a/packages/admin-ui/client/pages/Signout.js b/packages/admin-ui/client/pages/Signout.js index 1c1b55339e3..69ec1a2f8e7 100644 --- a/packages/admin-ui/client/pages/Signout.js +++ b/packages/admin-ui/client/pages/Signout.js @@ -1,6 +1,6 @@ import React, { Fragment } from 'react'; import { Link } from 'react-router-dom'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import SessionProvider from '../providers/Session'; import logo from '../assets/logo.png'; diff --git a/packages/admin-ui/client/pages/StyleGuide/Components/Grid.js b/packages/admin-ui/client/pages/StyleGuide/Components/Grid.js index dcaed65e3f5..0bffaf985d3 100644 --- a/packages/admin-ui/client/pages/StyleGuide/Components/Grid.js +++ b/packages/admin-ui/client/pages/StyleGuide/Components/Grid.js @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Grid, Cell } from '@voussoir/ui/src/primitives/layout'; diff --git a/packages/admin-ui/client/pages/StyleGuide/Components/Loading.js b/packages/admin-ui/client/pages/StyleGuide/Components/Loading.js index ffde811235b..0dab757afa7 100644 --- a/packages/admin-ui/client/pages/StyleGuide/Components/Loading.js +++ b/packages/admin-ui/client/pages/StyleGuide/Components/Loading.js @@ -1,5 +1,7 @@ -import React, { Component, Fragment } from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component, Fragment } from 'react'; +import styled from '@emotion/styled'; import { colors } from '@voussoir/ui/src/theme'; import { FlexGroup } from '@voussoir/ui/src/primitives/layout'; diff --git a/packages/admin-ui/client/pages/StyleGuide/Components/Modals.js b/packages/admin-ui/client/pages/StyleGuide/Components/Modals.js index 4bf895b8a91..8af0a8d6b39 100644 --- a/packages/admin-ui/client/pages/StyleGuide/Components/Modals.js +++ b/packages/admin-ui/client/pages/StyleGuide/Components/Modals.js @@ -1,5 +1,5 @@ import React, { Component, Fragment } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Button } from '@voussoir/ui/src/primitives/buttons'; import { FlexGroup } from '@voussoir/ui/src/primitives/layout'; diff --git a/packages/admin-ui/client/pages/StyleGuide/Icons.js b/packages/admin-ui/client/pages/StyleGuide/Icons.js index 2140504de15..ca39b49e5d6 100644 --- a/packages/admin-ui/client/pages/StyleGuide/Icons.js +++ b/packages/admin-ui/client/pages/StyleGuide/Icons.js @@ -1,5 +1,7 @@ -import React, { Component, Fragment } from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component, Fragment } from 'react'; +import styled from '@emotion/styled'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import * as icons from '@voussoir/icons'; diff --git a/packages/admin-ui/client/pages/StyleGuide/Palette.js b/packages/admin-ui/client/pages/StyleGuide/Palette.js index 1fe387f917f..66bd84e9196 100644 --- a/packages/admin-ui/client/pages/StyleGuide/Palette.js +++ b/packages/admin-ui/client/pages/StyleGuide/Palette.js @@ -1,4 +1,6 @@ -import React, { Fragment } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Fragment } from 'react'; import { Grid, Cell } from '@voussoir/ui/src/primitives/layout'; import { colors } from '@voussoir/ui/src/theme'; diff --git a/packages/admin-ui/client/pages/StyleGuide/index.js b/packages/admin-ui/client/pages/StyleGuide/index.js index c89b9c05614..d0a2cd76a86 100644 --- a/packages/admin-ui/client/pages/StyleGuide/index.js +++ b/packages/admin-ui/client/pages/StyleGuide/index.js @@ -1,4 +1,6 @@ -import React, { Component, Fragment } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component, Fragment } from 'react'; import { Redirect, Route, Switch, withRouter } from 'react-router-dom'; import Nav from '../../components/Nav'; diff --git a/packages/admin-ui/client/public.js b/packages/admin-ui/client/public.js index e3a1df64420..55a714532cf 100644 --- a/packages/admin-ui/client/public.js +++ b/packages/admin-ui/client/public.js @@ -3,10 +3,9 @@ import ReactDOM from 'react-dom'; import { ApolloProvider } from 'react-apollo'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import { ToastProvider } from 'react-toast-notifications'; -import { injectGlobal } from 'emotion'; +import { Global } from '@emotion/core'; import globalStyles from '@voussoir/ui/src/globalStyles'; -injectGlobal(globalStyles); import apolloClient from './apolloClient'; @@ -28,6 +27,7 @@ const Keystone = () => ( + {adminMeta => adminMeta.withAuth ? ( diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index c2a0cf734c2..7fb041fd60d 100644 --- a/packages/admin-ui/package.json +++ b/packages/admin-ui/package.json @@ -7,6 +7,8 @@ "node": ">=8.4.0" }, "dependencies": { + "@emotion/core": "^10.0.0-beta.5", + "@emotion/styled": "^10.0.0-beta.5", "@voussoir/field-views-loader": "^0.1.3", "@voussoir/fields": "^1.0.0", "@voussoir/icons": "^0.1.3", @@ -20,7 +22,7 @@ "apollo-upload-client": "^9.0.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.4", - "babel-plugin-emotion": "^9.1.0", + "babel-plugin-emotion": "^10.0.0-beta.5", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-react-jsx-source": "^6.22.0", @@ -29,7 +31,7 @@ "body-parser": "^1.18.2", "cross-fetch": "^2.2.0", "cuid": "^2.1.1", - "emotion": "^9.1.1", + "emotion": "^10.0.0-beta.5", "express": "^4.16.3", "express-session": "^1.15.6", "file-loader": "^1.1.11", @@ -46,7 +48,6 @@ "react-copy-to-clipboard": "^5.0.1", "react-document-title": "^2.0.3", "react-dom": "^16.5.2", - "react-emotion": "^9.1.1", "react-media": "^1.8.0", "react-node-resolver": "^2.0.0", "react-pseudo-state": "^1.0.1", diff --git a/packages/admin-ui/server/getWebpackConfig.js b/packages/admin-ui/server/getWebpackConfig.js index a23d41a1252..086b49ae9d9 100644 --- a/packages/admin-ui/server/getWebpackConfig.js +++ b/packages/admin-ui/server/getWebpackConfig.js @@ -22,10 +22,7 @@ module.exports = function({ adminMeta, entry }) { plugins: [ 'transform-class-properties', 'transform-object-rest-spread', - [ - 'emotion', - enableDevFeatures ? { hoist: true } : { sourceMap: true, autoLabel: true }, - ], + ['emotion', enableDevFeatures ? { sourceMap: true } : {}], ...(enableDevFeatures ? ['transform-react-jsx-source'] : []), ], }, diff --git a/packages/arch/package.json b/packages/arch/package.json index d44cad8cbf5..ae388c6334f 100644 --- a/packages/arch/package.json +++ b/packages/arch/package.json @@ -9,23 +9,24 @@ "start": "cd ./www && yarn develop" }, "dependencies": { - "emotion": "^9.1.1", + "@emotion/core": "^10.0.0-beta.5", + "@emotion/styled": "^10.0.0-beta.5", + "date-fns": "^1.29.0", + "emotion": "^10.0.0-beta.5", "fs-extra": "^7.0.0", + "kalendaryo": "^1.10.0", "octicons": "^7.2.0", "react": "^16.5.2", "react-dom": "^16.5.2", - "react-select": "^2.0.0", - "react-radios": "^1.1.0", - "react-node-resolver": "^2.0.0", - "date-fns": "^1.29.0", - "react-emotion": "^9.1.1", - "kalendaryo": "^1.10.0", "react-focus-marshal": "^1.0.1", "react-focus-trap": "^2.6.0", + "react-node-resolver": "^2.0.0", "react-pseudo-state": "^1.0.1", + "react-radios": "^1.1.0", "react-router-dom": "^4.2.2", "react-scrolllock": "^3.0.1", + "react-select": "^2.0.0", "react-transition-group": "^2.3.1", "to-pascal-case": "^1.0.0" } -} +} \ No newline at end of file diff --git a/packages/arch/packages/alert/index.js b/packages/arch/packages/alert/index.js index f8c328389fc..a344970eeb7 100644 --- a/packages/arch/packages/alert/index.js +++ b/packages/arch/packages/alert/index.js @@ -1,7 +1,7 @@ // @flow import { type Node } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { borderRadius, colors } from '../theme'; diff --git a/packages/arch/packages/badge/index.js b/packages/arch/packages/badge/index.js index 7e747852fe5..a0c59028a47 100644 --- a/packages/arch/packages/badge/index.js +++ b/packages/arch/packages/badge/index.js @@ -1,7 +1,7 @@ // @flow import React, { PureComponent } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { colors } from '../theme'; diff --git a/packages/arch/packages/button/icon.js b/packages/arch/packages/button/icon.js index b0ccd5dc8c6..4a64ef4f472 100644 --- a/packages/arch/packages/button/icon.js +++ b/packages/arch/packages/button/icon.js @@ -1,6 +1,8 @@ // @flow -import React, { type ComponentType } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { type ComponentType } from 'react'; import { Button, type ButtonProps } from './primitives'; type IconProps = ButtonProps & { diff --git a/packages/arch/packages/button/loading.js b/packages/arch/packages/button/loading.js index 22b24dd4d17..a5e64b8c1e5 100644 --- a/packages/arch/packages/button/loading.js +++ b/packages/arch/packages/button/loading.js @@ -1,7 +1,8 @@ // @flow -import React from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import styled from '@emotion/styled'; import { LoadingIndicator, LoadingSpinner } from '../loading'; import { Button, type ButtonProps } from './primitives'; diff --git a/packages/arch/packages/button/primitives.js b/packages/arch/packages/button/primitives.js index d86923bc668..1a80a1b4354 100644 --- a/packages/arch/packages/button/primitives.js +++ b/packages/arch/packages/button/primitives.js @@ -1,6 +1,8 @@ // @flow -import React, { type Node, type Ref } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { type Node, type Ref } from 'react'; import { Link } from 'react-router-dom'; import withPseudoState from 'react-pseudo-state'; diff --git a/packages/arch/packages/confirm/index.js b/packages/arch/packages/confirm/index.js index ef989d9e23e..8acf3a549fd 100644 --- a/packages/arch/packages/confirm/index.js +++ b/packages/arch/packages/confirm/index.js @@ -1,8 +1,10 @@ // @flow -import React, { Fragment, PureComponent, type ComponentType, type Ref, type Node } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Fragment, PureComponent, type ComponentType, type Ref, type Node } from 'react'; import { createPortal } from 'react-dom'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import ScrollLock from 'react-scrolllock'; import { FocusTrap } from 'react-focus-trap'; diff --git a/packages/arch/packages/controls/primitives.js b/packages/arch/packages/controls/primitives.js index dc71192dc93..e602530ec8b 100644 --- a/packages/arch/packages/controls/primitives.js +++ b/packages/arch/packages/controls/primitives.js @@ -1,6 +1,6 @@ // @flow import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; export const Wrapper = styled.div({ display: 'flex', diff --git a/packages/arch/packages/day-picker/DayPicker.js b/packages/arch/packages/day-picker/DayPicker.js index f207f38b7e7..d90c8e002fc 100644 --- a/packages/arch/packages/day-picker/DayPicker.js +++ b/packages/arch/packages/day-picker/DayPicker.js @@ -1,7 +1,9 @@ // @flow -import React, { type Node, type Ref } from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { type Node, type Ref } from 'react'; +import styled from '@emotion/styled'; import Kalendaryo from 'kalendaryo'; import { isToday as isDayToday, isSameMonth } from 'date-fns'; diff --git a/packages/arch/packages/dialog/primitives.js b/packages/arch/packages/dialog/primitives.js index f4a18f6fc41..b10775be74f 100644 --- a/packages/arch/packages/dialog/primitives.js +++ b/packages/arch/packages/dialog/primitives.js @@ -1,7 +1,9 @@ // @flow -import React, { type ComponentType, type Ref } from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { type ComponentType, type Ref } from 'react'; +import styled from '@emotion/styled'; import { colors } from '../theme'; import { alpha } from '../color-utils'; diff --git a/packages/arch/packages/drawer/index.js b/packages/arch/packages/drawer/index.js index 61f590db84a..95ae0066416 100644 --- a/packages/arch/packages/drawer/index.js +++ b/packages/arch/packages/drawer/index.js @@ -1,6 +1,8 @@ // @flow -import React, { +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { PureComponent, Fragment, type ComponentType, @@ -9,7 +11,7 @@ import React, { type Node, } from 'react'; import { createPortal } from 'react-dom'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import ScrollLock from 'react-scrolllock'; import FocusTrap, { type FocusTarget } from 'react-focus-marshal'; diff --git a/packages/arch/packages/dropdown/index.js b/packages/arch/packages/dropdown/index.js index 47e3adf7561..ab86bb15ce6 100644 --- a/packages/arch/packages/dropdown/index.js +++ b/packages/arch/packages/dropdown/index.js @@ -1,7 +1,7 @@ // @flow import React, { Component, type Element, type Node } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Link } from 'react-router-dom'; import FocusTrap from 'react-focus-marshal'; diff --git a/packages/arch/packages/input/HiddenInput.js b/packages/arch/packages/input/HiddenInput.js index 5c0b1b15df6..8cc3d755b5a 100644 --- a/packages/arch/packages/input/HiddenInput.js +++ b/packages/arch/packages/input/HiddenInput.js @@ -1,4 +1,5 @@ -import React from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; export const HiddenInput = ({ innerRef, ...props }) => ( =8.4.0" }, "dependencies": { + "@emotion/core": "^10.0.0-beta.5", "@voussoir/access-control": "^0.1.3", "@voussoir/adapter-mongoose": "^0.3.1", "@voussoir/icons": "^0.1.3", diff --git a/packages/fields/types/CalendarDay/views/Field.js b/packages/fields/types/CalendarDay/views/Field.js index b17679b8bbc..906d085972e 100644 --- a/packages/fields/types/CalendarDay/views/Field.js +++ b/packages/fields/types/CalendarDay/views/Field.js @@ -1,5 +1,7 @@ +/** @jsx jsx */ +import { jsx } from '@emotion/core'; import { parse, format, setYear, setMonth } from 'date-fns'; -import React, { Component } from 'react'; +import { Component } from 'react'; import { FieldContainer, FieldLabel, FieldInput } from '@voussoir/ui/src/primitives/fields'; import { Button } from '@voussoir/ui/src/primitives/buttons'; diff --git a/packages/fields/types/CloudinaryImage/views/Cell.js b/packages/fields/types/CloudinaryImage/views/Cell.js index 315866fe8b8..bf808036c65 100644 --- a/packages/fields/types/CloudinaryImage/views/Cell.js +++ b/packages/fields/types/CloudinaryImage/views/Cell.js @@ -1,4 +1,5 @@ -import React from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; export default ({ data }) => { if (!data) return null; diff --git a/packages/fields/types/CloudinaryImage/views/Field.js b/packages/fields/types/CloudinaryImage/views/Field.js index 1b5884ec6ef..4554281a203 100644 --- a/packages/fields/types/CloudinaryImage/views/Field.js +++ b/packages/fields/types/CloudinaryImage/views/Field.js @@ -1,4 +1,6 @@ -import React, { Component } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { FieldContainer, FieldLabel, FieldInput } from '@voussoir/ui/src/primitives/fields'; diff --git a/packages/fields/types/File/views/Cell.js b/packages/fields/types/File/views/Cell.js index 45df8278e41..e48a7b8145b 100644 --- a/packages/fields/types/File/views/Cell.js +++ b/packages/fields/types/File/views/Cell.js @@ -1,4 +1,5 @@ -import React from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; const Image = ({ alt, src }) => (
=8.4.0" }, "dependencies": { + "@emotion/core": "^10.0.0-beta.5", + "@emotion/styled": "^10.0.0-beta.5", "@voussoir/icons": "^0.1.3", "date-fns": "^1.29.0", - "emotion": "^9.1.1", + "emotion": "^10.0.0-beta.5", "focus-trap": "^2.4.3", "kalendaryo": "^1.10.0", "prop-types": "^15.6.1", "raf-schd": "^4.0.0", - "react-emotion": "^9.1.1", "react-node-resolver": "^2.0.0", "react-pseudo-state": "^1.0.1", "react-radios": "^1.1.0", diff --git a/packages/ui/src/globalStyles.js b/packages/ui/src/globalStyles.js index a02e69b8043..0917481dd9b 100644 --- a/packages/ui/src/globalStyles.js +++ b/packages/ui/src/globalStyles.js @@ -1,7 +1,8 @@ /* eslint-disable no-unused-expressions */ +import { css } from '@emotion/core'; import { fontFamily, fontSize, colors } from './theme'; -export default ` +export default css` body { background-color: ${colors.page}; color: ${colors.text}; @@ -12,7 +13,7 @@ export default ` text-decoration-skip: ink; text-rendering: optimizeLegibility; -ms-overflow-style: -ms-autohiding-scrollbar; - -moz-font-feature-settings: "liga" on; + -moz-font-feature-settings: 'liga' on; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @@ -27,7 +28,7 @@ export default ` display: flex; flex-flow: row nowrap; } - main{ + main { flex: 1; } `; diff --git a/packages/ui/src/primitives/alert.js b/packages/ui/src/primitives/alert.js index f8c328389fc..a344970eeb7 100644 --- a/packages/ui/src/primitives/alert.js +++ b/packages/ui/src/primitives/alert.js @@ -1,7 +1,7 @@ // @flow import { type Node } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { borderRadius, colors } from '../theme'; diff --git a/packages/ui/src/primitives/badge.js b/packages/ui/src/primitives/badge.js index 7e747852fe5..a0c59028a47 100644 --- a/packages/ui/src/primitives/badge.js +++ b/packages/ui/src/primitives/badge.js @@ -1,7 +1,7 @@ // @flow import React, { PureComponent } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { colors } from '../theme'; diff --git a/packages/ui/src/primitives/buttons/icon.js b/packages/ui/src/primitives/buttons/icon.js index b0ccd5dc8c6..4a64ef4f472 100644 --- a/packages/ui/src/primitives/buttons/icon.js +++ b/packages/ui/src/primitives/buttons/icon.js @@ -1,6 +1,8 @@ // @flow -import React, { type ComponentType } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { type ComponentType } from 'react'; import { Button, type ButtonProps } from './primitives'; type IconProps = ButtonProps & { diff --git a/packages/ui/src/primitives/buttons/loading.js b/packages/ui/src/primitives/buttons/loading.js index 22b24dd4d17..a5e64b8c1e5 100644 --- a/packages/ui/src/primitives/buttons/loading.js +++ b/packages/ui/src/primitives/buttons/loading.js @@ -1,7 +1,8 @@ // @flow -import React from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import styled from '@emotion/styled'; import { LoadingIndicator, LoadingSpinner } from '../loading'; import { Button, type ButtonProps } from './primitives'; diff --git a/packages/ui/src/primitives/buttons/primitives.js b/packages/ui/src/primitives/buttons/primitives.js index 194a8261234..65e743993eb 100644 --- a/packages/ui/src/primitives/buttons/primitives.js +++ b/packages/ui/src/primitives/buttons/primitives.js @@ -1,6 +1,8 @@ // @flow -import React, { type Node, type Ref } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { type Node, type Ref } from 'react'; import { Link } from 'react-router-dom'; import withPseudoState from 'react-pseudo-state'; diff --git a/packages/ui/src/primitives/fields.js b/packages/ui/src/primitives/fields.js index fa19dfd545d..021743614c8 100644 --- a/packages/ui/src/primitives/fields.js +++ b/packages/ui/src/primitives/fields.js @@ -1,4 +1,4 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { colors, gridSize } from '../theme'; import { withSelector } from './misc'; diff --git a/packages/ui/src/primitives/filters.js b/packages/ui/src/primitives/filters.js index ba4ba7e2bc5..c5707f3f0eb 100644 --- a/packages/ui/src/primitives/filters.js +++ b/packages/ui/src/primitives/filters.js @@ -1,4 +1,6 @@ -import React, { Children, Component } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Children, Component } from 'react'; import ReactSelect, { components as reactSelectComponents } from 'react-select'; import { CheckboxGroup as _CheckboxGroup, diff --git a/packages/ui/src/primitives/forms/Controls.js b/packages/ui/src/primitives/forms/Controls.js index 558ca8f6976..f852a701870 100644 --- a/packages/ui/src/primitives/forms/Controls.js +++ b/packages/ui/src/primitives/forms/Controls.js @@ -1,6 +1,6 @@ // @flow import React, { Component, type ComponentType, type Node, type Ref } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { CheckboxGroup as ReactCheckboxGroup, Checkbox as ReactCheckbox, diff --git a/packages/ui/src/primitives/forms/DayPicker.js b/packages/ui/src/primitives/forms/DayPicker.js index 655910cfc63..acdf36b2916 100644 --- a/packages/ui/src/primitives/forms/DayPicker.js +++ b/packages/ui/src/primitives/forms/DayPicker.js @@ -1,6 +1,8 @@ // @flow +/** @jsx jsx */ +import { jsx } from '@emotion/core'; import React, { type Node, type Ref } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import Kalendaryo from 'kalendaryo'; import { isToday as isDayToday, diff --git a/packages/ui/src/primitives/forms/index.js b/packages/ui/src/primitives/forms/index.js index 362b80e6ee2..dfc7d4761f5 100644 --- a/packages/ui/src/primitives/forms/index.js +++ b/packages/ui/src/primitives/forms/index.js @@ -1,6 +1,8 @@ // @flow -import React, { Fragment, type Ref } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Fragment, type Ref } from 'react'; import ReactSelect from 'react-select'; import { borderRadius, colors, gridSize } from '../../theme'; diff --git a/packages/ui/src/primitives/layout.js b/packages/ui/src/primitives/layout.js index 36b61276409..132ecaa4a68 100644 --- a/packages/ui/src/primitives/layout.js +++ b/packages/ui/src/primitives/layout.js @@ -1,7 +1,9 @@ // @flow -import React, { Children, cloneElement, type Node } from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Children, cloneElement, type Node } from 'react'; +import styled from '@emotion/styled'; import { smOnly } from './media-queries'; import { gridSize } from '../theme'; diff --git a/packages/ui/src/primitives/loading.js b/packages/ui/src/primitives/loading.js index 20e8646d605..90c30829669 100644 --- a/packages/ui/src/primitives/loading.js +++ b/packages/ui/src/primitives/loading.js @@ -1,7 +1,8 @@ // @flow import React from 'react'; -import styled, { keyframes } from 'react-emotion'; +import styled from '@emotion/styled'; +import { keyframes } from '@emotion/core'; import { colors } from '../theme'; import { A11yText } from './typography'; diff --git a/packages/ui/src/primitives/lozenge.js b/packages/ui/src/primitives/lozenge.js index 94e516a854b..2a0321b3898 100644 --- a/packages/ui/src/primitives/lozenge.js +++ b/packages/ui/src/primitives/lozenge.js @@ -1,6 +1,6 @@ // @flow -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { borderRadius, colors, gridSize } from '../theme'; diff --git a/packages/ui/src/primitives/modals/common.js b/packages/ui/src/primitives/modals/common.js index be71304a939..62c961b423d 100644 --- a/packages/ui/src/primitives/modals/common.js +++ b/packages/ui/src/primitives/modals/common.js @@ -1,4 +1,4 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { colors } from '../../theme'; import { alpha } from '../../theme/color-utils'; diff --git a/packages/ui/src/primitives/modals/confirm.js b/packages/ui/src/primitives/modals/confirm.js index 2ff320bb6af..2a668b91071 100644 --- a/packages/ui/src/primitives/modals/confirm.js +++ b/packages/ui/src/primitives/modals/confirm.js @@ -1,8 +1,10 @@ // @flow -import React, { Fragment, PureComponent, type ComponentType, type Ref, type Node } from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { Fragment, PureComponent, type ComponentType, type Ref, type Node } from 'react'; import { createPortal } from 'react-dom'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import ScrollLock from 'react-scrolllock'; import { borderRadius } from '../../theme'; diff --git a/packages/ui/src/primitives/modals/dialog.js b/packages/ui/src/primitives/modals/dialog.js index bca39b06207..328d23b112f 100644 --- a/packages/ui/src/primitives/modals/dialog.js +++ b/packages/ui/src/primitives/modals/dialog.js @@ -1,6 +1,8 @@ // @flow -import React, { +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { PureComponent, Fragment, type ComponentType, @@ -9,7 +11,7 @@ import React, { type Node, } from 'react'; import { createPortal } from 'react-dom'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import ScrollLock from 'react-scrolllock'; import FocusTrap, { type FocusTarget } from './FocusTrap'; diff --git a/packages/ui/src/primitives/modals/drawer.js b/packages/ui/src/primitives/modals/drawer.js index f769d2ca155..06fc6eb6753 100644 --- a/packages/ui/src/primitives/modals/drawer.js +++ b/packages/ui/src/primitives/modals/drawer.js @@ -1,6 +1,8 @@ // @flow -import React, { +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import { PureComponent, Fragment, type ComponentType, @@ -9,7 +11,7 @@ import React, { type Node, } from 'react'; import { createPortal } from 'react-dom'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import ScrollLock from 'react-scrolllock'; import FocusTrap, { type FocusTarget } from './FocusTrap'; diff --git a/packages/ui/src/primitives/modals/dropdown.js b/packages/ui/src/primitives/modals/dropdown.js index d8fe2d6da9e..0546f352d97 100644 --- a/packages/ui/src/primitives/modals/dropdown.js +++ b/packages/ui/src/primitives/modals/dropdown.js @@ -1,7 +1,7 @@ // @flow import React, { Component, type Node as ReactNode } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Link } from 'react-router-dom'; import { borderRadius, colors, gridSize } from '../../theme'; diff --git a/packages/ui/src/primitives/modals/popout.js b/packages/ui/src/primitives/modals/popout.js index 8322186ccc7..e04b6533074 100644 --- a/packages/ui/src/primitives/modals/popout.js +++ b/packages/ui/src/primitives/modals/popout.js @@ -1,7 +1,7 @@ // @flow import React, { Component, type Element } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { createPortal } from 'react-dom'; import { borderRadius, gridSize } from '../../theme'; diff --git a/packages/ui/src/primitives/navigation/PrimaryNav.js b/packages/ui/src/primitives/navigation/PrimaryNav.js index af1138c2e3a..6564ca5976c 100644 --- a/packages/ui/src/primitives/navigation/PrimaryNav.js +++ b/packages/ui/src/primitives/navigation/PrimaryNav.js @@ -1,7 +1,7 @@ // @flow import React, { type Node } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Container } from '../layout'; import { colors, gridSize } from '../../theme'; diff --git a/packages/ui/src/primitives/navigation/SecondaryNav.js b/packages/ui/src/primitives/navigation/SecondaryNav.js index f2f9e19631e..729ebb9c813 100644 --- a/packages/ui/src/primitives/navigation/SecondaryNav.js +++ b/packages/ui/src/primitives/navigation/SecondaryNav.js @@ -1,7 +1,7 @@ // @flow import React, { type Node } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Container } from '../layout'; import { colors, gridSize } from '../../theme'; diff --git a/packages/ui/src/primitives/navigation/common.js b/packages/ui/src/primitives/navigation/common.js index 3772354453e..6d940ba8583 100644 --- a/packages/ui/src/primitives/navigation/common.js +++ b/packages/ui/src/primitives/navigation/common.js @@ -1,7 +1,7 @@ // @flow import React from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Link } from 'react-router-dom'; export const NAV_GUTTER = 20; diff --git a/packages/ui/src/primitives/navigation/pagination/Page.js b/packages/ui/src/primitives/navigation/pagination/Page.js index 116e821e922..1aa7e227d7d 100644 --- a/packages/ui/src/primitives/navigation/pagination/Page.js +++ b/packages/ui/src/primitives/navigation/pagination/Page.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { Link } from 'react-router-dom'; import { colors } from '../../../theme'; diff --git a/packages/ui/src/primitives/navigation/pagination/Pagination.js b/packages/ui/src/primitives/navigation/pagination/Pagination.js index 90d99edf1cb..133e85a9d63 100644 --- a/packages/ui/src/primitives/navigation/pagination/Pagination.js +++ b/packages/ui/src/primitives/navigation/pagination/Pagination.js @@ -1,7 +1,7 @@ // @flow import React, { Component } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { colors } from '../../../theme'; import Page from './Page'; diff --git a/packages/ui/src/primitives/pill.js b/packages/ui/src/primitives/pill.js index bb23688d852..22101d58944 100644 --- a/packages/ui/src/primitives/pill.js +++ b/packages/ui/src/primitives/pill.js @@ -1,7 +1,8 @@ // @flow -import React from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import styled from '@emotion/styled'; import { XIcon } from '@voussoir/icons'; import { colors } from '../theme'; diff --git a/packages/ui/src/primitives/typography.js b/packages/ui/src/primitives/typography.js index b40e0aa6886..b3e7ff7a2cf 100644 --- a/packages/ui/src/primitives/typography.js +++ b/packages/ui/src/primitives/typography.js @@ -1,5 +1,6 @@ -import React from 'react'; -import styled from 'react-emotion'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import styled from '@emotion/styled'; import { colors } from '../theme'; diff --git a/yarn.lock b/yarn.lock index c19600c700e..f7d137eb124 100644 --- a/yarn.lock +++ b/yarn.lock @@ -84,6 +84,12 @@ "@babel/types" "7.0.0-beta.51" lodash "^4.17.5" +"@babel/helper-module-imports@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d" + dependencies: + "@babel/types" "^7.0.0" + "@babel/helper-split-export-declaration@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0.tgz#3aae285c0311c2ab095d997b8c9a94cad547d813" @@ -188,20 +194,93 @@ find-root "^1.1.0" source-map "^0.7.2" +"@emotion/cache@^10.0.0-beta.5": + version "10.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.0-beta.5.tgz#7be0745d6f40f957d3ba9dfbbf1d85aa48243f3e" + dependencies: + "@emotion/sheet" "^0.9.0" + "@emotion/stylis" "^0.8.0" + "@emotion/utils" "^0.9.0" + +"@emotion/cache@^10.0.0-really-unsafe-please-do-not-use.2": + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.0-really-unsafe-please-do-not-use.2.tgz#61adbc835461bfb68dac045a94b43aa6154a061e" + dependencies: + "@emotion/sheet" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/stylis" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/utils" "^10.0.0-really-unsafe-please-do-not-use.2" + +"@emotion/core@^10.0.0-beta.5": + version "10.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.0-beta.5.tgz#11a49b02316a96a026a2a2bb3f41bbdf711cd009" + dependencies: + "@emotion/cache" "^10.0.0-beta.5" + "@emotion/css" "^10.0.0-beta.5" + "@emotion/serialize" "^0.10.0" + "@emotion/sheet" "^0.9.0" + "@emotion/utils" "^0.9.0" + +"@emotion/css@^10.0.0-beta.5": + version "10.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.0-beta.5.tgz#1fc41dd2fb76999c20c3eb3fd85a4f5de799bc18" + dependencies: + "@emotion/serialize" "^0.10.0" + "@emotion/utils" "^0.9.0" + babel-plugin-emotion "^10.0.0-beta.5" + +"@emotion/css@^10.0.0-really-unsafe-please-do-not-use.2": + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.0-really-unsafe-please-do-not-use.2.tgz#d70987b374578093b0b90dfb473b299c66ece3ff" + dependencies: + "@emotion/serialize" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/utils" "^10.0.0-really-unsafe-please-do-not-use.2" + babel-plugin-emotion "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/hash@^0.6.2", "@emotion/hash@^0.6.5": version "0.6.5" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.5.tgz#097729b84a5164f71f9acd2570ecfd1354d7b360" +"@emotion/hash@^0.7.0": + version "0.7.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.0.tgz#68d9cb2e75fabffbe5cae6c17a91dc287439a0a6" + +"@emotion/hash@^10.0.0-really-unsafe-please-do-not-use.2": + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-10.0.0-really-unsafe-please-do-not-use.2.tgz#f6229d19de147d08d226e21f2d8ef180ef4af1f5" + "@emotion/is-prop-valid@^0.6.1": version "0.6.5" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.6.5.tgz#25071b70957f250e7a8a543a9a187b09161f4d1c" dependencies: "@emotion/memoize" "^0.6.5" +"@emotion/is-prop-valid@^0.7.0": + version "0.7.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.0.tgz#ea730c5e75846faae1e4946253bd1ee87ae0e39e" + dependencies: + "@emotion/memoize" "^0.7.0" + "@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.5": version "0.6.5" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.5.tgz#f868c314b889e7c3d84868a1d1cc323fbb40ca86" +"@emotion/memoize@^0.7.0": + version "0.7.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.0.tgz#b4363577017f94a7ab9417f030516c7dad9995d7" + +"@emotion/memoize@^10.0.0-really-unsafe-please-do-not-use.2": + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-10.0.0-really-unsafe-please-do-not-use.2.tgz#fe196c8e45eb3d172e164422ecbdfe46ba06fe30" + +"@emotion/serialize@^0.10.0": + version "0.10.0" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.10.0.tgz#29229cdfb6c13fc1b5fc325ab15ef79bef0375dc" + dependencies: + "@emotion/hash" "^0.7.0" + "@emotion/memoize" "^0.7.0" + "@emotion/unitless" "^0.7.0" + "@emotion/utils" "^0.9.0" + "@emotion/serialize@^0.8.5": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.8.5.tgz#169a1f7acbc18b3bc84f83d1ffddd39335c1539b" @@ -211,18 +290,74 @@ "@emotion/unitless" "^0.6.5" "@emotion/utils" "^0.7.3" +"@emotion/serialize@^10.0.0-really-unsafe-please-do-not-use.2": + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-10.0.0-really-unsafe-please-do-not-use.2.tgz#1b0822b1a6c23901a60b11bc7142f8c9f8e280d8" + dependencies: + "@emotion/hash" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/memoize" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/unitless" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/utils" "^10.0.0-really-unsafe-please-do-not-use.2" + +"@emotion/sheet@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.0.tgz#5fbfb5fff92c69d3a7cdaec5f24edd1264639d68" + +"@emotion/sheet@^10.0.0-really-unsafe-please-do-not-use.2": + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-10.0.0-really-unsafe-please-do-not-use.2.tgz#b02e3f5f936afde281a52e703e7564c8e764b6a9" + +"@emotion/styled-base@^10.0.0-beta.5": + version "10.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.0-beta.5.tgz#64f0c580839ba5bbc1668ea5ea6161abeb83c1b4" + dependencies: + "@emotion/is-prop-valid" "^0.7.0" + "@emotion/serialize" "^0.10.0" + "@emotion/utils" "^0.9.0" + +"@emotion/styled@^10.0.0-beta.5": + version "10.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.0-beta.5.tgz#42fbdb528ccb7593b3bad1c85ea1ec366c603749" + dependencies: + "@emotion/styled-base" "^10.0.0-beta.5" + babel-plugin-emotion "^10.0.0-beta.5" + "@emotion/stylis@^0.6.10": version "0.6.12" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.6.12.tgz#3fb58220e0fc9e380bcabbb3edde396ddc1dfe6e" +"@emotion/stylis@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.0.tgz#7f7e6c039274c481482a5169d718405bf0bf2207" + +"@emotion/stylis@^10.0.0-really-unsafe-please-do-not-use.2": + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-10.0.0-really-unsafe-please-do-not-use.2.tgz#9f016b9139159a4b2f9cec8d29bf1dbba6b6cca4" + "@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.5": version "0.6.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.5.tgz#6a397794dc78ca7df4bf68893061709590a7ec81" +"@emotion/unitless@^0.7.0": + version "0.7.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.0.tgz#0a61bd5f1eaca67ded84260c3f26df71e27e3665" + +"@emotion/unitless@^10.0.0-really-unsafe-please-do-not-use.2": + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-10.0.0-really-unsafe-please-do-not-use.2.tgz#62d6c9ef58ca8be107becb7dda28311a937f0d33" + "@emotion/utils@^0.7.3": version "0.7.3" resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.7.3.tgz#4240c5eee8af86843452af7497ac2808be04a77d" +"@emotion/utils@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.9.0.tgz#828a15c384790f15b294bcf6ddcae0153ed32e84" + +"@emotion/utils@^10.0.0-really-unsafe-please-do-not-use.2": + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-10.0.0-really-unsafe-please-do-not-use.2.tgz#ddf5b65bb7c1215d39ebbebfc5f484a8e41e6d9b" + "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf" @@ -1271,7 +1406,23 @@ babel-plugin-check-es2015-constants@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-emotion@^9.1.0, babel-plugin-emotion@^9.2.6: +babel-plugin-emotion@^10.0.0-beta.5, babel-plugin-emotion@^10.0.0-really-unsafe-please-do-not-use.2: + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.0-really-unsafe-please-do-not-use.2.tgz#7479dcc73b33ceb6b49857360ae7891298b0a157" + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@emotion/css" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/hash" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/memoize" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/serialize" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/stylis" "^10.0.0-really-unsafe-please-do-not-use.2" + babel-plugin-macros "^2.0.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + find-root "^1.1.0" + source-map "^0.5.7" + +babel-plugin-emotion@^9.2.6: version "9.2.6" resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.6.tgz#992d48f316c20610c28a95ae90e6bd193014eec5" dependencies: @@ -2559,6 +2710,23 @@ create-emotion-styled@^9.2.6: dependencies: "@emotion/is-prop-valid" "^0.6.1" +create-emotion@^10.0.0-really-unsafe-please-do-not-use.2: + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.0-really-unsafe-please-do-not-use.2.tgz#0a22e696eaab3f9746a363ea49b3237b75d53915" + dependencies: + "@emotion/cache" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/css" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/hash" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/memoize" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/serialize" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/sheet" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/stylis" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/unitless" "^10.0.0-really-unsafe-please-do-not-use.2" + "@emotion/utils" "^10.0.0-really-unsafe-please-do-not-use.2" + csstype "^2.5.2" + stylis "^3.5.0" + stylis-rule-sheet "^0.0.10" + create-emotion@^9.2.6: version "9.2.6" resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.2.6.tgz#f64cf1c64cf82fe7d22725d1d77498ddd2d39edb" @@ -3101,6 +3269,13 @@ emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" +emotion@^10.0.0-beta.5: + version "10.0.0-really-unsafe-please-do-not-use.2" + resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.0-really-unsafe-please-do-not-use.2.tgz#8b6b38f2857aba2d135d7fc0b1e7fa3391544f32" + dependencies: + babel-plugin-emotion "^10.0.0-really-unsafe-please-do-not-use.2" + create-emotion "^10.0.0-really-unsafe-please-do-not-use.2" + emotion@^9.1.1, emotion@^9.1.2: version "9.2.6" resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.6.tgz#48517515e769bca6d8f7ff18425a7f133b010f22" @@ -3246,6 +3421,10 @@ eslint-plugin-cypress@^2.0.1: dependencies: globals "^11.0.1" +eslint-plugin-emotion@10.0.0-beta.2: + version "10.0.0-beta.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-emotion/-/eslint-plugin-emotion-10.0.0-beta.2.tgz#9d5255c6e710ba88e7fc6ba485d8bbe935fa2757" + eslint-plugin-flowtype@^2.50.3: version "2.50.3" resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.3.tgz#61379d6dce1d010370acd6681740fd913d68175f" @@ -7207,7 +7386,7 @@ react-dom@^16.5.2: prop-types "^15.6.2" schedule "^0.5.0" -react-emotion@^9.1.1, react-emotion@^9.1.3: +react-emotion@^9.1.3: version "9.2.6" resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-9.2.6.tgz#3941f78779f9a8ad8300042ddfa9b2cb111442c2" dependencies: