Remaining css

packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx

@@ -6,6 +6,8 @@ import {
   actionListHeaderSearchCss,
   actionListHeaderSelectorCss,
   actionListHeaderWrapperCss,
+  selectorButtonCss,
+  selectorButtonSmallCss,
 } from './utils/createStylingFromTheme';
 
 const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>
@@ -54,11 +56,7 @@ const ActionListHeader: FunctionComponent<Props> = ({
                     Sweep: onSweep,
                   })[btn]()
                 }
-                {...styling(
+                css={[selectorButtonCss, selectorButtonSmallCss]}
-                  ['selectorButton', 'selectorButtonSmall'],
-                  false,
-                  true,
-                )}
               >
                 {btn}
               </div>

packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx

@@ -15,6 +15,9 @@ import {
   actionListItemSelectorCss,
   actionListItemSkippedCss,
   actionListItemTimeCss,
+  selectorButtonCss,
+  selectorButtonSelectedCss,
+  selectorButtonSmallCss,
 } from './utils/createStylingFromTheme';
 
 const BUTTON_SKIP = 'Skip';
@@ -131,15 +134,11 @@ export default class ActionListRow<
                       <div
                         key={btn}
                         onClick={(e) => this.handleButtonClick(btn, e)}
-                        {...styling(
+                        css={[
-                          [
+                          selectorButtonCss,
-                            'selectorButton',
+                          isButtonSelected(btn) && selectorButtonSelectedCss,
-                            isButtonSelected(btn) && 'selectorButtonSelected',
+                          selectorButtonSmallCss,
-                            'selectorButtonSmall',
+                        ]}
-                          ],
-                          isButtonSelected(btn),
-                          true,
-                        )}
                       >
                         {btn}
                       </div>

packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx

@@ -10,7 +10,12 @@ import ActionPreviewHeader from './ActionPreviewHeader';
 import DiffTab from './tabs/DiffTab';
 import StateTab from './tabs/StateTab';
 import ActionTab from './tabs/ActionTab';
-import { actionPreviewCss } from './utils/createStylingFromTheme';
+import {
+  actionPreviewContentCss,
+  actionPreviewCss,
+  stateErrorCss,
+  treeItemPinCss,
+} from './utils/createStylingFromTheme';
 
 export interface TabComponentProps<S, A extends Action<string>> {
   labelRenderer: LabelRenderer;
@@ -128,7 +133,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
           {...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }}
         />
         {!error && (
-          <div key="actionPreviewContent" {...styling('actionPreviewContent')}>
+          <div key="actionPreviewContent" css={actionPreviewContentCss}>
             <TabComponent
               labelRenderer={this.labelRenderer}
               {...{
@@ -152,7 +157,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
             />
           </div>
         )}
-        {error && <div {...styling('stateError')}>{error}</div>}
+        {error && <div css={stateErrorCss}>{error}</div>}
       </div>
     );
   }
@@ -164,7 +169,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
       <span>
         <span {...styling('treeItemKey')}>{key}</span>
         <span
