Remove jss

packages/redux-devtools-inspector-monitor/package.json

@@ -47,8 +47,6 @@
     "immutable": "^4.3.4",
     "javascript-stringify": "^2.1.0",
     "jsondiffpatch": "^0.5.0",
-    "jss": "^10.10.0",
-    "jss-preset-default": "^10.10.0",
     "lodash.debounce": "^4.0.8",
     "react-base16-styling": "^0.9.1",
     "react-json-tree": "^0.18.0",

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

@@ -1,11 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Base16Theme } from 'redux-devtools-themes';
-import {
-  getBase16Theme,
-  invertBase16Theme,
-  invertTheme,
-  StylingFunction,
-} from 'react-base16-styling';
+import { getBase16Theme, invertBase16Theme } from 'react-base16-styling';
 import {
   ActionCreators,
   LiftedAction,
@@ -14,7 +9,6 @@ import {
 import { Action, Dispatch } from 'redux';
 import { Delta, DiffContext } from 'jsondiffpatch';
 import {
-  createStylingFromTheme,
   base16Themes,
   inspectorCss,
   inspectorWideCss,
@@ -134,10 +128,7 @@ function createThemeState<S, A extends Action<string>>(
 ) {
   const base16Theme = getBase16Theme(props.theme, base16Themes)!;
 
-  const theme = props.invertTheme ? invertTheme(props.theme) : props.theme;
-  const styling = createStylingFromTheme(theme);
-
-  return { base16Theme, styling };
+  return { base16Theme };
 }
 
 export interface ExternalProps<S, A extends Action<string>> {
@@ -195,7 +186,7 @@ interface State<S, A extends Action<string>> {
   action: A;
   error: string | undefined;
   isWideLayout: boolean;
-  themeState: { base16Theme: Base16Theme; styling: StylingFunction };
+  themeState: { base16Theme: Base16Theme };
 }
 
 class DevtoolsInspector<S, A extends Action<string>> extends PureComponent<

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

@@ -1,16 +1,7 @@
-import jss, { StyleSheet } from 'jss';
-import preset from 'jss-preset-default';
 import { css } from '@emotion/react';
 import type { Interpolation, Theme } from '@emotion/react';
-import {
-  createStyling,
-  StylingFunction,
-  Theme as Base16StylingTheme,
-} from 'react-base16-styling';
 import rgba from 'hex-rgba';
 import { Base16Theme } from 'redux-devtools-themes';
-import type { CurriedFunction1 } from 'lodash';
-import inspector from '../themes/inspector';
 import * as reduxThemes from 'redux-devtools-themes';
 import * as inspectorThemes from '../themes';
 
@@ -19,8 +10,6 @@ declare module '@emotion/react' {
   export interface Theme extends Base16Theme {}
 }
 
-jss.setup(preset());
-
 const colorMap = (theme: Base16Theme) => ({
   TEXT_COLOR: theme.base06,
   TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
@@ -48,9 +37,6 @@ const colorMap = (theme: Base16Theme) => ({
 });
 
 type Color = keyof ReturnType<typeof colorMap>;
-type ColorMap = {
-  [color in Color]: string;
-};
 
 export const inspectorCss: Interpolation<Theme> = (theme) => ({
   display: 'flex',
@@ -358,28 +344,4 @@ export const rightSliderRotateShownCss = css({
   transition: 'transform 0.2s ease-in-out 0.18s',
 });
 
-const getSheetFromColorMap = (map: ColorMap) => ({});
-
-let themeSheet: StyleSheet;
-
-const getDefaultThemeStyling = (theme: Base16Theme) => {
-  if (themeSheet) {
-    themeSheet.detach();
-  }
-
-  themeSheet = jss
-    .createStyleSheet(getSheetFromColorMap(colorMap(theme)))
-    .attach();
-
-  return themeSheet.classes;
-};
-
 export const base16Themes = { ...reduxThemes, ...inspectorThemes };
-
-export const createStylingFromTheme: CurriedFunction1<
-  Base16StylingTheme | undefined,
-  StylingFunction
-> = createStyling(getDefaultThemeStyling, {
-  defaultBase16: inspector,
-  base16Themes,
-});

pnpm-lock.yaml

@@ -1614,12 +1614,6 @@ importers:
       jsondiffpatch:
         specifier: ^0.5.0
         version: 0.5.0
-      jss:
-        specifier: ^10.10.0
-        version: 10.10.0
-      jss-preset-default:
-        specifier: ^10.10.0
-        version: 10.10.0
       lodash.debounce:
         specifier: ^4.0.8
         version: 4.0.8