switched to emotion

Author: DavidChen-minted

src/components/Loading/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import css from 'styled-jsx/css';
+import { css } from '@emotion/core';
 import { rem } from '../../utils/styleUtils';
 
 interface Props {
@@ -17,13 +17,13 @@ const Loading: React.FC<Props> = ({
   numBox = 3,
   boxColor = 'skyblue',
 }) => {
-  const animationDelayStyles = (position: number) => css.resolve`
+  const animationDelayStyles = (position: number) => css`
     animation-delay: ${animationTime * (position / numBox)}ms;
   `;
 
   const boxStyles = Array.from(Array(numBox), (_, position) => animationDelayStyles(position));
 
-  const containerStyles = css.resolve`
+  const containerStyles = css`
     box-sizing: border-box;
     margin-top: ${rem(40)};
     margin-bottom: ${rem(40)};
@@ -60,7 +60,7 @@ const Loading: React.FC<Props> = ({
       }
     }
 
-    :global(${boxStyles.map(styles => `.${styles.className}`).join(', ')}) {
+    & > div {
       width: ${rem(boxSize)};
       height: ${rem(boxSize)};
       opacity: 0.5;
@@ -72,13 +72,10 @@ const Loading: React.FC<Props> = ({
   `;
 
   return (
-    <div className={containerStyles.className}>
+    <div css={containerStyles}>
       {boxStyles.map(styles => (
-        <div key={styles.className} className={styles.className}>
-          {styles.styles}
-        </div>
+        <div key={styles.name} css={styles} />
       ))}
-      {containerStyles.styles}
     </div>
   );
 };

src/utils/styleUtils.ts

@@ -1,22 +1,20 @@
-import css from 'styled-jsx/css';
+import { css } from '@emotion/core';
 
 export const rem = (num: number) => {
   const remVal = num / 16;
   return `${remVal}rem`;
 };
 
-export const buttonReset = css.global`
-  button {
-    border: none;
-    border-radius: 0;
-    margin: 0;
-    padding: 0;
-    width: auto;
-    overflow: visible;
-    background: transparent;
-  }
+export const buttonReset = css`
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
 
-  button:focus {
+  &:focus {
     outline: none;
     box-shadow: none;
   }
@@ -45,7 +43,7 @@ export const transition = (duration: number = 250, easing: string = 'ease-in-out
   const transitions = [...properties];
   const makeTransition = (property: string, index: number) =>
     `${index !== 0 ? ', ' : ''}${property} ${duration}ms ${easing}`;
-  return css.resolve`
+  return css`
     transition: ${transitions.map(makeTransition)};
   `;
 };