feat: switch to emotion

CHANGELOG.md

@@ -1,9 +1,8 @@
 ## [1.5.2](https://github.com/vault-developer/event-loop-explorer/compare/v1.5.1...v1.5.2) (2024-08-31)
 
-
 ### Bug Fixes
 
-* fix pause animation bug ([c7abf68](https://github.com/vault-developer/event-loop-explorer/commit/c7abf68dba7607a53413de13f2e51ef46e7bd07c))
+- fix pause animation bug ([c7abf68](https://github.com/vault-developer/event-loop-explorer/commit/c7abf68dba7607a53413de13f2e51ef46e7bd07c))
 
 ## [1.5.1](https://github.com/vault-developer/event-loop-explorer/compare/v1.5.0...v1.5.1) (2024-08-31)
 

package.json

@@ -16,25 +16,21 @@
 	},
 	"dependencies": {
 		"@commitlint/cli": "^19.4.0",
+		"@emotion/react": "^11.13.3",
+		"@emotion/styled": "^11.13.0",
 		"@eslint/compat": "^1.1.1",
 		"@eslint/eslintrc": "^3.1.0",
 		"@eslint/js": "^9.9.1",
 		"@mui/icons-material": "^6.0.1",
 		"@mui/material": "^5.16.7",
-		"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
-		"@mui/styled-engine-sc": "6.0.0-alpha.18",
 		"ace-builds": "^1.36.0",
 		"acorn": "^8.12.1",
 		"globals": "^15.9.0",
 		"react": "^18.3.1",
 		"react-ace": "^12.0.0",
 		"react-dom": "^18.3.1",
-		"styled-components": "^6.1.12",
 		"zustand": "^4.5.5"
 	},
-	"resolutions": {
-		"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
-	},
 	"devDependencies": {
 		"@commitlint/config-conventional": "^19.2.2",
 		"@semantic-release/changelog": "^6.0.3",

src/App.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const Layout = styled.div`
 	flex: 1;

src/components/Callstack/Callstack.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import InfoClosed from '../CloseIcon/InfoIcon.tsx';
 
 export const Callstack = styled.div`

src/components/CloseIcon/InfoIcon.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const Closed = styled.svg(
 	({ theme }) => css`

src/components/Console/Console.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const LogQueue = styled.div`
 	flex: 1;

src/components/Editor/Editor.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import Button from '@mui/material/Button';
 
 export const SectionWrapper = styled.div`

src/components/EventLoop/CircleLabels/CircleLabels.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const LabelsWrapper = styled.div`
 	position: absolute;

src/components/EventLoop/EventLoop.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import InfoClosed from '../CloseIcon/InfoIcon.tsx';
 
 export const CircleContainer = styled.div(

src/components/EventLoop/EventLoop.tsx

@@ -3,7 +3,7 @@ import { useEventLoopAnimation } from '../../store/store.ts';
 import CircleLabels from './CircleLabels/CircleLabels.tsx';
 import { events } from './EventLoop.data.ts';
 import * as Styled from './EventLoop.styled.ts';
-import { useTheme } from 'styled-components';
+import { useTheme } from '@emotion/react';
 import InfoIcon from '../InfoIcon/InfoIcon.tsx';
 import InfoModal from '../Modal/Modal.tsx';
 import useBoolean from '../../utils/useBoolean.tsx';

src/components/EventLoop/Pointer/Pointer.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const SectorWithInnerBorder = styled.div(
 	({

src/components/InfoIcon/InfoIcon.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const Info = styled.svg(
 	({ theme }) => css`

src/components/MicroTasksQueue/MicroTasksQueue.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import InfoClosed from '../CloseIcon/InfoIcon.tsx';
 
 export const MicroTasksQueue = styled.div`

src/components/RenderCallbacksQueue/RequestAnimationFrameQueue.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { css } from '@mui/material';
 import InfoClosed from '../CloseIcon/InfoIcon.tsx';
 

src/components/TasksQueue/TasksQueue.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import InfoClosed from '../CloseIcon/InfoIcon.tsx';
 
 export const TasksQueue = styled.div`

src/components/WebApiQueue/WebApiQueue.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import InfoClosed from '../CloseIcon/InfoIcon.tsx';
 
 export const WebApiQueue = styled.div`

src/components/WebApiQueue/WebApiTask.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { css } from '@mui/material';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const WebApiItem = styled.div(
 	({ theme }) => css`

src/providers/StylesProvider.tsx

@@ -1,5 +1,5 @@
 import { createTheme } from '@mui/material';
-import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import { ThemeProvider, Global, css } from '@emotion/react';
 import { PropsWithChildren } from 'react';
 
 const muiTheme = createTheme({
@@ -87,66 +87,67 @@ const theme = {
 	},
 };
 
-const GlobalStyles = createGlobalStyle(
-	({ theme }) => `
-  html {
-      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-      color: ${theme.custom.colors.contrastWhiteColor};
-      background-color: ${theme.custom.colors.backgroundDark};
-      height: 100%;
-  }
-
-  div, span, p {
-      font-size: 14px;
-      margin: 0;
-  }
-
-  ul, ol {
-			padding-left: 15px;
-
-			&>li:not(:last-child) {
-				margin-bottom: 10px;
-			}
-  }
-
-  a {
+const globalStyles = css`
+	html {
+		font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 		color: ${theme.custom.colors.contrastWhiteColor};
-  }
-
-  body {
-      margin: 0;
-      display: flex;
-      height: 100%;
-  }
-
-  #root {
-      min-width: 1024px;
-      margin: 0;
-      text-align: center;
-      display: flex;
-      height: 100%;
-      width: 100%;
-      min-height: 814px;
-  }
-
-  ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-  }
-  ::-webkit-scrollbar-thumb {
-      background: ${theme.custom.colors.listItemBackground};
-  }
-
-  :focus-visible {
-  		outline: 2px solid ${theme.custom.colors.listItemBackground};
-  }
-`
-);
+		background-color: ${theme.custom.colors.backgroundDark};
+		height: 100%;
+	}
+
+	div,
+	span,
+	p {
+		font-size: 14px;
+		margin: 0;
+	}
+
+	ul,
+	ol {
+		padding-left: 15px;
+
+		& > li:not(:last-child) {
+			margin-bottom: 10px;
+		}
+	}
+
+	a {
+		color: ${theme.custom.colors.contrastWhiteColor};
+	}
+
+	body {
+		margin: 0;
+		display: flex;
+		height: 100%;
+	}
+
+	#root {
+		min-width: 1024px;
+		margin: 0;
+		text-align: center;
+		display: flex;
+		height: 100%;
+		width: 100%;
+		min-height: 814px;
+	}
+
+	::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+	::-webkit-scrollbar-thumb {
+		background: ${theme.custom.colors.listItemBackground};
+	}
+
+	:focus-visible {
+		outline: 2px solid ${theme.custom.colors.listItemBackground};
+	}
+`;
 
 function StylesProvider({ children }: PropsWithChildren) {
 	return (
 		<ThemeProvider theme={theme}>
-			<GlobalStyles />
+			<Global styles={globalStyles} />
 			{children}
 		</ThemeProvider>
 	);