Finish convert styling to Emotion

packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx

@@ -5,7 +5,19 @@ export function NoRtkQueryApi(): JSX.Element {
   return (
     <StyleUtilsContext.Consumer>
       {({ styling }) => (
-        <div {...styling('noApiFound')}>
+        <div
+          css={(theme) => ({
+            width: '100%',
+            textAlign: 'center',
+            color: theme.TEXT_COLOR,
+            padding: '1.4em',
+            '& a': {
+              fontSize: 'inherit',
+              color: theme.TEXT_COLOR,
+              textDecoration: 'underline',
+            },
+          })}
+        >
           No rtk-query api found.
           <br />
           Make sure to follow{' '}

packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx

@@ -143,7 +143,10 @@ export class QueryForm extends React.PureComponent<
               id="rtk-query-monitor-query-selection-form"
               action="#"
               onSubmit={this.handleSubmit}
-              {...styling('queryForm')}
+              css={{
+                display: 'flex',
+                flexFlow: 'column nowrap',
+              }}
             >
               <div
                 css={(theme) => ({
@@ -160,7 +163,42 @@ export class QueryForm extends React.PureComponent<
                 <label htmlFor={searchId} css={srOnlyCss}>
                   filter query
                 </label>
-                <div {...styling('querySearch')}>
+                <div
+                  css={(theme) => ({
+                    maxWidth: '65%',
+                    backgroundColor: theme.BACKGROUND_COLOR,
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexFlow: 'row nowrap',
+                    flex: '1 1 auto',
+                    paddingRight: 6,
+                    '& input': {
+                      outline: 'none',
+                      border: 'none',
+                      width: '100%',
+                      flex: '1 1 auto',
+                      padding: '5px 10px',
+                      fontSize: '1em',
+                      position: 'relative',
+                      fontFamily:
+                        'monaco, Consolas, "Lucida Console", monospace',
+
+                      backgroundColor: theme.BACKGROUND_COLOR,
+                      color: theme.TEXT_COLOR,
+
+                      '&::-webkit-input-placeholder': {
+                        color: theme.TEXT_PLACEHOLDER_COLOR,
+                      },
+
+                      '&::-moz-placeholder': {
+                        color: theme.TEXT_PLACEHOLDER_COLOR,
+                      },
+                      '&::-webkit-search-cancel-button': {
+                        WebkitAppearance: 'none',
+                      },
+                    },
+                  })}
+                >
                   <input
                     ref={this.inputSearchRef}
                     type="search"
@@ -175,7 +213,32 @@ export class QueryForm extends React.PureComponent<
                       +(this.state.searchValue.length === 0) || undefined
                     }
                     onClick={this.handleClearSearchClick}
-                    {...styling('closeButton')}
+                    css={(theme) => ({
+                      WebkitAppearance: 'none',
+                      border: 'none',
+                      outline: 'none',
+                      boxShadow: 'none',
+                      display: 'block',
+                      flex: '0 0 auto',
+                      cursor: 'pointer',
+                      background: 'transparent',
+                      position: 'relative',
+                      fontSize: 'inherit',
+                      '&[data-invisible="1"]': {
+                        visibility: 'hidden !important' as 'hidden',
+                      },
+                      '&::after': {
+                        content: '"\u00d7"',
+                        display: 'block',
+                        padding: 4,
+                        fontSize: '1.2em',
+                        color: theme.TEXT_PLACEHOLDER_COLOR,
+                        background: 'transparent',
+                      },
+                      '&:hover::after': {
+                        color: theme.TEXT_COLOR,
+                      },
+                    })}
                   />
                   <button
                     type="button"
@@ -184,7 +247,36 @@ export class QueryForm extends React.PureComponent<
                     data-type={regexToggleType}
                     aria-pressed={isRegexSearch}
                     onClick={this.handleRegexSearchClick}
-                    {...styling('toggleButton')}
+                    css={(theme) => ({
+                      width: '24px',
+                      height: '24px',
+                      display: 'inline-block',
+                      flex: '0 0 auto',
+                      color: theme.TEXT_PLACEHOLDER_COLOR,
+                      cursor: 'pointer',
+                      padding: 0,
+                      fontSize: '0.7em',
+                      letterSpacing: '-0.7px',
+                      outline: 'none',
+                      boxShadow: 'none',
+                      fontWeight: '700',
+                      border: 'none',
+
+                      '&:hover': {
+                        color: theme.TEXT_COLOR,
+                      },
+
+                      backgroundColor: 'transparent',
+                      '&[aria-pressed="true"]': {
+                        color: theme.BACKGROUND_COLOR,
+                        backgroundColor: theme.TEXT_COLOR,
+                      },
+
+                      '&[data-type="error"]': {
+                        color: theme.TEXT_COLOR,
+                        backgroundColor: theme.TOGGLE_BUTTON_ERROR,
+                      },
+                    })}
                   >
                     <RegexIcon />
                   </button>
@@ -203,7 +295,24 @@ export class QueryForm extends React.PureComponent<
                   onChange={this.handleSelectFilterChange}
                 />
               </div>
-              <div {...styling('sortBySection')}>
+              <div
+                css={{
+                  display: 'flex',
+                  padding: '0.4em',
+                  '& label': {
+                    display: 'flex',
+                    flex: '0 0 auto',
+                    whiteSpace: 'nowrap',
+                    alignItems: 'center',
+                    paddingRight: '0.4em',
+                  },
+
+                  '& > :last-child': {
+                    flex: '0 0 auto',
+                    marginLeft: '0.4em',
+                  },
+                }}
+              >
                 <label htmlFor={selectId}>Sort by</label>
                 <Select<SelectOption<QueryComparators>>
                   id={selectId}

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx

@@ -41,7 +41,23 @@ export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
     return (
       <StyleUtilsContext.Consumer>
         {({ styling }) => (
-          <article {...rootProps} {...styling('tabContent')}>
+          <article
+            {...rootProps}
+            css={(theme) => ({
+              display: 'block',
+              overflowY: 'auto',
+              padding: '0.5em 0',
+              color: theme.TAB_CONTENT_COLOR,
+              '& h2': {
+                color: theme.ULIST_STRONG_COLOR,
+                padding: '0.5em 1em',
+                fontWeight: 700,
+              },
+              '& h3': {
+                color: theme.ULIST_STRONG_COLOR,
+              },
+            })}
+          >
             <h2>{apiState.config.reducerPath}</h2>
             <TreeView
               before={<h3>State</h3>}

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx

@@ -26,7 +26,18 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
     return (
       <StyleUtilsContext.Consumer>
         {({ styling }) => (
-          <div {...styling('previewHeader')}>
+          <div
+            css={(theme) => ({
+              flex: '0 0 30px',
+              padding: '5px 4px',
+              alignItems: 'center',
+              borderBottomWidth: '1px',
+              borderBottomStyle: 'solid',
+
+              backgroundColor: theme.HEADER_BACKGROUND_COLOR,
+              borderBottomColor: theme.HEADER_BORDER_COLOR,
+            })}
+          >
             <div
               css={{
                 display: 'flex',

packages/redux-devtools-rtk-query-monitor/src/components/SortOrderButton.tsx

@@ -35,7 +35,28 @@ export function SortOrderButton({
           id={id}
           onClick={handleButtonClick}
           aria-pressed={isAsc}
-          {...styling(['sortButton'])}
+          css={(theme) => ({
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexFlow: 'row nowrap',
+            cursor: 'pointer',
+            position: 'relative',
+            padding: '0 8px',
+            color: theme.TEXT_COLOR,
+            borderStyle: 'solid',
+            borderWidth: '1px',
+            borderRadius: '3px',
+            backgroundColor: theme.TAB_BACK_COLOR,
+            borderColor: theme.TAB_BORDER_COLOR,
+            height: 30,
+            fontSize: 12,
+            width: 64,
+
+            '&:active': {
+              backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
+            },
+          })}
         >
           <ArrowUpIcon style={arrowStyles} />
           {buttonLabel}

packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx

@@ -90,7 +90,14 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
       <StyleUtilsContext.Consumer>
         {({ styling, invertTheme, base16Theme }) => {
           return (
-            <div {...rootProps} {...styling('treeWrapper')}>
+            <div
+              {...rootProps}
+              css={{
+                overflowX: 'auto',
+                overflowY: 'auto',
+                padding: '0.5em 1em',
+              }}
+            >
               {before}
               <JSONTree
                 keyPath={keyPath}

packages/redux-devtools-rtk-query-monitor/src/components/UList.tsx

@@ -6,7 +6,30 @@ export type UListProps = React.HTMLAttributes<HTMLUListElement>;
 export function UList(props: UListProps): JSX.Element {
   return (
     <StyleUtilsContext.Consumer>
-      {({ styling }) => <ul {...props} {...styling('uList')} />}
+      {({ styling }) => (
+        <ul
+          {...props}
+          css={(theme) => ({
+            listStyle: 'none',
+            padding: '0 0 0 1em',
+            color: theme.ULIST_COLOR,
+            '& > li': {
+              listStyle: 'none',
+            },
+            '& > li::before': {
+              content: '"\\2022"',
+              display: 'inline-block',
+              paddingRight: '0.5em',
+              color: theme.ULIST_DISC_COLOR,
+              fontSize: '0.8em',
+            },
+
+            '& strong': {
+              color: theme.ULIST_STRONG_COLOR,
+            },
+          })}
+        />
+      )}
     </StyleUtilsContext.Consumer>
   );
 }

packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import type { Interpolation, Theme } from '@emotion/react';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { createTreeItemLabelRenderer } from '../styles/tree';
 import {
@@ -38,6 +39,23 @@ import {
   QueryPreviewDataProps,
 } from '../components/QueryPreviewData';
 
+const queryPreviewCss: Interpolation<Theme> = (theme) => ({
+  flex: '1 1 50%',
+  overflowX: 'hidden',
+  oveflowY: 'auto',
+  display: 'flex',
+  flexDirection: 'column',
+  overflowY: 'hidden',
+  '& pre': {
+    border: 'inherit',
+    borderRadius: '3px',
+    lineHeight: 'inherit',
+    color: 'inherit',
+  },
+
+  backgroundColor: theme.BACKGROUND_COLOR,
+});
+
 export interface QueryPreviewProps<S = unknown> {
   readonly selectedTab: QueryPreviewTabs;
   readonly hasNoApis: boolean;
@@ -213,7 +231,7 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
       return (
         <StyleUtilsContext.Consumer>
           {({ styling }) => (
-            <div {...styling('queryPreview')}>
+            <div css={queryPreviewCss}>
               <QueryPreviewHeader
                 selectedTab={selectedTab}
                 onTabChange={onTabChange}
@@ -241,7 +259,7 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
       <StyleUtilsContext.Consumer>
         {({ styling }) => {
           return (
-            <div {...styling('queryPreview')}>
+            <div css={queryPreviewCss}>
               <QueryPreviewHeader
                 selectedTab={selectedTab}
                 onTabChange={onTabChange}

packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts

@@ -91,249 +91,7 @@ type ColorMap = {
   [color in Color]: string;
 };
 
-const getSheetFromColorMap = (map: ColorMap) => {
+const getSheetFromColorMap = (map: ColorMap) => ({});
-  const appearanceNone = {
-    '-webkit-appearance': 'none',
-  };
-
-  return {
-    sortButton: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      flexFlow: 'row nowrap',
-      cursor: 'pointer',
-      position: 'relative',
-      padding: '0 8px',
-      color: map.TEXT_COLOR,
-      borderStyle: 'solid',
-      borderWidth: '1px',
-      borderRadius: '3px',
-      backgroundColor: map.TAB_BACK_COLOR,
-      borderColor: map.TAB_BORDER_COLOR,
-      height: 30,
-      fontSize: 12,
-      width: 64,
-
-      '&:active': {
-        backgroundColor: map.TAB_BACK_SELECTED_COLOR,
-      },
-    },
-
-    toggleButton: {
-      width: '24px',
-      height: '24px',
-      display: 'inline-block',
-      flex: '0 0 auto',
-      color: map.TEXT_PLACEHOLDER_COLOR,
-      cursor: 'pointer',
-      padding: 0,
-      fontSize: '0.7em',
-      letterSpacing: '-0.7px',
-      outline: 'none',
-      boxShadow: 'none',
-      fontWeight: '700',
-      border: 'none',
-
-      '&:hover': {
-        color: map.TEXT_COLOR,
-      },
-
-      backgroundColor: 'transparent',
-      '&[aria-pressed="true"]': {
-        color: map.BACKGROUND_COLOR,
-        backgroundColor: map.TEXT_COLOR,
-      },
-
-      '&[data-type="error"]': {
-        color: map.TEXT_COLOR,
-        backgroundColor: map.TOGGLE_BUTTON_ERROR,
-      },
-    },
-
-    queryForm: {
-      display: 'flex',
-      flexFlow: 'column nowrap',
-    },
-    sortBySection: {
-      display: 'flex',
-      padding: '0.4em',
-      '& label': {
-        display: 'flex',
-        flex: '0 0 auto',
-        whiteSpace: 'noWrap',
-        alignItems: 'center',
-        paddingRight: '0.4em',
-      },
-
-      '& > :last-child': {
-        flex: '0 0 auto',
-        marginLeft: '0.4em',
-      },
-    },
-
-    querySearch: {
-      maxWidth: '65%',
-      'background-color': map.BACKGROUND_COLOR,
-      display: 'flex',
-      alignItems: 'center',
-      flexFlow: 'row nowrap',
-      flex: '1 1 auto',
-      paddingRight: 6,
-      '& input': {
-        outline: 'none',
-        border: 'none',
-        width: '100%',
-        flex: '1 1 auto',
-        padding: '5px 10px',
-        'font-size': '1em',
-        position: 'relative',
-        fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
-
-        'background-color': map.BACKGROUND_COLOR,
-        color: map.TEXT_COLOR,
-
-        '&::-webkit-input-placeholder': {
-          color: map.TEXT_PLACEHOLDER_COLOR,
-        },
-
-        '&::-moz-placeholder': {
-          color: map.TEXT_PLACEHOLDER_COLOR,
-        },
-        '&::-webkit-search-cancel-button': appearanceNone,
-      },
-    },
-
-    closeButton: {
-      ...appearanceNone,
-      border: 'none',
-      outline: 'none',
-      boxShadow: 'none',
-      display: 'block',
-      flex: '0 0 auto',
-      cursor: 'pointer',
-      background: 'transparent',
-      position: 'relative',
-      fontSize: 'inherit',
-      '&[data-invisible="1"]': {
-        visibility: 'hidden !important',
-      },
-      '&::after': {
-        content: '"\u00d7"',
-        display: 'block',
-        padding: 4,
-        fontSize: '1.2em',
-        color: map.TEXT_PLACEHOLDER_COLOR,
-        background: 'transparent',
-      },
-      '&:hover::after': {
-        color: map.TEXT_COLOR,
-      },
-    },
-
-    noApiFound: {
-      width: '100%',
-      textAlign: 'center',
-      color: map.TEXT_COLOR,
-      padding: '1.4em',
-      '& a': {
-        fontSize: 'inherit',
-        color: map.TEXT_COLOR,
-        textDecoration: 'underline',
-      },
-    },
-
-    searchSelectLabel: {
-      display: 'inline-block',
-      padding: 4,
-      borderLeft: '1px solid currentColor',
-    },
-
-    queryPreview: {
-      flex: '1 1 50%',
-      overflowX: 'hidden',
-      oveflowY: 'auto',
-      display: 'flex',
-      'flex-direction': 'column',
-      'overflow-y': 'hidden',
-      '& pre': {
-        border: 'inherit',
-        'border-radius': '3px',
-        'line-height': 'inherit',
-        color: 'inherit',
-      },
-
-      'background-color': map.BACKGROUND_COLOR,
-    },
-
-    previewHeader: {
-      flex: '0 0 30px',
-      padding: '5px 4px',
-      'align-items': 'center',
-      'border-bottom-width': '1px',
-      'border-bottom-style': 'solid',
-
-      'background-color': map.HEADER_BACKGROUND_COLOR,
-      'border-bottom-color': map.HEADER_BORDER_COLOR,
-    },
-
-    treeItemPin: {
-      'font-size': '0.7em',
-      'padding-left': '5px',
-      cursor: 'pointer',
-      '&:hover': {
-        'text-decoration': 'underline',
-      },
-
-      color: map.PIN_COLOR,
-    },
-
-    treeItemKey: {
-      color: map.TEXT_PLACEHOLDER_COLOR,
-    },
-
-    treeWrapper: {
-      overflowX: 'auto',
-      overflowY: 'auto',
-      padding: '0.5em 1em',
-    },
-
-    tabContent: {
-      display: 'block',
-      overflowY: 'auto',
-      padding: '0.5em 0',
-      color: map.TAB_CONTENT_COLOR,
-      '& h2': {
-        color: map.ULIST_STRONG_COLOR,
-        padding: '0.5em 1em',
-        fontWeight: 700,
-      },
-      '& h3': {
-        color: map.ULIST_STRONG_COLOR,
-      },
-    },
-
-    uList: {
-      listStyle: 'none',
-      padding: '0 0 0 1em',
-      color: map.ULIST_COLOR,
-      '& > li': {
-        listStyle: 'none',
-      },
-      '& > li::before': {
-        content: '"\\2022"',
-        display: 'inline-block',
-        paddingRight: '0.5em',
-        color: map.ULIST_DISC_COLOR,
-        fontSize: '0.8em',
-      },
-
-      '& strong': {
-        color: map.ULIST_STRONG_COLOR,
-      },
-    },
-  };
-};
 
 let themeSheet: StyleSheet;
 

packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx

@@ -98,7 +98,9 @@ export function createTreeItemLabelRenderer(
   return function labelRenderer([key], nodeType, expanded) {
     return (
       <span>
-        <span {...styling('treeItemKey')}>{key}</span>
+        <span css={(theme) => ({ color: theme.TEXT_PLACEHOLDER_COLOR })}>
+          {key}
+        </span>
         {!expanded && ': '}
       </span>
     );