Upgrade to emotion v10

Summary: React 16 is not compatible with react-emotion 9 (it prints warnings, see also https://github.com/emotion-js/emotion/issues/644). So we should upgrade to 10.

Reviewed By: mweststrate

Differential Revision: D18905889

fbshipit-source-id: c00d2dbbadb1c08544632cb9bfcd63f2b1818a25

src/plugins/TableNativePlugin.tsx

@@ -10,7 +10,7 @@
 import ManagedDataInspector from '../ui/components/data-inspector/ManagedDataInspector';
 import Panel from '../ui/components/Panel';
 import {colors} from '../ui/components/colors';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Text from '../ui/components/Text';
 import Toolbar from '../ui/components/Toolbar';
 import Spacer from '../ui/components/Toolbar';
@@ -98,7 +98,7 @@ const NonWrappingText = styled(Text)({
   userSelect: 'none',
 });
 
-const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
+const BooleanValue = styled(NonWrappingText)<{active?: boolean}>(props => ({
   '&::before': {
     content: '""',
     display: 'inline-block',
@@ -111,7 +111,7 @@ const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
   },
 }));
 
-const Label = styled('span')({
+const Label = styled.span({
   fontSize: 12,
   color: '#90949c',
   fontWeight: 'bold',

src/plugins/cpu/index.tsx

@@ -95,7 +95,7 @@ const Columns = {
   },
 };
 
-const Heading = styled('div')({
+const Heading = styled.div({
   fontWeight: 'bold',
   fontSize: 13,
   display: 'block',

src/plugins/crash_reporter/index.js

@@ -79,7 +79,7 @@ type State = {
   crash: ?Crash,
 };
 
-const Padder = styled('div')(
+const Padder = styled.div(
   ({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
     paddingLeft: paddingLeft || 0,
     paddingRight: paddingRight || 0,

src/plugins/databases/index.js

@@ -38,13 +38,13 @@ import dateFormat from 'dateformat';
 
 const PAGE_SIZE = 50;
 
-const BoldSpan = styled('span')({
+const BoldSpan = styled.span({
   fontSize: 12,
   color: '#90949c',
   fontWeight: 'bold',
   textTransform: 'uppercase',
 });
-const ErrorBar = styled('div')({
+const ErrorBar = styled.div({
   backgroundColor: colors.cherry,
   color: colors.white,
   lineHeight: '26px',

src/plugins/fresco/ImagesCacheOverview.tsx

@@ -288,7 +288,7 @@ class ImageGrid extends PureComponent<{
   size: number;
   events: Array<ImageEventWithId>;
 }> {
-  static Content = styled('div')({
+  static Content = styled.div({
     paddingLeft: 15,
   });
 
@@ -348,12 +348,12 @@ class ImageGridHeader extends PureComponent<{
     zIndex: 3,
   });
 
-  static Heading = styled('span')({
+  static Heading = styled.span({
     fontSize: 22,
     fontWeight: 600,
   });
 
-  static Subtitle = styled('span')({
+  static Subtitle = styled.span({
     fontSize: 22,
     fontWeight: 300,
     marginLeft: 15,
@@ -392,7 +392,7 @@ class ImageItem extends PureComponent<{
   size: number;
   numberOfRequests: number;
 }> {
-  static Container = styled(FlexBox)((props: {size: number}) => ({
+  static Container = styled(FlexBox)<{size: number}>(props => ({
     float: 'left',
     alignItems: 'center',
     justifyContent: 'center',
@@ -405,18 +405,18 @@ class ImageItem extends PureComponent<{
     backgroundColor: colors.light02,
   }));
 
-  static Image = styled('img')({
+  static Image = styled.img({
     borderRadius: 4,
     maxHeight: '100%',
     maxWidth: '100%',
     objectFit: 'contain',
   });
 
-  static Loading = styled('span')({
+  static Loading = styled.span({
     padding: '0 0',
   });
 
-  static SelectedHighlight = styled('div')((props: {selected: boolean}) => ({
+  static SelectedHighlight = styled.div<{selected: boolean}>(props => ({
     borderColor: colors.highlight,
     borderStyle: 'solid',
     borderWidth: props.selected ? 3 : 0,
@@ -429,8 +429,8 @@ class ImageItem extends PureComponent<{
     top: 0,
   }));
 
-  static HoverOverlay = styled(FlexColumn)(
-    (props: {selected: boolean; size: number}) => ({
+  static HoverOverlay = styled(FlexColumn)<{selected: boolean; size: number}>(
+    props => ({
       alignItems: 'center',
       backgroundColor: colors.whiteAlpha80,
       bottom: props.selected ? 4 : 0,
@@ -449,16 +449,16 @@ class ImageItem extends PureComponent<{
     }),
   );
 
-  static MemoryLabel = styled('span')({
+  static MemoryLabel = styled.span({
     fontWeight: 600,
     marginBottom: 6,
   });
 
-  static SizeLabel = styled('span')({
+  static SizeLabel = styled.span({
     fontWeight: 300,
   });
 
-  static Events = styled('div')({
+  static Events = styled.div({
     position: 'absolute',
     top: -5,
     right: -5,

src/plugins/fresco/ImagesSidebar.tsx

@@ -29,7 +29,7 @@ type ImagesSidebarProps = {
 
 type ImagesSidebarState = {};
 
-const DataDescriptionKey = styled('span')({
+const DataDescriptionKey = styled.span({
   color: colors.grapeDark1,
 });
 

src/plugins/fresco/MultipleSelect.tsx

@@ -15,7 +15,7 @@ const Container = styled(Block)({
   marginLeft: '10px',
 });
 
-const List = styled(FlexColumn)((props: {visibleList: boolean}) => ({
+const List = styled(FlexColumn)<{visibleList: boolean}>(props => ({
   display: props.visibleList ? 'flex' : 'none',
   position: 'absolute',
   top: '32px',
@@ -30,7 +30,7 @@ const List = styled(FlexColumn)((props: {visibleList: boolean}) => ({
   borderRadius: 4,
 }));
 
-const ListItem = styled('label')({
+const ListItem = styled.label({
   cursor: 'pointer',
   display: 'flex',
   alignItems: 'center',
@@ -43,7 +43,7 @@ const ListItem = styled('label')({
   },
 });
 
-const Checkbox = styled('input')({
+const Checkbox = styled.input({
   display: 'inline-block',
   marginRight: 5,
   verticalAlign: 'middle',

src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap

@@ -2,31 +2,31 @@
 
 exports[`notifications for leaks 1`] = `
 <React.Fragment>
-  <Styled(div)>
+  <ForwardRef(render)>
     CloseableReference leaked for
      
-    <Text
+    <ForwardRef(render)
       code={true}
     >
       com.facebook.imagepipeline.memory.NativeMemoryChunk
-    </Text>
+    </ForwardRef(render)>
     (identity hashcode: 
     deadbeef
     ).
-  </Styled(div)>
-  <Styled(div)>
-    <Text
+  </ForwardRef(render)>
+  <ForwardRef(render)>
+    <ForwardRef(render)
       bold={true}
     >
       Stacktrace:
-    </Text>
-  </Styled(div)>
-  <Styled(div)>
-    <Text
+    </ForwardRef(render)>
+  </ForwardRef(render)>
+  <ForwardRef(render)>
+    <ForwardRef(render)
       code={true}
     >
       &lt;unavailable&gt;
-    </Text>
-  </Styled(div)>
+    </ForwardRef(render)>
+  </ForwardRef(render)>
 </React.Fragment>
 `;

src/plugins/layout/ToolbarIcon.tsx

@@ -17,7 +17,7 @@ type Props = {
   onClick: () => void;
 };
 
-const ToolbarIcon = styled('div')({
+const ToolbarIcon = styled.div({
   marginRight: 9,
   marginTop: -3,
   marginLeft: 4,

src/plugins/logs/index.tsx

@@ -229,24 +229,22 @@ const HiddenScrollText = styled(Text)({
   },
 });
 
-const LogCount = styled('div')(
-  ({backgroundColor}: {backgroundColor: string}) => ({
-    backgroundColor,
-    borderRadius: '999em',
-    fontSize: 11,
-    marginTop: 4,
-    minWidth: 16,
-    height: 16,
-    color: colors.white,
-    textAlign: 'center',
-    lineHeight: '16px',
-    paddingLeft: 4,
-    paddingRight: 4,
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  }),
-);
+const LogCount = styled.div<{backgroundColor: string}>(({backgroundColor}) => ({
+  backgroundColor,
+  borderRadius: '999em',
+  fontSize: 11,
+  marginTop: 4,
+  minWidth: 16,
+  height: 16,
+  color: colors.white,
+  textAlign: 'center',
+  lineHeight: '16px',
+  paddingLeft: 4,
+  paddingRight: 4,
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+}));
 
 function pad(chunk: any, len: number): string {
   let str = String(chunk);

src/plugins/navigation/components/AutoCompleteSheet.tsx

@@ -22,7 +22,7 @@ type Props = {
 
 const MAX_ITEMS = 5;
 
-const AutoCompleteSheetContainer = styled('div')({
+const AutoCompleteSheetContainer = styled.div({
   width: '100%',
   position: 'absolute',
   top: 'calc(100% - 3px)',
@@ -33,7 +33,7 @@ const AutoCompleteSheetContainer = styled('div')({
   boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
 });
 
-const SheetItem = styled('div')({
+const SheetItem = styled.div({
   padding: 5,
   textOverflow: 'ellipsis',
   overflowX: 'hidden',
@@ -46,7 +46,7 @@ const SheetItem = styled('div')({
   },
 });
 
-const SheetItemIcon = styled('span')({
+const SheetItemIcon = styled.span({
   padding: 8,
 });
 

src/plugins/navigation/components/BookmarksSidebar.tsx

@@ -32,7 +32,7 @@ const NoData = styled(FlexCenter)({
   color: colors.macOSTitleBarIcon,
 });
 
-const BookmarksList = styled('div')({
+const BookmarksList = styled.div({
   overflowY: 'scroll',
   overflowX: 'hidden',
   height: '100%',

src/plugins/navigation/components/FavoriteButton.tsx

@@ -17,7 +17,7 @@ type Props = {
   size: IconSize;
 };
 
-const FavoriteButtonContainer = styled('div')({
+const FavoriteButtonContainer = styled.div({
   position: 'relative',
   '>:first-child': {
     position: 'absolute',

src/plugins/navigation/components/IconButton.tsx

@@ -27,7 +27,7 @@ type Props = {
   size: IconSize;
 };
 
-const RippleEffect = styled('div')({
+const RippleEffect = styled.div({
   padding: 5,
   borderRadius: 100,
   backgroundPosition: 'center',
@@ -43,7 +43,7 @@ const RippleEffect = styled('div')({
   },
 });
 
-const IconButton = styled('div')({
+const IconButton = styled.div({
   ':active': {
     animation: `${shrinkAnimation} .25s ease forwards`,
   },

src/plugins/navigation/components/NavigationInfoBox.tsx

@@ -32,7 +32,7 @@ type Props = {
   date: Date | null;
 };
 
-const ScreenshotContainer = styled('div')({
+const ScreenshotContainer = styled.div({
   width: 200,
   minWidth: 200,
   overflow: 'hidden',
@@ -45,19 +45,19 @@ const ScreenshotContainer = styled('div')({
   },
 });
 
-const NoData = styled('div')({
+const NoData = styled.div({
   color: colors.light30,
   fontSize: 14,
   position: 'relative',
 });
 
-const NavigationDataContainer = styled('div')({
+const NavigationDataContainer = styled.div({
   alignItems: 'flex-start',
   flexGrow: 1,
   position: 'relative',
 });
 
-const Footer = styled('div')({
+const Footer = styled.div({
   width: '100%',
   padding: '10px',
   borderTop: `1px ${colors.blueGreyTint90} solid`,
@@ -65,16 +65,16 @@ const Footer = styled('div')({
   alignItems: 'center',
 });
 
-const Seperator = styled('div')({
+const Seperator = styled.div({
   flexGrow: 1,
 });
 
-const TimeContainer = styled('div')({
+const TimeContainer = styled.div({
   color: colors.light30,
   fontSize: 14,
 });
 
-const NavigationInfoBoxContainer = styled('div')({
+const NavigationInfoBoxContainer = styled.div({
   display: 'flex',
   height: BOX_HEIGHT,
   borderRadius: 10,
@@ -85,7 +85,7 @@ const NavigationInfoBoxContainer = styled('div')({
   boxShadow: '1px 1px 5px rgba(0,0,0,0.1)',
 });
 
-const Header = styled('div')({
+const Header = styled.div({
   fontSize: 18,
   fontWeight: 500,
   userSelect: 'text',
@@ -95,11 +95,11 @@ const Header = styled('div')({
   display: 'flex',
 });
 
-const ClassNameContainer = styled('div')({
+const ClassNameContainer = styled.div({
   color: colors.light30,
 });
 
-const ParametersContainer = styled('div')({
+const ParametersContainer = styled.div({
   height: 150,
   '&>*': {
     height: 150,
@@ -112,7 +112,7 @@ const NoParamters = styled(FlexCenter)({
   color: colors.light10,
 });
 
-const TimelineCircle = styled('div')({
+const TimelineCircle = styled.div({
   width: 18,
   height: 18,
   top: 11,
@@ -123,7 +123,7 @@ const TimelineCircle = styled('div')({
   position: 'absolute',
 });
 
-const TimelineMiniCircle = styled('div')({
+const TimelineMiniCircle = styled.div({
   width: 12,
   height: 12,
   top: 1,

src/plugins/navigation/components/RequiredParametersDialog.tsx

@@ -33,23 +33,23 @@ const Container = styled(FlexColumn)({
   width: 600,
 });
 
-const Title = styled('span')({
+const Title = styled.span({
   display: 'flex',
   marginTop: 8,
   marginLeft: 2,
   marginBottom: 8,
 });
 
-const Text = styled('span')({
+const Text = styled.span({
   lineHeight: 1.3,
 });
 
-const ErrorLabel = styled('span')({
+const ErrorLabel = styled.span({
   color: colors.yellow,
   lineHeight: 1.4,
 });
 
-const URIContainer = styled('div')({
+const URIContainer = styled.div({
   lineHeight: 1.3,
   marginLeft: 2,
   marginBottom: 8,
@@ -57,7 +57,7 @@ const URIContainer = styled('div')({
   overflowWrap: 'break-word',
 });
 
-const ButtonContainer = styled('div')({
+const ButtonContainer = styled.div({
   marginLeft: 'auto',
 });
 
@@ -68,7 +68,7 @@ const RequiredParameterInput = styled(Input)({
   width: '100%',
 });
 
-const WarningIconContainer = styled('span')({
+const WarningIconContainer = styled.span({
   marginRight: 8,
 });
 

src/plugins/navigation/components/SaveBookmarkDialog.tsx

@@ -25,20 +25,20 @@ const Container = styled(FlexColumn)({
   width: 400,
 });
 
-const Title = styled('div')({
+const Title = styled.div({
   fontWeight: 500,
   marginTop: 8,
   marginLeft: 2,
   marginBottom: 8,
 });
 
-const URIContainer = styled('div')({
+const URIContainer = styled.div({
   marginLeft: 2,
   marginBottom: 8,
   overflowWrap: 'break-word',
 });
 
-const ButtonContainer = styled('div')({
+const ButtonContainer = styled.div({
   marginLeft: 'auto',
 });
 

src/plugins/navigation/components/SearchBar.tsx

@@ -28,7 +28,7 @@ type State = {
   prevURIFromAbove: URI;
 };
 
-const IconContainer = styled('div')({
+const IconContainer = styled.div({
   display: 'inline-flex',
   height: '16px',
   alignItems: 'center',
@@ -44,13 +44,13 @@ const IconContainer = styled('div')({
   },
 });
 
-const ToolbarContainer = styled('div')({
+const ToolbarContainer = styled.div({
   '.drop-shadow': {
     boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
   },
 });
 
-const SearchInputContainer = styled('div')({
+const SearchInputContainer = styled.div({
   width: '100%',
   marginLeft: 5,
   marginRight: 9,

src/plugins/navigation/components/Timeline.tsx

@@ -19,7 +19,7 @@ type Props = {
   onFavorite: (uri: URI) => void;
 };
 
-const TimelineLine = styled('div')({
+const TimelineLine = styled.div({
   width: 2,
   backgroundColor: colors.highlight,
   position: 'absolute',
@@ -27,7 +27,7 @@ const TimelineLine = styled('div')({
   bottom: 0,
 });
 
-const TimelineContainer = styled('div')({
+const TimelineContainer = styled.div({
   position: 'relative',
   paddingLeft: 25,
   overflowY: 'scroll',
@@ -43,7 +43,7 @@ const TimelineContainer = styled('div')({
   },
 });
 
-const NavigationEventContainer = styled('div')({
+const NavigationEventContainer = styled.div({
   display: 'flex',
   paddingTop: 25,
   paddingLeft: 25,
@@ -63,7 +63,7 @@ export default (props: Props) => {
   return events.length === 0 ? (
     <NoData>No Navigation Events to Show</NoData>
   ) : (
-    <TimelineContainer innerRef={timelineRef}>
+    <TimelineContainer ref={timelineRef}>
       <div>
         <TimelineLine />
         {events.map((event: NavigationEvent, idx: number) => {

src/plugins/network/RequestDetails.tsx

@@ -295,7 +295,7 @@ class HeaderInspector extends Component<
   }
 }
 
-const BodyContainer = styled('div')({
+const BodyContainer = styled.div({
   paddingTop: 10,
   paddingBottom: 20,
 });
@@ -382,7 +382,7 @@ type ImageWithSizeState = {
 };
 
 class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
-  static Image = styled('img')({
+  static Image = styled.img({
     objectFit: 'scale-down',
     maxWidth: '100%',
     marginBottom: 10,
@@ -435,7 +435,7 @@ class ImageFormatter {
 }
 
 class VideoFormatter {
-  static Video = styled('video')({
+  static Video = styled.video({
     maxWidth: 500,
     maxHeight: 500,
   });

src/plugins/reactdevtools/index.tsx

@@ -14,7 +14,7 @@ import React from 'react';
 import getPort from 'get-port';
 import address from 'address';
 
-const Container = styled('div')({
+const Container = styled.div({
   display: 'flex',
   flex: '1 1 0%',
   justifyContent: 'center',

src/plugins/sandbox/index.tsx

@@ -45,7 +45,7 @@ export default class SandboxView extends FlipperPlugin<
     showFeedback: false,
   };
 
-  static TextInput = styled('input')({
+  static TextInput = styled.input({
     border: `1px solid ${colors.light10}`,
     fontSize: '1em',
     padding: '0 5px',
@@ -55,7 +55,7 @@ export default class SandboxView extends FlipperPlugin<
     flexGrow: 1,
   });
 
-  static FeedbackMessage = styled('span')({
+  static FeedbackMessage = styled.span({
     fontSize: '1.2em',
     paddingTop: '10px',
     color: 'green',

src/plugins/seamammals/index.tsx

@@ -105,7 +105,7 @@ class Card extends React.Component<
     selected: boolean;
   } & Row
 > {
-  static Container = styled(FlexColumn)((props: {selected?: boolean}) => ({
+  static Container = styled(FlexColumn)<{selected?: boolean}>(props => ({
     margin: 10,
     borderRadius: 5,
     border: '2px solid black',
@@ -120,7 +120,7 @@ class Card extends React.Component<
     cursor: 'pointer',
   }));
 
-  static Image = styled('div')({
+  static Image = styled.div({
     backgroundSize: 'cover',
     width: '100%',
     paddingTop: '100%',

src/plugins/sections/EventsTable.js

@@ -73,7 +73,7 @@ const Row = styled(FlexRow)(props => ({
   },
 }));
 
-const Label = styled('div')({
+const Label = styled.div({
   width: LABEL_WIDTH,
   paddingLeft: 10,
   paddingRight: 10,
@@ -88,7 +88,7 @@ const Label = styled('div')({
   zIndex: 2,
 });
 
-const Content = styled('div')({
+const Content = styled.div({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   fontSize: 11,
@@ -98,7 +98,7 @@ const Content = styled('div')({
   color: colors.light50,
 });
 
-const Record = styled('div')(({highlighted}) => ({
+const Record = styled.div(({highlighted}) => ({
   border: `1px solid ${colors.light15}`,
   boxShadow: highlighted
     ? `inset 0 0 0 2px ${colors.macOSTitleBarIconSelected}`
@@ -116,7 +116,7 @@ const Record = styled('div')(({highlighted}) => ({
   alignItems: 'center',
 }));
 
-const Empty = styled('div')({
+const Empty = styled.div({
   width: WIDTH,
   padding: '10px 5px',
   marginRight: PADDING,

src/plugins/sections/Tree.js

@@ -13,7 +13,7 @@ import {Glyph, PureComponent, styled, Toolbar, Spacer, colors} from 'flipper';
 import {Tree} from 'react-d3-tree';
 import {Fragment} from 'react';
 
-const Legend = styled('div')(props => ({
+const Legend = styled.div(props => ({
   color: colors.dark50,
   marginLeft: 20,
   '&::before': {
@@ -29,7 +29,7 @@ const Legend = styled('div')(props => ({
   },
 }));
 
-const Label = styled('div')({
+const Label = styled.div({
   position: 'relative',
   top: -7,
   left: 7,
@@ -43,7 +43,7 @@ const Label = styled('div')({
   display: 'inline-block',
 });
 
-const Container = styled('div')({
+const Container = styled.div({
   width: '100%',
   height: '100%',
   overflow: 'hidden',
@@ -53,11 +53,11 @@ const Container = styled('div')({
     '10px 10px,10px 10px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px',
 });
 
-const LabelContainer = styled('div')({
+const LabelContainer = styled.div({
   display: 'flex',
 });
 
-const IconButton = styled('div')({
+const IconButton = styled.div({
   position: 'relative',
   left: 5,
   top: -8,

src/plugins/sections/index.js

@@ -45,14 +45,14 @@ const Waiting = styled(FlexBox)(props => ({
   textAlign: 'center',
 }));
 
-const InfoText = styled('div')(props => ({
+const InfoText = styled.div(props => ({
   marginTop: 10,
   marginBottom: 10,
   fontWeight: '500',
   color: colors.light30,
 }));
 
-const InfoBox = styled('div')(props => ({
+const InfoBox = styled.div(props => ({
   maxWidth: 400,
   margin: 'auto',
   textAlign: 'center',