-          {...styling('treeItemPin')}
+          css={treeItemPinCss}
           onClick={() =>
             onInspectPath([
               ...inspectedPath.slice(0, inspectedPath.length - 1),

packages/redux-devtools-inspector-monitor/src/ActionPreviewHeader.tsx

@@ -2,6 +2,15 @@ import React, { FunctionComponent } from 'react';
 import { Action } from 'redux';
 import { StylingFunction } from 'react-base16-styling';
 import { Tab } from './ActionPreview';
+import {
+  inspectedPathCss,
+  inspectedPathKeyCss,
+  inspectedPathKeyLinkCss,
+  previewHeaderCss,
+  selectorButtonCss,
+  selectorButtonSelectedCss,
+  tabSelectorCss,
+} from './utils/createStylingFromTheme';
 
 interface Props<S, A extends Action<string>> {
   tabs: Tab<S, A>[];
@@ -15,31 +24,25 @@ interface Props<S, A extends Action<string>> {
 const ActionPreviewHeader: FunctionComponent<
   Props<unknown, Action<string>>
 > = ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
-  <div key="previewHeader" {...styling('previewHeader')}>
+  <div key="previewHeader" css={previewHeaderCss}>
-    <div {...styling('tabSelector')}>
+    <div css={tabSelectorCss}>
       {tabs.map((tab) => (
         <div
           onClick={() => onSelectTab(tab.name)}
           key={tab.name}
-          {...styling(
+          css={[
-            [
+            selectorButtonCss,
-              'selectorButton',
+            tab.name === tabName && selectorButtonSelectedCss,
-              tab.name === tabName && 'selectorButtonSelected',
+          ]}
-            ],
-            tab.name === tabName,
-          )}
         >
           {tab.name}
         </div>
       ))}
     </div>
-    <div {...styling('inspectedPath')}>
+    <div css={inspectedPathCss}>
       {inspectedPath.length ? (
-        <span {...styling('inspectedPathKey')}>
+        <span css={inspectedPathKeyCss}>
-          <a
+          <a onClick={() => onInspectPath([])} css={inspectedPathKeyLinkCss}>
-            onClick={() => onInspectPath([])}
-            {...styling('inspectedPathKeyLink')}
-          >
             {tabName}
           </a>
         </span>
@@ -50,10 +53,10 @@ const ActionPreviewHeader: FunctionComponent<
         idx === inspectedPath.length - 1 ? (
           <span key={key}>{key}</span>
         ) : (
-          <span key={key} {...styling('inspectedPathKey')}>
+          <span key={key} css={inspectedPathKeyCss}>
             <a
               onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
-              {...styling('inspectedPathKeyLink')}
+              css={inspectedPathKeyLinkCss}
             >
               {key}
             </a>

packages/redux-devtools-inspector-monitor/src/RightSlider.tsx

@@ -1,5 +1,11 @@
 import React, { FunctionComponent } from 'react';
 import { StylingFunction } from 'react-base16-styling';
+import {
+  rightSliderCss,
+  rightSliderRotateCss,
+  rightSliderRotateShownCss,
+  rightSliderShownCss,
+} from './utils/createStylingFromTheme';
 
 interface Props {
   styling: StylingFunction;
@@ -15,12 +21,12 @@ const RightSlider: FunctionComponent<Props> = ({
   rotate,
 }) => (
   <div
-    {...styling([
+    css={[
-      'rightSlider',
+      rightSliderCss,
-      shown && 'rightSliderShown',
+      shown && rightSliderShownCss,
-      rotate && 'rightSliderRotate',
+      rotate && rightSliderRotateCss,
-      rotate && shown && 'rightSliderRotateShown',
+      rotate && shown && rightSliderRotateShownCss,
-    ])}
+    ]}
   >
     {children}
   </div>

packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx

@@ -7,6 +7,16 @@ import { StylingFunction } from 'react-base16-styling';
 import { Base16Theme } from 'redux-devtools-themes';
 import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
+import {
+  diffAddCss,
+  diffCss,
+  diffRemoveCss,
+  diffUpdateArrowCss,
+  diffUpdateFromCss,
+  diffUpdateToCss,
+  diffWrapCss,
+  stateDiffEmptyCss,
+} from '../utils/createStylingFromTheme';
 
 function stringifyAndShrink(val: any, isWideLayout?: boolean) {
   if (val === null) {
@@ -85,7 +95,7 @@ export default class JSONDiff extends Component<Props, State> {
     const { styling, base16Theme, ...props } = this.props;
 
     if (!this.state.data) {
-      return <div {...styling('stateDiffEmpty')}>(states are equal)</div>;
+      return <div css={stateDiffEmptyCss}>(states are equal)</div>;
     }
 
     return (
@@ -116,43 +126,36 @@ export default class JSONDiff extends Component<Props, State> {
   valueRenderer = (raw: any, value: any) => {
     const { styling, isWideLayout } = this.props;
 
-    function renderSpan(name: string, body: string) {
-      return (
-        <span key={name} {...styling(['diff', name])}>
-          {body}
-        </span>
-      );
-    }
-
     if (Array.isArray(value)) {
       switch (value.length) {
         case 1:
           return (
-            <span {...styling('diffWrap')}>
+            <span css={diffWrapCss}>
-              {renderSpan(
+              <span key="diffAdd" css={[diffCss, diffAddCss]}>
-                'diffAdd',
+                {stringifyAndShrink(value[0], isWideLayout)}
-                stringifyAndShrink(value[0], isWideLayout),
+              </span>
-              )}
             </span>
           );
         case 2:
           return (
-            <span {...styling('diffWrap')}>
+            <span css={diffWrapCss}>
-              {renderSpan(
+              <span key="diffUpdateFrom" css={[diffCss, diffUpdateFromCss]}>
-                'diffUpdateFrom',
+                {stringifyAndShrink(value[0], isWideLayout)}
-                stringifyAndShrink(value[0], isWideLayout),
+              </span>
-              )}
+              <span key="diffUpdateArrow" css={[diffCss, diffUpdateArrowCss]}>
-              {renderSpan('diffUpdateArrow', ' => ')}
+                {' => '}
-              {renderSpan(
+              </span>
-                'diffUpdateTo',
+              <span key="diffUpdateTo" css={[diffCss, diffUpdateToCss]}>
-                stringifyAndShrink(value[1], isWideLayout),
+                {stringifyAndShrink(value[1], isWideLayout)}
-              )}
+              </span>
             </span>
           );
         case 3:
           return (
-            <span {...styling('diffWrap')}>
+            <span css={diffWrapCss}>
-              {renderSpan('diffRemove', stringifyAndShrink(value[0]))}
+              <span key="diffRemove" css={[diffCss, diffRemoveCss]}>
+                {stringifyAndShrink(value[0])}
+              </span>
             </span>
           );
       }

packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { isCollection, isIndexed, isKeyed } from 'immutable';
 import { StylingFunction } from 'react-base16-styling';
 import isIterable from '../utils/isIterable';
+import { treeItemHintCss } from '../utils/createStylingFromTheme';
 
 const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';
 
@@ -79,7 +80,7 @@ const getItemString = (
   isWideLayout: boolean,
   isDiff?: boolean,
 ) => (
-  <span {...styling('treeItemHint')}>
+  <span css={treeItemHintCss}>
     {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
     {dataTypeKey && data[dataTypeKey] ? `${data[dataTypeKey] as string} ` : ''}
     {getText(type, data, isWideLayout, isDiff)}

packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts

@@ -201,177 +201,165 @@ export const actionPreviewCss: Interpolation<Theme> = (theme) => ({
   backgroundColor: colorMap(theme).BACKGROUND_COLOR,
 });
 
-const getSheetFromColorMap = (map: ColorMap) => ({
+export const actionPreviewContentCss = css({ flex: 1, overflowY: 'auto' });
-  actionPreviewContent: {
-    flex: 1,
-    'overflow-y': 'auto',
-  },
 
-  stateDiff: {
+export const stateDiffEmptyCss: Interpolation<Theme> = (theme) => ({
-    padding: '5px 0',
+  padding: '10px',
-  },
 
-  stateDiffEmpty: {
+  color: colorMap(theme).TEXT_PLACEHOLDER_COLOR,
-    padding: '10px',
+});
 
-    color: map.TEXT_PLACEHOLDER_COLOR,
+export const stateErrorCss: Interpolation<Theme> = (theme) => ({
-  },
+  padding: '10px',
+  marginLeft: '14px',
+  fontWeight: 'bold',
 
-  stateError: {
+  color: colorMap(theme).ERROR_COLOR,
-    padding: '10px',
+});
-    'margin-left': '14px',
-    'font-weight': 'bold',
 
-    color: map.ERROR_COLOR,
+export const inspectedPathCss = css({ padding: '6px 0' });
-  },
 
-  inspectedPath: {
+export const inspectedPathKeyCss = css({
-    padding: '6px 0',
+  '&:not(:last-child):after': {
-  },
+    content: '" > "',
-
-  inspectedPathKey: {
-    '&:not(:last-child):after': {
-      content: '" > "',
-    },
-  },
-
-  inspectedPathKeyLink: {
-    cursor: 'pointer',
-    color: map.LINK_COLOR,
-    '&:hover': {
-      'text-decoration': 'underline',
-      color: map.LINK_HOVER_COLOR,
-    },
-  },
-
-  treeItemPin: {
-    'font-size': '0.7em',
-    'padding-left': '5px',
-    cursor: 'pointer',
-    '&:hover': {
-      'text-decoration': 'underline',
-    },
-
-    color: map.PIN_COLOR,
-  },
-
-  treeItemHint: {
-    color: map.ITEM_HINT_COLOR,
-  },
-
-  previewHeader: {
-    flex: '0 0 30px',
-    padding: '5px 10px',
-    'align-items': 'center',
-    'border-bottom-width': '1px',
-    'border-bottom-style': 'solid',
-
-    'background-color': map.HEADER_BACKGROUND_COLOR,
-    'border-bottom-color': map.HEADER_BORDER_COLOR,
-  },
-
-  tabSelector: {
-    position: 'relative',
-    display: 'inline-flex',
-    float: 'right',
-  },
-
-  selectorButton: {
-    cursor: 'pointer',
-    position: 'relative',
-    padding: '5px 10px',
-    'border-style': 'solid',
-    'border-width': '1px',
-    'border-left-width': 0,
-
-    '&:first-child': {
-      'border-left-width': '1px',
-      'border-top-left-radius': '3px',
-      'border-bottom-left-radius': '3px',
-    },
-
-    '&:last-child': {
-      'border-top-right-radius': '3px',
-      'border-bottom-right-radius': '3px',
-    },
-
-    'background-color': map.TAB_BACK_COLOR,
-
-    '&:hover': {
-      'background-color': map.TAB_BACK_HOVER_COLOR,
-    },
-
-    'border-color': map.TAB_BORDER_COLOR,
-  },
-
-  selectorButtonSmall: {
-    padding: '0px 8px',
-    'font-size': '0.8em',
-  },
-
-  selectorButtonSelected: {
-    'background-color': map.TAB_BACK_SELECTED_COLOR,
-  },
-
-  diff: {
-    padding: '2px 3px',
-    'border-radius': '3px',
-    position: 'relative',
-
-    color: map.TEXT_COLOR,
-  },
-
-  diffWrap: {
-    position: 'relative',
-    'z-index': 1,
-  },
-
-  diffAdd: {
-    'background-color': map.DIFF_ADD_COLOR,
-  },
-
-  diffRemove: {
-    'text-decoration': 'line-through',
-    'background-color': map.DIFF_REMOVE_COLOR,
-  },
-
-  diffUpdateFrom: {
-    'text-decoration': 'line-through',
-    'background-color': map.DIFF_REMOVE_COLOR,
-  },
-
-  diffUpdateTo: {
-    'background-color': map.DIFF_ADD_COLOR,
-  },
-
-  diffUpdateArrow: {
-    color: map.DIFF_ARROW_COLOR,
-  },
-
-  rightSlider: {
-    'font-smoothing': 'subpixel-antialiased', // http://stackoverflow.com/a/21136111/4218591
-    position: 'absolute',
-    right: 0,
-    transform: 'translateX(150%)',
-    transition: 'transform 0.2s ease-in-out',
-  },
-
-  rightSliderRotate: {
-    transform: 'rotateX(90deg)',
-    transition: 'transform 0.2s ease-in-out 0.08s',
-  },
-
-  rightSliderShown: {
-    position: 'static',
-    transform: 'translateX(0)',
-  },
-
-  rightSliderRotateShown: {
-    transform: 'rotateX(0)',
-    transition: 'transform 0.2s ease-in-out 0.18s',
   },
 });
 
+export const inspectedPathKeyLinkCss: Interpolation<Theme> = (theme) => ({
+  cursor: 'pointer',
+  color: colorMap(theme).LINK_COLOR,
+  '&:hover': {
+    textDecoration: 'underline',
+    color: colorMap(theme).LINK_HOVER_COLOR,
+  },
+});
+
+export const treeItemPinCss: Interpolation<Theme> = (theme) => ({
+  fontSize: '0.7em',
+  paddingLeft: '5px',
+  cursor: 'pointer',
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+
+  color: colorMap(theme).PIN_COLOR,
+});
+
+export const treeItemHintCss: Interpolation<Theme> = (theme) => ({
+  color: colorMap(theme).ITEM_HINT_COLOR,
+});
+
+export const previewHeaderCss: Interpolation<Theme> = (theme) => ({
+  flex: '0 0 30px',
+  padding: '5px 10px',
+  alignItems: 'center',
+  borderBottomWidth: '1px',
+  borderBottomStyle: 'solid',
+
+  backgroundColor: colorMap(theme).HEADER_BACKGROUND_COLOR,
+  borderBottomColor: colorMap(theme).HEADER_BORDER_COLOR,
+});
+
+export const tabSelectorCss = css({
+  position: 'relative',
+  display: 'inline-flex',
+  float: 'right',
+});
+
+export const selectorButtonCss: Interpolation<Theme> = (theme) => ({
+  cursor: 'pointer',
+  position: 'relative',
+  padding: '5px 10px',
+  borderStyle: 'solid',
+  borderWidth: '1px',
+  borderLeftWidth: 0,
+
+  '&:first-child': {
+    borderLeftWidth: '1px',
+    borderTopLeftRadius: '3px',
+    borderBottomLeftRadius: '3px',
+  },
+
+  '&:last-child': {
+    borderTopRightRadius: '3px',
+    borderBottomRightRadius: '3px',
+  },
+
+  backgroundColor: colorMap(theme).TAB_BACK_COLOR,
+
+  '&:hover': {
+    backgroundColor: colorMap(theme).TAB_BACK_HOVER_COLOR,
+  },
+
+  borderColor: colorMap(theme).TAB_BORDER_COLOR,
+});
+
+export const selectorButtonSmallCss = css({
+  padding: '0px 8px',
+  fontSize: '0.8em',
+});
+
+export const selectorButtonSelectedCss: Interpolation<Theme> = (theme) => ({
+  backgroundColor: colorMap(theme).TAB_BACK_SELECTED_COLOR,
+});
+
+export const diffCss: Interpolation<Theme> = (theme) => ({
+  padding: '2px 3px',
+  borderRadius: '3px',
+  position: 'relative',
+
+  color: colorMap(theme).TEXT_COLOR,
+});
+
+export const diffWrapCss = css({ position: 'relative', zIndex: 1 });
+
+export const diffAddCss: Interpolation<Theme> = (theme) => ({
+  backgroundColor: colorMap(theme).DIFF_ADD_COLOR,
+});
+
+export const diffRemoveCss: Interpolation<Theme> = (theme) => ({
+  textDecoration: 'line-through',
+  backgroundColor: colorMap(theme).DIFF_REMOVE_COLOR,
+});
+
+export const diffUpdateFromCss: Interpolation<Theme> = (theme) => ({
+  textDecoration: 'line-through',
+  backgroundColor: colorMap(theme).DIFF_REMOVE_COLOR,
+});
+
+export const diffUpdateToCss: Interpolation<Theme> = (theme) => ({
+  backgroundColor: colorMap(theme).DIFF_ADD_COLOR,
+});
+
+export const diffUpdateArrowCss: Interpolation<Theme> = (theme) => ({
+  color: colorMap(theme).DIFF_ARROW_COLOR,
+});
+
+export const rightSliderCss = css({
+  WebkitFontSmoothing: 'subpixel-antialiased', // http://stackoverflow.com/a/21136111/4218591
+  position: 'absolute',
+  right: 0,
+  transform: 'translateX(150%)',
+  transition: 'transform 0.2s ease-in-out',
+});
+
+export const rightSliderRotateCss = css({
+  transform: 'rotateX(90deg)',
+  transition: 'transform 0.2s ease-in-out 0.08s',
+});
+
+export const rightSliderShownCss = css({
+  position: 'static',
+  transform: 'translateX(0)',
+});
+
+export const rightSliderRotateShownCss = css({
+  transform: 'rotateX(0)',
+  transition: 'transform 0.2s ease-in-out 0.18s',
+});
+
+const getSheetFromColorMap = (map: ColorMap) => ({});
+
 let themeSheet: StyleSheet;
 
 const getDefaultThemeStyling = (theme: Base16Theme) => {