From f61871930a0dd5bbfd0ee9c35ddcdf562e593efc Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Wed, 13 Dec 2023 19:18:05 -0500 Subject: [PATCH] Remove jss --- .../package.json | 2 - .../src/styles/createStylingFromTheme.ts | 54 +------ .../src/types.ts | 1 - pnpm-lock.yaml | 150 ------------------ 4 files changed, 3 insertions(+), 204 deletions(-) diff --git a/packages/redux-devtools-rtk-query-monitor/package.json b/packages/redux-devtools-rtk-query-monitor/package.json index 988fd6ff..15ef7170 100644 --- a/packages/redux-devtools-rtk-query-monitor/package.json +++ b/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", diff --git a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts index 71bab556..7fa6f3b8 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts @@ -1,24 +1,11 @@ -import jss, { StyleSheet } from 'jss'; -import preset from 'jss-preset-default'; -import { - createStyling, - getBase16Theme, - invertTheme, -} from 'react-base16-styling'; -import type { - StylingConfig, - StylingFunction, - Theme, -} from 'react-base16-styling'; +import { getBase16Theme } from 'react-base16-styling'; +import type { StylingConfig } 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; -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>( props: RtkQueryMonitorProps, ): StyleUtils { const base16Theme = getBase16Theme(props.theme, { ...reduxThemes }) ?? reduxThemes.nicinabox; - const theme = props.invertTheme ? invertTheme(props.theme) : props.theme; - const styling = createStylingFromTheme(theme); - - return { base16Theme, styling, invertTheme: !!props.invertTheme }; + return { base16Theme, invertTheme: !!props.invertTheme }; } -const mockStyling = () => ({ className: '', style: {} }); - export const StyleUtilsContext = createContext({ base16Theme: reduxThemes.nicinabox, invertTheme: false, - styling: mockStyling, }); export function getJsonTreeTheme( diff --git a/packages/redux-devtools-rtk-query-monitor/src/types.ts b/packages/redux-devtools-rtk-query-monitor/src/types.ts index f761b07b..eecd6753 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/types.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/types.ts @@ -100,7 +100,6 @@ export interface SelectorsSource { export interface StyleUtils { readonly base16Theme: Base16Theme; - readonly styling: StylingFunction; readonly invertTheme: boolean; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 613c7180..e9685b04 100644 --- a/pnpm-lock.yaml +++ b/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'}