Replacing emotion with styled components (#257)

prabhuignoto · Jun 12, 2022 · 373e524 · 373e524
1 parent 3791051
commit 373e524
Show file tree

Hide file tree

Showing 14 changed files with 1,380 additions and 1,955 deletions.
diff --git a/.dccache b/.dccache
diff --git a/package.json b/package.json
@@ -31,11 +31,9 @@
     "dev": "vite --config vite.config.ts"
   },
   "dependencies": {
-    "@emotion/core": "^11.0.0-next.10",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
     "classnames": "^2.3.1",
-    "focus-visible": "^5.2.0"
+    "focus-visible": "^5.2.0",
+    "styled-components": "^5.3.5"
   },
   "publishConfig": {
     "cache": "cache/.npm",
@@ -65,12 +63,13 @@
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "@vitejs/plugin-react": "^1.3.2",
     "babel-loader": "^8.2.5",
     "cssnano": "^5.1.11",
-    "cypress": "10.0.3",
+    "cypress": "10.1.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
@@ -95,10 +94,10 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.32.1",
-    "snyk": "^1.946.0",
+    "snyk": "^1.947.0",
     "start-server-and-test": "^1.14.0",
     "stylelint": "^14.8.5",
-    "stylelint-config-recommended": "^7.0.0",
+    "stylelint-config-recommended": "^8.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-order": "^5.0.0",
     "stylelint-processor-styled-components": "^1.10.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -57,13 +57,13 @@ export default {
       plugins: [
         '@babel/plugin-transform-runtime',
         '@babel/plugin-proposal-optional-chaining',
-        [
-          '@emotion',
-          {
-            // sourceMap is on by default but source maps are dead code eliminated in production
-            sourceMap: false,
-          },
-        ],
+        // [
+        //   '@emotion',
+        //   {
+        //     // sourceMap is on by default but source maps are dead code eliminated in production
+        //     sourceMap: false,
+        //   },
+        // ],
       ],
     }),
     buble({

diff --git a/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts b/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts
@@ -1,5 +1,4 @@
-import { css, keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
+import styled, { css, keyframes } from 'styled-components';
 import { Theme } from '../../../models/Theme';
 import { TimelineMode } from '../../../models/TimelineModel';
 

diff --git a/src/components/timeline-elements/timeline-card-media/timeline-card-media.styles.ts b/src/components/timeline-elements/timeline-card-media/timeline-card-media.styles.ts
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 import { Theme } from '../../../models/Theme';
 import { TimelineMode } from '../../../models/TimelineModel';
 

diff --git a/src/components/timeline-elements/timeline-card/timeline-horizontal-card.styles.ts b/src/components/timeline-elements/timeline-card/timeline-horizontal-card.styles.ts
@@ -1,5 +1,4 @@
-import { keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
+import styled, { keyframes } from 'styled-components';
 import { Theme } from '../../../models/Theme';
 
 export const Wrapper = styled.div`

diff --git a/src/components/timeline-elements/timeline-control/timeline-control.styles.ts b/src/components/timeline-elements/timeline-control/timeline-control.styles.ts
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 import { Theme } from '../../../models/Theme';
 import { TimelineMode } from '../../../models/TimelineModel';
 

diff --git a/src/components/timeline-elements/timeline-item-title/timeline-card-title.styles.ts b/src/components/timeline-elements/timeline-item-title/timeline-card-title.styles.ts
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 import { Theme } from '../../../models/Theme';
 
 export const TitleWrapper = styled.div<{

diff --git a/src/components/timeline-elements/timeline-outline/timeline-outline.styles.ts b/src/components/timeline-elements/timeline-outline/timeline-outline.styles.ts
@@ -1,5 +1,4 @@
-import { keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
+import styled, { keyframes } from 'styled-components';
 import { Theme } from '../../../models/Theme';
 import { OutlinePosition } from './timeline-outline';
 

diff --git a/src/components/timeline-horizontal/timeline-horizontal.styles.ts b/src/components/timeline-horizontal/timeline-horizontal.styles.ts
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 
 export const TimelineHorizontalWrapper = styled.ul<{ flipLayout?: boolean }>`
   display: flex;

diff --git a/src/components/timeline-vertical/timeline-vertical.styles.ts b/src/components/timeline-vertical/timeline-vertical.styles.ts
@@ -1,5 +1,4 @@
-import { keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
+import styled, { keyframes } from 'styled-components';
 import { TimelineMode } from '../../models/TimelineModel';
 
 export const TimelineVerticalWrapper = styled.div`

diff --git a/src/components/timeline/timeline.style.ts b/src/components/timeline/timeline.style.ts
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 import { Theme } from '../../models/Theme';
 import { TimelineMode } from '../../models/TimelineModel';
 

diff --git a/src/demo/App.styles.ts b/src/demo/App.styles.ts
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 
 const ModeWrapper = styled.div`
   width: 90%;