From a7f8a3bd3a7793018c7ff9a597a6b1560bed25be Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 11 Dec 2023 21:41:21 -0500 Subject: [PATCH] Remove jss --- .../package.json | 2 - .../src/DevtoolsInspector.tsx | 15 ++------ .../src/utils/createStylingFromTheme.ts | 38 ------------------- pnpm-lock.yaml | 6 --- 4 files changed, 3 insertions(+), 58 deletions(-) diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json index 0b1cd117..558849d6 100644 --- a/packages/redux-devtools-inspector-monitor/package.json +++ b/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", diff --git a/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx b/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx index 336b3ed1..d8d856a1 100644 --- a/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx +++ b/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>( ) { 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> { @@ -195,7 +186,7 @@ interface State> { action: A; error: string | undefined; isWideLayout: boolean; - themeState: { base16Theme: Base16Theme; styling: StylingFunction }; + themeState: { base16Theme: Base16Theme }; } class DevtoolsInspector> extends PureComponent< diff --git a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts b/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts index 24916469..e676bbcf 100644 --- a/packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts +++ b/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; -type ColorMap = { - [color in Color]: string; -}; export const inspectorCss: Interpolation = (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, -}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e12ae3e8..3d1fc872 100644 --- a/pnpm-lock.yaml +++ b/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