diff --git a/desktop/app/package.json b/desktop/app/package.json index c6873afd9..b5b0d864b 100644 --- a/desktop/app/package.json +++ b/desktop/app/package.json @@ -11,8 +11,9 @@ "license": "MIT", "dependencies": { "@ant-design/icons": "^4.2.2", - "@emotion/core": "^10.0.22", - "@emotion/styled": "^10.0.23", + "@emotion/css": "^11.0.0", + "@emotion/react": "^11.1.1", + "@emotion/styled": "^11.0.0", "@iarna/toml": "^2.2.5", "@types/archiver": "^3.1.0", "@types/uuid": "^8.0.1", @@ -25,7 +26,6 @@ "axios": "^0.20.0", "console-feed": "^3.1.10", "deep-equal": "^2.0.1", - "emotion": "^10.0.23", "expand-tilde": "^2.0.2", "flipper-client-sdk": "^0.0.3", "flipper-doctor": "0.66.0", diff --git a/desktop/app/src/__tests__/PluginContainer.node.tsx b/desktop/app/src/__tests__/PluginContainer.node.tsx index cf0c5f9fc..c161b8d31 100644 --- a/desktop/app/src/__tests__/PluginContainer.node.tsx +++ b/desktop/app/src/__tests__/PluginContainer.node.tsx @@ -62,28 +62,28 @@ test('Plugin container can render plugin and receive updates', async () => { TestPlugin, ); expect(renderer.baseElement).toMatchInlineSnapshot(` - -
-
+
+
+

+ Hello: + + -

- Hello: - - - 0 - -

-

-
-
- - `); + 0 + + +
+
+
+ + `); act(() => { sendMessage('inc', {delta: 2}); @@ -162,7 +162,7 @@ test('PluginContainer can render Sandy plugins', async () => {
Hello from Sandy @@ -170,7 +170,7 @@ test('PluginContainer can render Sandy plugins', async () => {
@@ -193,7 +193,7 @@ test('PluginContainer can render Sandy plugins', async () => {
Hello from Sandy @@ -201,7 +201,7 @@ test('PluginContainer can render Sandy plugins', async () => {
@@ -258,23 +258,23 @@ test('PluginContainer can render Sandy plugins', async () => { }); // Might be needed, but seems to work reliable without: await sleep(1000); expect(renderer.baseElement).toMatchInlineSnapshot(` - -
-
-
- Hello from Sandy - 9 + +
+
+
+ Hello from Sandy + 9 +
+
-
-
- -`); + + `); expect(pluginInstance.count.get()).toBe(9); expect(pluginInstance.connectedStub).toBeCalledTimes(2); @@ -502,7 +502,7 @@ test('PluginContainer + Sandy plugin supports deeplink', async () => {

hello @@ -510,7 +510,7 @@ test('PluginContainer + Sandy plugin supports deeplink', async () => {

@@ -532,7 +532,7 @@ test('PluginContainer + Sandy plugin supports deeplink', async () => {

hello @@ -540,7 +540,7 @@ test('PluginContainer + Sandy plugin supports deeplink', async () => {

@@ -652,14 +652,14 @@ test('PluginContainer can render Sandy device plugins', async () => {
Hello from Sandy:
@@ -683,7 +683,7 @@ test('PluginContainer can render Sandy device plugins', async () => {
Hello from Sandy: @@ -691,7 +691,7 @@ test('PluginContainer can render Sandy device plugins', async () => {
@@ -776,7 +776,7 @@ test('PluginContainer + Sandy device plugin supports deeplink', async () => {

hello @@ -784,7 +784,7 @@ test('PluginContainer + Sandy device plugin supports deeplink', async () => {

@@ -806,7 +806,7 @@ test('PluginContainer + Sandy device plugin supports deeplink', async () => {

hello @@ -814,7 +814,7 @@ test('PluginContainer + Sandy device plugin supports deeplink', async () => {

diff --git a/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap b/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap index 588bc3b33..c9db9bf49 100644 --- a/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap +++ b/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap @@ -2,13 +2,13 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
@@ -30,7 +30,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = ` className="css-1jrm6r3" >
@@ -71,7 +71,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = ` className="css-1jrm6r3" >
@@ -175,7 +175,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = ` className="css-1jrm6r3" >
@@ -216,7 +216,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = ` className="css-1jrm6r3" >
(({backgroundColor}) => ({ marginRight: 8, backgroundColor, diff --git a/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap b/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap index bf5bcdbe6..ac4254728 100644 --- a/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap +++ b/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap @@ -3,16 +3,16 @@ exports[`load PluginInstaller list 1`] = `
Name
Version
Description
@@ -95,14 +95,14 @@ exports[`load PluginInstaller list 1`] = `
@@ -113,7 +113,7 @@ exports[`load PluginInstaller list 1`] = `
@@ -124,12 +124,12 @@ exports[`load PluginInstaller list 1`] = `
Install @@ -165,11 +165,11 @@ exports[`load PluginInstaller list 1`] = `
@@ -180,7 +180,7 @@ exports[`load PluginInstaller list 1`] = `
@@ -191,12 +191,12 @@ exports[`load PluginInstaller list 1`] = `
Install @@ -235,36 +235,36 @@ exports[`load PluginInstaller list 1`] = `
dots-3-circle
@@ -298,16 +298,16 @@ exports[`load PluginInstaller list 1`] = ` exports[`load PluginInstaller list with one plugin installed 1`] = `
Name
Version
Description
@@ -390,14 +390,14 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
@@ -408,7 +408,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
@@ -419,12 +419,12 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
Remove
@@ -474,7 +474,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
@@ -485,12 +485,12 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
Install @@ -529,36 +529,36 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
dots-3-circle
diff --git a/desktop/app/src/index.tsx b/desktop/app/src/index.tsx index ba2f0fd85..05c2781d6 100644 --- a/desktop/app/src/index.tsx +++ b/desktop/app/src/index.tsx @@ -8,7 +8,7 @@ */ export {default as styled} from '@emotion/styled'; -export {keyframes} from 'emotion'; +export {keyframes} from '@emotion/css'; export {produce} from 'immer'; export * from './ui/index'; diff --git a/desktop/app/src/init.tsx b/desktop/app/src/init.tsx index dce4286d6..b3caf5660 100644 --- a/desktop/app/src/init.tsx +++ b/desktop/app/src/init.tsx @@ -26,8 +26,8 @@ import React from 'react'; import path from 'path'; import {store} from './store'; import {registerRecordingHooks} from './utils/pluginStateRecorder'; -import {cache} from 'emotion'; -import {CacheProvider} from '@emotion/core'; +import {cache} from '@emotion/css'; +import {CacheProvider} from '@emotion/react'; import {enableMapSet} from 'immer'; import os from 'os'; import {PopoverProvider} from './ui/components/PopoverProvider'; diff --git a/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx b/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx index 5275d0035..83f2ceb9c 100644 --- a/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx +++ b/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx @@ -11,7 +11,7 @@ import React from 'react'; import {Typography, Button, Space, Input, Card, Alert, List} from 'antd'; import {Layout} from '../ui'; import {theme} from 'flipper-plugin'; -import {css} from 'emotion'; +import {css} from '@emotion/css'; import {DesignComponentDemos} from './DesignComponentDemos'; const {Title, Text, Link} = Typography; diff --git a/desktop/app/src/ui/components/Button.tsx b/desktop/app/src/ui/components/Button.tsx index d4f203d16..667573be6 100644 --- a/desktop/app/src/ui/components/Button.tsx +++ b/desktop/app/src/ui/components/Button.tsx @@ -11,7 +11,7 @@ import React, {useContext, useState, useRef, useCallback, useMemo} from 'react'; import electron, {MenuItemConstructorOptions} from 'electron'; import styled from '@emotion/styled'; import {findDOMNode} from 'react-dom'; -import {keyframes} from 'emotion'; +import {keyframes} from '@emotion/css'; import {Button as AntdButton, Dropdown, Menu} from 'antd'; import {colors} from './colors'; diff --git a/desktop/app/src/ui/components/Interactive.tsx b/desktop/app/src/ui/components/Interactive.tsx index ac64251b9..531dd99fc 100644 --- a/desktop/app/src/ui/components/Interactive.tsx +++ b/desktop/app/src/ui/components/Interactive.tsx @@ -43,7 +43,7 @@ const ALL_RESIZABLE: ResizingSides = { top: true, }; -type InteractiveProps = { +export type InteractiveProps = { isMovableAnchor?: (event: React.MouseEvent) => boolean; onMoveStart?: () => void; onMoveEnd?: () => void; diff --git a/desktop/app/src/ui/components/LoadingIndicator.tsx b/desktop/app/src/ui/components/LoadingIndicator.tsx index c83d13691..ec290d8ba 100644 --- a/desktop/app/src/ui/components/LoadingIndicator.tsx +++ b/desktop/app/src/ui/components/LoadingIndicator.tsx @@ -8,7 +8,7 @@ */ import styled from '@emotion/styled'; -import {keyframes} from 'emotion'; +import {keyframes} from '@emotion/css'; const animation = keyframes({ '0%': { diff --git a/desktop/app/src/ui/components/Scrollable.tsx b/desktop/app/src/ui/components/Scrollable.tsx index 74adbadd7..e360412e7 100644 --- a/desktop/app/src/ui/components/Scrollable.tsx +++ b/desktop/app/src/ui/components/Scrollable.tsx @@ -9,9 +9,9 @@ import React from 'react'; import styled from '@emotion/styled'; -import {BackgroundProperty} from 'csstype'; +import {Property} from 'csstype'; -type Props = {children: React.ReactNode; background?: BackgroundProperty}; +type Props = {children: React.ReactNode; background?: Property.Background}; const Scrollable = styled.div(({background}) => ({ width: '100%', diff --git a/desktop/app/src/ui/components/Sidebar.tsx b/desktop/app/src/ui/components/Sidebar.tsx index 124d46237..6056a5392 100644 --- a/desktop/app/src/ui/components/Sidebar.tsx +++ b/desktop/app/src/ui/components/Sidebar.tsx @@ -7,23 +7,18 @@ * @format */ -import Interactive from './Interactive'; +import Interactive, {InteractiveProps} from './Interactive'; import FlexColumn from './FlexColumn'; import {colors} from './colors'; import {Component, ReactNode} from 'react'; import styled from '@emotion/styled'; -import { - BackgroundClipProperty, - HeightProperty, - WidthProperty, - BackgroundColorProperty, -} from 'csstype'; +import {Property} from 'csstype'; import React from 'react'; import FlexRow from './FlexRow'; import {MoreOutlined} from '@ant-design/icons'; import {theme} from 'flipper-plugin'; -const SidebarInteractiveContainer = styled(Interactive)({ +const SidebarInteractiveContainer = styled(Interactive)({ flex: 'none', }); SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer'; @@ -32,7 +27,7 @@ type SidebarPosition = 'left' | 'top' | 'right' | 'bottom'; const SidebarContainer = styled(FlexColumn)<{ position: 'right' | 'top' | 'left' | 'bottom'; - backgroundColor?: BackgroundClipProperty; + backgroundColor?: Property.BackgroundClip; overflow?: boolean; unstyled?: boolean; }>((props) => ({ @@ -89,7 +84,7 @@ type SidebarProps = { /** * Background color. */ - backgroundColor?: BackgroundColorProperty; + backgroundColor?: Property.BackgroundColor; /** * Callback when the sidebar size ahs changed. */ @@ -109,8 +104,8 @@ type SidebarProps = { }; type SidebarState = { - width?: WidthProperty; - height?: HeightProperty; + width?: Property.Width; + height?: Property.Height; userChange: boolean; }; diff --git a/desktop/app/src/ui/components/StackTrace.tsx b/desktop/app/src/ui/components/StackTrace.tsx index 34a7a670e..ee58c2007 100644 --- a/desktop/app/src/ui/components/StackTrace.tsx +++ b/desktop/app/src/ui/components/StackTrace.tsx @@ -15,7 +15,7 @@ import FlexRow from './FlexRow'; import Glyph from './Glyph'; import styled from '@emotion/styled'; import React from 'react'; -import {BackgroundColorProperty} from 'csstype'; +import {Property} from 'csstype'; import { TableBodyRow, TableColumnSizes, @@ -25,7 +25,7 @@ import { const Padder = styled.div<{ padded?: boolean; - backgroundColor?: BackgroundColorProperty; + backgroundColor?: Property.BackgroundColor; }>(({padded, backgroundColor}) => ({ padding: padded ? 10 : 0, backgroundColor, diff --git a/desktop/app/src/ui/components/StatusIndicator.tsx b/desktop/app/src/ui/components/StatusIndicator.tsx index 94854431e..049bca98a 100644 --- a/desktop/app/src/ui/components/StatusIndicator.tsx +++ b/desktop/app/src/ui/components/StatusIndicator.tsx @@ -10,11 +10,11 @@ import styled from '@emotion/styled'; import {colors} from './colors'; -import {BackgroundColorProperty, HeightProperty} from 'csstype'; +import {Property} from 'csstype'; type Props = { - statusColor: BackgroundColorProperty; - diameter?: HeightProperty; + statusColor: Property.BackgroundColor; + diameter?: Property.Height; title?: string; }; diff --git a/desktop/app/src/ui/components/Tab.tsx b/desktop/app/src/ui/components/Tab.tsx index bc4253ff7..57b3bf0dd 100644 --- a/desktop/app/src/ui/components/Tab.tsx +++ b/desktop/app/src/ui/components/Tab.tsx @@ -7,7 +7,7 @@ * @format */ -import {WidthProperty} from 'csstype'; +import {Property} from 'csstype'; export type Props = { /** @@ -37,7 +37,7 @@ export type Props = { * Contents of this tab. */ children?: React.ReactNode; - width?: WidthProperty; + width?: Property.Width; }; export default function Tab(_props: Props): JSX.Element { diff --git a/desktop/app/src/ui/components/Tabs.tsx b/desktop/app/src/ui/components/Tabs.tsx index ccb4f8593..0d4b0f2f7 100644 --- a/desktop/app/src/ui/components/Tabs.tsx +++ b/desktop/app/src/ui/components/Tabs.tsx @@ -13,7 +13,7 @@ import Orderable from './Orderable'; import FlexRow from './FlexRow'; import {colors} from './colors'; import Tab, {Props as TabProps} from './Tab'; -import {WidthProperty} from 'csstype'; +import {Property} from 'csstype'; import React, {useContext} from 'react'; import {TabsContext} from './TabsContainer'; @@ -25,7 +25,7 @@ TabList.displayName = 'Tabs:TabList'; const TabListItem = styled.div<{ active?: boolean; - width?: WidthProperty; + width?: Property.Width; container?: boolean; }>((props) => ({ userSelect: 'none', diff --git a/desktop/app/src/ui/components/Text.tsx b/desktop/app/src/ui/components/Text.tsx index 32a3a1933..ffe1c80e2 100644 --- a/desktop/app/src/ui/components/Text.tsx +++ b/desktop/app/src/ui/components/Text.tsx @@ -8,32 +8,24 @@ */ import styled from '@emotion/styled'; -import { - ColorProperty, - FontSizeProperty, - TextAlignProperty, - FontFamilyProperty, - WhiteSpaceProperty, - WordWrapProperty, - CursorProperty, -} from 'csstype'; +import {Property} from 'csstype'; /** * A Text component. */ const Text = styled.span<{ - color?: ColorProperty; + color?: Property.Color; bold?: boolean; italic?: boolean; underline?: boolean; - align?: TextAlignProperty; - size?: FontSizeProperty; + align?: Property.TextAlign; + size?: Property.FontSize; code?: boolean; - family?: FontFamilyProperty; + family?: Property.FontFamily; selectable?: boolean; - wordWrap?: WordWrapProperty; - whiteSpace?: WhiteSpaceProperty; - cursor?: CursorProperty; + wordWrap?: Property.WordWrap; + whiteSpace?: Property.WhiteSpace; + cursor?: Property.Cursor; }>((props) => ({ color: props.color ? props.color : 'inherit', cursor: props.cursor ? props.cursor : 'auto', diff --git a/desktop/app/src/ui/components/TooltipProvider.tsx b/desktop/app/src/ui/components/TooltipProvider.tsx index 81f71be5d..44a423638 100644 --- a/desktop/app/src/ui/components/TooltipProvider.tsx +++ b/desktop/app/src/ui/components/TooltipProvider.tsx @@ -10,19 +10,7 @@ import styled from '@emotion/styled'; import {colors} from './colors'; import {memo, createContext, useMemo, useState, useRef} from 'react'; -import { - TopProperty, - LeftProperty, - BottomProperty, - RightProperty, - BackgroundColorProperty, - LineHeightProperty, - PaddingProperty, - BorderRadiusProperty, - MaxWidthProperty, - ColorProperty, - WidthProperty, -} from 'csstype'; +import {Property} from 'csstype'; import React from 'react'; const defaultOptions = { @@ -52,18 +40,18 @@ export type TooltipOptions = { }; const TooltipBubble = styled.div<{ - top: TopProperty; - left: LeftProperty; - bottom: BottomProperty; - right: RightProperty; + top: Property.Top; + left: Property.Left; + bottom: Property.Bottom; + right: Property.Right; options: { - backgroundColor: BackgroundColorProperty; - lineHeight: LineHeightProperty; - padding: PaddingProperty; - borderRadius: BorderRadiusProperty; - width: WidthProperty; - maxWidth: MaxWidthProperty; - color: ColorProperty; + backgroundColor: Property.BackgroundColor; + lineHeight: Property.LineHeight; + padding: Property.Padding; + borderRadius: Property.BorderRadius; + width: Property.Width; + maxWidth: Property.MaxWidth; + color: Property.Color; }; }>((props) => ({ position: 'absolute', @@ -96,12 +84,12 @@ const TAIL_LR_POSITION_HORIZONTAL_OFFSET = 5; const TAIL_LR_POSITION_VERTICAL_OFFSET = 12; const TooltipTail = styled.div<{ - top: TopProperty; - left: LeftProperty; - bottom: BottomProperty; - right: RightProperty; + top: Property.Top; + left: Property.Left; + bottom: Property.Bottom; + right: Property.Right; options: { - backgroundColor: BackgroundColorProperty; + backgroundColor: Property.BackgroundColor; }; }>((props) => ({ position: 'absolute', @@ -209,10 +197,10 @@ function getTooltipTail(tooltip: TooltipObject) { return null; } - let left: LeftProperty = 'auto'; - let top: TopProperty = 'auto'; - let bottom: BottomProperty = 'auto'; - let right: RightProperty = 'auto'; + let left: Property.Left = 'auto'; + let top: Property.Top = 'auto'; + let bottom: Property.Bottom = 'auto'; + let right: Property.Right = 'auto'; if (opts.position === 'below') { left = tooltip.rect.left + TAIL_AB_POSITION_HORIZONTAL_OFFSET; @@ -245,10 +233,10 @@ function getTooltipTail(tooltip: TooltipObject) { function getTooltipBubble(tooltip: TooltipObject) { const opts = Object.assign(defaultOptions, tooltip.options); - let left: LeftProperty = 'auto'; - let top: TopProperty = 'auto'; - let bottom: BottomProperty = 'auto'; - let right: RightProperty = 'auto'; + let left: Property.Left = 'auto'; + let top: Property.Top = 'auto'; + let bottom: Property.Bottom = 'auto'; + let right: Property.Right = 'auto'; if (opts.position === 'below') { left = tooltip.rect.left + BUBBLE_BELOW_POSITION_VERTICAL_OFFSET; diff --git a/desktop/app/src/ui/components/VirtualList.tsx b/desktop/app/src/ui/components/VirtualList.tsx index 3645a706b..9bb46be69 100644 --- a/desktop/app/src/ui/components/VirtualList.tsx +++ b/desktop/app/src/ui/components/VirtualList.tsx @@ -12,9 +12,9 @@ import {Component} from 'react'; import View from './View'; import styled from '@emotion/styled'; import React from 'react'; -import {HeightProperty, TopProperty} from 'csstype'; +import {Property} from 'csstype'; -const Inner = styled(FlexColumn)<{height: HeightProperty}>( +const Inner = styled(FlexColumn)<{height: Property.Height}>( ({height}) => ({ alignItems: 'flex-start', height, @@ -26,7 +26,7 @@ const Inner = styled(FlexColumn)<{height: HeightProperty}>( ); Inner.displayName = 'VirtualList:Inner'; -const Content = styled(FlexColumn)<{top: TopProperty}>(({top}) => ({ +const Content = styled(FlexColumn)<{top: Property.Top}>(({top}) => ({ alignItems: 'flex-start', height: '100%', marginTop: top, diff --git a/desktop/app/src/ui/components/searchable/FilterToken.tsx b/desktop/app/src/ui/components/searchable/FilterToken.tsx index 79155a039..acceaaa9c 100644 --- a/desktop/app/src/ui/components/searchable/FilterToken.tsx +++ b/desktop/app/src/ui/components/searchable/FilterToken.tsx @@ -14,9 +14,9 @@ import styled from '@emotion/styled'; import {colors} from '../colors'; import electron, {MenuItemConstructorOptions} from 'electron'; import React from 'react'; -import {ColorProperty} from 'csstype'; +import {Property} from 'csstype'; -const Token = styled(Text)<{focused?: boolean; color?: ColorProperty}>( +const Token = styled(Text)<{focused?: boolean; color?: Property.Color}>( (props) => ({ display: 'inline-flex', alignItems: 'center', diff --git a/desktop/app/src/ui/components/table/TableHead.tsx b/desktop/app/src/ui/components/table/TableHead.tsx index 4efe4e189..dfd3ed396 100644 --- a/desktop/app/src/ui/components/table/TableHead.tsx +++ b/desktop/app/src/ui/components/table/TableHead.tsx @@ -18,7 +18,7 @@ import { import {normaliseColumnWidth, isPercentage} from './utils'; import {PureComponent} from 'react'; import ContextMenu from '../ContextMenu'; -import Interactive from '../Interactive'; +import Interactive, {InteractiveProps} from '../Interactive'; import styled from '@emotion/styled'; import {colors} from '../colors'; import FlexRow from '../FlexRow'; @@ -31,7 +31,7 @@ const TableHeaderArrow = styled.span({ }); TableHeaderArrow.displayName = 'TableHead:TableHeaderArrow'; -const TableHeaderColumnInteractive = styled(Interactive)({ +const TableHeaderColumnInteractive = styled(Interactive)({ display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/desktop/app/src/ui/components/table/TableRow.tsx b/desktop/app/src/ui/components/table/TableRow.tsx index 47d3b0db6..43facf340 100644 --- a/desktop/app/src/ui/components/table/TableRow.tsx +++ b/desktop/app/src/ui/components/table/TableRow.tsx @@ -20,12 +20,7 @@ import FlexRow from '../FlexRow'; import {colors} from '../colors'; import {normaliseColumnWidth} from './utils'; import {DEFAULT_ROW_HEIGHT} from './types'; -import { - FontWeightProperty, - ColorProperty, - JustifyContentProperty, - BackgroundColorProperty, -} from 'csstype'; +import {Property} from 'csstype'; type TableBodyRowContainerProps = { even?: boolean; @@ -33,12 +28,12 @@ type TableBodyRowContainerProps = { highlighted?: boolean; rowLineHeight?: number; multiline?: boolean; - fontWeight?: FontWeightProperty; - color?: ColorProperty; + fontWeight?: Property.FontWeight; + color?: Property.Color; highlightOnHover?: boolean; - backgroundColor?: BackgroundColorProperty; - highlightedBackgroundColor?: BackgroundColorProperty; - zebraBackgroundColor?: BackgroundColorProperty; + backgroundColor?: Property.BackgroundColor; + highlightedBackgroundColor?: Property.BackgroundColor; + zebraBackgroundColor?: Property.BackgroundColor; }; const backgroundColor = (props: TableBodyRowContainerProps) => { @@ -91,26 +86,20 @@ TableBodyRowContainer.displayName = 'TableRow:TableBodyRowContainer'; const TableBodyColumnContainer = styled.div<{ width?: any; multiline?: boolean; - justifyContent: JustifyContentProperty; -}>( - (props: { - width?: any; - multiline?: boolean; - justifyContent: JustifyContentProperty; - }) => ({ - display: 'flex', - flexShrink: props.width === 'flex' ? 1 : 0, - overflow: 'hidden', - padding: '0 8px', - textOverflow: 'ellipsis', - verticalAlign: 'top', - whiteSpace: props.multiline ? 'normal' : 'nowrap', - wordWrap: props.multiline ? 'break-word' : 'normal', - width: props.width === 'flex' ? '100%' : props.width, - maxWidth: '100%', - justifyContent: props.justifyContent, - }), -); + justifyContent: Property.JustifyContent; +}>((props) => ({ + display: 'flex', + flexShrink: props.width === 'flex' ? 1 : 0, + overflow: 'hidden', + padding: '0 8px', + textOverflow: 'ellipsis', + verticalAlign: 'top', + whiteSpace: props.multiline ? 'normal' : 'nowrap', + wordWrap: props.multiline ? 'break-word' : 'normal', + width: props.width === 'flex' ? '100%' : props.width, + maxWidth: '100%', + justifyContent: props.justifyContent, +})); TableBodyColumnContainer.displayName = 'TableRow:TableBodyColumnContainer'; type Props = { diff --git a/desktop/app/src/ui/components/table/types.tsx b/desktop/app/src/ui/components/table/types.tsx index 34c78f211..6af340985 100644 --- a/desktop/app/src/ui/components/table/types.tsx +++ b/desktop/app/src/ui/components/table/types.tsx @@ -9,7 +9,7 @@ import {Filter} from '../filter/types'; import {List} from 'immutable'; -import {BackgroundColorProperty} from 'csstype'; +import {Property} from 'csstype'; export const MINIMUM_COLUMN_WIDTH = 100; export const DEFAULT_COLUMN_WIDTH = 200; @@ -52,8 +52,8 @@ export type TableBodyRow = { sortKey?: string | number; style?: Object; type?: string | undefined; - highlightedBackgroundColor?: BackgroundColorProperty | undefined; - zebraBackgroundColor?: BackgroundColorProperty | undefined; + highlightedBackgroundColor?: Property.BackgroundColor | undefined; + zebraBackgroundColor?: Property.BackgroundColor | undefined; onDoubleClick?: (e: React.MouseEvent) => void; copyText?: string | (() => string); getSearchContent?: () => string; diff --git a/desktop/babel-transformer/package.json b/desktop/babel-transformer/package.json index 9185774ee..cf205008c 100644 --- a/desktop/babel-transformer/package.json +++ b/desktop/babel-transformer/package.json @@ -23,9 +23,9 @@ "@babel/preset-react": "^7.10.4", "@babel/traverse": "^7.11.0", "@babel/types": "^7.11.0", + "@emotion/babel-plugin": "^11.0.0", "@types/fs-extra": "^9.0.1", "@types/node": "^14.14.6", - "babel-plugin-emotion": "^10.0.33", "fs-extra": "^9.0.1", "tslib": "^2" }, diff --git a/desktop/babel-transformer/src/transform.ts b/desktop/babel-transformer/src/transform.ts index bcc1e99a2..3c4c8ab7c 100644 --- a/desktop/babel-transformer/src/transform.ts +++ b/desktop/babel-transformer/src/transform.ts @@ -41,7 +41,7 @@ const objectRestSpreadPlugin = require('@babel/plugin-proposal-object-rest-sprea const flowStripTypesPlugin = require('@babel/plugin-transform-flow-strip-types'); const dynamicRequiresPlugin = require('./dynamic-requires'); const typeScriptPlugin = require('@babel/plugin-transform-typescript'); -const emotionPlugin = require('babel-plugin-emotion'); +const emotionPlugin = require('@emotion/babel-plugin'); const tsTransformPlugins = [ typeScriptPlugin, classPropertiesPlugin, @@ -51,7 +51,7 @@ const tsTransformPlugins = [ // Sourcemap disabled because // https://github.com/electron/electron/issues/17772#issuecomment-570795784 // https://github.com/emotion-js/emotion/issues/1838 - [emotionPlugin, {autoLabel: true, sourceMap: false}], + [emotionPlugin, {autoLabel: 'always', sourceMap: false}], ]; const jsTransformPlugins = [ commonJsPlugin, @@ -61,7 +61,7 @@ const jsTransformPlugins = [ optionalChainingPlugin, coalescingOperatorPlugin, dynamicRequiresPlugin, - [emotionPlugin, {autoLabel: true, sourceMap: false}], + [emotionPlugin, {autoLabel: 'always', sourceMap: false}], ]; export default function transform({ diff --git a/desktop/flipper-plugin/package.json b/desktop/flipper-plugin/package.json index 19a419c1b..19e0b54ba 100644 --- a/desktop/flipper-plugin/package.json +++ b/desktop/flipper-plugin/package.json @@ -9,6 +9,8 @@ "license": "MIT", "bugs": "https://github.com/facebook/flipper/issues", "dependencies": { + "@emotion/css": "^11.0.0", + "@emotion/react": "^11.1.1", "react-element-to-jsx-string": "^14.3.2" }, "devDependencies": { @@ -20,7 +22,6 @@ "@testing-library/dom": "^7.26.3", "@testing-library/react": "^11.1.0", "antd": "^4.8.0", - "emotion": "^10.0.27", "immer": "^7.0.5" }, "scripts": { diff --git a/desktop/flipper-plugin/src/ui/NUX.tsx b/desktop/flipper-plugin/src/ui/NUX.tsx index b6b33fd6b..e35895e38 100644 --- a/desktop/flipper-plugin/src/ui/NUX.tsx +++ b/desktop/flipper-plugin/src/ui/NUX.tsx @@ -10,7 +10,7 @@ import React, {createContext, useCallback, useContext} from 'react'; import {Badge, Tooltip, Typography, Button} from 'antd'; import styled from '@emotion/styled'; -import {keyframes} from 'emotion'; +import {keyframes} from '@emotion/css'; import reactElementToJSXString from 'react-element-to-jsx-string'; import {SandyPluginContext} from '../plugin/PluginContext'; import {createState, useValue} from '../state/atom'; diff --git a/desktop/yarn.lock b/desktop/yarn.lock index e79ff4bae..64a5e5abe 100644 --- a/desktop/yarn.lock +++ b/desktop/yarn.lock @@ -372,7 +372,14 @@ dependencies: "@babel/types" "^7.12.1" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.8.3": +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.7.0": + version "7.12.5" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb" + integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA== + dependencies: + "@babel/types" "^7.12.5" + +"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.8.3": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.1.tgz#1644c01591a15a2f084dd6d092d9430eb1d1216c" integrity sha512-ZeC1TlMSvikvJNy1v/wPIazCu3NdOwgYZLIkmIyAsGhqkNpiDoQQRmaCK8YP4Pq3GPTLPV9WXaPCJKvx06JxKA== @@ -1240,6 +1247,15 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@^7.12.5": + version "7.12.6" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.6.tgz#ae0e55ef1cce1fbc881cd26f8234eb3e657edc96" + integrity sha512-hwyjw6GvjBLiyy3W0YQf0Z5Zf4NpYejUnKFcfcUhZCSffoBBp30w6wP2Wn6pk31jMYZvcOrB/1b7cGXvEoKogA== + dependencies: + "@babel/helper-validator-identifier" "^7.10.4" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@base2/pretty-print-object@1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047" @@ -1282,6 +1298,24 @@ global-agent "^2.0.2" global-tunnel-ng "^2.7.1" +"@emotion/babel-plugin@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.0.0.tgz#e6f40fa81ef52775773a53d50220c597ebc5c2ef" + integrity sha512-w3YP0jlqrNwBBaSI6W+r80fOKF6l9QmsPfLNx5YWSHwrxjVZhM+L50gY7YCVAvlfr1/qdD1vsFN+PDZmLvt42Q== + dependencies: + "@babel/helper-module-imports" "^7.7.0" + "@babel/plugin-syntax-jsx" "^7.12.1" + "@babel/runtime" "^7.7.2" + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/serialize" "^1.0.0" + babel-plugin-macros "^2.6.1" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "^4.0.3" + "@emotion/cache@^10.0.27": version "10.0.29" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0" @@ -1292,10 +1326,21 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/core@^10.0.10", "@emotion/core@^10.0.22": - version "10.0.35" - resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3" - integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw== +"@emotion/cache@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.0.0.tgz#473adcaf9e04c6a0e30fb1421e79a209a96818f8" + integrity sha512-NStfcnLkL5vj3mBILvkR2m/5vFxo3G0QEreYKDGHNHm9IMYoT/t3j6xwjx6lMI/S1LUJfVHQqn0m9wSINttTTQ== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/sheet" "^1.0.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + stylis "^4.0.3" + +"@emotion/core@^10.0.10": + version "10.1.1" + resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3" + integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA== dependencies: "@babel/runtime" "^7.5.5" "@emotion/cache" "^10.0.27" @@ -1313,7 +1358,18 @@ "@emotion/utils" "0.11.3" babel-plugin-emotion "^10.0.27" -"@emotion/hash@0.8.0": +"@emotion/css@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.0.0.tgz#804dcec7e4990019a08e678c1145d34208923acb" + integrity sha512-i7/uzTYcoP0hIW9V4YobD/mYAt6rjNySr9g6CS7JEFsRDfskg4nUczzIehALfacDaHbHaOQYaNDHBGuD/AtW5A== + dependencies: + "@emotion/babel-plugin" "^11.0.0" + "@emotion/cache" "^11.0.0" + "@emotion/serialize" "^1.0.0" + "@emotion/sheet" "^1.0.0" + "@emotion/utils" "^1.0.0" + +"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== @@ -1325,11 +1381,31 @@ dependencies: "@emotion/memoize" "0.7.4" -"@emotion/memoize@0.7.4": +"@emotion/is-prop-valid@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.0.0.tgz#1dbe82e52a12c065d416a702e2d106e552cde5be" + integrity sha512-G5X0t7eR9pkhUvAY32QS3lToP9JyNF8It5CcmMvbWjmC9/Yq7IhevaKqxl+me2BKR93iTPiL/h3En1ZX/1G3PQ== + dependencies: + "@emotion/memoize" "^0.7.4" + +"@emotion/memoize@0.7.4", "@emotion/memoize@^0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== +"@emotion/react@^11.1.1": + version "11.1.1" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.1.tgz#4b304d494af321b0179e6763830e07cf674f0423" + integrity sha512-otA0Np8OnOeU9ChkOS9iuLB6vIxiM+bJiU0id33CsQn3R2Pk9ijVHnxevENIKV/P2S7AhrD8cFbUGysEciWlEA== + dependencies: + "@babel/runtime" "^7.7.2" + "@emotion/cache" "^11.0.0" + "@emotion/serialize" "^1.0.0" + "@emotion/sheet" "^1.0.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + hoist-non-react-statics "^3.3.1" + "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16": version "0.11.16" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad" @@ -1341,11 +1417,27 @@ "@emotion/utils" "0.11.3" csstype "^2.5.7" +"@emotion/serialize@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.0.tgz#1a61f4f037cf39995c97fc80ebe99abc7b191ca9" + integrity sha512-zt1gm4rhdo5Sry8QpCOpopIUIKU+mUSpV9WNmFILUraatm5dttNEaYzUWWSboSMUE6PtN2j1cAsuvcugfdI3mw== + dependencies: + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/unitless" "^0.7.5" + "@emotion/utils" "^1.0.0" + csstype "^3.0.2" + "@emotion/sheet@0.9.4": version "0.9.4" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5" integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA== +"@emotion/sheet@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.0.tgz#a0ef06080f339477ad4ba7f56e1c931f7ba50822" + integrity sha512-cdCHfZtf/0rahPDCZ9zyq+36EqfD/6c0WUqTFZ/hv9xadTUv2lGE5QK7/Z6Dnx2oRxC0usfVM2/BYn9q9B9wZA== + "@emotion/styled-base@^10.0.27": version "10.0.31" resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a" @@ -1356,7 +1448,7 @@ "@emotion/serialize" "^0.11.15" "@emotion/utils" "0.11.3" -"@emotion/styled@^10.0.12", "@emotion/styled@^10.0.23": +"@emotion/styled@^10.0.12": version "10.0.27" resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf" integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q== @@ -1364,12 +1456,23 @@ "@emotion/styled-base" "^10.0.27" babel-plugin-emotion "^10.0.27" +"@emotion/styled@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.0.0.tgz#698196c2822746360a8644a73a5d842b2d1a78a5" + integrity sha512-498laccxJlBiJqrr2r/fx9q+Pr55D0URP2UyOkoSGLjevb8LLAFWueqthsQ5XijE66iGo7y3rzzEYdA7CHmZEQ== + dependencies: + "@babel/runtime" "^7.7.2" + "@emotion/babel-plugin" "^11.0.0" + "@emotion/is-prop-valid" "^1.0.0" + "@emotion/serialize" "^1.0.0" + "@emotion/utils" "^1.0.0" + "@emotion/stylis@0.8.5": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@0.7.5": +"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== @@ -1379,7 +1482,12 @@ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924" integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw== -"@emotion/weak-memoize@0.2.5": +"@emotion/utils@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af" + integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA== + +"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5": version "0.2.5" resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== @@ -3453,7 +3561,7 @@ babel-plugin-dynamic-import-node@^2.3.3: dependencies: object.assign "^4.1.0" -babel-plugin-emotion@^10.0.27, babel-plugin-emotion@^10.0.33: +babel-plugin-emotion@^10.0.27: version "10.0.33" resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03" integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ== @@ -3499,7 +3607,7 @@ babel-plugin-jest-hoist@^26.5.0: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" -babel-plugin-macros@^2.0.0: +babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1: version "2.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138" integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg== @@ -4483,16 +4591,6 @@ crc@^3.4.4: dependencies: buffer "^5.1.0" -create-emotion@^10.0.27: - version "10.0.27" - resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503" - integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg== - dependencies: - "@emotion/cache" "^10.0.27" - "@emotion/serialize" "^0.11.15" - "@emotion/sheet" "0.9.4" - "@emotion/utils" "0.11.3" - cross-env@^7.0.2: version "7.0.2" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9" @@ -4580,7 +4678,12 @@ cssstyle@^2.2.0: dependencies: cssom "~0.3.6" -csstype@^2.5.7, csstype@^2.6.7: +csstype@^2.5.7: + version "2.6.14" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.14.tgz#004822a4050345b55ad4dcc00be1d9cf2f4296de" + integrity sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A== + +csstype@^2.6.7: version "2.6.13" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f" integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A== @@ -5201,14 +5304,6 @@ emotion-theming@^10.0.10: "@emotion/weak-memoize" "0.2.5" hoist-non-react-statics "^3.3.0" -emotion@^10.0.23: - version "10.0.27" - resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e" - integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g== - dependencies: - babel-plugin-emotion "^10.0.27" - create-emotion "^10.0.27" - encodeurl@^1.0.2, encodeurl@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" @@ -5408,6 +5503,11 @@ escape-string-regexp@^2.0.0: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344" integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w== +escape-string-regexp@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" + integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== + escodegen@^1.14.1: version "1.14.3" resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503" @@ -6646,7 +6746,7 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -12215,6 +12315,11 @@ strip-json-comments@~2.0.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= +stylis@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.3.tgz#0d714765f3f694a685550f0c45411ebf90a9bded" + integrity sha512-iAxdFyR9cHKp4H5M2dJlDnvcb/3TvPprzlKjvYVbH7Sh+y8hjY/mUu/ssdcvVz6Z4lKI3vsoS0jAkMYmX7ozfA== + sumchecker@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"