diff --git a/flow-typed/npm/react-emotion_vx.x.x.js b/flow-typed/npm/react-emotion_vx.x.x.js
new file mode 100644
index 000000000..4b7b91f57
--- /dev/null
+++ b/flow-typed/npm/react-emotion_vx.x.x.js
@@ -0,0 +1,60 @@
+// flow-typed signature: 69f0585b3bbc433c0c0eb3d242636c6d
+// flow-typed version: <<STUB>>/react-emotion_v9.2.6/flow_v0.76.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-emotion'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-emotion' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-emotion/dist/emotion.umd.min' {
+  declare module.exports: any;
+}
+
+declare module 'react-emotion/dist/index.cjs' {
+  declare module.exports: any;
+}
+
+declare module 'react-emotion/dist/index.esm' {
+  declare module.exports: any;
+}
+
+declare module 'react-emotion/macro' {
+  declare module.exports: any;
+}
+
+declare module 'react-emotion/src/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-emotion/dist/emotion.umd.min.js' {
+  declare module.exports: $Exports<'react-emotion/dist/emotion.umd.min'>;
+}
+declare module 'react-emotion/dist/index.cjs.js' {
+  declare module.exports: $Exports<'react-emotion/dist/index.cjs'>;
+}
+declare module 'react-emotion/dist/index.esm.js' {
+  declare module.exports: $Exports<'react-emotion/dist/index.esm'>;
+}
+declare module 'react-emotion/macro.js' {
+  declare module.exports: $Exports<'react-emotion/macro'>;
+}
+declare module 'react-emotion/src/index.js' {
+  declare module.exports: $Exports<'react-emotion/src/index'>;
+}
diff --git a/src/PluginContainer.js b/src/PluginContainer.js
index 969d10c17..ddc799917 100644
--- a/src/PluginContainer.js
+++ b/src/PluginContainer.js
@@ -10,7 +10,14 @@ import type Client from './Client.js';
 import type BaseDevice from './devices/BaseDevice.js';
 
 import {SonarDevicePlugin} from './plugin.js';
-import {ErrorBoundary, Component, FlexColumn, FlexRow, colors} from 'sonar';
+import {
+  ErrorBoundary,
+  Component,
+  FlexColumn,
+  FlexRow,
+  colors,
+  styled,
+} from 'sonar';
 import React from 'react';
 import {connect} from 'react-redux';
 import {setPluginState} from './reducers/pluginStates.js';
@@ -18,14 +25,14 @@ import {devicePlugins} from './device-plugins/index.js';
 import plugins from './plugins/index.js';
 import {activateMenuItems} from './MenuBar.js';
 
