Remove jss

packages/redux-devtools-rtk-query-monitor/package.json

@@ -50,8 +50,6 @@
     "@types/redux-devtools-themes": "^1.0.3",
     "hex-rgba": "^1.0.2",
     "immutable": "^4.3.4",
-    "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-rtk-query-monitor/src/styles/createStylingFromTheme.ts

@@ -1,24 +1,11 @@
-import jss, { StyleSheet } from 'jss';
+import { getBase16Theme } from 'react-base16-styling';
-import preset from 'jss-preset-default';
+import type { StylingConfig } from 'react-base16-styling';
-import {
-  createStyling,
-  getBase16Theme,
-  invertTheme,
-} from 'react-base16-styling';
-import type {
-  StylingConfig,
-  StylingFunction,
-  Theme,
-} from 'react-base16-styling';
 import rgba from 'hex-rgba';
 import * as reduxThemes from 'redux-devtools-themes';
 import { Action } from 'redux';
 import { createContext } from 'react';
-import type { CurriedFunction1 } from 'lodash';
 import { RtkQueryMonitorProps, StyleUtils } from '../types';
 
-jss.setup(preset());
-
 declare module '@emotion/react' {
   export interface Theme {
     TEXT_COLOR: string;
@@ -88,53 +75,18 @@ export const colorMap = (theme: reduxThemes.Base16Theme) =>
     TOGGLE_BUTTON_ERROR: rgba(theme.base08, 40),
   }) as const;
 
-type Color = keyof ReturnType<typeof colorMap>;
-type ColorMap = {
-  [color in Color]: string;
-};
-
-const getSheetFromColorMap = (map: ColorMap) => ({});
-
-let themeSheet: StyleSheet;
-
-const getDefaultThemeStyling = (theme: reduxThemes.Base16Theme) => {
-  if (themeSheet) {
-    themeSheet.detach();
-  }
-
-  themeSheet = jss
-    .createStyleSheet(getSheetFromColorMap(colorMap(theme)))
-    .attach();
-
-  return themeSheet.classes;
-};
-
-export const createStylingFromTheme: CurriedFunction1<
-  Theme | undefined,
-  StylingFunction
-> = createStyling(getDefaultThemeStyling, {
-  defaultBase16: reduxThemes.nicinabox,
-  base16Themes: { ...reduxThemes },
-});
-
 export function createThemeState<S, A extends Action<string>>(
   props: RtkQueryMonitorProps<S, A>,
 ): StyleUtils {
   const base16Theme =
     getBase16Theme(props.theme, { ...reduxThemes }) ?? reduxThemes.nicinabox;
 
-  const theme = props.invertTheme ? invertTheme(props.theme) : props.theme;
+  return { base16Theme, invertTheme: !!props.invertTheme };
-  const styling = createStylingFromTheme(theme);
-
-  return { base16Theme, styling, invertTheme: !!props.invertTheme };
 }
 
-const mockStyling = () => ({ className: '', style: {} });
-
 export const StyleUtilsContext = createContext<StyleUtils>({
   base16Theme: reduxThemes.nicinabox,
   invertTheme: false,
-  styling: mockStyling,
 });
 
 export function getJsonTreeTheme(

packages/redux-devtools-rtk-query-monitor/src/types.ts

@@ -100,7 +100,6 @@ export interface SelectorsSource<S> {
 
 export interface StyleUtils {
   readonly base16Theme: Base16Theme;
-  readonly styling: StylingFunction;
   readonly invertTheme: boolean;
 }
 

pnpm-lock.yaml

@@ -2474,12 +2474,6 @@ importers:
       immutable:
         specifier: ^4.3.4
         version: 4.3.4
-      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
@@ -12618,13 +12612,6 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /css-vendor@2.0.8:
-    resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      is-in-browser: 1.1.3
-    dev: false
-
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -15226,10 +15213,6 @@ packages:
     dev: false
     optional: true
 
-  /hyphenate-style-name@1.0.4:
-    resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
-    dev: false
-
   /iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -15535,10 +15518,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /is-in-browser@1.1.3:
-    resolution: {integrity: sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==}
-    dev: false
-
   /is-inside-container@1.0.0:
     resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
     engines: {node: '>=14.16'}
@@ -16512,126 +16491,6 @@ packages:
       semver: 7.5.4
     dev: false
 
-  /jss-plugin-camel-case@10.10.0:
-    resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      hyphenate-style-name: 1.0.4
-      jss: 10.10.0
-    dev: false
-
-  /jss-plugin-compose@10.10.0:
-    resolution: {integrity: sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-      tiny-warning: 1.0.3
-    dev: false
-
-  /jss-plugin-default-unit@10.10.0:
-    resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-    dev: false
-
-  /jss-plugin-expand@10.10.0:
-    resolution: {integrity: sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-    dev: false
-
-  /jss-plugin-extend@10.10.0:
-    resolution: {integrity: sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-      tiny-warning: 1.0.3
-    dev: false
-
-  /jss-plugin-global@10.10.0:
-    resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-    dev: false
-
-  /jss-plugin-nested@10.10.0:
-    resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-      tiny-warning: 1.0.3
-    dev: false
-
-  /jss-plugin-props-sort@10.10.0:
-    resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-    dev: false
-
-  /jss-plugin-rule-value-function@10.10.0:
-    resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-      tiny-warning: 1.0.3
-    dev: false
-
-  /jss-plugin-rule-value-observable@10.10.0:
-    resolution: {integrity: sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-      symbol-observable: 1.2.0
-    dev: false
-
-  /jss-plugin-template@10.10.0:
-    resolution: {integrity: sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-      tiny-warning: 1.0.3
-    dev: false
-
-  /jss-plugin-vendor-prefixer@10.10.0:
-    resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      css-vendor: 2.0.8
-      jss: 10.10.0
-    dev: false
-
-  /jss-preset-default@10.10.0:
-    resolution: {integrity: sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      jss: 10.10.0
-      jss-plugin-camel-case: 10.10.0
-      jss-plugin-compose: 10.10.0
-      jss-plugin-default-unit: 10.10.0
-      jss-plugin-expand: 10.10.0
-      jss-plugin-extend: 10.10.0
-      jss-plugin-global: 10.10.0
-      jss-plugin-nested: 10.10.0
-      jss-plugin-props-sort: 10.10.0
-      jss-plugin-rule-value-function: 10.10.0
-      jss-plugin-rule-value-observable: 10.10.0
-      jss-plugin-template: 10.10.0
-      jss-plugin-vendor-prefixer: 10.10.0
-    dev: false
-
-  /jss@10.10.0:
-    resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==}
-    dependencies:
-      '@babel/runtime': 7.23.5
-      csstype: 3.1.2
-      is-in-browser: 1.1.3
-      tiny-warning: 1.0.3
-    dev: false
-
   /jstransformer@1.0.0:
     resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
     dependencies:
@@ -20400,11 +20259,6 @@ packages:
       webpack: 5.89.0(@swc/core@1.3.100)(esbuild@0.18.20)
     dev: true
 
-  /symbol-observable@1.2.0:
-    resolution: {integrity: sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
@@ -20640,10 +20494,6 @@ packages:
   /tiny-invariant@1.3.1:
     resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
 
-  /tiny-warning@1.0.3:
-    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
-    dev: false
-
   /titleize@3.0.0:
     resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
     engines: {node: '>=12'}