Replace styled-components with Emotion (#1883)

* Replace styled-components with Emotion in ui

* react-dock

* Remainder

* Fix

* Format

* Update snapshots

* Create bright-sheep-joke.md

Author: Methuselah96

.changeset/bright-sheep-joke.md

@@ -0,0 +1,10 @@
+---
+'@redux-devtools/app-core': major
+'@redux-devtools/app': major
+'@redux-devtools/inspector-monitor-test-tab': major
+'@redux-devtools/rtk-query-monitor': major
+'@redux-devtools/slider-monitor': major
+'@redux-devtools/ui': major
+---
+
+Replace styled-components with Emotion

extension/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@redux-devtools/app": "workspace:^",
     "@redux-devtools/core": "workspace:^",
     "@redux-devtools/instrument": "workspace:^",
@@ -44,8 +45,7 @@
     "react-json-tree": "workspace:^",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
-    "redux-persist": "^6.0.0",
-    "styled-components": "^5.3.11"
+    "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -60,7 +60,6 @@
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
-    "@types/styled-components": "^5.1.34",
     "chromedriver": "^126.0.5",
     "cross-env": "^7.0.3",
     "electron": "^31.7.7",

packages/react-dock/demo/package.json

@@ -10,13 +10,13 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@emotion/styled": "^11.14.0",
     "react": "^19.1.0",
     "react-bootstrap": "^2.10.10",
     "react-dock": "workspace:^",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
-    "react-is": "^19.1.0",
-    "styled-components": "^5.3.11"
+    "react-is": "^19.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -26,7 +26,6 @@
     "@types/node": "^22.15.21",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
-    "@types/styled-components": "^5.1.34",
     "babel-loader": "^10.0.0",
     "cross-env": "^7.0.3",
     "fork-ts-checker-webpack-plugin": "^9.1.0",

packages/react-dock/demo/src/App.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import { BsX } from 'react-icons/bs';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { Dock } from 'react-dock';
 

packages/redux-devtools-app-core/package.json

@@ -61,6 +61,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@reduxjs/toolkit": "^2.8.2",
     "@rjsf/core": "^5.24.10",
     "@testing-library/dom": "^10.4.0",
@@ -72,7 +73,6 @@
     "@types/node": "^22.15.21",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
-    "@types/styled-components": "^5.1.34",
     "cross-env": "^7.0.3",
     "esbuild": "^0.25.4",
     "jest": "^29.7.0",
@@ -83,21 +83,19 @@
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "rimraf": "^6.0.1",
-    "styled-components": "^5.3.11",
     "ts-jest": "^29.3.4",
     "ts-node": "^10.9.2",
     "typescript": "~5.8.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@reduxjs/toolkit": "^1.0.0 || ^2.0.0",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@types/styled-components": "^5.1.34",
     "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-redux": "^8.0.0 || ^9.0.0",
     "redux": "^4.0.0 || ^5.0.0",
-    "redux-persist": "^6.0.0",
-    "styled-components": "^5.3.11"
+    "redux-persist": "^6.0.0"
   }
 }

packages/redux-devtools-app-core/src/containers/DevTools.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { withTheme } from 'styled-components';
+import { withTheme } from '@emotion/react';
 import { LiftedAction, LiftedState } from '@redux-devtools/core';
 import { Action } from 'redux';
 import getMonitor from '../utils/getMonitor';

packages/redux-devtools-app-core/src/containers/monitors/Dispatcher.tsx

@@ -1,8 +1,14 @@
 // Based on https://github.com/YoruNoHikage/redux-devtools-dispatch
 
 import React, { Component } from 'react';
-import styled from 'styled-components';
-import { Button, Select, Editor, Toolbar } from '@redux-devtools/ui';
+import styled from '@emotion/styled';
+import {
+  Button,
+  Select,
+  Editor,
+  Toolbar,
+  Base16Theme,
+} from '@redux-devtools/ui';
 import { connect, ResolveThunks } from 'react-redux';
 import { dispatchRemotely } from '../../actions';
 import { Options } from '../../reducers/instances';
