Convert more styling to Emotion

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

@@ -133,7 +133,18 @@ export class QueryForm extends React.PureComponent<
               onSubmit={this.handleSubmit}
               {...styling('queryForm')}
             >
-              <div {...styling('queryListHeader')}>
+              <div
+                css={(theme) => ({
+                  display: 'flex',
+                  padding: 4,
+                  flex: '0 0 auto',
+                  alignItems: 'center',
+                  borderBottomWidth: '1px',
+                  borderBottomStyle: 'solid',
+
+                  borderColor: theme.LIST_BORDER_COLOR,
+                })}
+              >
                 <label htmlFor={searchId} {...styling('srOnly')}>
                   filter query
                 </label>

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

@@ -1,8 +1,24 @@
 import React, { PureComponent, ReactNode } from 'react';
+import type { Interpolation, Theme } from '@emotion/react';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { RtkResourceInfo, RtkQueryMonitorState } from '../types';
 import { isQuerySelected } from '../utils/rtk-query';
 
+const queryStatusCss: Interpolation<Theme> = (theme) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 22,
+  padding: '0 6px',
+  borderRadius: '3px',
+  fontSize: '0.7em',
+  lineHeight: '1em',
+  flexShrink: 0,
+  fontWeight: 700,
+  backgroundColor: theme.ACTION_TIME_BACK_COLOR,
+  color: theme.ACTION_TIME_COLOR,
+});
+
 export interface QueryListProps {
   resInfos: RtkResourceInfo[];
   selectedQueryKey: RtkQueryMonitorState['selectedQueryKey'];
@@ -36,7 +52,7 @@ export class QueryList extends PureComponent<QueryListProps> {
     return (
       <StyleUtilsContext.Consumer>
         {({ styling }) => (
-          <ul {...styling('queryList')}>
+          <ul css={{ listStyle: 'none', margin: '0', padding: '0' }}>
             {resInfos.map((resInfo) => {
               const isSelected = isQuerySelected(selectedQueryKey, resInfo);
 
@@ -44,19 +60,58 @@ export class QueryList extends PureComponent<QueryListProps> {
                 <li
                   key={resInfo.queryKey}
                   onClick={() => onSelectQuery(resInfo)}
-                  {...styling(
+                  css={[
-                    ['queryListItem', isSelected && 'queryListItemSelected'],
+                    (theme) => ({
-                    isSelected,
+                      borderBottomWidth: '1px',
-                  )}
+                      borderBottomStyle: 'solid',
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      padding: '5px 10px',
+                      cursor: 'pointer',
+                      userSelect: 'none',
+                      '&:last-child': {
+                        borderBottomWidth: 0,
+                      },
+                      overflow: 'hidden',
+                      maxHeight: 47,
+                      borderBottomColor: theme.BORDER_COLOR,
+                    }),
+                    isSelected &&
+                      ((theme) => ({
+                        backgroundColor: theme.SELECTED_BACKGROUND_COLOR,
+                      })),
+                  ]}
                 >
-                  <p {...styling('queryListItemKey')}>
+                  <p
+                    css={{
+                      display: '-webkit-box',
+                      boxOrient: 'vertical',
+                      WebkitLineClamp: 2,
+                      whiteSpace: 'normal',
+                      overflow: 'hidden',
+                      width: '100%',
+                      maxWidth: 'calc(100% - 70px)',
+                      wordBreak: 'break-all',
+                      margin: 0,
+                    }}
+                  >
                     {QueryList.formatQuery(resInfo)}
                   </p>
-                  <div {...styling('queryStatusWrapper')}>
+                  <div
-                    <strong {...styling(['queryStatus', 'queryType'])}>
+                    css={{
+                      display: 'flex',
+                      width: 'auto',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      margin: 0,
+                      flex: '0 0 auto',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    <strong css={[queryStatusCss, { marginRight: 4 }]}>
                       {resInfo.type === 'query' ? 'Q' : 'M'}
                     </strong>
-                    <p {...styling('queryStatus')}>{resInfo.state.status}</p>
+                    <p css={queryStatusCss}>{resInfo.state.status}</p>
                   </div>
                 </li>
               );

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

@@ -151,7 +151,38 @@ class RtkQueryInspector<S, A extends Action<string>> extends PureComponent<
         })}
       >
         <div
-          {...styling('querySectionWrapper')}
+          css={(theme) => ({
+            display: 'flex',
+            flex: '0 0 auto',
+            height: '50%',
+            width: '100%',
+            borderColor: theme.TAB_BORDER_COLOR,
+
+            '&[data-wide-layout="0"]': {
+              borderBottomWidth: 1,
+              borderStyle: 'solid',
+            },
+
+            '&[data-wide-layout="1"]': {
+              height: '100%',
+              width: '44%',
+              borderRightWidth: 1,
+              borderStyle: 'solid',
+            },
+            flexFlow: 'column nowrap',
+            '& > form': {
+              flex: '0 0 auto',
+              borderBottomWidth: '1px',
+              borderBottomStyle: 'solid',
+              borderColor: theme.LIST_BORDER_COLOR,
+            },
+            '& > ul': {
+              flex: '1 1 auto',
+              overflowX: 'hidden',
+              overflowY: 'auto',
+              maxHeight: 'calc(100% - 70px)',
+            },
+          })}
           data-wide-layout={+this.state.isWideLayout}
         >
           <QueryForm

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

@@ -97,117 +97,6 @@ const getSheetFromColorMap = (map: ColorMap) => {
   };
 
   return {
-    querySectionWrapper: {
-      display: 'flex',
-      flex: '0 0 auto',
-      height: '50%',
-      width: '100%',
-      borderColor: map.TAB_BORDER_COLOR,
-
-      '&[data-wide-layout="0"]': {
-        borderBottomWidth: 1,
-        borderStyle: 'solid',
-      },
-
-      '&[data-wide-layout="1"]': {
-        height: '100%',
-        width: '44%',
-        borderRightWidth: 1,
-        borderStyle: 'solid',
-      },
-      flexFlow: 'column nowrap',
-      '& > :first-child': {
-        flex: '0 0 auto',
-        'border-bottom-width': '1px',
-        'border-bottom-style': 'solid',
-        'border-color': map.LIST_BORDER_COLOR,
-      },
-      '& > :nth-child(n + 2)': {
-        flex: '1 1 auto',
-        overflowX: 'hidden',
-        overflowY: 'auto',
-        maxHeight: 'calc(100% - 70px)',
-      },
-    },
-
-    queryList: {
-      listStyle: 'none',
-      margin: '0',
-      padding: '0',
-    },
-
-    queryListItem: {
-      'border-bottom-width': '1px',
-      'border-bottom-style': 'solid',
-      display: 'flex',
-      'justify-content': 'space-between',
-      padding: '5px 10px',
-      cursor: 'pointer',
-      'user-select': 'none',
-      '&:last-child': {
-        'border-bottom-width': 0,
-      },
-      overflow: 'hidden',
-      maxHeight: 47,
-      'border-bottom-color': map.BORDER_COLOR,
-    },
-
-    queryListItemKey: {
-      display: '-webkit-box',
-      boxOrient: 'vertical',
-      '-webkit-line-clamp': 2,
-      whiteSpace: 'normal',
-      overflow: 'hidden',
-      width: '100%',
-      maxWidth: 'calc(100% - 70px)',
-      wordBreak: 'break-all',
-      margin: 0,
-    },
-
-    queryListHeader: {
-      display: 'flex',
-      padding: 4,
-      flex: '0 0 auto',
-      'align-items': 'center',
-      'border-bottom-width': '1px',
-      'border-bottom-style': 'solid',
-
-      'border-color': map.LIST_BORDER_COLOR,
-    },
-
-    queryStatusWrapper: {
-      display: 'flex',
-      width: 'auto',
-      justifyContent: 'center',
-      alignItems: 'center',
-      margin: 0,
-      flex: '0 0 auto',
-      overflow: 'hidden',
-    },
-
-    queryType: {
-      marginRight: 4,
-    },
-
-    queryStatus: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: 22,
-      padding: '0 6px',
-      'border-radius': '3px',
-      'font-size': '0.7em',
-      'line-height': '1em',
-      'flex-shrink': 0,
-      fontWeight: 700,
-      'background-color': map.ACTION_TIME_BACK_COLOR,
-      color: map.ACTION_TIME_COLOR,
-    },
-
-    queryListItemSelected: {
-      'background-color': map.SELECTED_BACKGROUND_COLOR,
-    },
-
     tabSelector: {
       display: 'flex',
       width: '100%',