convert to emotion

Summary:
My benchmarks have shown react-emotion to be faster than the current implementation of `styled`. For this reason, I am converting all styling to [emotion](https://emotion.sh).

Benchmark results:
{F136839093}

The syntax is very similar between the two libraries. The main difference is that emotion only allows a single function for the whole style attribute, whereas the old implementation had functions for every style-attirbute.

Before:
```
{
  color: props => props.color,
  fontSize: props => props.size,
}
```

After:
```
props => ({
  color: props.color,
  fontSize: props.size,
})
```

Reviewed By: jknoxville

Differential Revision: D9479893

fbshipit-source-id: 2c39e4618f7e52ceacb67bbec8ae26114025723f

src/ui/components/searchable/FilterToken.js

@@ -13,58 +13,47 @@ import {findDOMNode} from 'react-dom';
 import {colors} from '../colors.js';
 import electron from 'electron';
 
-const Token = Text.extends(
-  {
-    display: 'inline-flex',
-    alignItems: 'center',
-    backgroundColor: props =>
-      props.focused
-        ? colors.macOSHighlightActive
-        : props.color || colors.macOSHighlight,
-    borderRadius: 4,
-    marginRight: 4,
-    padding: 4,
-    paddingLeft: 6,
-    height: 21,
-    color: props => (props.focused ? 'white' : 'inherit'),
-    '&:active': {
-      backgroundColor: colors.macOSHighlightActive,
-      color: colors.white,
-    },
-    '&:first-of-type': {
-      marginLeft: 3,
-    },
+const Token = styled(Text)(props => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  backgroundColor: props.focused
+    ? colors.macOSHighlightActive
+    : props.color || colors.macOSHighlight,
+  borderRadius: 4,
+  marginRight: 4,
+  padding: 4,
+  paddingLeft: 6,
+  height: 21,
+  color: props.focused ? 'white' : 'inherit',
+  '&:active': {
+    backgroundColor: colors.macOSHighlightActive,
+    color: colors.white,
   },
-  {
-    ignoreAttributes: ['focused', 'color'],
+  '&:first-of-type': {
+    marginLeft: 3,
   },
-);
+}));
 
-const Key = Text.extends(
-  {
-    position: 'relative',
-    fontWeight: 500,
-    paddingRight: 12,
-    textTransform: 'capitalize',
-    lineHeight: '21px',
-    '&:after': {
-      content: props => (props.type === 'exclude' ? '"≠"' : '"="'),
-      paddingLeft: 5,
-      position: 'absolute',
-      top: -1,
-      right: 0,
-      fontSize: 14,
-    },
-    '&:active:after': {
-      backgroundColor: colors.macOSHighlightActive,
-    },
+const Key = styled(Text)(props => ({
+  position: 'relative',
+  fontWeight: 500,
+  paddingRight: 12,
+  textTransform: 'capitalize',
+  lineHeight: '21px',
+  '&:after': {
+    content: props.type === 'exclude' ? '"≠"' : '"="',
+    paddingLeft: 5,
+    position: 'absolute',
+    top: -1,
+    right: 0,
+    fontSize: 14,
   },
-  {
-    ignoreAttributes: ['type', 'focused'],
+  '&:active:after': {
+    backgroundColor: colors.macOSHighlightActive,
   },
-);
+}));
 
-const Value = Text.extends({
+const Value = styled(Text)({
   whiteSpace: 'nowrap',
   maxWidth: 160,
   overflow: 'hidden',
@@ -73,29 +62,24 @@ const Value = Text.extends({
   paddingLeft: 3,
 });
 
-const Chevron = styled.view(
-  {
+const Chevron = styled('div')(props => ({
+  border: 0,
+  paddingLeft: 3,
+  paddingRight: 1,
+  marginRight: 0,
+  fontSize: 16,
+  backgroundColor: 'transparent',
+  position: 'relative',
+  top: -2,
+  height: 'auto',
+  lineHeight: 'initial',
+  color: props.focused ? colors.white : 'inherit',
+  '&:hover, &:active, &:focus': {
+    color: 'inherit',
     border: 0,
-    paddingLeft: 3,
-    paddingRight: 1,
-    marginRight: 0,
-    fontSize: 16,
     backgroundColor: 'transparent',
-    position: 'relative',
-    top: -2,
-    height: 'auto',
-    lineHeight: 'initial',
-    color: props => (props.focused ? colors.white : 'inherit'),
-    '&:hover, &:active, &:focus': {
-      color: 'inherit',
-      border: 0,
-      backgroundColor: 'transparent',
-    },
   },
-  {
-    ignoreAttributes: ['focused'],
-  },
-);
+}));
 
 type Props = {|
   filter: Filter,

src/ui/components/searchable/Searchable.js

@@ -16,15 +16,16 @@ import FlexBox from '../FlexBox.js';
 import Glyph from '../Glyph.js';
 import FilterToken from './FilterToken.js';
 import PropTypes from 'prop-types';
+import styled from '../../styled/index.js';
 
 const SEARCHABLE_STORAGE_KEY = (key: string) => `SEARCHABLE_STORAGE_KEY_${key}`;
 
-const SearchBar = Toolbar.extends({
+const SearchBar = styled(Toolbar)({
   height: 42,
   padding: 6,
 });
 
-export const SearchBox = FlexBox.extends({
+export const SearchBox = styled(FlexBox)({
   backgroundColor: colors.white,
   borderRadius: '999em',
   border: `1px solid ${colors.light15}`,
@@ -34,8 +35,8 @@ export const SearchBox = FlexBox.extends({
   paddingLeft: 4,
 });
 
-export const SearchInput = Input.extends({
-  border: props => (props.focus ? '1px solid black' : 0),
+export const SearchInput = styled(Input)(props => ({
+  border: props.focus ? '1px solid black' : 0,
   padding: 0,
   fontSize: '1em',
   flexGrow: 1,
@@ -47,9 +48,9 @@ export const SearchInput = Input.extends({
     color: colors.placeholder,
     fontWeight: 300,
   },
-});
+}));
 
-const Clear = Text.extends({
+const Clear = styled(Text)({
   position: 'absolute',
   right: 6,
   top: '50%',
@@ -68,14 +69,14 @@ const Clear = Text.extends({
   },
 });
 
-export const SearchIcon = Glyph.extends({
+export const SearchIcon = styled(Glyph)({
   marginRight: 3,
   marginLeft: 3,
   marginTop: -1,
   minWidth: 16,
 });
 
-const Actions = FlexRow.extends({
+const Actions = styled(FlexRow)({
   marginLeft: 8,
   flexShrink: 0,
 });