-const Container = FlexColumn.extends({
+const Container = styled(FlexColumn)({
   width: 0,
   flexGrow: 1,
   flexShrink: 1,
   backgroundColor: colors.white,
 });
 
-const SidebarContainer = FlexRow.extends({
+const SidebarContainer = styled(FlexRow)({
   backgroundColor: colors.light02,
   height: '100%',
   overflow: 'scroll',
diff --git a/src/chrome/AutoUpdateVersion.js b/src/chrome/AutoUpdateVersion.js
index cf32d1f49..52a8e88cb 100644
--- a/src/chrome/AutoUpdateVersion.js
+++ b/src/chrome/AutoUpdateVersion.js
@@ -5,19 +5,27 @@
  * @format
  */
 
-import {FlexRow, Text, colors, LoadingIndicator, Glyph, Component} from 'sonar';
+import {
+  FlexRow,
+  Text,
+  colors,
+  LoadingIndicator,
+  Glyph,
+  Component,
+  styled,
+} from 'sonar';
 import {remote} from 'electron';
 import isProduction from '../utils/isProduction.js';
 import config from '../fb-stubs/config.js';
 const version = remote.app.getVersion();
 
-const VersionText = Text.extends({
+const VersionText = styled(Text)({
   color: colors.light50,
   marginLeft: 4,
   marginTop: 2,
 });
 
-const Container = FlexRow.extends({
+const Container = styled(FlexRow)({
   alignItems: 'center',
 });
 
diff --git a/src/chrome/BugReporterDialog.js b/src/chrome/BugReporterDialog.js
index 37c9ba030..8b8417c5d 100644
--- a/src/chrome/BugReporterDialog.js
+++ b/src/chrome/BugReporterDialog.js
@@ -20,7 +20,7 @@ import {
   styled,
 } from 'sonar';
 
-const Container = FlexColumn.extends({
+const Container = styled(FlexColumn)({
   padding: 10,
 });
 
@@ -29,7 +29,7 @@ const textareaStyle = {
   marginBottom: 10,
 };
 
-const DialogContainer = styled.view({
+const DialogContainer = styled('div')({
   width: 400,
   height: 300,
   position: 'absolute',
@@ -45,25 +45,25 @@ const DialogContainer = styled.view({
   boxShadow: '0 1px 10px rgba(0, 0, 0, 0.1)',
 });
 
-const TitleInput = Input.extends({
+const TitleInput = styled(Input)({
   ...textareaStyle,
   height: 30,
 });
 
-const DescriptionTextarea = Textarea.extends({
+const DescriptionTextarea = styled(Textarea)({
   ...textareaStyle,
   flexGrow: 1,
 });
 
-const SubmitButtonContainer = styled.view({
+const SubmitButtonContainer = styled('div')({
   marginLeft: 'auto',
 });
 
-const Footer = FlexRow.extends({
+const Footer = styled(FlexRow)({
   lineHeight: '24px',
 });
 
-const CloseDoneButton = Button.extends({
+const CloseDoneButton = styled(Button)({
   width: 50,
   margin: '10px auto',
 });
diff --git a/src/chrome/DevicesList.js b/src/chrome/DevicesList.js
index 388ab385b..2377e3adc 100644
--- a/src/chrome/DevicesList.js
+++ b/src/chrome/DevicesList.js
@@ -16,7 +16,7 @@ import {
   colors,
 } from 'sonar';
 
-const Heading = Text.extends({
+const Heading = styled(Text)({
   display: 'block',
   backgroundColor: colors.white,
   color: colors.light30,
@@ -26,7 +26,7 @@ const Heading = Text.extends({
   padding: '4px 8px 0',
 });
 
-const PopoverItem = FlexRow.extends({
+const PopoverItem = styled(FlexRow)({
   alignItems: 'center',
   borderBottom: `1px solid ${colors.light05}`,
   height: 50,
@@ -35,7 +35,7 @@ const PopoverItem = FlexRow.extends({
   },
 });
 
-const ItemTitle = Text.extends({
+const ItemTitle = styled(Text)({
   display: 'block',
   fontSize: 14,
   fontWeight: 400,
@@ -46,7 +46,7 @@ const ItemTitle = Text.extends({
   marginBottom: 1,
 });
 
-const ItemSubtitle = Text.extends({
+const ItemSubtitle = styled(Text)({
   display: 'block',
   fontWeight: 400,
   fontSize: 11,
@@ -57,20 +57,20 @@ const ItemSubtitle = Text.extends({
   whiteSpace: 'nowrap',
 });
 
-const ItemImage = FlexBox.extends({
+const ItemImage = styled(FlexBox)({
   alignItems: 'center',
   justifyContent: 'center',
   width: 40,
   flexShrink: 0,
 });
 
-const ItemContent = styled.view({
+const ItemContent = styled('div')({
   minWidth: 0,
   paddingRight: 5,
   flexGrow: 1,
 });
 
-const Section = styled.view({
+const Section = styled('div')({
   maxWidth: 260,
   borderBottom: `1px solid ${colors.light05}`,
   '&:last-child': {
@@ -78,7 +78,7 @@ const Section = styled.view({
   },
 });
 
-const Action = Button.extends({
+const Action = styled(Button)({
   border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
   background: 'transparent',
   color: colors.macOSTitleBarIconSelected,
diff --git a/src/chrome/ErrorBar.js b/src/chrome/ErrorBar.js
index 9bfcfd4e1..88f043657 100644
--- a/src/chrome/ErrorBar.js
+++ b/src/chrome/ErrorBar.js
@@ -7,7 +7,7 @@
 
 import {styled, colors} from 'sonar';
 
-const ErrorBarContainer = styled.view({
+const ErrorBarContainer = styled('div')({
   backgroundColor: colors.cherry,
   bottom: 0,
   color: '#fff',
diff --git a/src/chrome/MainSidebar.js b/src/chrome/MainSidebar.js
index 91cd6c6c8..229b54a79 100644
--- a/src/chrome/MainSidebar.js
+++ b/src/chrome/MainSidebar.js
@@ -17,11 +17,11 @@ import {
   Component,
   Sidebar,
   FlexBox,
-  ClickableListItem,
   colors,
   brandColors,
   Text,
   Glyph,
+  styled,
 } from 'sonar';
 import React from 'react';
 import {devicePlugins} from '../device-plugins/index.js';
@@ -29,15 +29,22 @@ import plugins from '../plugins/index.js';
 import {selectPlugin} from '../reducers/connections.js';
 import {connect} from 'react-redux';
 
-const CustomClickableListItem = ClickableListItem.extends({
+const ListItem = styled('div')(({active}) => ({
   paddingLeft: 10,
   display: 'flex',
   alignItems: 'center',
   marginBottom: 2,
   flexShrink: 0,
-});
+  backgroundColor: active ? colors.macOSTitleBarIconSelected : 'none',
+  color: active ? colors.white : colors.macOSSidebarSectionItem,
+  lineHeight: '25px',
+  padding: '0 10px',
+  '&[disabled]': {
+    color: 'rgba(0, 0, 0, 0.5)',
+  },
+}));
 
-const SidebarHeader = FlexBox.extends({
+const SidebarHeader = styled(FlexBox)({
   display: 'block',
   alignItems: 'center',
   padding: 3,
@@ -51,23 +58,18 @@ const SidebarHeader = FlexBox.extends({
   flexShrink: 0,
 });
 
-const PluginShape = FlexBox.extends(
-  {
-    marginRight: 5,
-    backgroundColor: props => props.backgroundColor,
-    borderRadius: 3,
-    flexShrink: 0,
-    width: 18,
-    height: 18,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  {
-    ignoreAttributes: ['backgroundColor'],
-  },
-);
+const PluginShape = styled(FlexBox)(({backgroundColor}) => ({
+  marginRight: 5,
+  backgroundColor,
+  borderRadius: 3,
+  flexShrink: 0,
+  width: 18,
+  height: 18,
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
 
-const PluginName = Text.extends({
+const PluginName = styled(Text)({
   minWidth: 0,
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
@@ -75,17 +77,19 @@ const PluginName = Text.extends({
 });
 
 function PluginIcon({
+  isActive,
   backgroundColor,
   name,
   color,
 }: {
+  isActive: boolean,
   backgroundColor: string,
   name: string,
   color: string,
 }) {
   return (
     <PluginShape backgroundColor={backgroundColor}>
-      <Glyph size={12} name={name} color={color} />
+      <Glyph size={12} name={name} color={isActive ? colors.white : color} />
     </PluginShape>
   );
 }
@@ -118,14 +122,15 @@ class PluginSidebarListItem extends Component<{
     }
 
     return (
-      <CustomClickableListItem active={isActive} onClick={this.props.onClick}>
+      <ListItem active={isActive} onClick={this.props.onClick}>
         <PluginIcon
+          isActive={isActive}
           name={plugin.icon}
           backgroundColor={iconColor}
           color={colors.white}
         />
         <PluginName>{plugin.title}</PluginName>
-      </CustomClickableListItem>
+      </ListItem>
     );
   }
 }
diff --git a/src/chrome/PluginManager.js b/src/chrome/PluginManager.js
index d4cc6c23e..28ef2becb 100644
--- a/src/chrome/PluginManager.js
+++ b/src/chrome/PluginManager.js
@@ -63,18 +63,18 @@ type State = {
   searchCompleted: boolean,
 };
 
-const Container = FlexBox.extends({
+const Container = styled(FlexBox)({
   width: '100%',
   flexGrow: 1,
   background: colors.light02,
   overflowY: 'scroll',
 });
 
-const Title = Text.extends({
+const Title = styled(Text)({
   fontWeight: 500,
 });
 
-const Plugin = FlexColumn.extends({
+const Plugin = styled(FlexColumn)({
   backgroundColor: colors.white,
   borderRadius: 4,
   padding: 15,
@@ -82,20 +82,20 @@ const Plugin = FlexColumn.extends({
   boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
 });
 
-const SectionTitle = styled.text({
+const SectionTitle = styled('span')({
   fontWeight: 'bold',
   fontSize: 24,
   margin: 15,
   marginLeft: 20,
 });
 
-const Loading = FlexBox.extends({
+const Loading = styled(FlexBox)({
   padding: 50,
   alignItems: 'center',
   justifyContent: 'center',
 });
 
-const RestartRequired = FlexBox.extends({
+const RestartRequired = styled(FlexBox)({
   textAlign: 'center',
   justifyContent: 'center',
   fontWeight: 500,
@@ -105,22 +105,22 @@ const RestartRequired = FlexBox.extends({
   cursor: 'pointer',
 });
 
-const TitleRow = FlexRow.extends({
+const TitleRow = styled(FlexRow)({
   alignItems: 'center',
   marginBottom: 10,
   fontSize: '1.1em',
 });
 
-const Description = FlexRow.extends({
+const Description = styled(FlexRow)({
   marginBottom: 15,
   lineHeight: '130%',
 });
 
-const PluginGlyph = Glyph.extends({
+const PluginGlyph = styled(Glyph)({
   marginRight: 5,
 });
 
-const PluginLoading = LoadingIndicator.extends({
+const PluginLoading = styled(LoadingIndicator)({
   marginLeft: 5,
   marginTop: 5,
 });
diff --git a/src/chrome/Popover.js b/src/chrome/Popover.js
index 32d0d5ccd..3d2808456 100644
--- a/src/chrome/Popover.js
+++ b/src/chrome/Popover.js
@@ -16,7 +16,7 @@ import {
   colors,
 } from 'sonar';
 
-const Anchor = styled.image({
+const Anchor = styled('img')({
   zIndex: 6,
   position: 'absolute',
   bottom: 0,
@@ -24,7 +24,7 @@ const Anchor = styled.image({
   transform: 'translate(-50%, calc(100% + 2px))',
 });
 
-const PopoverContainer = FlexColumn.extends({
+const PopoverContainer = styled(FlexColumn)({
   backgroundColor: colors.white,
   borderRadius: 7,
   border: '1px solid rgba(0,0,0,0.3)',
@@ -50,7 +50,7 @@ const PopoverContainer = FlexColumn.extends({
   },
 });
 
-const Heading = Text.extends({
+const Heading = styled(Text)({
   display: 'block',
   backgroundColor: colors.white,
   color: colors.light30,
@@ -60,7 +60,7 @@ const Heading = Text.extends({
   padding: '4px 8px 0',
 });
 
-const PopoverItem = FlexRow.extends({
+const PopoverItem = styled(FlexRow)({
   alignItems: 'center',
   borderBottom: `1px solid ${colors.light05}`,
   height: 50,
@@ -69,7 +69,7 @@ const PopoverItem = FlexRow.extends({
   },
 });
 
-const ItemTitle = Text.extends({
+const ItemTitle = styled(Text)({
   display: 'block',
   fontSize: 14,
   fontWeight: 400,
@@ -80,7 +80,7 @@ const ItemTitle = Text.extends({
   marginBottom: 1,
 });
 
-const ItemSubtitle = Text.extends({
+const ItemSubtitle = styled(Text)({
   display: 'block',
   fontWeight: 400,
   fontSize: 11,
@@ -91,27 +91,27 @@ const ItemSubtitle = Text.extends({
   whiteSpace: 'nowrap',
 });
 
-const ItemImage = FlexBox.extends({
+const ItemImage = styled(FlexBox)({
   alignItems: 'center',
   justifyContent: 'center',
   width: 40,
   flexShrink: 0,
 });
 
-const ItemContent = styled.view({
+const ItemContent = styled('div')({
   minWidth: 0,
   paddingRight: 5,
   flexGrow: 1,
 });
 
-const Section = styled.view({
+const Section = styled('div')({
   borderBottom: `1px solid ${colors.light05}`,
   '&:last-child': {
     borderBottom: 'none',
   },
 });
 
-const Action = Button.extends({
+const Action = styled(Button)({
   border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
   background: 'transparent',
   color: colors.macOSTitleBarIconSelected,
diff --git a/src/chrome/SonarTitleBar.js b/src/chrome/SonarTitleBar.js
index 5cd006307..befb02e2c 100644
--- a/src/chrome/SonarTitleBar.js
+++ b/src/chrome/SonarTitleBar.js
@@ -13,6 +13,7 @@ import {
   Component,
   Spacer,
   GK,
+  styled,
 } from 'sonar';
 import {connect} from 'react-redux';
 import {
@@ -26,34 +27,24 @@ import ScreenCaptureButtons from './ScreenCaptureButtons.js';
 import AutoUpdateVersion from './AutoUpdateVersion.js';
 import config from '../fb-stubs/config.js';
 
-const TitleBar = FlexRow.extends(
-  {
-    background: props =>
-      props.focused
-        ? `linear-gradient(to bottom, ${
-            colors.macOSTitleBarBackgroundTop
-          } 0%, ${colors.macOSTitleBarBackgroundBottom} 100%)`
-        : colors.macOSTitleBarBackgroundBlur,
-    borderBottom: props =>
-      `1px solid ${
-        props.focused
-          ? colors.macOSTitleBarBorder
-          : colors.macOSTitleBarBorderBlur
-      }`,
-    height: 38,
-    flexShrink: 0,
-    width: '100%',
-    alignItems: 'center',
-    paddingLeft: 80,
-    paddingRight: 10,
-    justifyContent: 'space-between',
-    // $FlowFixMe
-    WebkitAppRegion: 'drag',
-  },
-  {
-    ignoreAttributes: ['focused'],
-  },
-);
+const TitleBar = styled(FlexRow)(({focused}) => ({
+  background: focused
+    ? `linear-gradient(to bottom, ${colors.macOSTitleBarBackgroundTop} 0%, ${
+        colors.macOSTitleBarBackgroundBottom
+      } 100%)`
+    : colors.macOSTitleBarBackgroundBlur,
+  borderBottom: `1px solid ${
+    focused ? colors.macOSTitleBarBorder : colors.macOSTitleBarBorderBlur
+  }`,
+  height: 38,
+  flexShrink: 0,
+  width: '100%',
+  alignItems: 'center',
+  paddingLeft: 80,
+  paddingRight: 10,
+  justifyContent: 'space-between',
+  WebkitAppRegion: 'drag',
+}));
 
 type Props = {|
   windowIsFocused: boolean,
diff --git a/src/chrome/Version.js b/src/chrome/Version.js
index 039a864e5..f85a62cb8 100644
--- a/src/chrome/Version.js
+++ b/src/chrome/Version.js
@@ -5,7 +5,7 @@
  * @format
  */
 
-import {Component, FlexRow, colors, LoadingIndicator} from 'sonar';
+import {Component, FlexRow, colors, LoadingIndicator, styled} from 'sonar';
 import {version} from '../../package.json';
 import {remote} from 'electron';
 import * as path from 'path';
@@ -24,7 +24,7 @@ export default class Version extends Component<{}, VersionState> {
     status: 'unknown',
   };
 
-  static Container = FlexRow.extends({
+  static Container = styled(FlexRow)({
     alignItems: 'center',
     marginRight: 7,
     marginLeft: 7,
@@ -32,7 +32,7 @@ export default class Version extends Component<{}, VersionState> {
     color: colors.light50,
   });
 
-  static UpdatedContainer = FlexRow.extends({
+  static UpdatedContainer = styled(FlexRow)({
     backgroundColor: colors.blackAlpha10,
     borderRadius: '999em',
     padding: '2px 6px',
diff --git a/src/chrome/WelcomeScreen.js b/src/chrome/WelcomeScreen.js
index 699b8a3a9..184838df4 100644
--- a/src/chrome/WelcomeScreen.js
+++ b/src/chrome/WelcomeScreen.js
@@ -18,7 +18,7 @@ import {
 import isProduction from '../utils/isProduction.js';
 import {shell, remote} from 'electron';
 
-const Container = FlexColumn.extends({
+const Container = styled(FlexColumn)({
   height: '100%',
   width: '100%',
   justifyContent: 'center',
@@ -26,23 +26,18 @@ const Container = FlexColumn.extends({
   backgroundColor: colors.light02,
 });
 
-const Welcome = FlexColumn.extends(
-  {
-    width: 460,
-    background: colors.white,
-    borderRadius: 10,
-    boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
-    overflow: 'hidden',
-    opacity: props => (props.isMounted ? 1 : 0),
-    transform: props => `translateY(${props.isMounted ? 0 : 20}px)`,
-    transition: '0.6s all ease-out',
-  },
-  {
-    ignoreAttributes: ['isMounted'],
-  },
-);
+const Welcome = styled(FlexColumn)(({isMounted}) => ({
+  width: 460,
+  background: colors.white,
+  borderRadius: 10,
+  boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+  overflow: 'hidden',
+  opacity: isMounted ? 1 : 0,
+  transform: `translateY(${isMounted ? 0 : 20}px)`,
+  transition: '0.6s all ease-out',
+}));
 
-const Title = Text.extends({
+const Title = styled(Text)({
   fontSize: 24,
   fontWeight: 300,
   textAlign: 'center',
@@ -50,7 +45,7 @@ const Title = Text.extends({
   marginBottom: 16,
 });
 
-const Version = Text.extends({
+const Version = styled(Text)({
   textAlign: 'center',
   fontSize: 11,
   fontWeight: 300,
@@ -58,7 +53,7 @@ const Version = Text.extends({
   marginBottom: 60,
 });
 
-const Item = FlexRow.extends({
+const Item = styled(FlexRow)({
   padding: 10,
   cursor: 'pointer',
   alignItems: 'center',
@@ -69,23 +64,23 @@ const Item = FlexRow.extends({
   },
 });
 
-const ItemTitle = Text.extends({
+const ItemTitle = styled(Text)({
   color: colors.light50,
   fontSize: 15,
 });
 
-const ItemSubTitle = Text.extends({
+const ItemSubTitle = styled(Text)({
   color: colors.light30,
   fontSize: 11,
   marginTop: 2,
 });
 
-const Icon = Glyph.extends({
+const Icon = styled(Glyph)({
   marginRight: 11,
   marginLeft: 6,
 });
 
-const Logo = styled.image({
+const Logo = styled('img')({
   width: 128,
   height: 128,
   alignSelf: 'center',
diff --git a/src/device-plugins/logs/LogWatcher.js b/src/device-plugins/logs/LogWatcher.js
index f745e62bf..d9a1b366b 100644
--- a/src/device-plugins/logs/LogWatcher.js
+++ b/src/device-plugins/logs/LogWatcher.js
@@ -15,6 +15,7 @@ import {
   ManagedTable,
   Button,
   colors,
+  styled,
 } from 'sonar';
 
 export type Counter = {
@@ -55,7 +56,7 @@ const Columns = {
   },
 };
 
-const Count = Text.extends({
+const Count = styled(Text)({
   alignSelf: 'center',
   background: colors.macOSHighlightActive,
   color: colors.white,
@@ -68,7 +69,7 @@ const Count = Text.extends({
   marginLeft: 'auto',
 });
 
-const Checkbox = Input.extends({
+const Checkbox = styled(Input)({
   lineHeight: '100%',
   padding: 0,
   margin: 0,
@@ -76,11 +77,11 @@ const Checkbox = Input.extends({
   alignSelf: 'center',
 });
 
-const ExpressionInput = Input.extends({
+const ExpressionInput = styled(Input)({
   flexGrow: 1,
 });
 
-const WatcherPanel = Panel.extends({
+const WatcherPanel = styled(Panel)({
   minHeight: 200,
 });
 
diff --git a/src/device-plugins/logs/index.js b/src/device-plugins/logs/index.js
index a0e890e21..1aeda58f3 100644
--- a/src/device-plugins/logs/index.js
+++ b/src/device-plugins/logs/index.js
@@ -25,6 +25,7 @@ import {
   FlexColumn,
   Glyph,
   SonarSidebar,
+  styled,
 } from 'sonar';
 import {SonarDevicePlugin, SearchableTable} from 'sonar';
 import textContent from '../../utils/textContent.js';
@@ -47,7 +48,7 @@ type LogsState = {|
   counters: Array<Counter>,
 |};
 
-const Icon = Glyph.extends({
+const Icon = styled(Glyph)({
   marginTop: 5,
 });
 
@@ -202,7 +203,7 @@ const DEFAULT_FILTERS = [
   },
 ];
 
-const HiddenScrollText = Text.extends({
+const HiddenScrollText = styled(Text)({
   alignSelf: 'baseline',
   userSelect: 'none',
   lineHeight: '130%',
@@ -212,23 +213,18 @@ const HiddenScrollText = Text.extends({
   },
 });
 
-const LogCount = HiddenScrollText.extends(
-  {
-    backgroundColor: props => props.color,
-    borderRadius: '999em',
-    fontSize: 11,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 4,
-    width: 16,
-    height: 16,
-    color: colors.white,
-  },
-  {
-    ignoreAttributes: ['color'],
-  },
-);
+const LogCount = styled(HiddenScrollText)(({color}) => ({
+  backgroundColor: color,
+  borderRadius: '999em',
+  fontSize: 11,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: 4,
+  width: 16,
+  height: 16,
+  color: colors.white,
+}));
 
 function pad(chunk: mixed, len: number): string {
   let str = String(chunk);
@@ -529,7 +525,7 @@ export default class LogTable extends SonarDevicePlugin<LogsState> {
     );
   };
 
-  static ContextMenu = ContextMenu.extends({
+  static ContextMenu = styled(ContextMenu)({
     flex: 1,
   });
 
diff --git a/src/index.js b/src/index.js
index 065734b56..a96b95e75 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@
  * @format
  */
 
-export {default as styled} from './ui/styled/index.js';
+export {default as styled} from 'react-emotion';
 export * from './ui/index.js';
 export * from './utils/index.js';
 
diff --git a/src/plugins/layout/index.js b/src/plugins/layout/index.js
index 756766a5b..1d41f79b1 100644
--- a/src/plugins/layout/index.js
+++ b/src/plugins/layout/index.js
@@ -106,18 +106,18 @@ type SearchResultTree = {|
   axElement: Element,
 |};
 
-const LoadingSpinner = LoadingIndicator.extends({
+const LoadingSpinner = styled(LoadingIndicator)({
   marginRight: 4,
   marginLeft: 3,
   marginTop: -1,
 });
 
-const Center = FlexRow.extends({
+const Center = styled(FlexRow)({
   alignItems: 'center',
   justifyContent: 'center',
 });
 
-const SearchIconContainer = styled.view({
+const SearchIconContainer = styled('div')({
   marginRight: 9,
   marginTop: -3,
   marginLeft: 4,
@@ -131,7 +131,7 @@ class LayoutSearchInput extends Component<
     value: string,
   },
 > {
-  static TextInput = styled.textInput({
+  static TextInput = styled('input')({
     width: '100%',
     marginLeft: 6,
   });
diff --git a/src/plugins/leak_canary/index.js b/src/plugins/leak_canary/index.js
index 4f4252157..4efcc5440 100644
--- a/src/plugins/leak_canary/index.js
+++ b/src/plugins/leak_canary/index.js
@@ -16,6 +16,7 @@ import {
   Checkbox,
   SonarPlugin,
   Button,
+  styled,
 } from 'sonar';
 import type {ElementID, Element} from 'sonar';
 import {processLeaks} from './processLeakString';
@@ -42,12 +43,12 @@ export type Leak = {
   retainedSize: string,
 };
 
-const Window = FlexRow.extends({
+const Window = styled(FlexRow)({
   height: '100%',
   flex: 1,
 });
 
-const ToolbarItem = FlexRow.extends({
+const ToolbarItem = styled(FlexRow)({
   alignItems: 'center',
   marginLeft: '8px',
 });
diff --git a/src/plugins/network/RequestDetails.js b/src/plugins/network/RequestDetails.js
index b952ebb7d..3ecdd1396 100644
--- a/src/plugins/network/RequestDetails.js
+++ b/src/plugins/network/RequestDetails.js
@@ -23,7 +23,7 @@ import {getHeaderValue} from './index.js';
 
 import querystring from 'querystring';
 
-const WrappingText = Text.extends({
+const WrappingText = styled(Text)({
   wordWrap: 'break-word',
   width: '100%',
   lineHeight: '125%',
@@ -84,7 +84,7 @@ function decompress(body: string): string {
 }
 
 export default class RequestDetails extends Component<RequestDetailsProps> {
-  static Container = FlexColumn.extends({
+  static Container = styled(FlexColumn)({
     height: '100%',
     overflow: 'auto',
   });
@@ -274,7 +274,7 @@ class HeaderInspector extends Component<
   }
 }
 
-const BodyContainer = styled.view({
+const BodyContainer = styled('div')({
   paddingTop: 10,
   paddingBottom: 20,
 });
@@ -338,7 +338,7 @@ class ResponseBodyInspector extends Component<{
   }
 }
 
-const MediaContainer = FlexColumn.extends({
+const MediaContainer = styled(FlexColumn)({
   alignItems: 'center',
   justifyContent: 'center',
   width: '100%',
@@ -354,14 +354,14 @@ type ImageWithSizeState = {
 };
 
 class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
-  static Image = styled.image({
+  static Image = styled('img')({
     objectFit: 'scale-down',
     maxWidth: 500,
     maxHeight: 500,
     marginBottom: 10,
   });
 
-  static Text = Text.extends({
+  static Text = styled(Text)({
     color: colors.dark70,
     fontSize: 14,
   });
@@ -408,7 +408,7 @@ class ImageFormatter {
 }
 
 class VideoFormatter {
-  static Video = styled.customHTMLTag('video', {
+  static Video = styled('video')({
     maxWidth: 500,
     maxHeight: 500,
   });
diff --git a/src/plugins/network/index.js b/src/plugins/network/index.js
index 584c41a15..e2218b26c 100644
--- a/src/plugins/network/index.js
+++ b/src/plugins/network/index.js
@@ -16,6 +16,7 @@ import {
   colors,
   PureComponent,
   SonarSidebar,
+  styled,
 } from 'sonar';
 import {SonarPlugin, SearchableTable} from 'sonar';
 import RequestDetails from './RequestDetails.js';
@@ -100,7 +101,7 @@ export function formatBytes(count: number): string {
   return count + ' B';
 }
 
-const TextEllipsis = Text.extends({
+const TextEllipsis = styled(Text)({
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
   maxWidth: '100%',
@@ -287,7 +288,7 @@ function calculateState(
 }
 
 class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
-  static ContextMenu = ContextMenu.extends({
+  static ContextMenu = styled(ContextMenu)({
     flex: 1,
   });
 
@@ -338,7 +339,7 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
   }
 }
 
-const Icon = Glyph.extends({
+const Icon = styled(Glyph)({
   marginTop: -3,
   marginRight: 3,
 });
@@ -367,7 +368,7 @@ class DurationColumn extends PureComponent<{
   request: Request,
   response: ?Response,
 }> {
-  static Text = Text.extends({
+  static Text = styled(Text)({
     flex: 1,
     textAlign: 'right',
     paddingRight: 10,
@@ -389,7 +390,7 @@ class DurationColumn extends PureComponent<{
 class SizeColumn extends PureComponent<{
   response: ?Response,
 }> {
-  static Text = Text.extends({
+  static Text = styled(Text)({
     flex: 1,
     textAlign: 'right',
     paddingRight: 10,
diff --git a/src/plugins/sandbox/index.js b/src/plugins/sandbox/index.js
index 54c6d7374..7a17a844c 100644
--- a/src/plugins/sandbox/index.js
+++ b/src/plugins/sandbox/index.js
@@ -20,13 +20,13 @@ type SandboxState = {|
   showFeedback: boolean,
 |};
 
-const BigButton = Button.extends({
+const BigButton = styled(Button)({
   flexGrow: 1,
   fontSize: 24,
   padding: 20,
 });
 
-const ButtonContainer = FlexColumn.extends({
+const ButtonContainer = styled(FlexColumn)({
   alignItems: 'center',
   padding: 20,
 });
@@ -42,7 +42,7 @@ export default class SandboxView extends SonarPlugin<SandboxState> {
   static id = 'Sandbox';
   static icon = 'translate';
 
-  static TextInput = styled.textInput({
+  static TextInput = styled('input')({
     border: `1px solid ${colors.light10}`,
     fontSize: '1em',
     padding: '0 5px',
@@ -52,13 +52,13 @@ export default class SandboxView extends SonarPlugin<SandboxState> {
     flexGrow: 1,
   });
 
-  static FeedbackMessage = styled.text({
+  static FeedbackMessage = styled('span')({
     fontSize: '1.2em',
     paddingTop: '10px',
     color: 'green',
   });
 
-  static TextInputLayout = FlexColumn.extends({
+  static TextInputLayout = styled(FlexColumn)({
     float: 'left',
     justifyContent: 'center',
     flexGrow: 1,
diff --git a/src/ui/components/Block.js b/src/ui/components/Block.js
index 4c7eec6f9..88a2c4b87 100644
--- a/src/ui/components/Block.js
+++ b/src/ui/components/Block.js
@@ -7,6 +7,6 @@
 
 import styled from '../styled/index.js';
 
-export default styled.view({
+export default styled('div')({
   display: 'block',
 });
diff --git a/src/ui/components/Box.js b/src/ui/components/Box.js
index e0712484e..6009eced1 100644
--- a/src/ui/components/Box.js
+++ b/src/ui/components/Box.js
@@ -6,8 +6,9 @@
  */
 
 import FlexBox from './FlexBox.js';
+import styled from '../styled/index.js';
 
-export default FlexBox.extends({
+export default styled(FlexBox)({
   height: '100%',
   overflow: 'auto',
   position: 'relative',
diff --git a/src/ui/components/Button.js b/src/ui/components/Button.js
index 5d60b2a24..f5485c4bf 100644
--- a/src/ui/components/Button.js
+++ b/src/ui/components/Button.js
@@ -7,12 +7,12 @@
 
 import Glyph from './Glyph.js';
 import styled from '../styled/index.js';
-import type {StyledComponent} from '../styled/index.js';
 import {findDOMNode} from 'react-dom';
 import PropTypes from 'prop-types';
 import {colors} from './colors.js';
 import {connect} from 'react-redux';
 import electron from 'electron';
+import {keyframes} from 'react-emotion';
 
 const borderColor = props => {
   if (!props.windowIsFocused) {
@@ -35,129 +35,122 @@ const borderBottomColor = props => {
   }
 };
 
-const StyledButton = styled.view(
-  {
-    backgroundColor: props => {
-      if (!props.windowIsFocused) {
-        return colors.macOSTitleBarButtonBackgroundBlur;
-      } else {
-        return colors.white;
-      }
-    },
-    backgroundImage: props => {
-      if (props.windowIsFocused) {
-        if (props.depressed) {
-          return `linear-gradient(to bottom, ${
-            colors.macOSTitleBarBorderBlur
-          } 1px, ${colors.macOSTitleBarButtonBorderBlur} 0%, ${
-            colors.macOSTitleBarButtonBackgroundActive
-          } 100%)`;
-        } else {
-          return `linear-gradient(to bottom, transparent 0%,${
-            colors.macOSTitleBarButtonBackground
-          } 100%)`;
-        }
-      } else {
-        return 'none';
-      }
-    },
+const backgroundImage = props => {
+  if (props.windowIsFocused) {
+    if (props.depressed) {
+      return `linear-gradient(to bottom, ${
+        colors.macOSTitleBarBorderBlur
+      } 1px, ${colors.macOSTitleBarButtonBorderBlur} 0%, ${
+        colors.macOSTitleBarButtonBackgroundActive
+      } 100%)`;
+    } else {
+      return `linear-gradient(to bottom, transparent 0%,${
+        colors.macOSTitleBarButtonBackground
+      } 100%)`;
+    }
+  } else {
+    return 'none';
+  }
+};
+
+const color = props => {
+  if (props.type === 'danger' && props.windowIsFocused) {
+    return colors.red;
+  } else if (props.disabled) {
+    return colors.macOSTitleBarIconBlur;
+  } else {
+    return colors.light50;
+  }
+};
+
+const pulse = keyframes({
+  '0%': {
+    boxShadow: `0 0 4px 0 ${colors.macOSTitleBarIconSelected}`,
+  },
+  '70%': {
+    boxShadow: '0 0 4px 6px transparent',
+  },
+  '100%': {
+    boxShadow: '0 0 4px 0 transparent',
+  },
+});
+
+const StyledButton = styled('div')(props => ({
+  backgroundColor: !props.windowIsFocused
+    ? colors.macOSTitleBarButtonBackgroundBlur
+    : colors.white,
+  backgroundImage: backgroundImage(props),
+  borderStyle: 'solid',
+  borderWidth: 1,
+  borderColor: borderColor(props),
+  borderBottomColor: borderBottomColor(props),
+  fontSize: props.compact === true ? 11 : '1em',
+  color: color(props),
+  borderRadius: 4,
+  position: 'relative',
+  padding: '0 6px',
+  height: props.compact === true ? 24 : 28,
+  margin: 0,
+  marginLeft: props.inButtonGroup === true ? 0 : 10,
+  minWidth: 34,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+
+  boxShadow:
+    props.pulse && props.windowIsFocused
+      ? `0 0 0 ${colors.macOSTitleBarIconSelected}`
+      : '',
+  animation: props.pulse && props.windowIsFocused ? `${pulse} 1s infinite` : '',
+
+  '&:not(:first-child)': {
+    borderTopLeftRadius: props.inButtonGroup === true ? 0 : 4,
+    borderBottomLeftRadius: props.inButtonGroup === true ? 0 : 4,
+  },
+
+  '&:not(:last-child)': {
+    borderTopRightRadius: props.inButtonGroup === true ? 0 : 4,
+    borderBottomRightRadius: props.inButtonGroup === true ? 0 : 4,
+    borderRight: props.inButtonGroup === true ? 0 : '',
+  },
+
+  '&:first-of-type': {
+    marginLeft: 0,
+  },
+
+  '&:active': {
+    borderColor: colors.macOSTitleBarButtonBorder,
+    borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
+    background: `linear-gradient(to bottom, ${
+      colors.macOSTitleBarButtonBackgroundActiveHighlight
+    } 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${
+      colors.macOSTitleBarButtonBorderBlur
+    } 100%)`,
+  },
+
+  '&:disabled': {
+    borderColor: borderColor(props),
+    borderBottomColor: borderBottomColor(props),
+    pointerEvents: 'none',
+  },
+
+  '&:hover::before': {
+    content: props.dropdown ? "''" : '',
+    position: 'absolute',
+    bottom: 1,
+    right: 2,
     borderStyle: 'solid',
-    borderWidth: 1,
-    borderColor,
-    borderBottomColor,
-    fontSize: props => (props.compact === true ? 11 : '1em'),
-    color: props => {
-      if (props.type === 'danger' && props.windowIsFocused) {
-        return colors.red;
-      } else if (props.disabled) {
-        return colors.macOSTitleBarIconBlur;
-      } else {
-        return colors.light50;
-      }
-    },
-    borderRadius: 4,
-    position: 'relative',
-    padding: '0 6px',
-    height: props => (props.compact === true ? 24 : 28),
-    margin: 0,
-    marginLeft: props => (props.inButtonGroup === true ? 0 : 10),
-    minWidth: 34,
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-
-    boxShadow: props =>
-      props.pulse && props.windowIsFocused
-        ? `0 0 0 ${colors.macOSTitleBarIconSelected}`
-        : '',
-    animation: props =>
-      props.pulse && props.windowIsFocused ? 'pulse 1s infinite' : '',
-
-    '&:not(:first-child)': {
-      borderTopLeftRadius: props => (props.inButtonGroup === true ? 0 : 4),
-      borderBottomLeftRadius: props => (props.inButtonGroup === true ? 0 : 4),
-    },
-
-    '&:not(:last-child)': {
-      borderTopRightRadius: props => (props.inButtonGroup === true ? 0 : 4),
-      borderBottomRightRadius: props => (props.inButtonGroup === true ? 0 : 4),
-      borderRight: props => (props.inButtonGroup === true ? 0 : ''),
-    },
-
-    '&:first-of-type': {
-      marginLeft: 0,
-    },
-
-    '&:active': {
-      borderColor: colors.macOSTitleBarButtonBorder,
-      borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
-      background: `linear-gradient(to bottom, ${
-        colors.macOSTitleBarButtonBackgroundActiveHighlight
-      } 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${
-        colors.macOSTitleBarButtonBorderBlur
-      } 100%)`,
-    },
-
-    '&:disabled': {
-      borderColor,
-      borderBottomColor,
-      pointerEvents: 'none',
-    },
-
-    '&:hover::before': {
-      content: props => (props.dropdown ? "''" : ''),
-      position: 'absolute',
-      bottom: 1,
-      right: 2,
-      borderStyle: 'solid',
-      borderWidth: '4px 3px 0 3px',
-      borderColor: props =>
-        `${colors.macOSTitleBarIcon} transparent transparent transparent`,
-    },
+    borderWidth: '4px 3px 0 3px',
+    borderColor: `${
+      colors.macOSTitleBarIcon
+    } transparent transparent transparent`,
   },
-  {
-    ignoreAttributes: [
-      'dropdown',
-      'dispatch',
-      'compact',
-      'large',
-      'windowIsFocused',
-      'inButtonGroup',
-      'danger',
-      'pulse',
-    ],
-  },
-);
+}));
 
-const Icon = Glyph.extends(
-  {
-    marginRight: props => (props.hasText ? 3 : 0),
-  },
-  {
-    ignoreAttributes: ['hasText', 'type'],
-  },
-);
+const Icon = styled(Glyph)(({hasText}) => ({
+  marginRight: hasText ? 3 : 0,
+}));
 
 type Props = {
   /**
@@ -252,7 +245,7 @@ type State = {
  * @example Disabled button
  *   <Button disabled={true}>Click me</Button>
  */
-class Button extends styled.StylableComponent<
+class Button extends React.Component<
   Props & {windowIsFocused: boolean},
   State,
 > {
@@ -350,25 +343,6 @@ class Button extends styled.StylableComponent<
         inButtonGroup={this.context.inButtonGroup}>
         {iconComponent}
         {children}
-        {this.props.pulse === true && (
-          <style
-            dangerouslySetInnerHTML={{
-              __html: `
-        @keyframes pulse {
-          0% {
-            box-shadow: 0 0 4px 0 ${colors.macOSTitleBarIconSelected};
-          }
-          70% {
-            box-shadow: 0 0 4px 6px transparent;
-          }
-          100% {
-            box-shadow: 0 0 4px 0 transparent;
-          }
-        }
-      `,
-            }}
-          />
-        )}
       </StyledButton>
     );
   }
diff --git a/src/ui/components/ButtonGroup.js b/src/ui/components/ButtonGroup.js
index 5ba333669..bf0f0256b 100644
--- a/src/ui/components/ButtonGroup.js
+++ b/src/ui/components/ButtonGroup.js
@@ -10,7 +10,7 @@ import {Component} from 'react';
 
 const PropTypes = require('prop-types');
 
-const ButtonGroupContainer = styled.view({
+const ButtonGroupContainer = styled('div')({
   display: 'inline-flex',
   marginLeft: 10,
   '&:first-child': {
diff --git a/src/ui/components/Checkbox.js b/src/ui/components/Checkbox.js
index e0a6f7f62..3fc8f2994 100644
--- a/src/ui/components/Checkbox.js
+++ b/src/ui/components/Checkbox.js
@@ -13,7 +13,7 @@ type CheckboxProps = {
   onChange: (checked: boolean) => void,
 };
 
-const CheckboxContainer = styled.textInput({
+const CheckboxContainer = styled('input')({
   display: 'inline-block',
   marginRight: 5,
   verticalAlign: 'middle',
diff --git a/src/ui/components/ClickableList.js b/src/ui/components/ClickableList.js
deleted file mode 100644
index 055b0707d..000000000
--- a/src/ui/components/ClickableList.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import styled from '../styled/index.js';
-
-export default styled.view({
-  marginBottom: 10,
-});
diff --git a/src/ui/components/ClickableListItem.js b/src/ui/components/ClickableListItem.js
deleted file mode 100644
index 7c99d7061..000000000
--- a/src/ui/components/ClickableListItem.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import styled from '../styled/index.js';
-import {colors} from './colors.js';
-
-export default styled.view(
-  {
-    backgroundColor: ({active, windowFocused}) => {
-      if (active && windowFocused) {
-        return colors.macOSTitleBarIconSelected;
-      } else if (active && !windowFocused) {
-        return colors.macOSTitleBarBorderBlur;
-      } else {
-        return 'none';
-      }
-    },
-    color: ({active, windowFocused}) =>
-      active && windowFocused ? colors.white : colors.macOSSidebarSectionItem,
-    lineHeight: '25px',
-    padding: '0 10px',
-    '&[disabled]': {
-      color: 'rgba(0, 0, 0, 0.5)',
-    },
-  },
-  {
-    ignoreAttributes: ['active', 'windowFocused'],
-  },
-);
diff --git a/src/ui/components/CodeBlock.js b/src/ui/components/CodeBlock.js
index 24330bfa1..c02886223 100644
--- a/src/ui/components/CodeBlock.js
+++ b/src/ui/components/CodeBlock.js
@@ -7,6 +7,6 @@
 
 import styled from '../styled/index.js';
 
-export default styled.view({
+export default styled('div')({
   fontFamily: 'monospace',
 });
diff --git a/src/ui/components/ContextMenu.js b/src/ui/components/ContextMenu.js
index 9b46b8930..fd58de30d 100644
--- a/src/ui/components/ContextMenu.js
+++ b/src/ui/components/ContextMenu.js
@@ -6,7 +6,6 @@
  */
 
 import FlexColumn from './FlexColumn.js';
-import styled from '../styled/index.js';
 import PropTypes from 'prop-types';
 
 type MenuTemplate = Array<Electron$MenuItemOptions>;
@@ -18,7 +17,7 @@ type Props = {
   component: React.ComponentType<any> | string,
 };
 
-export default class ContextMenu extends styled.StylablePureComponent<Props> {
+export default class ContextMenu extends React.Component<Props> {
   static defaultProps = {
     component: FlexColumn,
   };
diff --git a/src/ui/components/ContextMenuProvider.js b/src/ui/components/ContextMenuProvider.js
index 3e3dc90d1..65946d969 100644
--- a/src/ui/components/ContextMenuProvider.js
+++ b/src/ui/components/ContextMenuProvider.js
@@ -13,7 +13,7 @@ const PropTypes = require('prop-types');
 
 type MenuTemplate = Array<Electron$MenuItemOptions>;
 
-const Container = styled.view({
+const Container = styled('div')({
   display: 'contents',
 });
 
diff --git a/src/ui/components/ErrorBlock.js b/src/ui/components/ErrorBlock.js
index 7c53670c2..49be6d3c4 100644
--- a/src/ui/components/ErrorBlock.js
+++ b/src/ui/components/ErrorBlock.js
@@ -6,9 +6,10 @@
  */
 
 import styled from '../styled/index.js';
+import React from 'react';
 import CodeBlock from './CodeBlock.js';
 
-const ErrorBlockContainer = CodeBlock.extends({
+const ErrorBlockContainer = styled(CodeBlock)({
   backgroundColor: '#f2dede',
   border: '1px solid #ebccd1',
   borderRadius: 4,
@@ -17,7 +18,7 @@ const ErrorBlockContainer = CodeBlock.extends({
   padding: 10,
 });
 
-export default class ErrorBlock extends styled.StylableComponent<{
+export default class ErrorBlock extends React.Component<{
   error: Error | string | void,
   className?: string,
 }> {
diff --git a/src/ui/components/ErrorBoundary.js b/src/ui/components/ErrorBoundary.js
index 798e7bb4f..d8bf7b42e 100644
--- a/src/ui/components/ErrorBoundary.js
+++ b/src/ui/components/ErrorBoundary.js
@@ -11,13 +11,14 @@ import Heading from './Heading.js';
 import Button from './Button.js';
 import View from './View.js';
 import LogManager from '../../fb-stubs/Logger.js';
+import styled from '../styled/index.js';
 
-const ErrorBoundaryContainer = View.extends({
+const ErrorBoundaryContainer = styled(View)({
   overflow: 'auto',
   padding: 10,
 });
 
-const ErrorBoundaryStack = ErrorBlock.extends({
+const ErrorBoundaryStack = styled(ErrorBlock)({
   marginBottom: 10,
   whiteSpace: 'pre',
 });
diff --git a/src/ui/components/FlexBox.js b/src/ui/components/FlexBox.js
index e3dc3bf6a..418fcfd1d 100644
--- a/src/ui/components/FlexBox.js
+++ b/src/ui/components/FlexBox.js
@@ -6,13 +6,9 @@
  */
 
 import View from './View.js';
+import styled from '../styled/index.js';
 
-export default View.extends(
-  {
-    display: 'flex',
-    flexShrink: props => (props.shrink == null || props.shrink ? 1 : 0),
-  },
-  {
-    ignoreAttributes: ['shrink'],
-  },
-);
+export default styled(View)(({shrink}) => ({
+  display: 'flex',
+  flexShrink: shrink == null || shrink ? 1 : 0,
+}));
diff --git a/src/ui/components/FlexCenter.js b/src/ui/components/FlexCenter.js
index 0b803c304..c383909b3 100644
--- a/src/ui/components/FlexCenter.js
+++ b/src/ui/components/FlexCenter.js
@@ -6,8 +6,9 @@
  */
 
 import View from './View.js';
+import styled from '../styled/index.js';
 
-export default View.extends({
+export default styled(View)({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/src/ui/components/FlexColumn.js b/src/ui/components/FlexColumn.js
index ead4bf5e6..e87715e9d 100644
--- a/src/ui/components/FlexColumn.js
+++ b/src/ui/components/FlexColumn.js
@@ -6,7 +6,8 @@
  */
 
 import FlexBox from './FlexBox.js';
+import styled from '../styled/index.js';
 
-export default FlexBox.extends({
+export default styled(FlexBox)({
   flexDirection: 'column',
 });
diff --git a/src/ui/components/FlexRow.js b/src/ui/components/FlexRow.js
index d557bda22..2bf3fdc4b 100644
--- a/src/ui/components/FlexRow.js
+++ b/src/ui/components/FlexRow.js
@@ -6,7 +6,8 @@
  */
 
 import FlexBox from './FlexBox.js';
+import styled from '../styled/index.js';
 
-export default FlexBox.extends({
+export default styled(FlexBox)({
   flexDirection: 'row',
 });
diff --git a/src/ui/components/FocusableBox.js b/src/ui/components/FocusableBox.js
index b73450475..c69288ebc 100644
--- a/src/ui/components/FocusableBox.js
+++ b/src/ui/components/FocusableBox.js
@@ -8,21 +8,17 @@
 import {Component} from 'react';
 import Box from './Box.js';
 import {colors} from './colors';
+import styled from '../styled/index.js';
 
-const FocusableBoxBorder = Box.extends(
-  {
-    border: `1px solid ${colors.highlight}`,
-    bottom: '0',
-    left: '0',
-    pointerEvents: 'none',
-    position: 'absolute',
-    right: '0',
-    top: '0',
-  },
-  {
-    ignoreAttributes: [],
-  },
-);
+const FocusableBoxBorder = styled(Box)({
+  border: `1px solid ${colors.highlight}`,
+  bottom: '0',
+  left: '0',
+  pointerEvents: 'none',
+  position: 'absolute',
+  right: '0',
+  top: '0',
+});
 
 export default class FocusableBox extends Component<
   Object,
diff --git a/src/ui/components/Glyph.js b/src/ui/components/Glyph.js
index fbc0473b5..6a3154d0f 100644
--- a/src/ui/components/Glyph.js
+++ b/src/ui/components/Glyph.js
@@ -5,39 +5,28 @@
  * @format
  */
 
+import React from 'react';
 import styled from '../styled/index.js';
 const PropTypes = require('prop-types');
 import {getIconUrl} from '../../utils/icons.js';
 
-const ColoredIconBlack = styled.image(
-  {
-    height: props => props.size,
-    verticalAlign: 'middle',
-    width: props => props.size,
-  },
-  {
-    ignoreAttributes: ['size'],
-  },
-);
+const ColoredIconBlack = styled('img')(({size}) => ({
+  height: size,
+  verticalAlign: 'middle',
+  width: size,
+}));
 
-const ColoredIconCustom = styled.view(
-  {
-    height: props => props.size,
-    verticalAlign: 'middle',
-    width: props => props.size,
-    backgroundColor: props => props.color,
-    display: 'inline-block',
-    maskImage: props => `url('${props.src}')`,
-    maskSize: '100% 100%',
-    // $FlowFixMe: prefixed property
-    WebkitMaskImage: props => `url('${props.src}')`,
-    // $FlowFixMe: prefixed property
-    WebkitMaskSize: '100% 100%',
-  },
-  {
-    ignoreAttributes: ['color', 'size', 'src'],
-  },
-);
+const ColoredIconCustom = styled('div')(props => ({
+  height: props.size,
+  verticalAlign: 'middle',
+  width: props.size,
+  backgroundColor: props.color,
+  display: 'inline-block',
+  maskImage: `url('${props.src}')`,
+  maskSize: '100% 100%',
+  WebkitMaskImage: `url('${props.src}')`,
+  WebkitMaskSize: '100% 100%',
+}));
 
 export function ColoredIcon(
   props: {|
@@ -84,7 +73,7 @@ ColoredIcon.contextTypes = {
   glyphColor: PropTypes.string,
 };
 
-export default class Glyph extends styled.StylablePureComponent<{
+export default class Glyph extends React.Component<{
   name: string,
   size?: 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32,
   variant?: 'filled' | 'outline',
diff --git a/src/ui/components/Heading.js b/src/ui/components/Heading.js
index a6b80b9fa..088ed4981 100644
--- a/src/ui/components/Heading.js
+++ b/src/ui/components/Heading.js
@@ -7,7 +7,7 @@
 
 import styled from '../styled/index.js';
 
-const LargeHeading = styled.view({
+const LargeHeading = styled('div')({
   fontSize: 18,
   fontWeight: 'bold',
   lineHeight: '20px',
@@ -15,7 +15,7 @@ const LargeHeading = styled.view({
   marginBottom: 10,
 });
 
-const SmallHeading = styled.view({
+const SmallHeading = styled('div')({
   fontSize: 12,
   color: '#90949c',
   fontWeight: 'bold',
diff --git a/src/ui/components/HorizontalRule.js b/src/ui/components/HorizontalRule.js
index 36f892df2..2b20f970a 100644
--- a/src/ui/components/HorizontalRule.js
+++ b/src/ui/components/HorizontalRule.js
@@ -7,7 +7,7 @@
 
 import styled from '../styled/index.js';
 
-export default styled.view({
+export default styled('div')({
   backgroundColor: '#c9ced4',
   height: 1,
   margin: '5px 0',
diff --git a/src/ui/components/Input.js b/src/ui/components/Input.js
index 21c8252b8..7c2776513 100644
--- a/src/ui/components/Input.js
+++ b/src/ui/components/Input.js
@@ -8,13 +8,13 @@
 import styled from '../styled/index.js';
 import {colors} from './colors.js';
 
-export const inputStyle = {
+export const inputStyle = (compact: boolean) => ({
   border: `1px solid ${colors.light15}`,
   borderRadius: 4,
   font: 'inherit',
   fontSize: '1em',
-  height: (props: Object) => (props.compact ? '17px' : '28px'),
-  lineHeight: (props: Object) => (props.compact ? '17px' : '28px'),
+  height: compact ? '17px' : '28px',
+  lineHeight: compact ? '17px' : '28px',
   marginRight: 5,
 
   '&:disabled': {
@@ -22,17 +22,12 @@ export const inputStyle = {
     borderColor: '#ccc',
     cursor: 'not-allowed',
   },
-};
+});
 
-const Input = styled.textInput(
-  {
-    ...inputStyle,
-    padding: props => (props.compact ? '0 5px' : '0 10px'),
-  },
-  {
-    ignoreAttributes: ['compact'],
-  },
-);
+const Input = styled('input')(({compact}) => ({
+  ...inputStyle(compact),
+  padding: compact ? '0 5px' : '0 10px',
+}));
 
 Input.defaultProps = {
   type: 'text',
diff --git a/src/ui/components/Interactive.js b/src/ui/components/Interactive.js
index b96dbc7d2..fd31b7261 100644
--- a/src/ui/components/Interactive.js
+++ b/src/ui/components/Interactive.js
@@ -86,11 +86,11 @@ type InteractiveState = {|
   resizingInitialCursor: ?CursorState,
 |};
 
-const InteractiveContainer = styled.view({
+const InteractiveContainer = styled('div')({
   willChange: 'transform, height, width, z-index',
 });
 
-export default class Interactive extends styled.StylableComponent<
+export default class Interactive extends React.Component<
   InteractiveProps,
   InteractiveState,
 > {
diff --git a/src/ui/components/Label.js b/src/ui/components/Label.js
index 9acb189a5..3e7a2df9a 100644
--- a/src/ui/components/Label.js
+++ b/src/ui/components/Label.js
@@ -7,7 +7,7 @@
 
 import styled from '../styled/index.js';
 
-export default styled.view({
+export default styled('div')({
   fontSize: 12,
   fontWeight: 'bold',
 });
diff --git a/src/ui/components/Link.js b/src/ui/components/Link.js
index 255277e21..c870bf241 100644
--- a/src/ui/components/Link.js
+++ b/src/ui/components/Link.js
@@ -10,18 +10,13 @@ import {colors} from './colors.js';
 import {Component} from 'react';
 import {shell} from 'electron';
 
-const StyledLink = styled.text(
-  {
-    color: colors.highlight,
-    '&:hover': {
-      cursor: 'pointer',
-      textDecoration: 'underline',
-    },
+const StyledLink = styled('span')({
+  color: colors.highlight,
+  '&:hover': {
+    cursor: 'pointer',
+    textDecoration: 'underline',
   },
-  {
-    ignoreAttributes: [],
-  },
-);
+});
 
 export default class Link extends Component<{
   href: string,
diff --git a/src/ui/components/LoadingIndicator.js b/src/ui/components/LoadingIndicator.js
index 56e0b3454..89214e55b 100644
--- a/src/ui/components/LoadingIndicator.js
+++ b/src/ui/components/LoadingIndicator.js
@@ -5,10 +5,10 @@
  * @format
  */
 
-import type {StyledComponent} from '../styled/index.js';
 import styled from '../styled/index.js';
+import {keyframes} from 'react-emotion';
 
-const animation = styled.keyframes({
+const animation = keyframes({
   '0%': {
     transform: 'rotate(0deg)',
   },
@@ -17,23 +17,16 @@ const animation = styled.keyframes({
   },
 });
 
-const LoadingIndicator: StyledComponent<{
-  size?: number,
-}> = styled.view(
-  {
-    animation: `${animation} 1s infinite linear`,
-    width: props => props.size,
-    height: props => props.size,
-    minWidth: props => props.size,
-    minHeight: props => props.size,
-    borderRadius: '50%',
-    border: props => `${props.size / 6}px solid rgba(0, 0, 0, 0.2)`,
-    borderLeftColor: 'rgba(0, 0, 0, 0.4)',
-  },
-  {
-    ignoreAttributes: ['size'],
-  },
-);
+const LoadingIndicator = styled('div')(props => ({
+  animation: `${animation} 1s infinite linear`,
+  width: props.size,
+  height: props.size,
+  minWidth: props.size,
+  minHeight: props.size,
+  borderRadius: '50%',
+  border: `${props.size / 6}px solid rgba(0, 0, 0, 0.2)`,
+  borderLeftColor: 'rgba(0, 0, 0, 0.4)',
+}));
 
 LoadingIndicator.defaultProps = {
   size: 50,
diff --git a/src/ui/components/ModalOverlay.js b/src/ui/components/ModalOverlay.js
index 4a5b339ce..cc223b837 100644
--- a/src/ui/components/ModalOverlay.js
+++ b/src/ui/components/ModalOverlay.js
@@ -8,7 +8,7 @@
 import styled from '../styled/index.js';
 import {Component} from 'react';
 
-const Overlay = styled.view({
+const Overlay = styled('div')({
   alignItems: 'center',
   backgroundColor: 'rgba(0, 0, 0, 0.6)',
   bottom: 0,
diff --git a/src/ui/components/Orderable.js b/src/ui/components/Orderable.js
index 3abb052a6..f03a72992 100644
--- a/src/ui/components/Orderable.js
+++ b/src/ui/components/Orderable.js
@@ -37,19 +37,13 @@ type TabSizes = {
   [key: string]: Rect,
 };
 
-const OrderableContainer = styled.view({
+const OrderableContainer = styled('div')({
   position: 'relative',
 });
 
-const OrderableItemContainer = styled.view(
-  {
-    display: props =>
-      props.orientation === 'vertical' ? 'block' : 'inline-block',
-  },
-  {
-    ignoreAttributes: ['orientation'],
-  },
-);
+const OrderableItemContainer = styled('div')(props => ({
+  display: props.orientation === 'vertical' ? 'block' : 'inline-block',
+}));
 
 class OrderableItem extends Component<{
   orientation: OrderableOrientation,
@@ -79,7 +73,7 @@ class OrderableItem extends Component<{
   }
 }
 
-export default class Orderable extends styled.StylableComponent<
+export default class Orderable extends React.Component<
   OrderableProps,
   OrderableState,
 > {
diff --git a/src/ui/components/Panel.js b/src/ui/components/Panel.js
index 8b3f7a1e5..9664b36e8 100644
--- a/src/ui/components/Panel.js
+++ b/src/ui/components/Panel.js
@@ -5,18 +5,16 @@
  * @format
  */
 
-import FlexColumn from './FlexColumn.js';
-
+import React from 'react';
 import styled from '../styled/index.js';
+import FlexColumn from './FlexColumn.js';
 import FlexBox from './FlexBox.js';
-
 import {colors} from './colors.js';
 import Glyph from './Glyph.js';
 
 const BORDER = '1px solid #dddfe2';
-const ignoreAttributes = ['floating', 'padded'];
 
-const Chevron = Glyph.extends({
+const Chevron = styled(Glyph)({
   marginRight: 4,
   marginLeft: -2,
   marginBottom: 1,
@@ -25,7 +23,7 @@ const Chevron = Glyph.extends({
 /**
  * A Panel component.
  */
-export default class Panel extends styled.StylableComponent<
+export default class Panel extends React.Component<
   {|
     /**
      * Class name to customise styling.
@@ -84,46 +82,37 @@ export default class Panel extends styled.StylableComponent<
     collapsable: true,
   };
 
-  static PanelContainer = FlexColumn.extends(
-    {
-      flexShrink: 0,
-      padding: props => (props.floating ? 10 : 0),
-      borderBottom: props => (props.collapsed ? 'none' : BORDER),
-    },
-    {ignoreAttributes: ['collapsed', ...ignoreAttributes]},
-  );
+  static PanelContainer = styled(FlexColumn)(props => ({
+    flexShrink: 0,
+    padding: props.floating ? 10 : 0,
+    borderBottom: props.collapsed ? 'none' : BORDER,
+  }));
 
-  static PanelHeader = FlexBox.extends(
-    {
-      backgroundColor: '#f6f7f9',
-      border: props => (props.floating ? BORDER : 'none'),
-      borderBottom: BORDER,
-      borderTopLeftRadius: 2,
-      borderTopRightRadius: 2,
-      justifyContent: 'space-between',
-      lineHeight: '27px',
-      fontWeight: 500,
-      flexShrink: 0,
-      padding: props => (props.padded ? '0 10px' : 0),
-      '&:not(:first-child)': {
-        borderTop: BORDER,
-      },
+  static PanelHeader = styled(FlexBox)(props => ({
+    backgroundColor: '#f6f7f9',
+    border: props.floating ? BORDER : 'none',
+    borderBottom: BORDER,
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2,
+    justifyContent: 'space-between',
+    lineHeight: '27px',
+    fontWeight: 500,
+    flexShrink: 0,
+    padding: props.padded ? '0 10px' : 0,
+    '&:not(:first-child)': {
+      borderTop: BORDER,
     },
-    {ignoreAttributes},
-  );
+  }));
 
-  static PanelBody = FlexColumn.extends(
-    {
-      backgroundColor: '#fff',
-      border: props => (props.floating ? BORDER : 'none'),
-      borderBottomLeftRadius: 2,
-      borderBottomRightRadius: 2,
-      borderTop: 'none',
-      flexGrow: 1,
-      padding: props => (props.padded ? 10 : 0),
-    },
-    {ignoreAttributes},
-  );
+  static PanelBody = styled(FlexColumn)(props => ({
+    backgroundColor: '#fff',
+    border: props.floating ? BORDER : 'none',
+    borderBottomLeftRadius: 2,
+    borderBottomRightRadius: 2,
+    borderTop: 'none',
+    flexGrow: 1,
+    padding: props.padded ? 10 : 0,
+  }));
   state = {
     collapsed: this.props.collapsed == null ? false : this.props.collapsed,
   };
diff --git a/src/ui/components/Popover.js b/src/ui/components/Popover.js
index de8515ece..81cce75ad 100644
--- a/src/ui/components/Popover.js
+++ b/src/ui/components/Popover.js
@@ -10,7 +10,7 @@ import FlexColumn from './FlexColumn.js';
 import styled from '../styled/index.js';
 import {colors} from './colors.js';
 
-const Anchor = styled.image({
+const Anchor = styled('img')({
   zIndex: 6,
   position: 'absolute',
   bottom: 0,
@@ -18,7 +18,7 @@ const Anchor = styled.image({
   transform: 'translate(-50%, calc(100% + 2px))',
 });
 
-const PopoverContainer = FlexColumn.extends({
+const PopoverContainer = styled(FlexColumn)({
   backgroundColor: colors.white,
   borderRadius: 7,
   border: '1px solid rgba(0,0,0,0.3)',
diff --git a/src/ui/components/ResizeSensor.js b/src/ui/components/ResizeSensor.js
index cf115924a..b18b79f62 100644
--- a/src/ui/components/ResizeSensor.js
+++ b/src/ui/components/ResizeSensor.js
@@ -8,7 +8,7 @@
 import styled from '../styled/index.js';
 import {Component} from 'react';
 
-const IFrame = styled.customHTMLTag('iframe', {
+const IFrame = styled('iframe')({
   height: '100%',
   width: '100%',
   border: 'none',
diff --git a/src/ui/components/Sidebar.js b/src/ui/components/Sidebar.js
index df5854dba..154a9b922 100644
--- a/src/ui/components/Sidebar.js
+++ b/src/ui/components/Sidebar.js
@@ -5,43 +5,30 @@
  * @format
  */
 
-import type {StyledComponent} from '../styled/index.js';
 import Interactive from './Interactive.js';
 import FlexColumn from './FlexColumn.js';
 import {colors} from './colors';
 import {Component} from 'react';
+import styled from '../styled/index.js';
 
-const SidebarInteractiveContainer = Interactive.extends({
+const SidebarInteractiveContainer = styled(Interactive)({
   flex: 'none',
 });
 
 type SidebarPosition = 'left' | 'top' | 'right' | 'bottom';
 
-const SidebarContainer: StyledComponent<{
-  position: SidebarPosition,
-  overflow?: boolean,
-}> = FlexColumn.extends(
-  {
-    backgroundColor: props =>
-      props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
-    borderLeft: props =>
-      props.position === 'right' ? '1px solid #b3b3b3' : 'none',
-    borderTop: props =>
-      props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
-    borderRight: props =>
-      props.position === 'left' ? '1px solid #b3b3b3' : 'none',
-    borderBottom: props =>
-      props.position === 'top' ? '1px solid #b3b3b3' : 'none',
-    height: '100%',
-    overflowX: 'hidden',
-    overflowY: 'auto',
-    textOverflow: props => (props.overflow ? 'ellipsis' : 'auto'),
-    whiteSpace: props => (props.overflow ? 'nowrap' : 'normal'),
-  },
-  {
-    ignoreAttributes: ['backgroundColor', 'position'],
-  },
-);
+const SidebarContainer = styled(FlexColumn)(props => ({
+  backgroundColor: props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
+  borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
+  borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
+  borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
+  borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
+  height: '100%',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  textOverflow: props.overflow ? 'ellipsis' : 'auto',
+  whiteSpace: props.overflow ? 'nowrap' : 'normal',
+}));
 
 type SidebarProps = {
   /**
diff --git a/src/ui/components/SidebarLabel.js b/src/ui/components/SidebarLabel.js
index e84ffbebb..f405e5084 100644
--- a/src/ui/components/SidebarLabel.js
+++ b/src/ui/components/SidebarLabel.js
@@ -7,8 +7,9 @@
 
 import {colors} from './colors.js';
 import Label from './Label.js';
+import styled from '../styled/index.js';
 
-export default Label.extends({
+export default styled(Label)({
   color: colors.blackAlpha30,
   fontSize: 12,
   padding: 10,
diff --git a/src/ui/components/Tabs.js b/src/ui/components/Tabs.js
index c2f87c308..45aa12b22 100644
--- a/src/ui/components/Tabs.js
+++ b/src/ui/components/Tabs.js
@@ -12,45 +12,38 @@ import FlexRow from './FlexRow.js';
 import {colors} from './colors.js';
 import Tab from './Tab.js';
 
-const TabList = FlexRow.extends({
+const TabList = styled(FlexRow)({
   alignItems: 'stretch',
 });
 
-const TabListItem = styled.view(
-  {
-    backgroundColor: props => (props.active ? colors.light15 : colors.light02),
-    borderBottom: '1px solid #dddfe2',
-    boxShadow: props =>
-      props.active ? 'inset 0px 0px 3px rgba(0,0,0,0.25)' : 'none',
-    color: colors.dark80,
-    flex: 1,
-    fontSize: 13,
-    lineHeight: '28px',
-    overflow: 'hidden',
-    padding: '0 10px',
-    position: 'relative',
-    textAlign: 'center',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+const TabListItem = styled('div')(props => ({
+  backgroundColor: props.active ? colors.light15 : colors.light02,
+  borderBottom: '1px solid #dddfe2',
+  boxShadow: props.active ? 'inset 0px 0px 3px rgba(0,0,0,0.25)' : 'none',
+  color: colors.dark80,
+  flex: 1,
+  fontSize: 13,
+  lineHeight: '28px',
+  overflow: 'hidden',
+  padding: '0 10px',
+  position: 'relative',
+  textAlign: 'center',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 
-    '&:hover': {
-      backgroundColor: props =>
-        props.active ? colors.light15 : colors.light05,
-    },
+  '&:hover': {
+    backgroundColor: props.active ? colors.light15 : colors.light05,
   },
-  {
-    ignoreAttributes: ['active'],
-  },
-);
+}));
 
-const TabListAddItem = TabListItem.extends({
+const TabListAddItem = styled(TabListItem)({
   borderRight: 'none',
   flex: 0,
   flexGrow: 0,
   fontWeight: 'bold',
 });
 
-const CloseButton = styled.view({
+const CloseButton = styled('div')({
   color: '#000',
   float: 'right',
   fontSize: 10,
@@ -69,11 +62,11 @@ const CloseButton = styled.view({
   },
 });
 
-const OrderableContainer = styled.view({
+const OrderableContainer = styled('div')({
   display: 'inline-block',
 });
 
-const TabContent = styled.view({
+const TabContent = styled('div')({
   height: '100%',
   overflow: 'auto',
   width: '100%',
diff --git a/src/ui/components/Text.js b/src/ui/components/Text.js
index 4562b4b0e..3ae957413 100644
--- a/src/ui/components/Text.js
+++ b/src/ui/components/Text.js
@@ -5,155 +5,31 @@
  * @format
  */
 
-import type {StyledComponent} from '../styled/index.js';
 import styled from '../styled/index.js';
 
 /**
  * A Text component.
  */
-const Text: StyledComponent<{
-  /**
-   * Color of text.
-   */
-  color?: string,
-  /**
-   * Whether this text is bold. Equivalent to the following CSS:
-   *
-   *  font-weight: bold;
-   */
-  bold?: boolean,
-  /**
-   * Whether this text is italic. Equivalent to the following CSS:
-   *
-   *  font-style: italic;
-   */
-  italic?: boolean,
-  /**
-   * Whether to format the text as code. Equivalent to the following CSS:
-   *
-   *  font-size: Andale Mono, monospace;
-   *  overflow: auto;
-   *  user-select: text;
-   *  white-space: pre-wrap;
-   *  word-wrap: break-word;
-   */
-  code?: boolean,
-  /**
-   * Whether this text is underlined. Equivalent to the following CSS:
-   *
-   *  text-decoration: underline;
-   */
-  underline?: boolean,
-  /**
-   * Whether this text is striked. Equivalent to the following CSS:
-   *
-   *  text-decoration: line-through;
-   */
-  strike?: boolean,
-  /**
-   * Whether this text is selectable by the cursor. Equivalent to the following CSS:
-   *
-   *  user-select: text;
-   */
-  selectable?: boolean,
-  /**
-   * Alignment of the text. Equivalent to the `text-align` CSS rule.
-   */
-  align?: 'left' | 'center' | 'right',
-  /**
-   * Font size to use. Equivalent to the `font-size` CSS rule.
-   */
-  size?: string | number,
-  /**
-   * Font family to use. Equivalent to the `font-family` CSS rule.
-   */
-  family?: string,
-  /**
-   * Word wrap to use. Equivalent to the `word-wrap` CSS rule.
-   */
-  wordWrap?: string,
-  /**
-   * White space to use. Equivalent to the `white-space` CSS rule.
-   */
-  whiteSpace?: string,
-}> = styled.text(
-  {
-    color: props => (props.color ? props.color : 'inherit'),
-    display: 'inline',
-    fontWeight: props => (props.bold ? 'bold' : 'inherit'),
-    fontStyle: props => (props.italic ? 'italic' : 'normal'),
-    textAlign: props => props.align || 'left',
-    fontSize: props => {
-      if (props.size == null && props.code) {
-        return 12;
-      } else {
-        return props.size;
-      }
-    },
-    fontFamily: props => {
-      if (props.code) {
-        return 'SF Mono, Monaco, Andale Mono, monospace';
-      } else {
-        return props.family;
-      }
-    },
-    overflow: props => {
-      if (props.code) {
-        return 'auto';
-      } else {
-        return 'visible';
-      }
-    },
-    textDecoration: props => {
-      if (props.underline) {
-        return 'underline';
-      } else if (props.strike) {
-        return 'line-through';
-      } else {
-        return 'none';
-      }
-    },
-    userSelect: props => {
-      if (
-        props.selectable ||
-        (props.code && typeof props.selectable === 'undefined')
-      ) {
-        return 'text';
-      } else {
-        return 'none';
-      }
-    },
-    wordWrap: props => {
-      if (props.code) {
-        return 'break-word';
-      } else {
-        return props.wordWrap;
-      }
-    },
-    whiteSpace: props => {
-      if (props.code && typeof props.whiteSpace === 'undefined') {
-        return 'pre';
-      } else {
-        return props.whiteSpace;
-      }
-    },
-  },
-  {
-    ignoreAttributes: [
-      'selectable',
-      'whiteSpace',
-      'wordWrap',
-      'align',
-      'code',
-      'family',
-      'size',
-      'bold',
-      'italic',
-      'strike',
-      'underline',
-      'color',
-    ],
-  },
-);
+const Text = styled('span')(props => ({
+  color: props.color ? props.color : 'inherit',
+  display: 'inline',
+  fontWeight: props.bold ? 'bold' : 'inherit',
+  fontStyle: props.italic ? 'italic' : 'normal',
+  textAlign: props.align || 'left',
+  fontSize: props.size == null && props.code ? 12 : props.size,
+  fontFamily: props.code
+    ? 'SF Mono, Monaco, Andale Mono, monospace'
+    : props.family,
+  overflow: props.code ? 'auto' : 'visible',
+  userSelect:
+    props.selectable || (props.code && typeof props.selectable === 'undefined')
+      ? 'text'
+      : 'none',
+  wordWrap: props.code ? 'break-word' : props.wordWrap,
+  whiteSpace:
+    props.code && typeof props.whiteSpace === 'undefined'
+      ? 'pre'
+      : props.whiteSpace,
+}));
 
 export default Text;
diff --git a/src/ui/components/TextParagraph.js b/src/ui/components/TextParagraph.js
index 22c3bb069..b58721c53 100644
--- a/src/ui/components/TextParagraph.js
+++ b/src/ui/components/TextParagraph.js
@@ -10,7 +10,7 @@ import styled from '../styled/index.js';
 /**
  * A TextParagraph component.
  */
-const TextParagraph = styled.view({
+const TextParagraph = styled('div')({
   marginBottom: 10,
 
   '&:last-child': {
diff --git a/src/ui/components/Textarea.js b/src/ui/components/Textarea.js
index 06474ac4b..ed59ce362 100644
--- a/src/ui/components/Textarea.js
+++ b/src/ui/components/Textarea.js
@@ -8,15 +8,9 @@
 import styled from '../styled/index.js';
 import {inputStyle} from './Input.js';
 
-export default styled.customHTMLTag(
-  'textarea',
-  {
-    ...inputStyle,
-    lineHeight: 'normal',
-    padding: props => (props.compact ? '5px' : '8px'),
-    resize: 'none',
-  },
-  {
-    ignoreAttributes: ['compact'],
-  },
-);
+export default styled('textarea')(({compact}) => ({
+  ...inputStyle(compact),
+  lineHeight: 'normal',
+  padding: compact ? '5px' : '8px',
+  resize: 'none',
+}));
diff --git a/src/ui/components/ToggleSwitch.js b/src/ui/components/ToggleSwitch.js
index 4611663a1..dbbe25b64 100644
--- a/src/ui/components/ToggleSwitch.js
+++ b/src/ui/components/ToggleSwitch.js
@@ -9,11 +9,11 @@ import React from 'react';
 import styled from '../styled/index.js';
 import {colors} from './colors.js';
 
-export const StyledButton = styled.view({
+export const StyledButton = styled('div')(props => ({
   cursor: 'pointer',
   width: '30px',
   height: '16px',
-  background: props => (props.toggled ? colors.green : colors.grey),
+  background: props.toggled ? colors.green : colors.grey,
   display: 'block',
   borderRadius: '100px',
   position: 'relative',
@@ -22,14 +22,14 @@ export const StyledButton = styled.view({
     content: `''`,
     position: 'absolute',
     top: '3px',
-    left: props => (props.toggled ? '18px' : '3px'),
+    left: props.toggled ? '18px' : '3px',
     width: '10px',
     height: '10px',
     background: 'white',
     borderRadius: '100px',
     transition: 'all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s',
   },
-});
+}));
 
 type Props = {
   /**
@@ -52,7 +52,7 @@ type Props = {
  * <ToggleButton onClick={handler} toggled={boolean}/>
  * ```
  */
-export default class ToggleButton extends styled.StylableComponent<Props> {
+export default class ToggleButton extends React.Component<Props> {
   render() {
     return (
       <StyledButton toggled={this.props.toggled} onClick={this.props.onClick} />
diff --git a/src/ui/components/Toolbar.js b/src/ui/components/Toolbar.js
index dda1e635c..baf17be6f 100644
--- a/src/ui/components/Toolbar.js
+++ b/src/ui/components/Toolbar.js
@@ -5,44 +5,33 @@
  * @format
  */
 
-import type {StyledComponent} from '../styled/index.js';
 import {colors} from './colors.js';
 import FlexRow from './FlexRow.js';
 import FlexBox from './FlexBox.js';
+import styled from '../styled/index.js';
 
 /**
  * A toolbar.
  */
-const Toolbar: StyledComponent<{
-  /**
-   * Position of the toolbar. Dictates the location of the border.
-   */
-  position?: 'top' | 'bottom',
-  compact?: boolean,
-}> = FlexRow.extends(
-  {
-    backgroundColor: colors.light02,
-    borderBottom: props =>
-      props.position === 'bottom'
-        ? 'none'
-        : `1px solid ${colors.sectionHeaderBorder}`,
-    borderTop: props =>
-      props.position === 'bottom'
-        ? `1px solid ${colors.sectionHeaderBorder}`
-        : 'none',
-    flexShrink: 0,
-    height: props => (props.compact ? 28 : 42),
-    lineHeight: '32px',
-    alignItems: 'center',
-    padding: 6,
-    width: '100%',
-  },
-  {
-    ignoreAttributes: ['position'],
-  },
-);
+const Toolbar = styled(FlexRow)(props => ({
+  backgroundColor: colors.light02,
+  borderBottom:
+    props.position === 'bottom'
+      ? 'none'
+      : `1px solid ${colors.sectionHeaderBorder}`,
+  borderTop:
+    props.position === 'bottom'
+      ? `1px solid ${colors.sectionHeaderBorder}`
+      : 'none',
+  flexShrink: 0,
+  height: props.compact ? 28 : 42,
+  lineHeight: '32px',
+  alignItems: 'center',
+  padding: 6,
+  width: '100%',
+}));
 
-export const Spacer = FlexBox.extends({
+export const Spacer = styled(FlexBox)({
   flexGrow: 1,
 });
 
diff --git a/src/ui/components/Tooltip.js b/src/ui/components/Tooltip.js
index d450bec9b..2442dba51 100644
--- a/src/ui/components/Tooltip.js
+++ b/src/ui/components/Tooltip.js
@@ -12,7 +12,7 @@ import {Component} from 'react';
 
 const PropTypes = require('prop-types');
 
-const TooltipContainer = styled.view({
+const TooltipContainer = styled('div')({
   display: 'contents',
 });
 
diff --git a/src/ui/components/TooltipProvider.js b/src/ui/components/TooltipProvider.js
index 1ed0256a3..bd7fc37ca 100644
--- a/src/ui/components/TooltipProvider.js
+++ b/src/ui/components/TooltipProvider.js
@@ -10,25 +10,20 @@ import {Component} from 'react';
 
 const PropTypes = require('prop-types');
 
-const TooltipBubble = styled.view(
-  {
-    backgroundColor: '#000',
-    lineHeight: '25px',
-    padding: '0 6px',
-    borderRadius: 4,
-    position: 'absolute',
-    width: 'auto',
-    top: props => props.top,
-    left: props => props.left,
-    zIndex: 99999999999,
-    pointerEvents: 'none',
-    color: '#fff',
-    marginTop: '-30px',
-  },
-  {
-    ignoreAttributes: ['top', 'left'],
-  },
-);
+const TooltipBubble = styled('div')(props => ({
+  backgroundColor: '#000',
+  lineHeight: '25px',
+  padding: '0 6px',
+  borderRadius: 4,
+  position: 'absolute',
+  width: 'auto',
+  top: props.top,
+  left: props.left,
+  zIndex: 99999999999,
+  pointerEvents: 'none',
+  color: '#fff',
+  marginTop: '-30px',
+}));
 
 type TooltipProps = {
   children: React$Node,
diff --git a/src/ui/components/VerticalRule.js b/src/ui/components/VerticalRule.js
index 695661da3..8ae62d143 100644
--- a/src/ui/components/VerticalRule.js
+++ b/src/ui/components/VerticalRule.js
@@ -7,7 +7,7 @@
 
 import styled from '../styled/index.js';
 
-export default styled.view({
+export default styled('div')({
   backgroundColor: '#c9ced4',
   width: 3,
   margin: '0',
diff --git a/src/ui/components/View.js b/src/ui/components/View.js
index 2b58a6d88..ee8e67b16 100644
--- a/src/ui/components/View.js
+++ b/src/ui/components/View.js
@@ -7,16 +7,11 @@
 
 import styled from '../styled/index.js';
 
-const View = styled.view(
-  {
-    height: props => (props.fill ? '100%' : 'auto'),
-    overflow: props => (props.scrollable ? 'auto' : 'visible'),
-    position: 'relative',
-    width: props => (props.fill ? '100%' : 'auto'),
-  },
-  {
-    ignoreAttributes: ['fill', 'scrollable'],
-  },
-);
+const View = styled('div')(props => ({
+  height: props.fill ? '100%' : 'auto',
+  overflow: props.scrollable ? 'auto' : 'visible',
+  position: 'relative',
+  width: props.fill ? '100%' : 'auto',
+}));
 
 export default View;
diff --git a/src/ui/components/VirtualList.js b/src/ui/components/VirtualList.js
index fe4c67d58..7723da35b 100644
--- a/src/ui/components/VirtualList.js
+++ b/src/ui/components/VirtualList.js
@@ -8,33 +8,24 @@
 import FlexColumn from './FlexColumn.js';
 import {Component} from 'react';
 import View from './View.js';
+import styled from '../styled/index.js';
 
-const Inner = FlexColumn.extends(
-  {
-    alignItems: 'flex-start',
-    height: props => props.height,
-    minHeight: '100%',
-    minWidth: '100%',
-    overflow: 'visible',
-    width: '100%',
-  },
-  {
-    ignoreAttributes: ['height'],
-  },
-);
+const Inner = styled(FlexColumn)(({height}) => ({
+  alignItems: 'flex-start',
+  height,
+  minHeight: '100%',
+  minWidth: '100%',
+  overflow: 'visible',
+  width: '100%',
+}));
 
-const Content = FlexColumn.extends(
-  {
-    alignItems: 'flex-start',
-    height: '100%',
-    marginTop: props => props.top,
-    minWidth: '100%',
-    overflow: 'visible',
-  },
-  {
-    ignoreAttributes: ['top'],
-  },
-);
+const Content = styled(FlexColumn)(({top}) => ({
+  alignItems: 'flex-start',
+  height: '100%',
+  marginTop: top,
+  minWidth: '100%',
+  overflow: 'visible',
+}));
 
 type VirtualListProps = {|
   data: Array<any>,
diff --git a/src/ui/components/console.js b/src/ui/components/console.js
index e068191ab..48f930911 100644
--- a/src/ui/components/console.js
+++ b/src/ui/components/console.js
@@ -15,6 +15,7 @@ import {
   Input,
   View,
 } from '../index';
+import styled from '../styled/index';
 import type {TableBodyRow, TableRows} from 'sonar';
 import type {PluginClient} from '../../plugin';
 
@@ -50,7 +51,7 @@ class ConsoleError extends Component<{
   error: Error | string | void,
   className?: string,
 }> {
-  static Container = CodeBlock.extends({
+  static Container = styled(CodeBlock)({
     backgroundColor: colors.redTint,
     color: colors.red,
     overflow: 'auto',
@@ -81,11 +82,11 @@ export class Console extends Component<Props, State> {
     },
   };
 
-  static Window = FlexColumn.extends({
+  static Window = styled(FlexColumn)({
     padding: '15px',
     flexGrow: 1,
   });
-  static Input = Input.extends({
+  static Input = styled(Input)({
     width: '100%',
   });
 
diff --git a/src/ui/components/data-inspector/DataDescription.js b/src/ui/components/data-inspector/DataDescription.js
index 290ca8977..90e35393b 100644
--- a/src/ui/components/data-inspector/DataDescription.js
+++ b/src/ui/components/data-inspector/DataDescription.js
@@ -14,55 +14,50 @@ import Popover from '../Popover.js';
 import {colors} from '../colors.js';
 import Input from '../Input.js';
 
-const NullValue = styled.text({
+const NullValue = styled('span')({
   color: 'rgb(128, 128, 128)',
 });
 
-const UndefinedValue = styled.text({
+const UndefinedValue = styled('span')({
   color: 'rgb(128, 128, 128)',
 });
 
-const StringValue = styled.text({
+const StringValue = styled('span')({
   color: colors.cherryDark1,
 });
 
-const ColorValue = styled.text({
+const ColorValue = styled('span')({
   color: colors.blueGrey,
 });
 
-const SymbolValue = styled.text({
+const SymbolValue = styled('span')({
   color: 'rgb(196, 26, 22)',
 });
 
-const NumberValue = styled.text({
+const NumberValue = styled('span')({
   color: colors.tealDark1,
 });
 
-const ColorBox = styled.text(
-  {
-    backgroundColor: props => props.color,
-    boxShadow: 'inset 0 0 1px rgba(0, 0, 0, 1)',
-    display: 'inline-block',
-    height: 12,
-    marginRight: 5,
-    verticalAlign: 'middle',
-    width: 12,
-  },
-  {
-    ignoreAttributes: ['color'],
-  },
-);
+const ColorBox = styled('span')(props => ({
+  backgroundColor: props.color,
+  boxShadow: 'inset 0 0 1px rgba(0, 0, 0, 1)',
+  display: 'inline-block',
+  height: 12,
+  marginRight: 5,
+  verticalAlign: 'middle',
+  width: 12,
+}));
 
-const FunctionKeyword = styled.text({
+const FunctionKeyword = styled('span')({
   color: 'rgb(170, 13, 145)',
   fontStyle: 'italic',
 });
 
-const FunctionName = styled.text({
+const FunctionName = styled('span')({
   fontStyle: 'italic',
 });
 
-const ColorPickerDescription = styled.view({
+const ColorPickerDescription = styled('div')({
   display: 'inline',
   position: 'relative',
 });
diff --git a/src/ui/components/data-inspector/DataInspector.js b/src/ui/components/data-inspector/DataInspector.js
index 144f94cf0..811d9a8a7 100644
--- a/src/ui/components/data-inspector/DataInspector.js
+++ b/src/ui/components/data-inspector/DataInspector.js
@@ -18,34 +18,29 @@ import {clipboard} from 'electron';
 
 const deepEqual = require('deep-equal');
 
-const BaseContainer = styled.view(
-  {
-    fontFamily: 'Menlo, monospace',
-    fontSize: 11,
-    lineHeight: '17px',
-    filter: props => (props.disabled ? 'grayscale(100%)' : ''),
-    margin: props => (props.depth === 0 ? '7.5px 0' : '0'),
-    paddingLeft: 10,
-    userSelect: 'text',
-  },
-  {
-    ignoreAttributes: ['depth', 'disabled'],
-  },
-);
+const BaseContainer = styled('div')(props => ({
+  fontFamily: 'Menlo, monospace',
+  fontSize: 11,
+  lineHeight: '17px',
+  filter: props.disabled ? 'grayscale(100%)' : '',
+  margin: props.depth === 0 ? '7.5px 0' : '0',
+  paddingLeft: 10,
+  userSelect: 'text',
+}));
 
-const RecursiveBaseWrapper = styled.text({
+const RecursiveBaseWrapper = styled('span')({
   color: colors.red,
 });
 
-const Wrapper = styled.text({
+const Wrapper = styled('span')({
   color: '#555',
 });
 
-const PropertyContainer = styled.text({
+const PropertyContainer = styled('span')({
   paddingTop: '2px',
 });
 
-const ExpandControl = styled.text({
+const ExpandControl = styled('span')({
   color: '#6e6e6e',
   fontSize: 10,
   marginLeft: -11,
@@ -53,7 +48,7 @@ const ExpandControl = styled.text({
   whiteSpace: 'pre',
 });
 
-export const InspectorName = styled.text({
+export const InspectorName = styled('span')({
   color: colors.grapeDark1,
 });
 
@@ -474,10 +469,10 @@ export default class DataInspector extends Component<DataInspectorProps> {
 
       const keys = getSortedKeys({...value, ...diffValue});
 
-      const Added = styled.view({
+      const Added = styled('div')({
         backgroundColor: colors.tealTint70,
       });
-      const Removed = styled.view({
+      const Removed = styled('div')({
         backgroundColor: colors.cherryTint70,
       });
 
diff --git a/src/ui/components/data-inspector/DataPreview.js b/src/ui/components/data-inspector/DataPreview.js
index e1249ffb7..f20919691 100755
--- a/src/ui/components/data-inspector/DataPreview.js
+++ b/src/ui/components/data-inspector/DataPreview.js
@@ -12,7 +12,7 @@ import styled from '../../styled/index.js';
 import {getSortedKeys} from './utils.js';
 import {PureComponent} from 'react';
 
-const PreviewContainer = styled.text({
+const PreviewContainer = styled('span')({
   fontStyle: 'italic',
 });
 
diff --git a/src/ui/components/desktop-toolbar.js b/src/ui/components/desktop-toolbar.js
index c634fc526..c02c18ba5 100644
--- a/src/ui/components/desktop-toolbar.js
+++ b/src/ui/components/desktop-toolbar.js
@@ -10,7 +10,7 @@ import {colors, darkColors} from './colors.js';
 
 const React = require('react');
 
-const DesktopDropdownContainer = styled.view({
+const DesktopDropdownContainer = styled('div')({
   borderBottom: `1px solid ${darkColors.dividers}`,
   lineHeight: '25px',
   marginTop: 5,
@@ -45,22 +45,15 @@ export function DesktopDropdown(props: {|
   );
 }
 
-const DesktopDropdownItemContainer = styled.view(
-  {
-    listStyle: 'none',
-    opacity: props => (props.onClick || props.onHover ? 1 : 0.5),
-    padding: '0 20px',
-
-    '&:hover': {
-      backgroundColor: props =>
-        props.onClick || props.onHover ? colors.highlight : '',
-      color: props => (props.onClick || props.onHover ? '#fff' : 'inherit'),
-    },
+const DesktopDropdownItemContainer = styled('div')(props => ({
+  listStyle: 'none',
+  opacity: props.onClick || props.onHover ? 1 : 0.5,
+  padding: '0 20px',
+  '&:hover': {
+    backgroundColor: props.onClick || props.onHover ? colors.highlight : '',
+    color: props.onClick || props.onHover ? '#fff' : 'inherit',
   },
-  {
-    ignoreAttributes: [],
-  },
-);
+}));
 
 type DesktopDropdownItemState = {|hovered: boolean|};
 
@@ -71,7 +64,7 @@ type DesktopDropdownItemProps = {
   deactivate?: () => void,
 };
 
-export class DesktopDropdownItem extends styled.StylableComponent<
+export class DesktopDropdownItem extends React.Component<
   DesktopDropdownItemProps,
   DesktopDropdownItemState,
 > {
@@ -121,7 +114,7 @@ export class DesktopDropdownItem extends styled.StylableComponent<
   }
 }
 
-export const DesktopDropdownSelectedItem = DesktopDropdownItem.extends({
+export const DesktopDropdownSelectedItem = styled(DesktopDropdownItem)({
   position: 'relative',
 
   '&::before': {
diff --git a/src/ui/components/elements-inspector/elements.js b/src/ui/components/elements-inspector/elements.js
index 07f4fa9cb..56876ca9f 100644
--- a/src/ui/components/elements-inspector/elements.js
+++ b/src/ui/components/elements-inspector/elements.js
@@ -25,54 +25,51 @@ import {FixedSizeList as List} from 'react-window';
 
 const ROW_HEIGHT = 23;
 
-const ElementsRowContainer = ContextMenu.extends(
-  {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: props => {
-      if (props.selected) {
-        return colors.macOSTitleBarIconSelected;
-      } else if (props.focused) {
-        return colors.lime;
-      } else if (props.even) {
-        return colors.light02;
-      } else {
-        return '';
-      }
-    },
-    color: props =>
-      props.selected || props.focused ? colors.white : colors.grapeDark3,
-    flexShrink: 0,
-    flexWrap: 'nowrap',
-    height: ROW_HEIGHT,
-    minWidth: '100%',
-    paddingLeft: props => (props.level - 1) * 12,
-    paddingRight: 20,
-    position: 'relative',
+const backgroundColor = props => {
+  if (props.selected) {
+    return colors.macOSTitleBarIconSelected;
+  } else if (props.focused) {
+    return colors.lime;
+  } else if (props.even) {
+    return colors.light02;
+  } else {
+    return '';
+  }
+};
 
-    '& *': {
-      color: props =>
-        props.selected || props.focused ? `${colors.white} !important` : '',
-    },
+const backgroundColorHover = props => {
+  if (props.selected) {
+    return colors.macOSTitleBarIconSelected;
+  } else if (props.focused) {
+    return colors.lime;
+  } else {
+    return '#EBF1FB';
+  }
+};
 
-    '&:hover': {
-      backgroundColor: props => {
-        if (props.selected) {
-          return colors.macOSTitleBarIconSelected;
-        } else if (props.focused) {
-          return colors.lime;
-        } else {
-          return '#EBF1FB';
-        }
-      },
-    },
+const ElementsRowContainer = styled(ContextMenu)(props => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  backgroundColor: backgroundColor(props),
+  color: props.selected || props.focused ? colors.white : colors.grapeDark3,
+  flexShrink: 0,
+  flexWrap: 'nowrap',
+  height: ROW_HEIGHT,
+  minWidth: '100%',
+  paddingLeft: (props.level - 1) * 12,
+  paddingRight: 20,
+  position: 'relative',
+
+  '& *': {
+    color: props.selected || props.focused ? `${colors.white} !important` : '',
   },
-  {
-    ignoreAttributes: ['level', 'selected', 'even', 'focused'],
-  },
-);
 
-const ElementsRowDecoration = FlexRow.extends({
+  '&:hover': {
+    backgroundColor: backgroundColorHover(props),
+  },
+}));
+
+const ElementsRowDecoration = styled(FlexRow)({
   flexShrink: 0,
   justifyContent: 'flex-end',
   alignItems: 'center',
@@ -82,29 +79,24 @@ const ElementsRowDecoration = FlexRow.extends({
   top: -1,
 });
 
-const ElementsLine = styled.view(
-  {
-    backgroundColor: colors.light20,
-    height: props => props.childrenCount * ROW_HEIGHT - 4,
-    position: 'absolute',
-    right: 3,
-    top: ROW_HEIGHT - 3,
-    zIndex: 2,
-    width: 2,
-    borderRadius: '999em',
-  },
-  {
-    ignoreAttributes: ['childrenCount'],
-  },
-);
+const ElementsLine = styled('div')(props => ({
+  backgroundColor: colors.light20,
+  height: props.childrenCount * ROW_HEIGHT - 4,
+  position: 'absolute',
+  right: 3,
+  top: ROW_HEIGHT - 3,
+  zIndex: 2,
+  width: 2,
+  borderRadius: '999em',
+}));
 
-const DecorationImage = styled.image({
+const DecorationImage = styled('img')({
   height: 12,
   marginRight: 5,
   width: 12,
 });
 
-const NoShrinkText = Text.extends({
+const NoShrinkText = styled(Text)({
   flexShrink: 0,
   flexWrap: 'nowrap',
   overflow: 'hidden',
@@ -112,17 +104,17 @@ const NoShrinkText = Text.extends({
   fontWeight: 400,
 });
 
-const ElementsRowAttributeContainer = NoShrinkText.extends({
+const ElementsRowAttributeContainer = styled(NoShrinkText)({
   color: colors.dark80,
   fontWeight: 300,
   marginLeft: 5,
 });
 
-const ElementsRowAttributeKey = styled.text({
+const ElementsRowAttributeKey = styled('span')({
   color: colors.tomato,
 });
 
-const ElementsRowAttributeValue = styled.text({
+const ElementsRowAttributeValue = styled('span')({
   color: colors.slateDark3,
 });
 
@@ -131,11 +123,10 @@ class PartialHighlight extends PureComponent<{
   highlighted: ?string,
   content: string,
 }> {
-  static HighlightedText = styled.text({
+  static HighlightedText = styled('span')(({selected}) => ({
     backgroundColor: '#ffff33',
-    color: props =>
-      props.selected ? `${colors.grapeDark3} !important` : 'auto',
-  });
+    color: selected ? `${colors.grapeDark3} !important` : 'auto',
+  }));
 
   render() {
     const {highlighted, content, selected} = this.props;
@@ -380,14 +371,14 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
   }
 }
 
-const ElementsContainer = FlexColumn.extends({
+const ElementsContainer = styled(FlexColumn)({
   backgroundColor: colors.white,
   minHeight: '100%',
   minWidth: '100%',
   overflow: 'auto',
 });
 
-const ElementsBox = FlexColumn.extends({
+const ElementsBox = styled(FlexColumn)({
   alignItems: 'flex-start',
   flex: 1,
   overflow: 'auto',
diff --git a/src/ui/components/filter/FilterRow.js b/src/ui/components/filter/FilterRow.js
index a276a6c0f..5fe280f86 100644
--- a/src/ui/components/filter/FilterRow.js
+++ b/src/ui/components/filter/FilterRow.js
@@ -12,36 +12,31 @@ import textContent from '../../../utils/textContent.js';
 import styled from '../../styled/index.js';
 import {colors} from '../colors.js';
 
-const FilterText = styled.view(
-  {
-    display: 'flex',
-    alignSelf: 'baseline',
-    userSelect: 'none',
-    cursor: 'pointer',
-    position: 'relative',
-    maxWidth: '100%',
-    '&:hover': {
-      color: colors.white,
-    },
-    '&:hover::after': {
-      content: '""',
-      position: 'absolute',
-      top: 3,
-      bottom: -2,
-      left: -6,
-      right: -6,
-      borderRadius: '999em',
-      backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    },
-    '&:hover *': {
-      color: `${colors.white} !important`,
-      zIndex: 2,
-    },
+const FilterText = styled('div')({
+  display: 'flex',
+  alignSelf: 'baseline',
+  userSelect: 'none',
+  cursor: 'pointer',
+  position: 'relative',
+  maxWidth: '100%',
+  '&:hover': {
+    color: colors.white,
   },
-  {
-    ignoreAttributes: ['filterKey', 'addFilter'],
+  '&:hover::after': {
+    content: '""',
+    position: 'absolute',
+    top: 3,
+    bottom: -2,
+    left: -6,
+    right: -6,
+    borderRadius: '999em',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
   },
-);
+  '&:hover *': {
+    color: `${colors.white} !important`,
+    zIndex: 2,
+  },
+});
 
 type Props = {
   children: React.Node,
diff --git a/src/ui/components/intro/intro.js b/src/ui/components/intro/intro.js
index a401ff17d..aa7dfecb3 100644
--- a/src/ui/components/intro/intro.js
+++ b/src/ui/components/intro/intro.js
@@ -18,7 +18,7 @@ import {
   PureComponent,
 } from 'sonar';
 
-const Containter = FlexColumn.extends({
+const Containter = styled(FlexColumn)({
   fontSize: 17,
   justifyContent: 'center',
   marginLeft: 60,
@@ -30,12 +30,12 @@ const Containter = FlexColumn.extends({
   minWidth: 450,
 });
 
-const TitleRow = FlexRow.extends({
+const TitleRow = styled(FlexRow)({
   alignItems: 'center',
   marginBottom: 40,
 });
 
-const Icon = FlexBox.extends({
+const Icon = styled(FlexBox)({
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: brandColors.Sonar,
@@ -45,13 +45,13 @@ const Icon = FlexBox.extends({
   borderRadius: 6,
 });
 
-const Title = Text.extends({
+const Title = styled(Text)({
   fontSize: 30,
   fontWeight: 300,
   paddingLeft: 10,
 });
 
-const Button = View.extends({
+const Button = styled(View)({
   marginTop: 40,
   marginBottom: 30,
   borderRadius: 6,
@@ -64,7 +64,7 @@ const Button = View.extends({
   alignSelf: 'flex-start',
 });
 
-const Screenshot = styled.customHTMLTag('img', {
+const Screenshot = styled('img')({
   alignSelf: 'center',
   boxShadow: '0 5px 35px rgba(0,0,0,0.3)',
   borderRadius: 5,
diff --git a/src/ui/components/searchable/FilterToken.js b/src/ui/components/searchable/FilterToken.js
index 9d61a286c..2f308892a 100644
--- a/src/ui/components/searchable/FilterToken.js
+++ b/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,
diff --git a/src/ui/components/searchable/Searchable.js b/src/ui/components/searchable/Searchable.js
index c18d132e3..239b18ab7 100644
--- a/src/ui/components/searchable/Searchable.js
+++ b/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,
 });
diff --git a/src/ui/components/table/ManagedTable.js b/src/ui/components/table/ManagedTable.js
index bc3e55403..2128c7b69 100644
--- a/src/ui/components/table/ManagedTable.js
+++ b/src/ui/components/table/ManagedTable.js
@@ -117,13 +117,11 @@ type ManagedTableState = {|
   shouldScrollToBottom: boolean,
 |};
 
-/**
- * Wrapper around `Table` that handles row state.
- *
- * If you require lower level access to the state then use [`<Table>`]()
- * directly.
- */
-class ManagedTable extends styled.StylableComponent<
+const Container = styled(FlexColumn)({
+  flexGrow: 1,
+});
+
+class ManagedTable extends React.Component<
   ManagedTableProps,
   ManagedTableState,
 > {
@@ -446,7 +444,7 @@ class ManagedTable extends styled.StylableComponent<
       .filter(Boolean);
 
     return (
-      <FlexColumn style={{flexGrow: 1}}>
+      <Container>
         <TableHead
           columnOrder={columnOrder}
           onColumnOrder={this.onColumnOrder}
@@ -456,10 +454,7 @@ class ManagedTable extends styled.StylableComponent<
           columnSizes={columnSizes}
           onSort={this.onSort}
         />
-        <FlexColumn
-          style={{
-            flexGrow: 1,
-          }}>
+        <Container>
           <AutoSizer>
             {({width, height}) => (
               <ContextMenu buildItems={this.buildContextMenuItems}>
@@ -500,8 +495,8 @@ class ManagedTable extends styled.StylableComponent<
               </ContextMenu>
             )}
           </AutoSizer>
-        </FlexColumn>
-      </FlexColumn>
+        </Container>
+      </Container>
     );
   }
 }
diff --git a/src/ui/components/table/TableHead.js b/src/ui/components/table/TableHead.js
index e8bebf408..5bd6a3e27 100644
--- a/src/ui/components/table/TableHead.js
+++ b/src/ui/components/table/TableHead.js
@@ -27,11 +27,11 @@ const invariant = require('invariant');
 
 type MenuTemplate = Array<Electron$MenuItemOptions>;
 
-const TableHeaderArrow = styled.text({
+const TableHeaderArrow = styled('span')({
   float: 'right',
 });
 
-const TableHeaderColumnInteractive = Interactive.extends({
+const TableHeaderColumnInteractive = styled(Interactive)({
   display: 'inline-block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -39,11 +39,11 @@ const TableHeaderColumnInteractive = Interactive.extends({
   width: '100%',
 });
 
-const TableHeaderColumnContainer = styled.view({
+const TableHeaderColumnContainer = styled('div')({
   padding: '0 8px',
 });
 
-const TableHeadContainer = FlexRow.extends({
+const TableHeadContainer = styled(FlexRow)({
   borderBottom: `1px solid ${colors.sectionHeaderBorder}`,
   color: colors.light50,
   flexShrink: 0,
@@ -56,33 +56,28 @@ const TableHeadContainer = FlexRow.extends({
   zIndex: 2,
 });
 
-const TableHeadColumnContainer = styled.view(
-  {
-    position: 'relative',
-    backgroundColor: colors.white,
-    flexShrink: props => (props.width === 'flex' ? 1 : 0),
-    height: 23,
-    lineHeight: '23px',
-    fontSize: '0.85em',
-    fontWeight: 500,
-    width: props => (props.width === 'flex' ? '100%' : props.width),
-    '&::after': {
-      position: 'absolute',
-      content: '""',
-      right: 0,
-      top: 5,
-      height: 13,
-      width: 1,
-      background: colors.light15,
-    },
-    '&:last-child::after': {
-      display: 'none',
-    },
+const TableHeadColumnContainer = styled('div')(props => ({
+  position: 'relative',
+  backgroundColor: colors.white,
+  flexShrink: props.width === 'flex' ? 1 : 0,
+  height: 23,
+  lineHeight: '23px',
+  fontSize: '0.85em',
+  fontWeight: 500,
+  width: props.width === 'flex' ? '100%' : props.width,
+  '&::after': {
+    position: 'absolute',
+    content: '""',
+    right: 0,
+    top: 5,
+    height: 13,
+    width: 1,
+    background: colors.light15,
   },
-  {
-    ignoreAttributes: ['width'],
+  '&:last-child::after': {
+    display: 'none',
   },
-);
+}));
 
 const RIGHT_RESIZABLE = {right: true};
 
diff --git a/src/ui/components/table/TableRow.js b/src/ui/components/table/TableRow.js
index 3bdb74c72..892f10427 100644
--- a/src/ui/components/table/TableRow.js
+++ b/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,
diff --git a/src/ui/index.js b/src/ui/index.js
index 68b53369b..4b2c50fa6 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -4,9 +4,7 @@
  * LICENSE file in the root directory of this source tree.
  * @format
  */
-export type {StyledComponent} from './styled/index.js';
 
-//
 export {default as Button} from './components/Button.js';
 export {default as ToggleButton} from './components/ToggleSwitch.js';
 export {
@@ -26,10 +24,6 @@ export {default as LoadingIndicator} from './components/LoadingIndicator.js';
 //
 export {default as Popover} from './components/Popover.js';
 
-//
-export {default as ClickableList} from './components/ClickableList.js';
-export {default as ClickableListItem} from './components/ClickableListItem.js';
-
 //
 export type {
   TableColumns,
diff --git a/src/ui/styled/__tests__/gc.node.js b/src/ui/styled/__tests__/gc.node.js
deleted file mode 100644
index c7e2dd012..000000000
--- a/src/ui/styled/__tests__/gc.node.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import type {Tracker} from '../index.js';
-import {GarbageCollector} from '../gc.js';
-import {StyleSheet} from '../sheet.js';
-
-function createGC(): {|
-  gc: GarbageCollector,
-  tracker: Tracker,
-|} {
-  const sheet = new StyleSheet();
-  const tracker = new Map();
-  const rulesToClass = new WeakMap();
-
-  const gc = new GarbageCollector(sheet, tracker, rulesToClass);
-  return {gc, tracker};
-}
-
-test('register classes to be garbage collected when no references exist', () => {
-  const {gc} = createGC();
-
-  gc.registerClassUse('foo');
-  expect(gc.getCollectionQueue()).toEqual([]);
-
-  gc.deregisterClassUse('foo');
-  expect(gc.getCollectionQueue()).toEqual(['foo']);
-});
-
-test('cancel garbage collection for classes used before actual collection happens', () => {
-  const {gc} = createGC();
-
-  gc.registerClassUse('foo');
-  expect(gc.getCollectionQueue()).toEqual([]);
-
-  gc.deregisterClassUse('foo');
-  expect(gc.getCollectionQueue()).toEqual(['foo']);
-
-  gc.registerClassUse('foo');
-  expect(gc.getCollectionQueue()).toEqual([]);
-});
-
-test('garbage collector removes unreferenced classes', () => {
-  const {gc, tracker} = createGC();
-
-  tracker.set('foo', {
-    displayName: 'foo',
-    namespace: '',
-    selector: '',
-    style: {},
-    rules: {},
-  });
-
-  gc.registerClassUse('foo');
-  expect(gc.getCollectionQueue()).toEqual([]);
-
-  gc.deregisterClassUse('foo');
-  expect(gc.getCollectionQueue()).toEqual(['foo']);
-  expect(gc.hasQueuedCollection()).toBe(true);
-  expect(tracker.has('foo')).toBe(true);
-
-  gc.collectGarbage();
-  expect(gc.hasQueuedCollection()).toBe(false);
-  expect(gc.getCollectionQueue()).toEqual([]);
-  expect(tracker.has('foo')).toBe(false);
-});
-
-test('properly tracks reference counts', () => {
-  const {gc} = createGC();
-
-  gc.registerClassUse('foo');
-  gc.registerClassUse('foo');
-  gc.registerClassUse('bar');
-  expect(gc.getReferenceCount('foo')).toBe(2);
-  expect(gc.getReferenceCount('bar')).toBe(1);
-
-  gc.deregisterClassUse('bar');
-  expect(gc.getReferenceCount('bar')).toBe(0);
-
-  gc.deregisterClassUse('foo');
-  expect(gc.getReferenceCount('foo')).toBe(1);
-
-  gc.deregisterClassUse('foo');
-  expect(gc.getReferenceCount('foo')).toBe(0);
-});
-
-test("gracefully handle deregistering classes we don't have a count for", () => {
-  const {gc} = createGC();
-  gc.deregisterClassUse('not-tracking');
-});
-
-test('only halt garbage collection if there is nothing left in the queue', () => {
-  const {gc} = createGC();
-
-  gc.registerClassUse('foo');
-  expect(gc.hasQueuedCollection()).toBe(false);
-
-  gc.deregisterClassUse('foo');
-  expect(gc.hasQueuedCollection()).toBe(true);
-
-  gc.registerClassUse('bar');
-  expect(gc.hasQueuedCollection()).toBe(true);
-
-  gc.deregisterClassUse('bar');
-  expect(gc.hasQueuedCollection()).toBe(true);
-
-  gc.registerClassUse('bar');
-  expect(gc.hasQueuedCollection()).toBe(true);
-
-  gc.registerClassUse('foo');
-  expect(gc.hasQueuedCollection()).toBe(false);
-});
-
-test('ensure garbage collection happens', () => {
-  const {gc} = createGC();
-
-  gc.registerClassUse('foo');
-  gc.deregisterClassUse('foo');
-  expect(gc.hasQueuedCollection()).toBe(true);
-  expect(gc.getCollectionQueue()).toEqual(['foo']);
-
-  jest.runAllTimers();
-  expect(gc.hasQueuedCollection()).toBe(false);
-  expect(gc.getCollectionQueue()).toEqual([]);
-});
-
-test('flush', () => {
-  const {gc} = createGC();
-
-  gc.registerClassUse('bar');
-  gc.deregisterClassUse('bar');
-  expect(gc.getCollectionQueue()).toEqual(['bar']);
-  expect(gc.getReferenceCount('bar')).toBe(0);
-
-  gc.registerClassUse('foo');
-  expect(gc.getReferenceCount('foo')).toBe(1);
-
-  gc.flush();
-  expect(gc.getCollectionQueue()).toEqual([]);
-  expect(gc.getReferenceCount('foo')).toBe(0);
-});
diff --git a/src/ui/styled/__tests__/hash.node.js b/src/ui/styled/__tests__/hash.node.js
deleted file mode 100644
index c125b3c27..000000000
--- a/src/ui/styled/__tests__/hash.node.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import hash from '../hash.js';
-
-test('hash', () => {
-  expect(hash('f')).toBe('1xwd1rk');
-  expect(hash('foobar')).toBe('slolri');
-  expect(hash('foobar2')).toBe('34u6r4');
-});
diff --git a/src/ui/styled/__tests__/index.node.js b/src/ui/styled/__tests__/index.node.js
deleted file mode 100644
index 64fbde5ca..000000000
--- a/src/ui/styled/__tests__/index.node.js
+++ /dev/null
@@ -1,387 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import styled, {buildKeyframes, flush, gc, tracker} from '../index.js';
-
-const ReactTestRenderer = require('react-test-renderer');
-const invariant = require('invariant');
-const React = require('react'); // eslint-disable-line
-
-const BasicComponent = styled.view({
-  color: 'red',
-});
-
-const DynamicComponent = styled.view({
-  color: props => props.color,
-});
-
-test('can create a basic component without any errors', () => {
-  let component;
-
-  try {
-    component = ReactTestRenderer.create(<BasicComponent />);
-    component.toJSON();
-    component.unmount();
-    gc.flush();
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('can create a basic component and garbage collect', () => {
-  let component;
-
-  try {
-    component = ReactTestRenderer.create(<BasicComponent />);
-    const tree = component.toJSON();
-
-    expect(tree.type).toBe('div');
-
-    const className = tree.props.className;
-    expect(gc.hasQueuedCollection()).toBe(false);
-    expect(gc.getReferenceCount(className)).toBe(1);
-
-    component.unmount();
-    expect(gc.getReferenceCount(className)).toBe(0);
-    expect(gc.hasQueuedCollection()).toBe(true);
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('remove outdated classes when updating component', () => {
-  let component;
-
-  try {
-    component = ReactTestRenderer.create(<DynamicComponent color="red" />);
-    const tree = component.toJSON();
-
-    const className = tree.props.className;
-    expect(gc.hasQueuedCollection()).toBe(false);
-    expect(gc.getReferenceCount(className)).toBe(1);
-
-    // updating with the same props should generate the same style and not trigger a collection
-    component.update(<DynamicComponent color="red" />);
-    expect(gc.hasQueuedCollection()).toBe(false);
-    expect(gc.getReferenceCount(className)).toBe(1);
-
-    // change style
-    component.update(<DynamicComponent color="blue" />);
-    expect(gc.hasQueuedCollection()).toBe(true);
-    expect(gc.getReferenceCount(className)).toBe(0);
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('extra class names should be preserved', () => {
-  let component;
-
-  try {
-    component = ReactTestRenderer.create(<BasicComponent className="foo" />);
-    const tree = component.toJSON();
-    expect(tree.props.className.split(' ').includes('foo')).toBe(true);
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('should inherit component when passed as first arg to styled', () => {
-  let component;
-
-  try {
-    const InheritComponent = BasicComponent.extends({
-      backgroundColor: 'black',
-    });
-
-    component = ReactTestRenderer.create(<InheritComponent />);
-    const tree = component.toJSON();
-
-    const rules = tracker.get(tree.props.className);
-    invariant(rules, 'expected rules');
-    expect(rules.style).toEqual({
-      'background-color': 'black',
-      color: 'red',
-    });
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('when passed class name of another styled component its rules should be inherited', () => {
-  let component;
-
-  try {
-    class BaseComponent extends styled.StylableComponent<{
-      className: string,
-    }> {
-      render() {
-        return <BasicComponent className={this.props.className} />;
-      }
-    }
-
-    const InheritComponent = BaseComponent.extends({
-      backgroundColor: 'black',
-    });
-
-    component = ReactTestRenderer.create(<InheritComponent />);
-    const tree = component.toJSON();
-
-    const rules = tracker.get(tree.props.className);
-    invariant(rules, 'expected rules');
-    expect(rules.style).toEqual({
-      'background-color': 'black',
-      color: 'red',
-    });
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('supports pseudo selectors', () => {
-  let component;
-
-  try {
-    const Component = styled.view({
-      '&:hover': {
-        color: 'red',
-      },
-    });
-
-    component = ReactTestRenderer.create(<Component />);
-    const tree = component.toJSON();
-
-    const rules = tracker.get(tree.props.className);
-    invariant(rules, 'expected rules');
-    expect(rules.style).toEqual({
-      color: 'red',
-    });
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('supports multiple pseudo selectors', () => {
-  let component;
-
-  try {
-    const Component = styled.view({
-      '&:active': {
-        color: 'blue',
-      },
-
-      '&:hover': {
-        color: 'red',
-      },
-    });
-
-    component = ReactTestRenderer.create(<Component />);
-    const tree = component.toJSON();
-
-    const classes = tree.props.className.split(' ');
-    expect(classes.length).toBe(2);
-
-    const hoverRules = tracker.get(classes[1]);
-    invariant(hoverRules, 'expected hoverRules');
-    expect(hoverRules.style).toEqual({
-      color: 'red',
-    });
-    expect(hoverRules.namespace).toBe('&:hover');
-    expect(hoverRules.selector.endsWith(':hover')).toBe(true);
-
-    const activeRules = tracker.get(classes[0]);
-    invariant(activeRules, 'expected activeRules');
-    expect(activeRules.style).toEqual({
-      color: 'blue',
-    });
-    expect(activeRules.namespace).toBe('&:active');
-    expect(activeRules.selector.endsWith(':active')).toBe(true);
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('supports child selectors', () => {
-  let component;
-
-  try {
-    const Component = styled.view({
-      '> li': {
-        color: 'red',
-      },
-    });
-
-    component = ReactTestRenderer.create(<Component />);
-    const tree = component.toJSON();
-
-    const classes = tree.props.className.split(' ');
-    expect(classes.length).toBe(1);
-
-    const rules = tracker.get(classes[0]);
-    invariant(rules, 'expected rules');
-
-    expect(rules.style).toEqual({
-      color: 'red',
-    });
-    expect(rules.namespace).toBe('> li');
-    expect(rules.selector.endsWith(' > li')).toBe(true);
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('flush', () => {
-  flush();
-});
-
-test('innerRef works on styled components', () => {
-  let component;
-
-  try {
-    const Component = styled.view({});
-
-    let called = false;
-    const innerRef = ref => {
-      called = true;
-    };
-    ReactTestRenderer.create(<Component innerRef={innerRef} />);
-    expect(called).toBe(true);
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-
-test('ignoreAttributes', () => {
-  let component;
-
-  try {
-    const Component = styled.view(
-      {
-        color: props => props.color,
-      },
-      {
-        ignoreAttributes: ['color'],
-      },
-    );
-
-    component = ReactTestRenderer.create(<Component color="red" />);
-    const tree = component.toJSON();
-
-    expect(tree.props.color).toBe(undefined);
-
-    const rules = tracker.get(tree.props.className);
-    invariant(rules, 'expected rules');
-    expect(rules.style).toEqual({
-      color: 'red',
-    });
-  } finally {
-    if (component) {
-      component.unmount();
-    }
-    gc.flush();
-  }
-});
-test('buildKeyframes', () => {
-  const css = buildKeyframes({
-    '0%': {
-      opacity: 0,
-    },
-
-    '50%': {
-      height: 50,
-      opacity: 0.8,
-    },
-
-    '100%': {
-      opacity: 1,
-    },
-  });
-
-  expect(css).toBe(
-    [
-      '  0% {',
-      '    opacity: 0;',
-      '  }',
-      '  50% {',
-      '    height: 50px;',
-      '    opacity: 0.8;',
-      '  }',
-      '  100% {',
-      '    opacity: 1;',
-      '  }',
-    ].join('\n'),
-  );
-});
-
-test('keyframes', () => {
-  const className = styled.keyframes({
-    '0%': {
-      opacity: 0,
-    },
-
-    '50%': {
-      opacity: 0.8,
-    },
-
-    '100%': {
-      opacity: 1,
-    },
-  });
-  expect(typeof className).toBe('string');
-});
-
-test('buildKeyframes only accepts string property values', () => {
-  expect(() => {
-    buildKeyframes({
-      // $FlowFixMe: ignore
-      '0%': {
-        fn: () => {},
-      },
-    });
-  }).toThrow('Keyframe objects must only have strings values');
-});
-
-test('buildKeyframes only accepts object specs', () => {
-  expect(() => {
-    buildKeyframes({
-      // $FlowFixMe: ignore
-      '0%': () => {
-        return '';
-      },
-    });
-  }).toThrow('Keyframe spec must only have objects');
-});
diff --git a/src/ui/styled/__tests__/rules.node.js b/src/ui/styled/__tests__/rules.node.js
deleted file mode 100644
index efb2f01ac..000000000
--- a/src/ui/styled/__tests__/rules.node.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import {buildRules, normaliseRules} from '../rules.js';
-
-describe('normaliseRules', () => {
-  test('ensure top level values are expanded', () => {
-    const normalisedRules = normaliseRules({height: '4px'});
-    expect(normalisedRules['&'].height).toBe('4px');
-  });
-
-  test('ensure keys are dashed', () => {
-    const normalisedRules = normaliseRules({
-      // $FlowFixMe: ignore
-      '&:hover': {
-        lineHeight: '4px',
-        WebkitAppRegion: 'drag',
-      },
-    });
-    const hoverRules = normalisedRules['&:hover'];
-    expect(Object.keys(hoverRules).length).toBe(2);
-    expect(hoverRules['line-height']).toBe('4px');
-    expect(hoverRules['-webkit-app-region']).toBe('drag');
-  });
-
-  test('exclude empty objects', () => {
-    const normalisedRules = normaliseRules({
-      '&:hover': {},
-    });
-
-    expect(normalisedRules['&:hover']).toBe(undefined);
-  });
-});
-
-describe('buildRules', () => {
-  test('ensure null values are left out', () => {
-    const builtRules = buildRules({height: (null: any)}, {}, {});
-    expect('height' in builtRules).toBe(false);
-
-    const builtRules2 = buildRules(
-      {
-        height() {
-          return (null: any);
-        },
-      },
-      {},
-      {},
-    );
-    expect('height' in builtRules2).toBe(false);
-  });
-
-  test('ensure numbers are appended with px', () => {
-    expect(buildRules({height: 40}, {}, {}).height).toBe('40px');
-  });
-
-  test("ensure unitless numbers aren't appended with px", () => {
-    expect(buildRules({'z-index': 4}, {}, {})['z-index']).toBe('4');
-  });
-
-  test('ensure functions are called with props', () => {
-    const thisProps = {};
-    expect(
-      buildRules(
-        {
-          border: props => (props === thisProps ? 'foo' : 'bar'),
-        },
-        thisProps,
-        {},
-      ).border,
-    ).toBe('foo');
-  });
-});
diff --git a/src/ui/styled/__tests__/sheet.node.js b/src/ui/styled/__tests__/sheet.node.js
deleted file mode 100644
index 2d1ee45be..000000000
--- a/src/ui/styled/__tests__/sheet.node.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import {StyleSheet} from '../sheet.js';
-
-describe('flush', () => {
-  test('should remove all rules', () => {
-    const sheet = new StyleSheet();
-    expect(sheet.getRuleCount()).toBe(0);
-
-    sheet.insert('foo', 'div {color: red;}');
-    expect(sheet.getRuleCount()).toBe(1);
-
-    sheet.flush();
-    expect(sheet.getRuleCount()).toBe(0);
-  });
-});
-
-describe('inject', () => {
-  test("throw's an error when already injected", () => {
-    const sheet = new StyleSheet();
-
-    expect(() => {
-      sheet.inject();
-      sheet.inject();
-    }).toThrow('already injected stylesheet!');
-  });
-});
-
-describe('insert', () => {
-  test('non-speedy', () => {
-    const sheet = new StyleSheet();
-
-    expect(sheet.getRuleCount()).toBe(0);
-    sheet.insert('foo', 'div {color: red;}');
-    expect(sheet.getRuleCount()).toBe(1);
-  });
-
-  test('speedy', () => {
-    const sheet = new StyleSheet(true);
-
-    expect(sheet.getRuleCount()).toBe(0);
-    sheet.insert('foo', 'div {color: red;}');
-    expect(sheet.getRuleCount()).toBe(1);
-  });
-});
-
-describe('delete', () => {
-  test('non-speedy', () => {
-    const sheet = new StyleSheet();
-
-    expect(sheet.getRuleCount()).toBe(0);
-    sheet.insert('foo', 'div {color: red;}');
-    expect(sheet.getRuleCount()).toBe(1);
-
-    sheet.delete('foo');
-    expect(sheet.getRuleCount()).toBe(0);
-  });
-
-  test('speedy', () => {
-    const sheet = new StyleSheet(true);
-
-    expect(sheet.getRuleCount()).toBe(0);
-    sheet.insert('foo', 'div {color: red;}');
-    expect(sheet.getRuleCount()).toBe(1);
-
-    sheet.delete('foo');
-    expect(sheet.getRuleCount()).toBe(0);
-  });
-});
diff --git a/src/ui/styled/gc.js b/src/ui/styled/gc.js
deleted file mode 100644
index 03de99377..000000000
--- a/src/ui/styled/gc.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import type {Tracker, RulesToClass} from './index.js';
-import type {StyleSheet} from './sheet.js';
-
-const invariant = require('invariant');
-
-export class GarbageCollector {
-  constructor(sheet: StyleSheet, tracker: Tracker, rulesToClass: RulesToClass) {
-    this.sheet = sheet;
-    this.tracker = tracker;
-
-    // used to keep track of what classes are actively in use
-    this.usedClasses = new Map();
-
-    // classes to be removed, we put this in a queue and perform it in bulk rather than straight away
-    // since by the time the next tick happens this style could have been reinserted
-    this.classRemovalQueue = new Set();
-
-    this.rulesToClass = rulesToClass;
-  }
-
-  tracker: Tracker;
-  sheet: StyleSheet;
-  usedClasses: Map<string, number>;
-  garbageTimer: ?TimeoutID;
-  classRemovalQueue: Set<string>;
-  rulesToClass: RulesToClass;
-
-  hasQueuedCollection(): boolean {
-    return Boolean(this.garbageTimer);
-  }
-
-  getReferenceCount(key: string): number {
-    return this.usedClasses.get(key) || 0;
-  }
-
-  // component has been mounted so make sure it's being depended on
-  registerClassUse(name: string) {
-    const count = this.usedClasses.get(name) || 0;
-    this.usedClasses.set(name, count + 1);
-    if (this.classRemovalQueue.has(name)) {
-      this.classRemovalQueue.delete(name);
-
-      if (this.classRemovalQueue.size === 0) {
-        this.haltGarbage();
-      }
-    }
-  }
-
-  // component has been unmounted so remove its dependencies
-  deregisterClassUse(name: string) {
-    let count = this.usedClasses.get(name);
-    if (count == null) {
-      return;
-    }
-
-    count--;
-    this.usedClasses.set(name, count);
-
-    if (count === 0) {
-      this.classRemovalQueue.add(name);
-      this.scheduleGarbage();
-    }
-  }
-
-  scheduleGarbage() {
-    if (this.garbageTimer != null) {
-      return;
-    }
-
-    this.garbageTimer = setTimeout(() => {
-      this.collectGarbage();
-    }, 2000);
-  }
-
-  haltGarbage() {
-    if (this.garbageTimer) {
-      clearTimeout(this.garbageTimer);
-      this.garbageTimer = null;
-    }
-  }
-
-  getCollectionQueue(): Array<string> {
-    return Array.from(this.classRemovalQueue);
-  }
-
-  collectGarbage() {
-    this.haltGarbage();
-    for (const name of this.classRemovalQueue) {
-      const trackerInfo = this.tracker.get(name);
-      invariant(trackerInfo != null, 'trying to remove unknown class');
-
-      const {rules} = trackerInfo;
-      this.rulesToClass.delete(rules);
-
-      this.sheet.delete(name);
-      this.tracker.delete(name);
-      this.usedClasses.delete(name);
-    }
-    this.classRemovalQueue.clear();
-  }
-
-  flush() {
-    this.haltGarbage();
-    this.classRemovalQueue.clear();
-    this.usedClasses.clear();
-  }
-}
diff --git a/src/ui/styled/hash.js b/src/ui/styled/hash.js
deleted file mode 100644
index 52ccf2d9b..000000000
--- a/src/ui/styled/hash.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-export default function hash(str: string): string {
-  const m = 0x5bd1e995;
-  const r = 24;
-  let h = str.length;
-  let length = str.length;
-  let currentIndex = 0;
-
-  while (length >= 4) {
-    let k = UInt32(str, currentIndex);
-
-    k = Umul32(k, m);
-    k ^= k >>> r;
-    k = Umul32(k, m);
-
-    h = Umul32(h, m);
-    h ^= k;
-
-    currentIndex += 4;
-    length -= 4;
-  }
-
-  switch (length) {
-    case 3:
-      h ^= UInt16(str, currentIndex);
-      h ^= str.charCodeAt(currentIndex + 2) << 16;
-      h = Umul32(h, m);
-      break;
-
-    case 2:
-      h ^= UInt16(str, currentIndex);
-      h = Umul32(h, m);
-      break;
-
-    case 1:
-      h ^= str.charCodeAt(currentIndex);
-      h = Umul32(h, m);
-      break;
-  }
-
-  h ^= h >>> 13;
-  h = Umul32(h, m);
-  h ^= h >>> 15;
-
-  return (h >>> 0).toString(36);
-}
-
-function UInt32(str: string, pos: number): number {
-  return (
-    str.charCodeAt(pos++) +
-    (str.charCodeAt(pos++) << 8) +
-    (str.charCodeAt(pos++) << 16) +
-    (str.charCodeAt(pos) << 24)
-  );
-}
-
-function UInt16(str: string, pos: number): number {
-  return str.charCodeAt(pos++) + (str.charCodeAt(pos++) << 8);
-}
-
-function Umul32(n: number, m: number): number {
-  n |= 0;
-  m |= 0;
-  const nlo = n & 0xffff;
-  const nhi = n >>> 16;
-  const res = (nlo * m + (((nhi * m) & 0xffff) << 16)) | 0;
-  return res;
-}
diff --git a/src/ui/styled/index.js b/src/ui/styled/index.js
index dba7e98ac..58a1bafc7 100644
--- a/src/ui/styled/index.js
+++ b/src/ui/styled/index.js
@@ -5,436 +5,5 @@
  * @format
  */
 
-import type {BaseRules, KeyframeRules, RawRules} from './rules.js';
-import {buildKeyframeRules, buildRules, normaliseRules} from './rules.js';
-import assignDeep from '../../utils/assignDeep.js';
-import * as performance from '../../utils/performance.js';
-import {GarbageCollector} from './gc.js';
-import {StyleSheet} from './sheet.js';
-import hash from './hash.js';
-
-const React = require('react');
-
-export type Tracker = Map<
-  string,
-  {
-    displayName: ?string,
-    namespace: string,
-    rules: BaseRules,
-    selector: string,
-    style: Object,
-  },
->;
-
-export type RulesToClass = WeakMap<BaseRules, string>;
-
-// map of inserted classes and metadata about them
-export const tracker: Tracker = new Map();
-
-// map of rules to their class
-const rulesToClass: RulesToClass = new WeakMap();
-
-export const sheet = new StyleSheet(process.env.NODE_ENV === 'production');
-export const gc = new GarbageCollector(sheet, tracker, rulesToClass);
-
-function addRules(
-  displayName: string,
-  rules: BaseRules,
-  namespace,
-  props: Object,
-  context: Object,
-) {
-  // if these rules have been cached to a className then retrieve it
-  const cachedClass = rulesToClass.get(rules);
-  if (cachedClass != null) {
-    return cachedClass;
-  }
-
-  //
-  const declarations = [];
-  const style = buildRules(rules, props, context);
-
-  // generate css declarations based on the style object
-  for (const key in style) {
-    const val = style[key];
-    declarations.push(`  ${key}: ${val};`);
-  }
-  const css = declarations.join('\n');
-
-  // build the class name with the display name of the styled component and a unique id based on the css and namespace
-  const className = displayName + '__' + hash(namespace + css);
-
-  // this is the first time we've found this className
-  if (!tracker.has(className)) {
-    // build up the correct selector, explode on commas to allow multiple selectors
-    const selector = namespace
-      .split(', ')
-      .map(part => {
-        if (part[0] === '&') {
-          return '.' + className + part.slice(1);
-        } else {
-          return '.' + className + ' ' + part;
-        }
-      })
-      .join(', ');
-
-    // insert the new style text
-    tracker.set(className, {displayName, namespace, rules, selector, style});
-    sheet.insert(className, `${selector} {\n${css}\n}`);
-
-    // if there's no dynamic rules then cache this
-    if (hasDynamicRules(rules) === false) {
-      rulesToClass.set(rules, className);
-    }
-  }
-
-  return className;
-}
-
-// remove all styhles
-export function flush() {
-  gc.flush();
-  tracker.clear();
-  sheet.flush();
-}
-
-export type TagName = string | Function;
-
-type StyledComponentState = {|
-  extraClassNames: Array<string>,
-  classNames: Array<string>,
-  lastBuiltRules: ?Object,
-  lastBuiltRulesIsDynamic: boolean,
-|};
-
-export class StylableComponent<
-  Props = void,
-  State = void,
-> extends React.Component<Props, State> {
-  static extends(
-    rules: RawRules,
-    opts?: StyledComponentOpts,
-  ): StyledComponent<any> {
-    return createStyledComponent(this, rules, opts);
-  }
-}
-
-class StylablePureComponent<
-  Props = void,
-  State = void,
-> extends React.PureComponent<Props, State> {
-  static extends(
-    rules: RawRules,
-    opts?: StyledComponentOpts,
-  ): StyledComponent<any> {
-    return createStyledComponent(this, rules, opts);
-  }
-}
-
-class StyledComponentBase<Props> extends React.PureComponent<
-  Props,
-  StyledComponentState,
-> {
-  constructor(props: Props, context: Object): void {
-    super(props, context);
-    this.state = {
-      classNames: [],
-      extraClassNames: [],
-      lastBuiltRulesIsDynamic: false,
-      lastBuiltRules: null,
-    };
-  }
-
-  static defaultProps: ?$Shape<Props>;
-
-  static STYLED_CONFIG: {|
-    tagName: TagName,
-    ignoreAttributes: ?Array<string>,
-    builtRules: any,
-  |};
-
-  static extends(
-    rules: RawRules,
-    opts?: StyledComponentOpts,
-  ): StyledComponent<any> {
-    return createStyledComponent(this, rules, opts);
-  }
-
-  componentWillMount(): void {
-    this.generateClassnames(this.props, null);
-  }
-
-  componentWillReceiveProps(nextProps: Props): void {
-    this.generateClassnames(nextProps, this.props);
-  }
-
-  componentWillUnmount(): void {
-    for (const name of this.state.classNames) {
-      gc.deregisterClassUse(name);
-    }
-  }
-
-  generateClassnames(props: Props, prevProps: ?Props): void {
-    throw new Error('unimplemented');
-  }
-}
-
-function hasDynamicRules(rules: Object): boolean {
-  for (const key in rules) {
-    const val = rules[key];
-
-    if (typeof val === 'function') {
-      return true;
-    } else if (typeof val === 'object' && hasDynamicRules(val)) {
-      return true;
-    }
-  }
-  return false;
-}
-
-function hasEquivProps(props: Object, nextProps: Object): boolean {
-  // check if the props are equivalent
-  for (const key in props) {
-    // ignore `children` since we do that check later
-    if (key === 'children') {
-      continue;
-    }
-
-    // check strict equality of prop value
-    if (nextProps[key] !== props[key]) {
-      return false;
-    }
-  }
-
-  // check if nextProps has any values that props doesn't
-  for (const key in nextProps) {
-    if (!(key in props)) {
-      return false;
-    }
-  }
-
-  // check if the boolean equality of children is equivalent
-  if (Boolean(props.children) !== Boolean(nextProps.children)) {
-    return false;
-  }
-
-  return true;
-}
-
-export type StyledComponent<Props> = Class<StyledComponentBase<Props>>;
-
-type StyledComponentOpts = {
-  displayName?: string,
-  contextTypes?: Object,
-  ignoreAttributes?: Array<string>,
-};
-
-function createStyledComponent(
-  tagName: TagName,
-  rules: RawRules,
-  opts?: StyledComponentOpts = {},
-): StyledComponent<any> {
-  let {contextTypes = {}, ignoreAttributes} = opts;
-
-  // build up rules
-  let builtRules = normaliseRules(rules);
-
-  // if inheriting from another styled component then take all of it's properties
-  if (typeof tagName === 'function' && tagName.STYLED_CONFIG) {
-    // inherit context types
-    if (tagName.contextTypes) {
-      contextTypes = {...contextTypes, ...tagName.contextTypes};
-    }
-
-    const parentConfig = tagName.STYLED_CONFIG;
-
-    // inherit tagname
-    tagName = parentConfig.tagName;
-
-    // inherit ignoreAttributes
-    if (parentConfig.ignoreAttributes) {
-      if (ignoreAttributes) {
-        ignoreAttributes = ignoreAttributes.concat(
-          parentConfig.ignoreAttributes,
-        );
-      } else {
-        ignoreAttributes = parentConfig.ignoreAttributes;
-      }
-    }
-
-    // inherit rules
-    builtRules = assignDeep({}, parentConfig.builtRules, builtRules);
-  }
-
-  const displayName: string =
-    opts.displayName == null ? 'StyledComponent' : opts.displayName;
-  const isDOM = typeof tagName === 'string';
-
-  class Constructor<Props: Object> extends StyledComponentBase<Props> {
-    generateClassnames(props: Props, prevProps: ?Props) {
-      // if this is a secondary render then check if the props are essentially equivalent
-      // NOTE: hasEquivProps is not a standard shallow equality test
-      if (prevProps != null && hasEquivProps(props, prevProps)) {
-        return;
-      }
-
-      const debugId = performance.mark();
-      const extraClassNames = [];
-
-      let myBuiltRules = builtRules;
-
-      // if passed any classes from another styled component, ignore that class and merge in their
-      // resolved styles
-      if (props.className) {
-        const propClassNames = props.className.trim().split(/[\s]+/g);
-        for (const className of propClassNames) {
-          const classInfo = tracker.get(className);
-          if (classInfo) {
-            const {namespace, style} = classInfo;
-            myBuiltRules = assignDeep({}, myBuiltRules, {[namespace]: style});
-          } else {
-            extraClassNames.push(className);
-          }
-        }
-      }
-
-      // if we had the exact same rules as last time and they weren't dynamic then we can bail out here
-      if (
-        myBuiltRules !== this.state.lastBuiltRules ||
-        this.state.lastBuiltRulesIsDynamic !== false
-      ) {
-        const prevClasses = this.state.classNames;
-        const classNames = [];
-
-        // add rules
-        for (const namespace in myBuiltRules) {
-          const className = addRules(
-            displayName,
-            myBuiltRules[namespace],
-            namespace,
-            props,
-            this.context,
-          );
-          classNames.push(className);
-
-          // if this is the first mount render or we didn't previously have this class then add it as new
-          if (prevProps == null || !prevClasses.includes(className)) {
-            gc.registerClassUse(className);
-          }
-        }
-
-        // check what classNames have been removed if this is a secondary render
-        if (prevProps != null) {
-          for (const className of prevClasses) {
-            // if this previous class isn't in the current classes then deregister it
-            if (!classNames.includes(className)) {
-              gc.deregisterClassUse(className);
-            }
-          }
-        }
-
-        this.setState({
-          classNames,
-          lastBuiltRules: myBuiltRules,
-          lastBuiltRulesIsDynamic: hasDynamicRules(myBuiltRules),
-          extraClassNames,
-        });
-      }
-
-      performance.measure(
-        debugId,
-        `🚀 ${this.constructor.name} [style calculate]`,
-      );
-    }
-    render() {
-      const {children, innerRef, ...props} = this.props;
-
-      if (ignoreAttributes) {
-        for (const key of ignoreAttributes) {
-          delete props[key];
-        }
-      }
-      // build class names
-      const className = this.state.classNames
-        .concat(this.state.extraClassNames)
-        .join(' ');
-      if (props.is) {
-        props.class = className;
-      } else {
-        props.className = className;
-      }
-      //
-      if (innerRef) {
-        if (isDOM) {
-          // dom ref
-          props.ref = innerRef;
-        } else {
-          // probably another styled component so pass it down
-          props.innerRef = innerRef;
-        }
-      }
-      return React.createElement(tagName, props, children);
-    }
-  }
-  Constructor.STYLED_CONFIG = {
-    builtRules,
-    ignoreAttributes,
-    tagName,
-  };
-
-  Constructor.contextTypes = {
-    ...contextTypes,
-  };
-
-  Object.defineProperty(Constructor, 'name', {
-    value: displayName,
-  });
-
-  return Constructor;
-}
-export function buildKeyframes(spec: KeyframeRules) {
-  let css = [];
-
-  const builtRules = buildKeyframeRules(spec);
-  for (const key in builtRules) {
-    const declarations = [];
-    const rules = builtRules[key];
-
-    for (const key in rules) {
-      declarations.push(`    ${key}: ${String(rules[key])};`);
-    }
-    css.push(`  ${key} {`);
-    css = css.concat(declarations);
-    css.push('  }');
-  }
-  css = css.join('\n');
-  return css;
-}
-function createKeyframes(spec: KeyframeRules): string {
-  const body = buildKeyframes(spec);
-  const className = `animation-${hash(body)}`;
-
-  const css = `@keyframes ${className} {\n${body}\n}`;
-  sheet.insert(className, css);
-  return className;
-}
-type StyledComponentFactory = (
-  rules: RawRules,
-  opts?: StyledComponentOpts,
-) => StyledComponent<any>;
-
-function createStyledComponentFactory(tagName: string): StyledComponentFactory {
-  return (rules: RawRules, opts?: StyledComponentOpts) => {
-    return createStyledComponent(tagName, rules, opts);
-  };
-}
-export default {
-  image: createStyledComponentFactory('img'),
-  view: createStyledComponentFactory('div'),
-  text: createStyledComponentFactory('span'),
-  textInput: createStyledComponentFactory('input'),
-  customHTMLTag: createStyledComponent,
-  keyframes: createKeyframes,
-  StylableComponent,
-  StylablePureComponent,
-};
+import styled from 'react-emotion';
+export default styled;
diff --git a/src/ui/styled/rules.js b/src/ui/styled/rules.js
deleted file mode 100644
index 575ac3a0d..000000000
--- a/src/ui/styled/rules.js
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import type {CSSPropertySet, CSSPropertyValue} from './types.js';
-
-const dashify = require('dashify');
-
-export type NormalisedRules = {
-  [namespace: string]: BaseRules,
-};
-
-export type BaseRules = {
-  [key: string]: CSSPropertyValue<string | number>,
-};
-
-export type PlainRules = {
-  [key: string]: string,
-};
-
-export type NormalisedKeyframeRules = {
-  [key: string]: PlainRules,
-};
-
-export type KeyframeRules = {
-  [key: string]: CSSPropertySet,
-};
-
-export type RawRules = {
-  ...CSSPropertySet,
-  [key: string]: CSSPropertySet,
-};
-
-const unitlessNumberProperties = new Set([
-  'animation-iteration-count',
-  'border-image-outset',
-  'border-image-slice',
-  'border-image-width',
-  'column-count',
-  'flex',
-  'flex-grow',
-  'flex-positive',
-  'flex-shrink',
-  'flex-order',
-  'grid-row',
-  'grid-column',
-  'font-weight',
-  'line-clamp',
-  'line-height',
-  'opacity',
-  'order',
-  'orphans',
-  'tab-size',
-  'widows',
-  'z-index',
-  'zoom',
-  'fill-opacity',
-  'flood-opacity',
-  'stop-opacity',
-  'stroke-dasharray',
-  'stroke-dashoffset',
-  'stroke-miterlimit',
-  'stroke-opacity',
-  'stroke-width',
-]);
-
-// put top level styles into an '&' object
-function expandRules(rules: RawRules): NormalisedRules {
-  const expandedRules = {};
-  const rootRules = {};
-
-  for (const key in rules) {
-    const val = rules[key];
-
-    if (typeof val === 'object') {
-      expandedRules[key] = val;
-    } else {
-      rootRules[key] = val;
-    }
-  }
-
-  if (Object.keys(rootRules).length) {
-    expandedRules['&'] = rootRules;
-  }
-
-  return expandedRules;
-}
-
-function shouldAppendPixel(key: string, val: mixed): boolean {
-  return (
-    typeof val === 'number' && !unitlessNumberProperties.has(key) && !isNaN(val)
-  );
-}
-
-export function normaliseRules(rules: RawRules): NormalisedRules {
-  const expandedRules = expandRules(rules);
-
-  const builtRules = {};
-
-  for (const key in expandedRules) {
-    const rules = expandedRules[key];
-    const myRules = {};
-
-    for (const key in rules) {
-      const val = rules[key];
-
-      let dashedKey = dashify(key);
-      if (/[A-Z]/.test(key[0])) {
-        dashedKey = `-${dashedKey}`;
-      }
-
-      myRules[dashedKey] = val;
-    }
-
-    if (Object.keys(myRules).length) {
-      builtRules[key] = myRules;
-    }
-  }
-
-  return builtRules;
-}
-
-export function buildKeyframeRules(
-  rules: KeyframeRules,
-): NormalisedKeyframeRules {
-  const spec = {};
-
-  for (const selector in rules) {
-    const newRules = {};
-
-    const rules2 = rules[selector];
-    if (!rules2 || typeof rules2 !== 'object') {
-      throw new Error('Keyframe spec must only have objects');
-    }
-
-    for (const key in rules2) {
-      let val = rules2[key];
-
-      if (shouldAppendPixel(key, val)) {
-        val += 'px';
-      } else if (typeof val === 'number') {
-        val = String(val);
-      }
-
-      if (typeof val !== 'string') {
-        throw new Error('Keyframe objects must only have strings values');
-      }
-
-      newRules[key] = val;
-    }
-
-    spec[selector] = newRules;
-  }
-
-  return spec;
-}
-
-export function buildRules(
-  rules: BaseRules,
-  props: NormalisedRules,
-  context: Object,
-): PlainRules {
-  const style = {};
-  for (const key in rules) {
-    let val = rules[key];
-    if (typeof val === 'function') {
-      val = val(props, context);
-    }
-    if (val != null && shouldAppendPixel(key, val)) {
-      val += 'px';
-    }
-    if (val != null) {
-      style[key] = String(val);
-    }
-  }
-  return style;
-}
diff --git a/src/ui/styled/sheet.js b/src/ui/styled/sheet.js
deleted file mode 100644
index e2800d975..000000000
--- a/src/ui/styled/sheet.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-const invariant = require('invariant');
-
-function makeStyleTag(): HTMLStyleElement {
-  const tag = document.createElement('style');
-  tag.type = 'text/css';
-  tag.appendChild(document.createTextNode(''));
-
-  const {head} = document;
-  invariant(head, 'expected head');
-  head.appendChild(tag);
-
-  return tag;
-}
-
-export class StyleSheet {
-  constructor(isSpeedy?: boolean) {
-    this.injected = false;
-    this.isSpeedy = Boolean(isSpeedy);
-
-    this.flush();
-    this.inject();
-  }
-
-  ruleIndexes: Array<string>;
-  injected: boolean;
-  isSpeedy: boolean;
-  tag: HTMLStyleElement;
-
-  getRuleCount(): number {
-    return this.ruleIndexes.length;
-  }
-
-  flush() {
-    this.ruleIndexes = [];
-    if (this.tag) {
-      this.tag.innerHTML = '';
-    }
-  }
-
-  inject() {
-    if (this.injected) {
-      throw new Error('already injected stylesheet!');
-    }
-
-    this.tag = makeStyleTag();
-    this.injected = true;
-  }
-
-  delete(key: string) {
-    const index = this.ruleIndexes.indexOf(key);
-    if (index < 0) {
-      // TODO maybe error
-      return;
-    }
-
-    this.ruleIndexes.splice(index, 1);
-
-    const tag = this.tag;
-    if (this.isSpeedy) {
-      const sheet = tag.sheet;
-      invariant(sheet, 'expected sheet');
-
-      // $FlowFixMe: sheet is actually CSSStylesheet
-      sheet.deleteRule(index);
-    } else {
-      tag.removeChild(tag.childNodes[index + 1]);
-    }
-  }
-
-  insert(key: string, rule: string) {
-    const tag = this.tag;
-
-    if (this.isSpeedy) {
-      const sheet = tag.sheet;
-      invariant(sheet, 'expected sheet');
-
-      // $FlowFixMe: sheet is actually CSSStylesheet
-      sheet.insertRule(rule, sheet.cssRules.length);
-    } else {
-      tag.appendChild(document.createTextNode(rule));
-    }
-
-    this.ruleIndexes.push(key);
-  }
-}
diff --git a/src/ui/styled/types.js b/src/ui/styled/types.js
deleted file mode 100644
index 94660aff1..000000000
--- a/src/ui/styled/types.js
+++ /dev/null
@@ -1,1280 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-export type alignContent =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'stretch';
-export type alignItems =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'baseline'
-  | 'stretch';
-export type alignSelf =
-  | 'auto'
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'baseline'
-  | 'stretch';
-export type all = 'initial' | 'inherit' | 'unset';
-export type animation = singleAnimation;
-export type animationDelay = number;
-export type animationDirection = singleAnimationDirection;
-export type animationDuration = string | number;
-export type animationFillMode = singleAnimationFillMode;
-export type animationIterationCount = singleAnimationIterationCount;
-export type animationName = singleAnimationName;
-export type animationPlayState = singleAnimationPlayState;
-export type animationTimingFunction = singleTimingFunction;
-export type appearance = 'auto' | 'none';
-export type azimuth = number | string | 'leftwards' | 'rightwards';
-export type backdropFilter = 'none' | string;
-export type backfaceVisibility = 'visible' | 'hidden';
-type backgroundSyntax = {|
-  attachment?: attachment,
-  color?: color,
-  image?: bgImage,
-  position?: string,
-  repeat?: repeatStyle,
-|};
-export type background = string | finalBgLayer | backgroundSyntax;
-export type backgroundAttachment = attachment;
-export type backgroundBlendMode = blendMode;
-export type backgroundClip = box;
-export type backgroundColor = color;
-export type backgroundImage = bgImage;
-export type backgroundOrigin = box;
-export type backgroundPosition = string;
-export type backgroundPositionX = string;
-export type backgroundPositionY = string;
-export type backgroundRepeat = repeatStyle;
-export type backgroundSize = bgSize;
-export type blockSize = width;
-type borderSyntax = {|
-  width?: borderWidth,
-  style?: brStyle,
-  color?: color,
-|};
-export type border = borderWidth | brStyle | color | borderSyntax;
-export type borderBlockEnd = borderWidth | borderStyle | color;
-export type borderBlockEndColor = color;
-export type borderBlockEndStyle = borderStyle;
-export type borderBlockEndWidth = borderWidth;
-export type borderBlockStart = borderWidth | borderStyle | color;
-export type borderBlockStartColor = color;
-export type borderBlockStartStyle = borderStyle;
-export type borderBlockStartWidth = borderWidth;
-export type borderBottomLeftRadius = lengthPercentage;
-export type borderBottomRightRadius = lengthPercentage;
-export type borderBottomStyle = brStyle;
-export type borderBottomWidth = borderWidth;
-export type borderCollapse = 'collapse' | 'separate';
-export type borderColor = color;
-export type borderImage =
-  | borderImageSource
-  | borderImageSlice
-  | string
-  | borderImageRepeat;
-export type borderImageOutset = string;
-export type borderImageRepeat = string;
-export type borderImageSlice = string | number | 'fill';
-export type borderImageSource = 'none' | string;
-export type borderImageWidth = string;
-export type borderInlineEnd = borderWidth | borderStyle | color;
-export type borderInlineEndColor = color;
-export type borderInlineEndStyle = borderStyle;
-export type borderInlineEndWidth = borderWidth;
-export type borderInlineStart = borderWidth | borderStyle | color;
-export type borderInlineStartColor = color;
-export type borderInlineStartStyle = borderStyle;
-export type borderInlineStartWidth = borderWidth;
-export type borderLeftColor = color;
-export type borderLeftStyle = brStyle;
-export type borderLeftWidth = borderWidth;
-export type borderRightColor = color;
-export type borderRightStyle = brStyle;
-export type borderRightWidth = borderWidth;
-export type borderRadius = lengthPercentage;
-export type borderSpacing = number;
-export type borderStyle = brStyle;
-export type borderTopLeftRadius = lengthPercentage;
-export type borderTopRightRadius = lengthPercentage;
-export type borderTopStyle = brStyle;
-export type borderTopWidth = borderWidth;
-export type boxAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
-export type boxDecorationBreak = 'slice' | 'clone';
-export type boxDirection = 'normal' | 'reverse' | 'inherit';
-export type boxFlex = number;
-export type boxFlexGroup = number;
-export type boxLines = 'single' | 'multiple';
-export type boxOrdinalGroup = number;
-export type boxOrient =
-  | 'horizontal'
-  | 'vertical'
-  | 'inline-axis'
-  | 'block-axis'
-  | 'inherit';
-export type boxPack = 'start' | 'center' | 'end' | 'justify';
-type boxShadowSyntax = {|
-  x?: number,
-  y?: number,
-  blur?: number,
-  spread?: number,
-  color?: string,
-  inset?: boolean,
-|};
-export type boxShadow =
-  | 'none'
-  | string
-  | boxShadowSyntax
-  | Array<string | boxShadowSyntax>;
-export type boxSizing = 'content-box' | 'border-box';
-export type boxSuppress = 'show' | 'discard' | 'hide';
-export type breakAfter =
-  | 'auto'
-  | 'avoid'
-  | 'avoid-page'
-  | 'page'
-  | 'left'
-  | 'right'
-  | 'recto'
-  | 'verso'
-  | 'avoid-column'
-  | 'column'
-  | 'avoid-region'
-  | 'region';
-export type breakBefore =
-  | 'auto'
-  | 'avoid'
-  | 'avoid-page'
-  | 'page'
-  | 'left'
-  | 'right'
-  | 'recto'
-  | 'verso'
-  | 'avoid-column'
-  | 'column'
-  | 'avoid-region'
-  | 'region';
-export type breakInside =
-  | 'auto'
-  | 'avoid'
-  | 'avoid-page'
-  | 'avoid-column'
-  | 'avoid-region';
-export type captionSide =
-  | 'top'
-  | 'bottom'
-  | 'block-start'
-  | 'block-end'
-  | 'inline-start'
-  | 'inline-end';
-export type clear =
-  | 'none'
-  | 'left'
-  | 'right'
-  | 'both'
-  | 'inline-start'
-  | 'inline-end';
-export type clip = string | 'auto';
-export type clipPath = string | 'none';
-export type columnCount = number | 'auto';
-export type columnFill = 'auto' | 'balance';
-export type columnGap = number | 'normal';
-export type columnRule = columnRuleWidth | columnRuleStyle | columnRuleColor;
-export type columnRuleColor = color;
-export type columnRuleStyle = brStyle;
-export type columnRuleWidth = borderWidth;
-export type columnSpan = 'none' | 'all';
-export type columnWidth = number | 'auto';
-export type columns = columnWidth | columnCount;
-export type contain = 'none' | 'strict' | 'content' | string;
-export type content = string;
-export type counterIncrement = string | 'none';
-export type counterReset = string | 'none';
-export type cursor =
-  | 'auto'
-  | 'default'
-  | 'none'
-  | 'context-menu'
-  | 'help'
-  | 'pointer'
-  | 'progress'
-  | 'wait'
-  | 'cell'
-  | 'crosshair'
-  | 'text'
-  | 'vertical-text'
-  | 'alias'
-  | 'copy'
-  | 'move'
-  | 'no-drop'
-  | 'not-allowed'
-  | 'e-resize'
-  | 'n-resize'
-  | 'ne-resize'
-  | 'nw-resize'
-  | 's-resize'
-  | 'se-resize'
-  | 'sw-resize'
-  | 'w-resize'
-  | 'ew-resize'
-  | 'ns-resize'
-  | 'nesw-resize'
-  | 'nwse-resize'
-  | 'col-resize'
-  | 'row-resize'
-  | 'all-scroll'
-  | 'zoom-in'
-  | 'zoom-out'
-  | 'grab'
-  | 'grabbing'
-  | '-webkit-grab'
-  | '-webkit-grabbing';
-export type direction = 'ltr' | 'rtl';
-export type display =
-  | 'none'
-  | 'inline'
-  | 'block'
-  | 'list-item'
-  | 'inline-list-item'
-  | 'inline-block'
-  | 'inline-table'
-  | 'table'
-  | 'table-cell'
-  | 'table-column'
-  | 'table-column-group'
-  | 'table-footer-group'
-  | 'table-header-group'
-  | 'table-row'
-  | 'table-row-group'
-  | 'flex'
-  | 'inline-flex'
-  | 'grid'
-  | 'inline-grid'
-  | 'run-in'
-  | 'ruby'
-  | 'ruby-base'
-  | 'ruby-text'
-  | 'ruby-base-container'
-  | 'ruby-text-container'
-  | 'contents';
-export type displayInside =
-  | 'auto'
-  | 'block'
-  | 'table'
-  | 'flex'
-  | 'grid'
-  | 'ruby';
-export type displayList = 'none' | 'list-item';
-export type displayOutside =
-  | 'block-level'
-  | 'inline-level'
-  | 'run-in'
-  | 'contents'
-  | 'none'
-  | 'table-row-group'
-  | 'table-header-group'
-  | 'table-footer-group'
-  | 'table-row'
-  | 'table-cell'
-  | 'table-column-group'
-  | 'table-column'
-  | 'table-caption'
-  | 'ruby-base'
-  | 'ruby-text'
-  | 'ruby-base-container'
-  | 'ruby-text-container';
-export type emptyCells = 'show' | 'hide';
-export type filter = 'none' | string;
-export type flex = 'none' | string | number;
-export type flexBasis = 'content' | number | string;
-export type flexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type flexFlow = flexDirection | flexWrap;
-export type flexGrow = number;
-export type flexShrink = number;
-export type flexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type float = 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
-export type font =
-  | string
-  | 'caption'
-  | 'icon'
-  | 'menu'
-  | 'message-box'
-  | 'small-caption'
-  | 'status-bar';
-export type fontFamily = string;
-export type fontFeatureSettings = 'normal' | string;
-export type fontKerning = 'auto' | 'normal' | 'none';
-export type fontLanguageOverride = 'normal' | string;
-export type fontSize = absoluteSize | relativeSize | lengthPercentage;
-export type fontSizeAdjust = 'none' | number;
-export type fontStretch =
-  | 'normal'
-  | 'ultra-condensed'
-  | 'extra-condensed'
-  | 'condensed'
-  | 'semi-condensed'
-  | 'semi-expanded'
-  | 'expanded'
-  | 'extra-expanded'
-  | 'ultra-expanded';
-export type fontStyle = 'normal' | 'italic' | 'oblique';
-export type fontSynthesis = 'none' | string;
-export type fontVariant = 'normal' | 'none' | string;
-export type fontVariantAlternates = 'normal' | string;
-export type fontVariantCaps =
-  | 'normal'
-  | 'small-caps'
-  | 'all-small-caps'
-  | 'petite-caps'
-  | 'all-petite-caps'
-  | 'unicase'
-  | 'titling-caps';
-export type fontVariantEastAsian = 'normal' | string;
-export type fontVariantLigatures = 'normal' | 'none' | string;
-export type fontVariantNumeric = 'normal' | string;
-export type fontVariantPosition = 'normal' | 'sub' | 'super';
-export type fontWeight =
-  | 'inherit'
-  | 'normal'
-  | 'bold'
-  | 'bolder'
-  | 'lighter'
-  | 100
-  | 200
-  | 300
-  | 400
-  | 500
-  | 600
-  | 700
-  | 800
-  | 900;
-export type grid = gridTemplate | string;
-export type gridArea = gridLine | string;
-export type gridAutoColumns = trackSize;
-export type gridAutoFlow = string | 'dense';
-export type gridAutoRows = trackSize;
-export type gridColumn = gridLine | string;
-export type gridColumnEnd = gridLine;
-export type gridColumnGap = lengthPercentage;
-export type gridColumnStart = gridLine;
-export type gridGap = gridRowGap | gridColumnGap;
-export type gridRow = gridLine | string;
-export type gridRowEnd = gridLine;
-export type gridRowGap = lengthPercentage;
-export type gridRowStart = gridLine;
-export type gridTemplate = 'none' | 'subgrid' | string;
-export type gridTemplateAreas = 'none' | string;
-export type gridTemplateColumns = 'none' | 'subgrid' | string;
-export type gridTemplateRows = 'none' | 'subgrid' | string;
-export type hyphens = 'none' | 'manual' | 'auto';
-export type imageOrientation = 'from-image' | number | string;
-export type imageRendering =
-  | 'auto'
-  | 'crisp-edges'
-  | 'pixelated'
-  | 'optimizeSpeed'
-  | 'optimizeQuality'
-  | string;
-export type imageResolution = string | 'snap';
-export type imeMode = 'auto' | 'normal' | 'active' | 'inactive' | 'disabled';
-export type initialLetter = 'normal' | string;
-export type initialLetterAlign = string;
-export type inlineSize = width;
-export type isolation = 'auto' | 'isolate';
-export type justifyContent =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around';
-export type letterSpacing = 'normal' | lengthPercentage;
-export type lineBreak = 'auto' | 'loose' | 'normal' | 'strict';
-export type lineHeight = 'normal' | number | string;
-export type listStyle = listStyleType | listStylePosition | listStyleImage;
-export type listStyleImage = string | 'none';
-export type listStylePosition = 'inside' | 'outside';
-export type listStyleType = string | 'none';
-type marginSyntax = {|
-  vertical?: number | string,
-  horizontal?: number | string,
-  top?: number | string,
-  left?: number | string,
-  right?: number | string,
-  bottom?: number | string,
-|};
-export type margin = number | string | marginSyntax;
-export type marginBlockEnd = marginLeft;
-export type marginBlockStart = marginLeft;
-export type marginBottom = number | string | 'auto';
-export type marginInlineEnd = marginLeft;
-export type marginInlineStart = marginLeft;
-export type marginLeft = number | string | 'auto';
-export type marginRight = number | string | 'auto';
-export type marginTop = number | string | 'auto';
-export type markerOffset = number | 'auto';
-export type mask = maskLayer;
-export type maskClip = string;
-export type maskComposite = compositeOperator;
-export type maskMode = maskingMode;
-export type maskOrigin = geometryBox;
-export type maskPosition = string;
-export type maskRepeat = repeatStyle;
-export type maskSize = bgSize;
-export type maskType = 'luminance' | 'alpha';
-export type maxBlockSize = maxWidth;
-export type maxHeight =
-  | number
-  | string
-  | 'none'
-  | 'max-content'
-  | 'min-content'
-  | 'fit-content'
-  | 'fill-available';
-export type maxInlineSize = maxWidth;
-export type maxWidth =
-  | number
-  | string
-  | 'none'
-  | 'max-content'
-  | 'min-content'
-  | 'fit-content'
-  | 'fill-available';
-export type minBlockSize = minWidth;
-export type minHeight =
-  | number
-  | string
-  | 'auto'
-  | 'max-content'
-  | 'min-content'
-  | 'fit-content'
-  | 'fill-available';
-export type minInlineSize = minWidth;
-export type minWidth =
-  | number
-  | string
-  | 'auto'
-  | 'max-content'
-  | 'min-content'
-  | 'fit-content'
-  | 'fill-available';
-export type mixBlendMode = blendMode;
-export type motion = motionPath | motionOffset | motionRotation;
-export type motionOffset = lengthPercentage;
-export type motionPath = string | geometryBox | 'none';
-export type motionRotation = string | number;
-export type objectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
-export type objectPosition = string;
-export type offsetBlockEnd = string;
-export type offsetBlockStart = string;
-export type offsetInlineEnd = string;
-export type offsetInlineStart = string;
-export type opacity = number;
-export type order = number;
-export type orphans = number;
-type outlineSyntax = {|
-  width?: borderWidth,
-  style?: brStyle,
-  color?: color,
-|};
-export type outline = string | outlineSyntax;
-export type outlineColor = color | 'invert';
-export type outlineOffset = number;
-export type outlineStyle = 'auto' | brStyle;
-export type outlineWidth = borderWidth;
-export type overflow = 'visible' | 'hidden' | 'scroll' | 'auto';
-export type overflowClipBox = 'padding-box' | 'content-box';
-export type overflowWrap = 'normal' | 'break-word';
-export type overflowX = 'visible' | 'hidden' | 'scroll' | 'auto';
-export type overflowY = 'visible' | 'hidden' | 'scroll' | 'auto';
-type paddingSyntax = {|
-  vertical?: number | string,
-  horizontal?: number | string,
-  top?: number | string,
-  left?: number | string,
-  right?: number | string,
-  bottom?: number | string,
-|};
-export type padding = number | string | paddingSyntax;
-export type paddingBlockEnd = paddingLeft;
-export type paddingBlockStart = paddingLeft;
-export type paddingBottom = number | string;
-export type paddingInlineEnd = paddingLeft;
-export type paddingInlineStart = paddingLeft;
-export type paddingLeft = number | string;
-export type paddingRight = number | string;
-export type paddingTop = number | string;
-export type pageBreakAfter = 'auto' | 'always' | 'avoid' | 'left' | 'right';
-export type pageBreakBefore = 'auto' | 'always' | 'avoid' | 'left' | 'right';
-export type pageBreakInside = 'auto' | 'avoid';
-export type perspective = 'none' | number;
-export type perspectiveOrigin = string;
-export type pointerEvents =
-  | 'auto'
-  | 'none'
-  | 'visiblePainted'
-  | 'visibleFill'
-  | 'visibleStroke'
-  | 'visible'
-  | 'painted'
-  | 'fill'
-  | 'stroke'
-  | 'all'
-  | 'inherit';
-export type position = 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed';
-export type quotes = string | 'none';
-export type resize = 'none' | 'both' | 'horizontal' | 'vertical';
-export type rubyAlign = 'start' | 'center' | 'space-between' | 'space-around';
-export type rubyMerge = 'separate' | 'collapse' | 'auto';
-export type rubyPosition = 'over' | 'under' | 'inter-character';
-export type scrollBehavior = 'auto' | 'smooth';
-export type scrollSnapCoordinate = 'none' | string;
-export type scrollSnapDestination = string;
-export type scrollSnapPointsX = 'none' | string;
-export type scrollSnapPointsY = 'none' | string;
-export type scrollSnapType = 'none' | 'mandatory' | 'proximity';
-export type scrollSnapTypeX = 'none' | 'mandatory' | 'proximity';
-export type scrollSnapTypeY = 'none' | 'mandatory' | 'proximity';
-export type shapeImageThreshold = number;
-export type shapeMargin = lengthPercentage;
-export type shapeOutside = 'none' | shapeBox | string;
-export type tabSize = number;
-export type tableLayout = 'auto' | 'fixed';
-export type textAlign =
-  | 'start'
-  | 'end'
-  | 'left'
-  | 'right'
-  | 'center'
-  | 'justify'
-  | 'match-parent';
-export type textAlignLast =
-  | 'auto'
-  | 'start'
-  | 'end'
-  | 'left'
-  | 'right'
-  | 'center'
-  | 'justify';
-export type textCombineUpright = 'none' | 'all' | string;
-export type textDecoration =
-  | textDecorationLine
-  | textDecorationStyle
-  | textDecorationColor;
-export type textDecorationColor = color;
-export type textDecorationLine = 'none' | string;
-export type textDecorationSkip = 'none' | string;
-export type textDecorationStyle =
-  | 'solid'
-  | 'double'
-  | 'dotted'
-  | 'dashed'
-  | 'wavy';
-export type textEmphasis = textEmphasisStyle | textEmphasisColor;
-export type textEmphasisColor = color;
-export type textEmphasisPosition = string;
-export type textEmphasisStyle = 'none' | string;
-export type textIndent = string | 'hanging' | 'each-line';
-export type textOrientation = 'mixed' | 'upright' | 'sideways';
-export type textOverflow = string;
-export type textRendering =
-  | 'auto'
-  | 'optimizeSpeed'
-  | 'optimizeLegibility'
-  | 'geometricPrecision';
-type textShadowSyntax = {|
-  x?: number,
-  y?: number,
-  blur?: number,
-  color?: string,
-|};
-export type textShadow = 'none' | string | textShadowSyntax;
-export type textSizeAdjust = 'none' | 'auto' | string;
-export type textTransform =
-  | 'none'
-  | 'capitalize'
-  | 'uppercase'
-  | 'lowercase'
-  | 'full-width';
-export type textUnderlinePosition = 'auto' | string;
-export type touchAction = 'auto' | 'none' | string | 'manipulation';
-export type transform = 'none' | string;
-export type transformBox = 'border-box' | 'fill-box' | 'view-box';
-export type transformOrigin = string | number;
-export type transformStyle = 'flat' | 'preserve-3d';
-type transitionSyntax = {|
-  property?: 'none' | singleTransitionProperty,
-  duration?: number,
-  timingFunction?: singleTransitionTimingFunction,
-  delay?: number,
-|};
-export type transition =
-  | singleTransition
-  | transitionSyntax
-  | Array<singleTransition | transitionSyntax>;
-export type transitionDelay = number;
-export type transitionDuration = number;
-export type transitionProperty = 'none' | singleTransitionProperty;
-export type transitionTimingFunction = singleTransitionTimingFunction;
-export type unicodeBidi =
-  | 'normal'
-  | 'embed'
-  | 'isolate'
-  | 'bidi-override'
-  | 'isolate-override'
-  | 'plaintext';
-export type userSelect = 'auto' | 'text' | 'none' | 'contain' | 'all';
-export type verticalAlign =
-  | 'baseline'
-  | 'sub'
-  | 'super'
-  | 'text-top'
-  | 'text-bottom'
-  | 'middle'
-  | 'top'
-  | 'bottom'
-  | string
-  | number;
-export type visibility = 'visible' | 'hidden' | 'collapse';
-export type whiteSpace = 'normal' | 'pre' | 'nowrap' | 'pre-wrap' | 'pre-line';
-export type widows = number;
-export type width =
-  | string
-  | 'available'
-  | 'min-content'
-  | 'max-content'
-  | 'fit-content'
-  | 'auto';
-export type willChange = 'auto' | animatableFeature;
-export type wordBreak =
-  | 'normal'
-  | 'break-all'
-  | 'keep-all'
-  | nonStandardWordBreak;
-export type wordSpacing = 'normal' | lengthPercentage;
-export type wordWrap = 'normal' | 'break-word';
-export type writingMode =
-  | 'horizontal-tb'
-  | 'vertical-rl'
-  | 'vertical-lr'
-  | 'sideways-rl'
-  | 'sideways-lr'
-  | svgWritingMode;
-export type zIndex = 'auto' | number;
-export type alignmentBaseline =
-  | 'auto'
-  | 'baseline'
-  | 'before-edge'
-  | 'text-before-edge'
-  | 'middle'
-  | 'central'
-  | 'after-edge'
-  | 'text-after-edge'
-  | 'ideographic'
-  | 'alphabetic'
-  | 'hanging'
-  | 'mathematical';
-export type baselineShift = 'baseline' | 'sub' | 'super' | svgLength;
-export type behavior = string;
-export type clipRule = 'nonzero' | 'evenodd';
-export type cue = cueBefore | cueAfter;
-export type cueAfter = string | number | 'none';
-export type cueBefore = string | number | 'none';
-export type dominantBaseline =
-  | 'auto'
-  | 'use-script'
-  | 'no-change'
-  | 'reset-size'
-  | 'ideographic'
-  | 'alphabetic'
-  | 'hanging'
-  | 'mathematical'
-  | 'central'
-  | 'middle'
-  | 'text-after-edge'
-  | 'text-before-edge';
-export type fill = paint;
-export type fillOpacity = number;
-export type fillRule = 'nonzero' | 'evenodd';
-export type glyphOrientationHorizontal = number;
-export type glyphOrientationVertical = number;
-export type kerning = 'auto' | svgLength;
-export type marker = 'none' | string;
-export type markerEnd = 'none' | string;
-export type markerMid = 'none' | string;
-export type markerStart = 'none' | string;
-export type pause = pauseBefore | pauseAfter;
-export type pauseAfter =
-  | number
-  | 'none'
-  | 'x-weak'
-  | 'weak'
-  | 'medium'
-  | 'strong'
-  | 'x-strong';
-export type pauseBefore =
-  | number
-  | 'none'
-  | 'x-weak'
-  | 'weak'
-  | 'medium'
-  | 'strong'
-  | 'x-strong';
-export type rest = restBefore | restAfter;
-export type restAfter =
-  | number
-  | 'none'
-  | 'x-weak'
-  | 'weak'
-  | 'medium'
-  | 'strong'
-  | 'x-strong';
-export type restBefore =
-  | number
-  | 'none'
-  | 'x-weak'
-  | 'weak'
-  | 'medium'
-  | 'strong'
-  | 'x-strong';
-export type shapeRendering =
-  | 'auto'
-  | 'optimizeSpeed'
-  | 'crispEdges'
-  | 'geometricPrecision';
-export type src = string;
-export type speak = 'auto' | 'none' | 'normal';
-export type speakAs = 'normal' | 'spell-out' | 'digits' | string;
-export type stroke = paint;
-export type strokeDasharray = 'none' | string;
-export type strokeDashoffset = svgLength;
-export type strokeLinecap = 'butt' | 'round' | 'square';
-export type strokeLinejoin = 'miter' | 'round' | 'bevel';
-export type strokeMiterlimit = number;
-export type strokeOpacity = number;
-export type strokeWidth = svgLength;
-export type textAnchor = 'start' | 'middle' | 'end';
-export type unicodeRange = string;
-export type voiceBalance =
-  | number
-  | 'left'
-  | 'center'
-  | 'right'
-  | 'leftwards'
-  | 'rightwards';
-export type voiceDuration = 'auto' | number;
-export type voiceFamily = string | 'preserve';
-export type voicePitch = number | 'absolute' | string;
-export type voiceRange = number | 'absolute' | string;
-export type voiceRate = string;
-export type voiceStress = 'normal' | 'strong' | 'moderate' | 'none' | 'reduced';
-export type voiceVolume = 'silent' | string;
-export type zoom = 'normal' | 'reset' | number | string;
-export type absoluteSize =
-  | 'xx-small'
-  | 'x-small'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'x-large'
-  | 'xx-large';
-export type animatableFeature = 'scroll-position' | 'contents' | string;
-export type attachment = 'scroll' | 'fixed' | 'local';
-export type bgImage = 'none' | string;
-export type bgSize = string | 'cover' | 'contain';
-export type box = 'border-box' | 'padding-box' | 'content-box';
-export type brStyle =
-  | 'none'
-  | 'hidden'
-  | 'dotted'
-  | 'dashed'
-  | 'solid'
-  | 'double'
-  | 'groove'
-  | 'ridge'
-  | 'inset'
-  | 'outset';
-export type borderWidth = number | 'thin' | 'medium' | 'thick' | string;
-export type color = string;
-export type compositeStyle =
-  | 'clear'
-  | 'copy'
-  | 'source-over'
-  | 'source-in'
-  | 'source-out'
-  | 'source-atop'
-  | 'destination-over'
-  | 'destination-in'
-  | 'destination-out'
-  | 'destination-atop'
-  | 'xor';
-export type compositeOperator = 'add' | 'subtract' | 'intersect' | 'exclude';
-export type finalBgLayer =
-  | bgImage
-  | string
-  | repeatStyle
-  | attachment
-  | box
-  | backgroundColor;
-export type geometryBox = shapeBox | 'fill-box' | 'stroke-box' | 'view-box';
-export type gridLine = 'auto' | string;
-export type lengthPercentage = number | string;
-export type maskLayer =
-  | maskReference
-  | maskingMode
-  | string
-  | repeatStyle
-  | geometryBox
-  | compositeOperator;
-export type maskReference = 'none' | string;
-export type maskingMode = 'alpha' | 'luminance' | 'match-source';
-export type relativeSize = 'larger' | 'smaller';
-export type repeatStyle = 'repeat-x' | 'repeat-y' | string;
-export type shapeBox = box | 'margin-box';
-export type singleAnimation =
-  | number
-  | singleTimingFunction
-  | singleAnimationIterationCount
-  | singleAnimationDirection
-  | singleAnimationFillMode
-  | singleAnimationPlayState
-  | singleAnimationName;
-export type singleAnimationDirection =
-  | 'normal'
-  | 'reverse'
-  | 'alternate'
-  | 'alternate-reverse';
-export type singleAnimationFillMode =
-  | 'none'
-  | 'forwards'
-  | 'backwards'
-  | 'both';
-export type singleAnimationIterationCount = number;
-export type singleAnimationName = 'none' | string;
-export type singleAnimationPlayState = 'running' | 'paused';
-export type singleTimingFunction = singleTransitionTimingFunction;
-export type singleTransition = singleTransitionTimingFunction | string | number;
-export type singleTransitionTimingFunction =
-  | 'ease'
-  | 'linear'
-  | 'ease-in'
-  | 'ease-out'
-  | 'ease-in-out'
-  | 'step-start'
-  | 'step-end'
-  | string;
-export type singleTransitionProperty = 'all' | string;
-export type trackBreadth =
-  | lengthPercentage
-  | string
-  | 'min-content'
-  | 'max-content'
-  | 'auto';
-export type trackSize = trackBreadth | string;
-export type nonStandardWordBreak = 'break-word';
-export type blendMode =
-  | 'normal'
-  | 'multiply'
-  | 'screen'
-  | 'overlay'
-  | 'darken'
-  | 'lighten'
-  | 'color-dodge'
-  | 'color-burn'
-  | 'hard-light'
-  | 'soft-light'
-  | 'difference'
-  | 'exclusion'
-  | 'hue'
-  | 'saturation'
-  | 'color'
-  | 'luminosity';
-export type maskImage = maskReference;
-export type outlineRadius = borderRadius;
-export type paint = 'none' | 'currentColor' | color | string;
-export type svgLength = string | number;
-export type svgWritingMode = 'lr-tb' | 'rl-tb' | 'tb-rl' | 'lr' | 'rl' | 'tb';
-
-export type CSSPropertyValue<Value> =
-  | Value
-  | ((props: Object, context: Object) => ?Value);
-
-export type CSSPropertySet = {|
-  alignContent?: CSSPropertyValue<alignContent>,
-  alignItems?: CSSPropertyValue<alignItems>,
-  alignSelf?: CSSPropertyValue<alignSelf>,
-  all?: CSSPropertyValue<all>,
-  animation?: CSSPropertyValue<animation>,
-  animationDelay?: CSSPropertyValue<animationDelay>,
-  animationDirection?: CSSPropertyValue<animationDirection>,
-  animationDuration?: CSSPropertyValue<animationDuration>,
-  animationFillMode?: CSSPropertyValue<animationFillMode>,
-  animationIterationCount?: CSSPropertyValue<animationIterationCount>,
-  animationName?: CSSPropertyValue<animationName>,
-  animationPlayState?: CSSPropertyValue<animationPlayState>,
-  animationTimingFunction?: CSSPropertyValue<animationTimingFunction>,
-  appearance?: CSSPropertyValue<appearance>,
-  azimuth?: CSSPropertyValue<azimuth>,
-  backdropFilter?: CSSPropertyValue<backdropFilter>,
-  backfaceVisibility?: CSSPropertyValue<backfaceVisibility>,
-  background?: CSSPropertyValue<background>,
-  backgroundAttachment?: CSSPropertyValue<backgroundAttachment>,
-  backgroundBlendMode?: CSSPropertyValue<backgroundBlendMode>,
-  backgroundClip?: CSSPropertyValue<backgroundClip>,
-  backgroundColor?: CSSPropertyValue<backgroundColor>,
-  backgroundImage?: CSSPropertyValue<backgroundImage>,
-  backgroundOrigin?: CSSPropertyValue<backgroundOrigin>,
-  backgroundPosition?: CSSPropertyValue<backgroundPosition>,
-  backgroundPositionX?: CSSPropertyValue<backgroundPositionX>,
-  backgroundPositionY?: CSSPropertyValue<backgroundPositionY>,
-  backgroundRepeat?: CSSPropertyValue<backgroundRepeat>,
-  backgroundSize?: CSSPropertyValue<backgroundSize>,
-  blockSize?: CSSPropertyValue<blockSize>,
-  border?: CSSPropertyValue<border>,
-  borderBlockEnd?: CSSPropertyValue<borderBlockEnd>,
-  borderBlockEndColor?: CSSPropertyValue<borderBlockEndColor>,
-  borderBlockEndStyle?: CSSPropertyValue<borderBlockEndStyle>,
-  borderBlockEndWidth?: CSSPropertyValue<borderBlockEndWidth>,
-  borderBlockStart?: CSSPropertyValue<borderBlockStart>,
-  borderBlockStartColor?: CSSPropertyValue<borderBlockStartColor>,
-  borderBlockStartStyle?: CSSPropertyValue<borderBlockStartStyle>,
-  borderBlockStartWidth?: CSSPropertyValue<borderBlockStartWidth>,
-  borderBottom?: CSSPropertyValue<border>,
-  borderBottomColor?: CSSPropertyValue<color>,
-  borderBottomLeftRadius?: CSSPropertyValue<borderBottomLeftRadius>,
-  borderBottomRightRadius?: CSSPropertyValue<borderBottomRightRadius>,
-  borderBottomStyle?: CSSPropertyValue<borderBottomStyle>,
-  borderBottomWidth?: CSSPropertyValue<borderBottomWidth>,
-  borderCollapse?: CSSPropertyValue<borderCollapse>,
-  borderColor?: CSSPropertyValue<borderColor>,
-  borderImage?: CSSPropertyValue<borderImage>,
-  borderImageOutset?: CSSPropertyValue<borderImageOutset>,
-  borderImageRepeat?: CSSPropertyValue<borderImageRepeat>,
-  borderImageSlice?: CSSPropertyValue<borderImageSlice>,
-  borderImageSource?: CSSPropertyValue<borderImageSource>,
-  borderImageWidth?: CSSPropertyValue<borderImageWidth>,
-  borderInlineEnd?: CSSPropertyValue<borderInlineEnd>,
-  borderInlineEndColor?: CSSPropertyValue<borderInlineEndColor>,
-  borderInlineEndStyle?: CSSPropertyValue<borderInlineEndStyle>,
-  borderInlineEndWidth?: CSSPropertyValue<borderInlineEndWidth>,
-  borderInlineStart?: CSSPropertyValue<borderInlineStart>,
-  borderInlineStartColor?: CSSPropertyValue<borderInlineStartColor>,
-  borderInlineStartStyle?: CSSPropertyValue<borderInlineStartStyle>,
-  borderInlineStartWidth?: CSSPropertyValue<borderInlineStartWidth>,
-  borderLeft?: CSSPropertyValue<border>,
-  borderLeftColor?: CSSPropertyValue<borderLeftColor>,
-  borderLeftStyle?: CSSPropertyValue<borderLeftStyle>,
-  borderLeftWidth?: CSSPropertyValue<borderLeftWidth>,
-  borderRadius?: CSSPropertyValue<borderRadius>,
-  borderRight?: CSSPropertyValue<border>,
-  borderRightColor?: CSSPropertyValue<borderRightColor>,
-  borderRightStyle?: CSSPropertyValue<borderRightStyle>,
-  borderRightWidth?: CSSPropertyValue<borderRightWidth>,
-  borderSpacing?: CSSPropertyValue<borderSpacing>,
-  borderStyle?: CSSPropertyValue<borderStyle>,
-  borderTop?: CSSPropertyValue<border>,
-  borderTopColor?: CSSPropertyValue<color>,
-  borderTopLeftRadius?: CSSPropertyValue<borderTopLeftRadius>,
-  borderTopRightRadius?: CSSPropertyValue<borderTopRightRadius>,
-  borderTopStyle?: CSSPropertyValue<borderTopStyle>,
-  borderTopWidth?: CSSPropertyValue<borderTopWidth>,
-  borderWidth?: CSSPropertyValue<borderWidth>,
-  bottom?: CSSPropertyValue<number | string>,
-  boxAlign?: CSSPropertyValue<boxAlign>,
-  boxDecorationBreak?: CSSPropertyValue<boxDecorationBreak>,
-  boxDirection?: CSSPropertyValue<boxDirection>,
-  boxFlex?: CSSPropertyValue<boxFlex>,
-  boxFlexGroup?: CSSPropertyValue<boxFlexGroup>,
-  boxLines?: CSSPropertyValue<boxLines>,
-  boxOrdinalGroup?: CSSPropertyValue<boxOrdinalGroup>,
-  boxOrient?: CSSPropertyValue<boxOrient>,
-  boxPack?: CSSPropertyValue<boxPack>,
-  boxShadow?: CSSPropertyValue<boxShadow>,
-  boxSizing?: CSSPropertyValue<boxSizing>,
-  boxSuppress?: CSSPropertyValue<boxSuppress>,
-  breakAfter?: CSSPropertyValue<breakAfter>,
-  breakBefore?: CSSPropertyValue<breakBefore>,
-  breakInside?: CSSPropertyValue<breakInside>,
-  captionSide?: CSSPropertyValue<captionSide>,
-  clear?: CSSPropertyValue<clear>,
-  clip?: CSSPropertyValue<clip>,
-  clipPath?: CSSPropertyValue<clipPath>,
-  color?: CSSPropertyValue<color>,
-  columnCount?: CSSPropertyValue<columnCount>,
-  columnFill?: CSSPropertyValue<columnFill>,
-  columnGap?: CSSPropertyValue<columnGap>,
-  columnRule?: CSSPropertyValue<columnRule>,
-  columnRuleColor?: CSSPropertyValue<columnRuleColor>,
-  columnRuleStyle?: CSSPropertyValue<columnRuleStyle>,
-  columnRuleWidth?: CSSPropertyValue<columnRuleWidth>,
-  columnSpan?: CSSPropertyValue<columnSpan>,
-  columnWidth?: CSSPropertyValue<columnWidth>,
-  columns?: CSSPropertyValue<columns>,
-  contain?: CSSPropertyValue<contain>,
-  content?: CSSPropertyValue<content>,
-  counterIncrement?: CSSPropertyValue<counterIncrement>,
-  counterReset?: CSSPropertyValue<counterReset>,
-  cursor?: CSSPropertyValue<cursor>,
-  direction?: CSSPropertyValue<direction>,
-  display?: CSSPropertyValue<display>,
-  displayInside?: CSSPropertyValue<displayInside>,
-  displayList?: CSSPropertyValue<displayList>,
-  displayOutside?: CSSPropertyValue<displayOutside>,
-  emptyCells?: CSSPropertyValue<emptyCells>,
-  filter?: CSSPropertyValue<filter>,
-  flex?: CSSPropertyValue<flex>,
-  flexBasis?: CSSPropertyValue<flexBasis>,
-  flexDirection?: CSSPropertyValue<flexDirection>,
-  flexFlow?: CSSPropertyValue<flexFlow>,
-  flexGrow?: CSSPropertyValue<flexGrow>,
-  flexShrink?: CSSPropertyValue<flexShrink>,
-  flexWrap?: CSSPropertyValue<flexWrap>,
-  float?: CSSPropertyValue<float>,
-  font?: CSSPropertyValue<font>,
-  fontFamily?: CSSPropertyValue<fontFamily>,
-  fontFeatureSettings?: CSSPropertyValue<fontFeatureSettings>,
-  fontKerning?: CSSPropertyValue<fontKerning>,
-  fontLanguageOverride?: CSSPropertyValue<fontLanguageOverride>,
-  fontSize?: CSSPropertyValue<fontSize>,
-  fontSizeAdjust?: CSSPropertyValue<fontSizeAdjust>,
-  fontStretch?: CSSPropertyValue<fontStretch>,
-  fontStyle?: CSSPropertyValue<fontStyle>,
-  fontSynthesis?: CSSPropertyValue<fontSynthesis>,
-  fontVariant?: CSSPropertyValue<fontVariant>,
-  fontVariantAlternates?: CSSPropertyValue<fontVariantAlternates>,
-  fontVariantCaps?: CSSPropertyValue<fontVariantCaps>,
-  fontVariantEastAsian?: CSSPropertyValue<fontVariantEastAsian>,
-  fontVariantLigatures?: CSSPropertyValue<fontVariantLigatures>,
-  fontVariantNumeric?: CSSPropertyValue<fontVariantNumeric>,
-  fontVariantPosition?: CSSPropertyValue<fontVariantPosition>,
-  fontWeight?: CSSPropertyValue<fontWeight>,
-  grid?: CSSPropertyValue<grid>,
-  gridArea?: CSSPropertyValue<gridArea>,
-  gridAutoColumns?: CSSPropertyValue<gridAutoColumns>,
-  gridAutoFlow?: CSSPropertyValue<gridAutoFlow>,
-  gridAutoRows?: CSSPropertyValue<gridAutoRows>,
-  gridColumn?: CSSPropertyValue<gridColumn>,
-  gridColumnEnd?: CSSPropertyValue<gridColumnEnd>,
-  gridColumnGap?: CSSPropertyValue<gridColumnGap>,
-  gridColumnStart?: CSSPropertyValue<gridColumnStart>,
-  gridGap?: CSSPropertyValue<gridGap>,
-  gridRow?: CSSPropertyValue<gridRow>,
-  gridRowEnd?: CSSPropertyValue<gridRowEnd>,
-  gridRowGap?: CSSPropertyValue<gridRowGap>,
-  gridRowStart?: CSSPropertyValue<gridRowStart>,
-  gridTemplate?: CSSPropertyValue<gridTemplate>,
-  gridTemplateAreas?: CSSPropertyValue<gridTemplateAreas>,
-  gridTemplateColumns?: CSSPropertyValue<gridTemplateColumns>,
-  gridTemplateRows?: CSSPropertyValue<gridTemplateRows>,
-  height?: CSSPropertyValue<number | string>,
-  hyphens?: CSSPropertyValue<hyphens>,
-  imageOrientation?: CSSPropertyValue<imageOrientation>,
-  imageRendering?: CSSPropertyValue<imageRendering>,
-  imageResolution?: CSSPropertyValue<imageResolution>,
-  imeMode?: CSSPropertyValue<imeMode>,
-  initialLetter?: CSSPropertyValue<initialLetter>,
-  initialLetterAlign?: CSSPropertyValue<initialLetterAlign>,
-  inlineSize?: CSSPropertyValue<inlineSize>,
-  isolation?: CSSPropertyValue<isolation>,
-  justifyContent?: CSSPropertyValue<justifyContent>,
-  left?: CSSPropertyValue<number | string>,
-  letterSpacing?: CSSPropertyValue<letterSpacing>,
-  lineBreak?: CSSPropertyValue<lineBreak>,
-  lineHeight?: CSSPropertyValue<lineHeight>,
-  listStyle?: CSSPropertyValue<listStyle>,
-  listStyleImage?: CSSPropertyValue<listStyleImage>,
-  listStylePosition?: CSSPropertyValue<listStylePosition>,
-  listStyleType?: CSSPropertyValue<listStyleType>,
-  margin?: CSSPropertyValue<margin>,
-  marginBlockEnd?: CSSPropertyValue<marginBlockEnd>,
-  marginBlockStart?: CSSPropertyValue<marginBlockStart>,
-  marginBottom?: CSSPropertyValue<marginBottom>,
-  marginInlineEnd?: CSSPropertyValue<marginInlineEnd>,
-  marginInlineStart?: CSSPropertyValue<marginInlineStart>,
-  marginLeft?: CSSPropertyValue<marginLeft>,
-  marginRight?: CSSPropertyValue<marginRight>,
-  marginTop?: CSSPropertyValue<marginTop>,
-  markerOffset?: CSSPropertyValue<markerOffset>,
-  mask?: CSSPropertyValue<mask>,
-  maskClip?: CSSPropertyValue<maskClip>,
-  maskComposite?: CSSPropertyValue<maskComposite>,
-  maskImage?: CSSPropertyValue<maskImage>,
-  maskMode?: CSSPropertyValue<maskMode>,
-  maskOrigin?: CSSPropertyValue<maskOrigin>,
-  maskPosition?: CSSPropertyValue<maskPosition>,
-  maskRepeat?: CSSPropertyValue<maskRepeat>,
-  maskSize?: CSSPropertyValue<maskSize>,
-  maskType?: CSSPropertyValue<maskType>,
-  maxBlockSize?: CSSPropertyValue<maxBlockSize>,
-  maxHeight?: CSSPropertyValue<maxHeight>,
-  maxInlineSize?: CSSPropertyValue<maxInlineSize>,
-  maxWidth?: CSSPropertyValue<maxWidth>,
-  minBlockSize?: CSSPropertyValue<minBlockSize>,
-  minHeight?: CSSPropertyValue<minHeight>,
-  minInlineSize?: CSSPropertyValue<minInlineSize>,
-  minWidth?: CSSPropertyValue<minWidth>,
-  mixBlendMode?: CSSPropertyValue<mixBlendMode>,
-  motion?: CSSPropertyValue<motion>,
-  motionOffset?: CSSPropertyValue<motionOffset>,
-  motionPath?: CSSPropertyValue<motionPath>,
-  motionRotation?: CSSPropertyValue<motionRotation>,
-  objectFit?: CSSPropertyValue<objectFit>,
-  objectPosition?: CSSPropertyValue<objectPosition>,
-  offsetBlockEnd?: CSSPropertyValue<offsetBlockEnd>,
-  offsetBlockStart?: CSSPropertyValue<offsetBlockStart>,
-  offsetInlineEnd?: CSSPropertyValue<offsetInlineEnd>,
-  offsetInlineStart?: CSSPropertyValue<offsetInlineStart>,
-  opacity?: CSSPropertyValue<opacity>,
-  order?: CSSPropertyValue<order>,
-  orphans?: CSSPropertyValue<orphans>,
-  outline?: CSSPropertyValue<outline>,
-  outlineColor?: CSSPropertyValue<outlineColor>,
-  outlineOffset?: CSSPropertyValue<outlineOffset>,
-  outlineStyle?: CSSPropertyValue<outlineStyle>,
-  outlineWidth?: CSSPropertyValue<outlineWidth>,
-  overflow?: CSSPropertyValue<overflow>,
-  overflowClipBox?: CSSPropertyValue<overflowClipBox>,
-  overflowWrap?: CSSPropertyValue<overflowWrap>,
-  overflowX?: CSSPropertyValue<overflowX>,
-  overflowY?: CSSPropertyValue<overflowY>,
-  padding?: CSSPropertyValue<padding>,
-  paddingBlockEnd?: CSSPropertyValue<paddingBlockEnd>,
-  paddingBlockStart?: CSSPropertyValue<paddingBlockStart>,
-  paddingBottom?: CSSPropertyValue<paddingBottom>,
-  paddingInlineEnd?: CSSPropertyValue<paddingInlineEnd>,
-  paddingInlineStart?: CSSPropertyValue<paddingInlineStart>,
-  paddingLeft?: CSSPropertyValue<paddingLeft>,
-  paddingRight?: CSSPropertyValue<paddingRight>,
-  paddingTop?: CSSPropertyValue<paddingTop>,
-  paddingH?: CSSPropertyValue<number | string>,
-  paddingV?: CSSPropertyValue<number | string>,
-  marginH?: CSSPropertyValue<number | string>,
-  marginV?: CSSPropertyValue<number | string>,
-  pageBreakAfter?: CSSPropertyValue<pageBreakAfter>,
-  pageBreakBefore?: CSSPropertyValue<pageBreakBefore>,
-  pageBreakInside?: CSSPropertyValue<pageBreakInside>,
-  perspective?: CSSPropertyValue<perspective>,
-  perspectiveOrigin?: CSSPropertyValue<perspectiveOrigin>,
-  pointerEvents?: CSSPropertyValue<pointerEvents>,
-  position?: CSSPropertyValue<position>,
-  quotes?: CSSPropertyValue<quotes>,
-  resize?: CSSPropertyValue<resize>,
-  right?: CSSPropertyValue<number | string>,
-  rubyAlign?: CSSPropertyValue<rubyAlign>,
-  rubyMerge?: CSSPropertyValue<rubyMerge>,
-  rubyPosition?: CSSPropertyValue<rubyPosition>,
-  scrollBehavior?: CSSPropertyValue<scrollBehavior>,
-  scrollSnapCoordinate?: CSSPropertyValue<scrollSnapCoordinate>,
-  scrollSnapDestination?: CSSPropertyValue<scrollSnapDestination>,
-  scrollSnapPointsX?: CSSPropertyValue<scrollSnapPointsX>,
-  scrollSnapPointsY?: CSSPropertyValue<scrollSnapPointsY>,
-  scrollSnapType?: CSSPropertyValue<scrollSnapType>,
-  scrollSnapTypeX?: CSSPropertyValue<scrollSnapTypeX>,
-  scrollSnapTypeY?: CSSPropertyValue<scrollSnapTypeY>,
-  shapeImageThreshold?: CSSPropertyValue<shapeImageThreshold>,
-  shapeMargin?: CSSPropertyValue<shapeMargin>,
-  shapeOutside?: CSSPropertyValue<shapeOutside>,
-  tabSize?: CSSPropertyValue<tabSize>,
-  tableLayout?: CSSPropertyValue<tableLayout>,
-  textAlign?: CSSPropertyValue<textAlign>,
-  textAlignLast?: CSSPropertyValue<textAlignLast>,
-  textCombineUpright?: CSSPropertyValue<textCombineUpright>,
-  textDecoration?: CSSPropertyValue<textDecoration>,
-  textDecorationColor?: CSSPropertyValue<textDecorationColor>,
-  textDecorationLine?: CSSPropertyValue<textDecorationLine>,
-  textDecorationSkip?: CSSPropertyValue<textDecorationSkip>,
-  textDecorationStyle?: CSSPropertyValue<textDecorationStyle>,
-  textEmphasis?: CSSPropertyValue<textEmphasis>,
-  textEmphasisColor?: CSSPropertyValue<textEmphasisColor>,
-  textEmphasisPosition?: CSSPropertyValue<textEmphasisPosition>,
-  textEmphasisStyle?: CSSPropertyValue<textEmphasisStyle>,
-  textIndent?: CSSPropertyValue<textIndent>,
-  textOrientation?: CSSPropertyValue<textOrientation>,
-  textOverflow?: CSSPropertyValue<textOverflow>,
-  textRendering?: CSSPropertyValue<textRendering>,
-  textShadow?: CSSPropertyValue<textShadow>,
-  textSizeAdjust?: CSSPropertyValue<textSizeAdjust>,
-  textTransform?: CSSPropertyValue<textTransform>,
-  textUnderlinePosition?: CSSPropertyValue<textUnderlinePosition>,
-  top?: CSSPropertyValue<number | string>,
-  touchAction?: CSSPropertyValue<touchAction>,
-  transform?: CSSPropertyValue<transform>,
-  transformBox?: CSSPropertyValue<transformBox>,
-  transformOrigin?: CSSPropertyValue<transformOrigin>,
-  transformStyle?: CSSPropertyValue<transformStyle>,
-  transition?: CSSPropertyValue<transition>,
-  transitionDelay?: CSSPropertyValue<transitionDelay>,
-  transitionDuration?: CSSPropertyValue<transitionDuration>,
-  transitionProperty?: CSSPropertyValue<transitionProperty>,
-  transitionTimingFunction?: CSSPropertyValue<transitionTimingFunction>,
-  unicodeBidi?: CSSPropertyValue<unicodeBidi>,
-  userSelect?: CSSPropertyValue<userSelect>,
-  verticalAlign?: CSSPropertyValue<verticalAlign>,
-  visibility?: CSSPropertyValue<visibility>,
-  whiteSpace?: CSSPropertyValue<whiteSpace>,
-  widows?: CSSPropertyValue<widows>,
-  width?: CSSPropertyValue<number | string>,
-  willChange?: CSSPropertyValue<willChange>,
-  wordBreak?: CSSPropertyValue<wordBreak>,
-  wordSpacing?: CSSPropertyValue<wordSpacing>,
-  wordWrap?: CSSPropertyValue<wordWrap>,
-  writingMode?: CSSPropertyValue<writingMode>,
-  zIndex?: CSSPropertyValue<zIndex>,
-  alignmentBaseline?: CSSPropertyValue<alignmentBaseline>,
-  baselineShift?: CSSPropertyValue<baselineShift>,
-  behavior?: CSSPropertyValue<behavior>,
-  clipRule?: CSSPropertyValue<clipRule>,
-  cue?: CSSPropertyValue<cue>,
-  cueAfter?: CSSPropertyValue<cueAfter>,
-  cueBefore?: CSSPropertyValue<cueBefore>,
-  dominantBaseline?: CSSPropertyValue<dominantBaseline>,
-  fill?: CSSPropertyValue<fill>,
-  fillOpacity?: CSSPropertyValue<fillOpacity>,
-  fillRule?: CSSPropertyValue<fillRule>,
-  glyphOrientationHorizontal?: CSSPropertyValue<glyphOrientationHorizontal>,
-  glyphOrientationVertical?: CSSPropertyValue<glyphOrientationVertical>,
-  kerning?: CSSPropertyValue<kerning>,
-  marker?: CSSPropertyValue<marker>,
-  markerEnd?: CSSPropertyValue<markerEnd>,
-  markerMid?: CSSPropertyValue<markerMid>,
-  markerStart?: CSSPropertyValue<markerStart>,
-  pause?: CSSPropertyValue<pause>,
-  pauseAfter?: CSSPropertyValue<pauseAfter>,
-  pauseBefore?: CSSPropertyValue<pauseBefore>,
-  rest?: CSSPropertyValue<rest>,
-  restAfter?: CSSPropertyValue<restAfter>,
-  restBefore?: CSSPropertyValue<restBefore>,
-  shapeRendering?: CSSPropertyValue<shapeRendering>,
-  src?: CSSPropertyValue<src>,
-  speak?: CSSPropertyValue<speak>,
-  speakAs?: CSSPropertyValue<speakAs>,
-  stroke?: CSSPropertyValue<stroke>,
-  strokeDasharray?: CSSPropertyValue<strokeDasharray>,
-  strokeDashoffset?: CSSPropertyValue<strokeDashoffset>,
-  strokeLinecap?: CSSPropertyValue<strokeLinecap>,
-  strokeLinejoin?: CSSPropertyValue<strokeLinejoin>,
-  strokeMiterlimit?: CSSPropertyValue<strokeMiterlimit>,
-  strokeOpacity?: CSSPropertyValue<strokeOpacity>,
-  strokeWidth?: CSSPropertyValue<strokeWidth>,
-  textAnchor?: CSSPropertyValue<textAnchor>,
-  unicodeRange?: CSSPropertyValue<unicodeRange>,
-  voiceBalance?: CSSPropertyValue<voiceBalance>,
-  voiceDuration?: CSSPropertyValue<voiceDuration>,
-  voiceFamily?: CSSPropertyValue<voiceFamily>,
-  voicePitch?: CSSPropertyValue<voicePitch>,
-  voiceRange?: CSSPropertyValue<voiceRange>,
-  voiceRate?: CSSPropertyValue<voiceRate>,
-  voiceStress?: CSSPropertyValue<voiceStress>,
-  voiceVolume?: CSSPropertyValue<voiceVolume>,
-  zoom?: CSSPropertyValue<zoom>,
-|};