Switch out styled-components for emotion

12 · Jun 12, 2020 · ae8ea90 · ae8ea90
1 parent 4149caa
commit ae8ea90
Show file tree

Hide file tree

Showing 8 changed files with 235 additions and 92 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,15 +1,41 @@
 {
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ],
-    "plugins": [
-        "react-hot-loader/babel",
-        [
-            "@babel/plugin-transform-runtime",
-            {
-                "regenerator": true
-            }
-        ]
-    ]
+    "env": {
+        "production": {
+            "presets": [
+                "@babel/preset-env",
+                "@babel/preset-react"
+            ],
+            "plugins": [
+                "emotion",
+                "react-hot-loader/babel",
+                [
+                    "@babel/plugin-transform-runtime",
+                    {
+                        "regenerator": true
+                    }
+                ]
+            ]
+        },
+        "development": {
+            "presets": [
+                "@babel/preset-env",
+                "@babel/preset-react"
+            ],
+            "plugins": [
+                [
+                    "emotion",
+                    {
+                        "sourceMap": true
+                    }
+                ],
+                "react-hot-loader/babel",
+                [
+                    "@babel/plugin-transform-runtime",
+                    {
+                        "regenerator": true
+                    }
+                ]
+            ]
+        }
+    }
 }
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ node_modules
 npm-debug.log
 .vscode
 .DS_Store
-dist
+dist
+yarn-error.log
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="manifest" href="/manifest.json" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />
     <title>London Tube Status</title>

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@babel/preset-react": "^7.9.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.5",
+    "babel-plugin-emotion": "^10.0.33",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.0.2",
     "eslint": "^7.0.0",
@@ -35,9 +36,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.2",
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "styled-components": "^5.1.1"
+    "react-dom": "^16.13.1"
   }
 }
diff --git a/src/Containers/App/index.jsx b/src/Containers/App/index.jsx
@@ -1,8 +1,9 @@
-import React, { Fragment, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
+import { Global } from '@emotion/core';
 import Line from '../../Components/Line';
 import dataBroker from '../../Helpers/dataBroker';
 import sortData from '../../Helpers/sortData';
-import { GlobalStyled, WrapperStyled, GithubLinkStyled } from '../../Helpers/styles';
+import { globalStyles, WrapperStyled, GithubLinkStyled } from '../../Helpers/styles';
 
 const endpoint =
   'https://api.tfl.gov.uk/line/mode/tube%2Cdlr%2Coverground%2Ctflrail%2Ctram%2Ccable-car/status';
@@ -24,19 +25,19 @@ const App = () => {
   }, []);
 
   return (
-    <Fragment>
-      <GlobalStyled />
+    <>
+      <Global styles={globalStyles} />
       <WrapperStyled>
-        {lines.map(line => (
+        {lines && lines.map(line => (
           <Line key={line.name} line={line} />
         ))}
-      </WrapperStyled>
+      </WrapperStyled> */}
       {!!lines.length && (
         <GithubLinkStyled href="https://github.com/12/tube-status">
           Open source on Github!
         </GithubLinkStyled>
       )}
-    </Fragment>
+    </>
   );
 };
 

diff --git a/src/Helpers/styles.js → src/Helpers/styles.jsx b/src/Helpers/styles.js → src/Helpers/styles.jsx
@@ -1,4 +1,5 @@
-import styled, { createGlobalStyle } from 'styled-components';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 
 const PAGE_COLOUR = '#273c75';
 const WHITE = '#fefefe';
@@ -22,15 +23,7 @@ const LINE_COLOURS = {
   tfl: '#0007ab'
 };
 
-const lineBackgroundColour = ({ name }) => {
-  const convertedName = name.split(' ')[0];
-
-  return LINE_COLOURS[convertedName.toLowerCase()] || WHITE;
-};
-
-export const GlobalStyled = createGlobalStyle`
-  @import url('https://fonts.googleapis.com/css?family=Poppins');
-
+export const globalStyles = css`
   body {
     background: ${PAGE_COLOUR};
     -webkit-font-smoothing: antialiased;
@@ -47,6 +40,12 @@ export const GlobalStyled = createGlobalStyle`
   }
 `;
 
+const lineBackgroundColour = ({ name }) => {
+  const convertedName = name.split(' ')[0];
+
+  return LINE_COLOURS[convertedName.toLowerCase()] || WHITE;
+};
+
 export const WrapperStyled = styled.div`
   margin: 0 auto;
   width: 60%;

diff --git a/webpack.config.js b/webpack.config.js
@@ -40,7 +40,7 @@ module.exports = (env, argv) => {
       new HtmlWebpackPlugin({
         template: './index.html',
       }),
-      new CopyPlugin({ patterns: [ { from: 'assets', to: 'dist' } ]})
+      new CopyPlugin({ patterns: [ { from: 'assets', to: '.' } ]})
     ],
     resolve: {
       extensions: ['.js', '.jsx'],