Convert more styling to Emotion

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

@@ -1,5 +1,6 @@
 import React, { ReactNode, FormEvent, MouseEvent, ChangeEvent } from 'react';
 import type { DebouncedFunc } from 'lodash';
+import { css } from '@emotion/react';
 import { Select } from '@redux-devtools/ui';
 import { QueryFormValues } from '../types';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
@@ -10,6 +11,17 @@ import { QueryFilters, filterQueryOptions } from '../utils/filters';
 import { SortOrderButton } from './SortOrderButton';
 import { RegexIcon } from './RegexIcon';
 
+const srOnlyCss = css({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  border: 0,
+});
+
 export interface QueryFormProps {
   values: QueryFormValues;
   searchQueryRegex: RegExp | null;
@@ -145,7 +157,7 @@ export class QueryForm extends React.PureComponent<
                   borderColor: theme.LIST_BORDER_COLOR,
                 })}
               >
-                <label htmlFor={searchId} {...styling('srOnly')}>
+                <label htmlFor={searchId} css={srOnlyCss}>
                   filter query
                 </label>
                 <div {...styling('querySearch')}>
@@ -177,7 +189,7 @@ export class QueryForm extends React.PureComponent<
                     <RegexIcon />
                   </button>
                 </div>
-                <label htmlFor={selectId} {...styling('srOnly')}>
+                <label htmlFor={selectId} css={srOnlyCss}>
                   filter by
                 </label>
                 <Select<SelectOption<QueryFilters>>

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

@@ -85,7 +85,7 @@ export class QueryList extends PureComponent<QueryListProps> {
                   <p
                     css={{
                       display: '-webkit-box',
-                      boxOrient: 'vertical',
+                      WebkitBoxOrient: 'vertical',
                       WebkitLineClamp: 2,
                       whiteSpace: 'normal',
                       overflow: 'hidden',

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

@@ -27,7 +27,17 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
       <StyleUtilsContext.Consumer>
         {({ styling }) => (
           <div {...styling('previewHeader')}>
-            <div {...styling('tabSelector')}>
+            <div
+              css={{
+                display: 'flex',
+                width: '100%',
+                justifyContent: 'flex-end',
+                overflow: 'hidden',
+                '& > *': {
+                  flex: '0 1 auto',
+                },
+              }}
+            >
               {tabs.map((tab) => (
                 <button
                   type="button"
@@ -36,13 +46,55 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
                   role={'tab'}
                   onClick={() => this.handleTabClick(tab)}
                   key={tab.value}
-                  {...styling(
+                  css={[
-                    [
+                    (theme) => ({
-                      'selectorButton',
+                      cursor: 'pointer',
-                      tab.value === selectedTab && 'selectorButtonSelected',
+                      position: 'relative',
-                    ],
+                      height: '33px',
-                    tab.value === selectedTab,
+                      padding: '0 8px',
-                  )}
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      boxShadow: 'none',
+                      outline: 'none',
+                      color: theme.TEXT_COLOR,
+                      borderStyle: 'solid',
+                      borderWidth: '1px',
+                      borderLeftWidth: 0,
+
+                      '&:first-of-type': {
+                        borderLeftWidth: '1px',
+                        borderTopLeftRadius: '3px',
+                        borderBottomLeftRadius: '3px',
+                      },
+
+                      '&:last-of-type': {
+                        borderTopRightRadius: '3px',
+                        borderBottomRightRadius: '3px',
+                      },
+
+                      backgroundColor: theme.TAB_BACK_COLOR,
+
+                      '&:hover': {
+                        backgroundColor: theme.TAB_BACK_HOVER_COLOR,
+                      },
+
+                      borderColor: theme.TAB_BORDER_COLOR,
+
+                      '& > *': {
+                        display: '-webkit-box',
+                        boxOrient: 'vertical',
+                        WebkitLineClamp: 1,
+                        overflow: 'hidden',
+                        wordBreak: 'break-all',
+                        WebkitBoxPack: 'end',
+                        paddingBottom: 0,
+                      },
+                    }),
+                    tab.value === selectedTab &&
+                      ((theme) => ({
+                        backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
+                      })),
+                  ]}
                 >
                   <span>
                     {renderTabLabel ? renderTabLabel(tab) : tab.label}

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

@@ -97,80 +97,6 @@ const getSheetFromColorMap = (map: ColorMap) => {
   };
 
   return {
-    tabSelector: {
-      display: 'flex',
-      width: '100%',
-      justifyContent: 'flex-end',
-      overflow: 'hidden',
-      '& > *': {
-        flex: '0 1 auto',
-      },
-    },
-
-    srOnly: {
-      position: 'absolute',
-      width: 1,
-      height: 1,
-      padding: 0,
-      margin: '-1px',
-      overflow: 'hidden',
-      clip: 'rect(0,0,0,0)',
-      border: 0,
-    },
-
-    selectorButton: {
-      cursor: 'pointer',
-      position: 'relative',
-      height: '33px',
-      padding: '0 8px',
-      display: 'inline-flex',
-      alignItems: 'center',
-      boxShadow: 'none',
-      outline: 'none',
-      color: map.TEXT_COLOR,
-      '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,
-
-      '& > *': {
-        display: '-webkit-box',
-        boxOrient: 'vertical',
-        '-webkit-line-clamp': 1,
-        overflow: 'hidden',
-        wordBreak: 'break-all',
-        '-webkit-box-pack': 'end',
-        paddingBottom: 0,
-      },
-    },
-
-    selectorButtonSmall: {
-      padding: '0px 8px',
-      'font-size': '0.8em',
-    },
-
-    selectorButtonSelected: {
-      'background-color': map.TAB_BACK_SELECTED_COLOR,
-    },
-
     sortButton: {
       display: 'flex',
       justifyContent: 'space-between',