Remove unused styling

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

@@ -1,36 +1,31 @@
 import React from 'react';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 
 export function NoRtkQueryApi(): JSX.Element {
   return (
-    <StyleUtilsContext.Consumer>
-      {({ styling }) => (
-        <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{' '}
-          <a
-            href="https://redux-toolkit.js.org/rtk-query/overview#basic-usage"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            the instructions
-          </a>
-          .
-        </div>
-      )}
-    </StyleUtilsContext.Consumer>
+    <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{' '}
+      <a
+        href="https://redux-toolkit.js.org/rtk-query/overview#basic-usage"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        the instructions
+      </a>
+      .
+    </div>
   );
 }

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

@@ -137,7 +137,7 @@ export class QueryForm extends React.PureComponent<
 
     return (
       <StyleUtilsContext.Consumer>
-        {({ styling, base16Theme }) => {
+        {({ base16Theme }) => {
           return (
             <form
               id="rtk-query-monitor-query-selection-form"

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

@@ -1,6 +1,5 @@
 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';
 
@@ -50,75 +49,71 @@ export class QueryList extends PureComponent<QueryListProps> {
     const { resInfos, selectedQueryKey, onSelectQuery } = this.props;
 
     return (
-      <StyleUtilsContext.Consumer>
-        {({ styling }) => (
-          <ul css={{ listStyle: 'none', margin: '0', padding: '0' }}>
-            {resInfos.map((resInfo) => {
-              const isSelected = isQuerySelected(selectedQueryKey, resInfo);
+      <ul css={{ listStyle: 'none', margin: '0', padding: '0' }}>
+        {resInfos.map((resInfo) => {
+          const isSelected = isQuerySelected(selectedQueryKey, resInfo);
 
-              return (
-                <li
-                  key={resInfo.queryKey}
-                  onClick={() => onSelectQuery(resInfo)}
-                  css={[
-                    (theme) => ({
-                      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
-                    css={{
-                      display: '-webkit-box',
-                      WebkitBoxOrient: 'vertical',
-                      WebkitLineClamp: 2,
-                      whiteSpace: 'normal',
-                      overflow: 'hidden',
-                      width: '100%',
-                      maxWidth: 'calc(100% - 70px)',
-                      wordBreak: 'break-all',
-                      margin: 0,
-                    }}
-                  >
-                    {QueryList.formatQuery(resInfo)}
-                  </p>
-                  <div
-                    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 css={queryStatusCss}>{resInfo.state.status}</p>
-                  </div>
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </StyleUtilsContext.Consumer>
+          return (
+            <li
+              key={resInfo.queryKey}
+              onClick={() => onSelectQuery(resInfo)}
+              css={[
+                (theme) => ({
+                  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
+                css={{
+                  display: '-webkit-box',
+                  WebkitBoxOrient: 'vertical',
+                  WebkitLineClamp: 2,
+                  whiteSpace: 'normal',
+                  overflow: 'hidden',
+                  width: '100%',
+                  maxWidth: 'calc(100% - 70px)',
+                  wordBreak: 'break-all',
+                  margin: 0,
+                }}
+              >
+                {QueryList.formatQuery(resInfo)}
+              </p>
+              <div
+                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 css={queryStatusCss}>{resInfo.state.status}</p>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
     );
   }
 }

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

@@ -1,7 +1,6 @@
 import React, { ReactNode, PureComponent } from 'react';
 import type { ShouldExpandNodeInitially } from 'react-json-tree';
 import { ApiStats, QueryPreviewTabs, RtkQueryApiState } from '../types';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { TreeView, TreeViewProps } from './TreeView';
 import { renderTabPanelId, renderTabPanelButtonId } from '../utils/a11y';
 
@@ -39,58 +38,54 @@ export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
     const hasQueries = Object.keys(apiState.queries).length > 0;
 
     return (
-      <StyleUtilsContext.Consumer>
-        {({ styling }) => (
-          <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>
+      <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>}
+          data={apiState}
+          shouldExpandNodeInitially={this.shouldExpandApiStateNode}
+          isWideLayout={isWideLayout}
+        />
+        {apiStats && (
+          <>
             <TreeView
-              before={<h3>State</h3>}
-              data={apiState}
-              shouldExpandNodeInitially={this.shouldExpandApiStateNode}
+              before={<h3>Tally</h3>}
+              data={apiStats.tally}
               isWideLayout={isWideLayout}
             />
-            {apiStats && (
-              <>
-                <TreeView
-                  before={<h3>Tally</h3>}
-                  data={apiStats.tally}
-                  isWideLayout={isWideLayout}
-                />
-                {hasQueries && (
-                  <TreeView
-                    before={<h3>Queries Timings</h3>}
-                    data={apiStats.timings.queries}
-                    isWideLayout={isWideLayout}
-                  />
-                )}
-                {hasMutations && (
-                  <TreeView
-                    before={<h3>Mutations Timings</h3>}
-                    data={apiStats.timings.mutations}
-                    isWideLayout={isWideLayout}
-                  />
-                )}
-              </>
+            {hasQueries && (
+              <TreeView
+                before={<h3>Queries Timings</h3>}
+                data={apiStats.timings.queries}
+                isWideLayout={isWideLayout}
+              />
             )}
-          </article>
+            {hasMutations && (
+              <TreeView
+                before={<h3>Mutations Timings</h3>}
+                data={apiStats.timings.mutations}
+                isWideLayout={isWideLayout}
+              />
+            )}
+          </>
         )}
-      </StyleUtilsContext.Consumer>
+      </article>
     );
   }
 }

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

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { QueryPreviewTabs, TabOption } from '../types';
 import { renderTabPanelButtonId } from '../utils/a11y';
 import { emptyArray } from '../utils/object';
@@ -24,98 +23,92 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
     const { tabs, selectedTab, renderTabLabel } = this.props;
 
     return (
-      <StyleUtilsContext.Consumer>
-        {({ styling }) => (
-          <div
-            css={(theme) => ({
-              flex: '0 0 30px',
-              padding: '5px 4px',
-              alignItems: 'center',
-              borderBottomWidth: '1px',
-              borderBottomStyle: 'solid',
+      <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',
-                width: '100%',
-                justifyContent: 'flex-end',
-                overflow: 'hidden',
-                '& > *': {
-                  flex: '0 1 auto',
-                },
-              }}
+          backgroundColor: theme.HEADER_BACKGROUND_COLOR,
+          borderBottomColor: theme.HEADER_BORDER_COLOR,
+        })}
+      >
+        <div
+          css={{
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'flex-end',
+            overflow: 'hidden',
+            '& > *': {
+              flex: '0 1 auto',
+            },
+          }}
+        >
+          {tabs.map((tab) => (
+            <button
+              type="button"
+              id={renderTabPanelButtonId(tab.value)}
+              aria-selected={tab.value === selectedTab}
+              role={'tab'}
+              onClick={() => this.handleTabClick(tab)}
+              key={tab.value}
+              css={[
+                (theme) => ({
+                  cursor: 'pointer',
+                  position: 'relative',
+                  height: '33px',
+                  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,
+                  })),
+              ]}
             >
-              {tabs.map((tab) => (
-                <button
-                  type="button"
-                  id={renderTabPanelButtonId(tab.value)}
-                  aria-selected={tab.value === selectedTab}
-                  role={'tab'}
-                  onClick={() => this.handleTabClick(tab)}
-                  key={tab.value}
-                  css={[
-                    (theme) => ({
-                      cursor: 'pointer',
-                      position: 'relative',
-                      height: '33px',
-                      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}
-                  </span>
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-      </StyleUtilsContext.Consumer>
+              <span>{renderTabLabel ? renderTabLabel(tab) : tab.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
     );
   }
 

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

@@ -1,6 +1,5 @@
 import React, { CSSProperties } from 'react';
 import { ArrowUpIcon } from './ArrowUpIcon';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 
 export interface SortOrderButtonProps {
   readonly isAsc?: boolean;
@@ -28,40 +27,36 @@ export function SortOrderButton({
   };
 
   return (
-    <StyleUtilsContext.Consumer>
-      {({ styling }) => (
-        <button
-          type="button"
-          id={id}
-          onClick={handleButtonClick}
-          aria-pressed={isAsc}
-          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,
+    <button
+      type="button"
+      id={id}
+      onClick={handleButtonClick}
+      aria-pressed={isAsc}
+      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}
-        </button>
-      )}
-    </StyleUtilsContext.Consumer>
+        '&:active': {
+          backgroundColor: theme.TAB_BACK_SELECTED_COLOR,
+        },
+      })}
+    >
+      <ArrowUpIcon style={arrowStyles} />
+      {buttonLabel}
+    </button>
   );
 }

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

@@ -1,35 +1,30 @@
 import * as React from 'react';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 
 export type UListProps = React.HTMLAttributes<HTMLUListElement>;
 
 export function UList(props: UListProps): JSX.Element {
   return (
-    <StyleUtilsContext.Consumer>
-      {({ 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',
-            },
+    <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>
+        '& strong': {
+          color: theme.ULIST_STRONG_COLOR,
+        },
+      })}
+    />
   );
 }

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

@@ -1,6 +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 {
   QueryPreviewTabs,
@@ -186,7 +185,7 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
   constructor(props: QueryPreviewProps<S>) {
     super(props);
 
-    this.labelRenderer = createTreeItemLabelRenderer(this.props.styling);
+    this.labelRenderer = createTreeItemLabelRenderer();
   }
 
   renderLabelWithCounter = (
@@ -229,58 +228,40 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
 
     if (!resInfo) {
       return (
-        <StyleUtilsContext.Consumer>
-          {({ styling }) => (
-            <div css={queryPreviewCss}>
-              <QueryPreviewHeader
-                selectedTab={selectedTab}
-                onTabChange={onTabChange}
-                tabs={
-                  tabs.filter((tab) =>
-                    isTabVisible(tab, 'default'),
-                  ) as ReadonlyArray<
-                    TabOption<
-                      QueryPreviewTabs,
-                      unknown,
-                      RtkResourceInfo['type']
-                    >
-                  >
-                }
-                renderTabLabel={this.renderTabLabel}
-              />
-              {hasNoApis && <NoRtkQueryApi />}
-            </div>
-          )}
-        </StyleUtilsContext.Consumer>
+        <div css={queryPreviewCss}>
+          <QueryPreviewHeader
+            selectedTab={selectedTab}
+            onTabChange={onTabChange}
+            tabs={
+              tabs.filter((tab) =>
+                isTabVisible(tab, 'default'),
+              ) as ReadonlyArray<
+                TabOption<QueryPreviewTabs, unknown, RtkResourceInfo['type']>
+              >
+            }
+            renderTabLabel={this.renderTabLabel}
+          />
+          {hasNoApis && <NoRtkQueryApi />}
+        </div>
       );
     }
 
     return (
-      <StyleUtilsContext.Consumer>
-        {({ styling }) => {
-          return (
-            <div css={queryPreviewCss}>
-              <QueryPreviewHeader
-                selectedTab={selectedTab}
-                onTabChange={onTabChange}
-                tabs={
-                  tabs.filter((tab) =>
-                    isTabVisible(tab, resInfo.type),
-                  ) as ReadonlyArray<
-                    TabOption<
-                      QueryPreviewTabs,
-                      unknown,
-                      RtkResourceInfo['type']
-                    >
-                  >
-                }
-                renderTabLabel={this.renderTabLabel}
-              />
-              <TabComponent {...(this.props as QueryPreviewTabProps)} />
-            </div>
-          );
-        }}
-      </StyleUtilsContext.Consumer>
+      <div css={queryPreviewCss}>
+        <QueryPreviewHeader
+          selectedTab={selectedTab}
+          onTabChange={onTabChange}
+          tabs={
+            tabs.filter((tab) =>
+              isTabVisible(tab, resInfo.type),
+            ) as ReadonlyArray<
+              TabOption<QueryPreviewTabs, unknown, RtkResourceInfo['type']>
+            >
+          }
+          renderTabLabel={this.renderTabLabel}
+        />
+        <TabComponent {...(this.props as QueryPreviewTabProps)} />
+      </div>
     );
   }
 }

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

@@ -92,9 +92,7 @@ export function getItemString(
   );
 }
 
-export function createTreeItemLabelRenderer(
-  styling: StylingFunction,
-): LabelRenderer {
+export function createTreeItemLabelRenderer(): LabelRenderer {
   return function labelRenderer([key], nodeType, expanded) {
     return (
       <span>