chore,refactor: Upgrade to Emotion 10; adapt in header & pagination (nodejs#172)

BeniCheni · sagirk · commit d986949fec96 · 2019-03-07T19:29:35.000+05:30
* chore: Update deps per emotion 10

* refactor: Adapt emotion in the styles of header &amp; pagination

* chore: Add back emotion dep to avoid unmet peer dependency
diff --git a/package.json b/package.json
@@ -5,14 +5,15 @@
   "author": "Adam Miller <ammiller@linkedin.com>",
   "private": true,
   "dependencies": {
+    "@emotion/core": "^10.0.7",
     "@types/react-helmet": "^5.0.7",
     "dotenv": "^6.0.0",
-    "emotion": "^9.2.12",
-    "emotion-server": "^9.2.12",
+    "emotion": "^10.0.7",
+    "emotion-server": "^10.0.7",
     "gatsby": "^2.0.0",
     "gatsby-plugin-canonical-urls": "^2.0.10",
     "gatsby-plugin-catch-links": "^2.0.9",
-    "gatsby-plugin-emotion": "^2.0.5",
+    "gatsby-plugin-emotion": "^4.0.4",
     "gatsby-plugin-manifest": "^2.0.2",
     "gatsby-plugin-offline": "^2.0.5",
     "gatsby-plugin-react-helmet": "^3.0.0",
@@ -27,7 +28,7 @@
     "prismjs": "^1.15.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-emotion": "^9.2.12",
+    "react-emotion": "^10.0.0",
     "react-helmet": "^5.2.0",
     "tslint": "^5.11.0",
     "typescript": "^3.1.1"
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,22 +1,22 @@
 import { Link } from 'gatsby';
 import React from 'react';
-import { css } from 'emotion';
+import { css, SerializedStyles } from '@emotion/core';
 import logo from '../images/logo.svg';
 
+const ulStyles: SerializedStyles = css`
+  @media (max-width: 380px) {
+    padding: 0;
+  }
+  margin: 0 auto;
+  padding: 0 4.8rem;
+  display: flex;
+  align-items: center;
+  list-style: none;
+`;
+
 const Header = () => (
   <nav className="nav">
-    <ul
-      css={css`
-        @media (max-width: 380px) {
-          padding: 0;
-        }
-        margin: 0 auto;
-        padding: 0 4.8rem;
-        display: flex;
-        align-items: center;
-        list-style: none;
-      `}
-    >
+    <ul css={ulStyles}>
       <li>
         <Link to="/" style={{ display: 'block' }}>
           <img src={logo} alt="Node.js" className="nav__logo" />
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
@@ -1,22 +1,23 @@
 import { Link } from 'gatsby';
 import React from 'react';
+import { css, SerializedStyles } from '@emotion/core';
 import { PaginationInfo } from '../types';
 
 type Props = {
   previous?: PaginationInfo;
   next?: PaginationInfo;
 }
 
+const ulStyles: SerializedStyles = css`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  list-style: none;
+  padding: 30px;
+`;
+
 const Pagination = ({ previous, next }: Props) => (
-  <ul
-    style={{
-      display: `flex`,
-      flexWrap: `wrap`,
-      justifyContent: `space-between`,
-      listStyle: `none`,
-      padding: '30px',
-    }}
-  >
+  <ul css={ulStyles}>
     <li>
       {previous && previous.title && (
         <Link to={`/${previous.slug}`} rel="prev">
diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
@@ -5,7 +5,23 @@ exports[`Tests for Header component renders correctly 1`] = `
   className="nav"
 >
   <ul
-    css="css-k9ksbg"
+    css={
+      Object {
+        "map": undefined,
+        "name": "xzcnt4",
+        "next": undefined,
+        "styles": "
+  @media (max-width: 380px) {
+    padding: 0;
+  }
+  margin: 0 auto;
+  padding: 0 4.8rem;
+  display: flex;
+  align-items: center;
+  list-style: none;
+",
+      }
+    }
   >
     <li>
       <a
diff --git a/test/components/__snapshots__/pagination.test.tsx.snap b/test/components/__snapshots__/pagination.test.tsx.snap
@@ -2,13 +2,18 @@
 
 exports[`Pagination component only renders links to pages that has a title 1`] = `
 <ul
-  style={
+  css={
     Object {
-      "display": "flex",
-      "flexWrap": "wrap",
-      "justifyContent": "space-between",
-      "listStyle": "none",
-      "padding": "30px",
+      "map": undefined,
+      "name": "4bjqmt",
+      "next": undefined,
+      "styles": "
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  list-style: none;
+  padding: 30px;
+",
     }
   }
 >
@@ -26,13 +31,18 @@ exports[`Pagination component only renders links to pages that has a title 1`] =
 
 exports[`Pagination component renders correctly when there is no next page 1`] = `
 <ul
-  style={
+  css={
     Object {
-      "display": "flex",
-      "flexWrap": "wrap",
-      "justifyContent": "space-between",
-      "listStyle": "none",
-      "padding": "30px",
+      "map": undefined,
+      "name": "4bjqmt",
+      "next": undefined,
+      "styles": "
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  list-style: none;
+  padding: 30px;
+",
     }
   }
 >
@@ -50,13 +60,18 @@ exports[`Pagination component renders correctly when there is no next page 1`] =
 
 exports[`Pagination component renders correctly when there is no previous page 1`] = `
 <ul
-  style={
+  css={
     Object {
-      "display": "flex",
-      "flexWrap": "wrap",
-      "justifyContent": "space-between",
-      "listStyle": "none",
-      "padding": "30px",
+      "map": undefined,
+      "name": "4bjqmt",
+      "next": undefined,
+      "styles": "
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  list-style: none;
+  padding: 30px;
+",
     }
   }
 >
@@ -74,13 +89,18 @@ exports[`Pagination component renders correctly when there is no previous page 1
 
 exports[`Pagination component renders links to the next and previous page 1`] = `
 <ul
-  style={
+  css={
     Object {
-      "display": "flex",
-      "flexWrap": "wrap",
-      "justifyContent": "space-between",
-      "listStyle": "none",
-      "padding": "30px",
+      "map": undefined,
+      "name": "4bjqmt",
+      "next": undefined,
+      "styles": "
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  list-style: none;
+  padding: 30px;
+",
     }
   }
 >
diff --git a/yarn.lock b/yarn.lock
