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/table/TableRow.js

@@ -20,81 +20,60 @@ import {colors} from '../colors.js';
 import {normaliseColumnWidth} from './utils.js';
 import {DEFAULT_ROW_HEIGHT} from './types';
 
-const TableBodyRowContainer = FlexRow.extends(
-  {
-    backgroundColor: props => {
-      if (props.highlighted) {
-        if (props.highlightedBackgroundColor) {
-          return props.highlightedBackgroundColor;
-        } else {
-          return colors.macOSTitleBarIconSelected;
-        }
-      } else {
-        if (props.backgroundColor) {
-          return props.backgroundColor;
-        } else if (props.even && props.zebra) {
-          return colors.light02;
-        } else {
-          return 'transparent';
-        }
-      }
-    },
-    boxShadow: props => (props.zebra ? 'none' : 'inset 0 -1px #E9EBEE'),
-    color: props =>
-      props.highlighted ? colors.white : props.color || 'inherit',
-    '& *': {
-      color: props => (props.highlighted ? `${colors.white} !important` : null),
-    },
-    '& img': {
-      backgroundColor: props =>
-        props.highlighted ? `${colors.white} !important` : 'none',
-    },
-    height: props => (props.multiline ? 'auto' : props.rowLineHeight),
-    lineHeight: props =>
-      `${String(props.rowLineHeight || DEFAULT_ROW_HEIGHT)}px`,
-    fontWeight: props => props.fontWeight || 'inherit',
-    overflow: 'hidden',
-    width: '100%',
-    userSelect: 'none',
-    flexShrink: 0,
-    '&:hover': {
-      backgroundColor: props =>
-        !props.highlighted && props.highlightOnHover ? colors.light02 : 'none',
-    },
-  },
-  {
-    ignoreAttributes: [
-      'highlightedBackgroundColor',
-      'highlightOnHover',
-      'backgroundColor',
-      'rowLineHeight',
-      'highlighted',
-      'multiline',
-      'hasHover',
-      'zebra',
-      'even',
-    ],
-  },
-);
+const backgroundColor = props => {
+  if (props.highlighted) {
+    if (props.highlightedBackgroundColor) {
+      return props.highlightedBackgroundColor;
+    } else {
+      return colors.macOSTitleBarIconSelected;
+    }
+  } else {
+    if (props.backgroundColor) {
+      return props.backgroundColor;
+    } else if (props.even && props.zebra) {
+      return colors.light02;
+    } else {
+      return 'transparent';
+    }
+  }
+};
 
-const TableBodyColumnContainer = styled.view(
-  {
-    display: 'flex',
-    flexShrink: props => (props.width === 'flex' ? 1 : 0),
-    overflow: 'hidden',
-    padding: '0 8px',
-    userSelect: 'none',
-    textOverflow: 'ellipsis',
-    verticalAlign: 'top',
-    whiteSpace: props => (props.multiline ? 'normal' : 'nowrap'),
-    wordWrap: props => (props.multiline ? 'break-word' : 'normal'),
-    width: props => (props.width === 'flex' ? '100%' : props.width),
-    maxWidth: '100%',
+const TableBodyRowContainer = styled(FlexRow)(props => ({
+  backgroundColor: backgroundColor(props),
+  boxShadow: props.zebra ? 'none' : 'inset 0 -1px #E9EBEE',
+  color: props.highlighted ? colors.white : props.color || 'inherit',
+  '& *': {
+    color: props.highlighted ? `${colors.white} !important` : null,
   },
-  {
-    ignoreAttributes: ['multiline', 'width'],
+  '& img': {
+    backgroundColor: props.highlighted ? `${colors.white} !important` : 'none',
   },
-);
+  height: props.multiline ? 'auto' : props.rowLineHeight,
+  lineHeight: `${String(props.rowLineHeight || DEFAULT_ROW_HEIGHT)}px`,
+  fontWeight: props.fontWeight || 'inherit',
+  overflow: 'hidden',
+  width: '100%',
+  userSelect: 'none',
+  flexShrink: 0,
+  '&:hover': {
+    backgroundColor:
+      !props.highlighted && props.highlightOnHover ? colors.light02 : 'none',
+  },
+}));
+
+const TableBodyColumnContainer = styled('div')(props => ({
+  display: 'flex',
+  flexShrink: props.width === 'flex' ? 1 : 0,
+  overflow: 'hidden',
+  padding: '0 8px',
+  userSelect: 'none',
+  textOverflow: 'ellipsis',
+  verticalAlign: 'top',
+  whiteSpace: props.multiline ? 'normal' : 'nowrap',
+  wordWrap: props.multiline ? 'break-word' : 'normal',
+  width: props.width === 'flex' ? '100%' : props.width,
+  maxWidth: '100%',
+}));
 
 type Props = {
   columnSizes: TableColumnSizes,