@@ -12,7 +18,7 @@ export const DispatcherContainer = styled.div`
   flex-direction: column;
   flex-shrink: 0;
   padding-top: 2px;
-  background: ${(props) => props.theme.base01};
+  background: ${(props: { theme?: Base16Theme }) => props.theme!.base01};
 `;
 
 export const CodeContainer = styled.div`
@@ -24,7 +30,7 @@ export const CodeContainer = styled.div`
 export const ActionContainer = styled.div`
   display: table;
   width: 100%;
-  color: ${(props) => props.theme.base06};
+  color: ${(props: { theme?: Base16Theme }) => props.theme!.base06};
 
   > div {
     display: table-row;

packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/ChartTab.tsx

@@ -1,6 +1,6 @@
 import React, { Component, RefCallback } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
-import { withTheme } from 'styled-components';
+import { withTheme } from '@emotion/react';
 import { tree } from 'd3-state-visualizer';
 import type { HierarchyPointNode, Node, Options } from 'd3-state-visualizer';
 import { getPath } from '../ChartMonitorWrapper';

packages/redux-devtools-app-core/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import type { Delta } from 'jsondiffpatch';
 import * as htmlFormatter from 'jsondiffpatch/formatters/html';
-import styled, { ThemedStyledProps } from 'styled-components';
-import { effects, Theme } from '@redux-devtools/ui';
+import styled from '@emotion/styled';
+import { Base16Theme, effects } from '@redux-devtools/ui';
 
 export const StyledContainer = styled.div`
   .jsondiffpatch-delta {
@@ -19,8 +19,7 @@ export const StyledContainer = styled.div`
     padding: 2px 3px;
     border-radius: 3px;
     position: relative;
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
+    color: ${(props: { theme?: Base16Theme }) => props.theme!.base07};
     display: inline-block;
   }
 
@@ -44,25 +43,22 @@ export const StyledContainer = styled.div`
   .jsondiffpatch-modified .jsondiffpatch-right-value:before {
     vertical-align: top;
     padding: 2px;
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0E};
+    color: ${(props) => props.theme.base0E};
     content: ' => ';
   }
 
   .jsondiffpatch-added .jsondiffpatch-value pre,
   .jsondiffpatch-modified .jsondiffpatch-right-value pre,
   .jsondiffpatch-textdiff-added {
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    background: ${(props: ThemedStyledProps<{}, Theme>) =>
-      effects.color(props.theme.base0B, 'alpha', 0.2)};
+    background: ${(props: { theme?: Base16Theme }) =>
+      effects.color(props.theme!.base0B, 'alpha', 0.2)};
   }
 
   .jsondiffpatch-deleted pre,
   .jsondiffpatch-modified .jsondiffpatch-left-value pre,
   .jsondiffpatch-textdiff-deleted {
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    background: ${(props: ThemedStyledProps<{}, Theme>) =>
-      effects.color(props.theme.base08, 'alpha', 0.2)};
+    background: ${(props: { theme?: Base16Theme }) =>
+      effects.color(props.theme!.base08, 'alpha', 0.2)};
     text-decoration: line-through;
   }
 
@@ -129,14 +125,12 @@ export const StyledContainer = styled.div`
     padding: 2px 0;
     padding-right: 5px;
     vertical-align: top;
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0D};
+    color: ${(props) => props.theme.base0D};
   }
 
   .jsondiffpatch-property-name:after {
     content: ': ';
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
+    color: ${(props) => props.theme.base07};
   }
 
   .jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {
@@ -172,8 +166,7 @@ export const StyledContainer = styled.div`
   }
 
   .jsondiffpatch-value pre:after {
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
+    color: ${(props) => props.theme.base07};
     content: ',';
   }
 
@@ -196,8 +189,7 @@ export const StyledContainer = styled.div`
 
   .jsondiffpatch-moved .jsondiffpatch-moved-destination {
     display: inline-block;
-    ${/* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ ''}
-    background: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0A};
+    background: ${(props) => props.theme.base0A};
   }
 
   .jsondiffpatch-moved .jsondiffpatch-moved-destination:before {

packages/redux-devtools-app-core/src/containers/monitors/Slider.tsx

@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
-import styled, { withTheme } from 'styled-components';
+import styled from '@emotion/styled';
+import { withTheme } from '@emotion/react';
 import { SliderMonitor } from '@redux-devtools/slider-monitor';
 import { LiftedAction } from '@redux-devtools/core';
 import { Action } from 'redux';
-import { ThemeFromProvider } from '@redux-devtools/ui';
+import { Base16Theme, ThemeFromProvider } from '@redux-devtools/ui';
 import { State } from '../../reducers/instances';
 
 const SliderWrapper = styled.div`
-  border-color: ${(props) => props.theme.base02};
+  border-color: ${(props: { theme?: Base16Theme }) => props.theme!.base02};
   border-style: solid;
   border-width: 1px 0;
 `;