Migrate Tailwind to Styled Components

.babelrc

@@ -10,5 +10,5 @@
       }
     ]
   ],
-  "plugins": ["@emotion/babel-plugin", "babel-plugin-macros"]
+  "plugins": ["@emotion/babel-plugin"]
 }

.env.example

@@ -4,7 +4,7 @@ GITHUB_API_TOKEN=
 # Spotify keys needed to get current playing song and top tracks
 SPOTIFY_CLIENT_ID=
 SPOTIFY_CLIENT_SECRET=
-SPOTIFY_CLIENT_TOKEN=
+SPOTIFY_CLIENT_REFRESH_TOKEN=
 
 # Twitter token to get followers count
 TWITTER_BEARER_TOKEN=

README.md

@@ -4,7 +4,7 @@
 
 - **Framework**: [Next.js](https://nextjs.org/)
 - **Content**: [MDX](https://github.com/mdx-js/mdx) and [contentlayer](https://github.com/contentlayerdev/contentlayer)
-- **Styling**: [emotion.sh](http://emotion.sh/), [Tailwind CSS](https://tailwindcss.com/) and [twin.macro](https://github.com/ben-rogerson/twin.macro)
+- **Styling**: [emotion](http://emotion.sh/) styled components
 - **Deployment**: [Vercel](https://vercel.com)
 
 ## Project Structure

package.json

@@ -36,8 +36,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
     "@bpsmart/eslint-config-base": "^0.1.0",
     "@bpsmart/eslint-config-react": "^0.0.8",
     "@emotion/babel-plugin": "^11.3.0",
@@ -51,7 +49,6 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "autoprefixer": "^10.4.0",
-    "babel-plugin-macros": "^3.1.0",
     "cssnano": "^5.0.11",
     "eslint": "<8.0.0",
     "eslint-config-next": "12.0.4",
@@ -76,9 +73,6 @@
     "rehype-slug": "^5.0.0",
     "remark-gfm": "^3.0.1",
     "remove-markdown": "^0.3.0",
-    "tailwindcss": "^2.2.19",
-    "tailwindcss-textshadow": "^2.1.3",
-    "twin.macro": "^2.8.1",
     "typescript": "^4.5.2",
     "xml": "^1.0.1"
   },
@@ -90,11 +84,5 @@
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "all"
-  },
-  "babelMacros": {
-    "twin": {
-      "preset": "emotion",
-      "sassyPseudo": true
-    }
   }
 }

postcss.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   plugins: {
     'postcss-import': {},
-    tailwindcss: {},
     autoprefixer: {},
     'postcss-flexbugs-fixes': {},
     'postcss-calc': {},

src/components/atoms/complex/back-to-top.tsx

@@ -1,68 +1,84 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { mdiChevronUp } from '@mdi/js';
 import { useState, useEffect, useCallback } from 'react';
-import tw from 'twin.macro';
 
 import { Button } from '~/components/atoms/simple';
 import useHasMounted from '~/hooks/useHasMounted';
+import { mediaQueries } from '~/types';
 
-const visibleStyles = tw`
-  visible
-  opacity-100
-  pointer-events-auto
+const visibleStyles = css`
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
 `;
 
-const hiddenStyles = tw`
-  invisible
-  opacity-0
-  pointer-events-none
+const hiddenStyles = css`
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
 `;
 
-const BackToTopButton = tw(Button)`
-  z-index[2]
-  fixed
-  right-0
-  bottom-0
-  mr-10
-  mb-10
-  bg-accent-light
-  min-h-button
-  min-w-button
-  rounded-half
-  shadow-fab
-  text-accent-text
-  text-tiny
-  tracking-fab
-  leading-normal
-  p-7
-  gap-0
-  uppercase
-  duration-300
-
-  hocus:(bg-accent)
-
-  [span]:(h-0 w-0 text-0)
-
-  all-child:(not-last:(
-    inline-block
-    visible
-    pointer-events-none
-    opacity-100
-    mr-0
-  ))
-
-  md:(mr-15 mb-15)
-
-  2xl:(
-    rounded-full mr-20 mb-20
-    padding[0.875rem 1.25rem]
-    all-child:(not-last:(
-      hidden
-      invisible
-      opacity-0
-    ))
-
-    [span]:(h-unset w-unset text-unset)
-  )
+const BackToTopButton = styled(Button)`
+  z-index: 2;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 0 16px 16px 0;
+  background: var(--accent-light);
+  min-height: 42px;
+  min-width: 42px;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(var(--shadow-color), 0.24);
+  color: var(--on-accent);
+  font-size: var(--font-3xs);
+  letter-spacing: 0.0625rem;
+  line-height: 1.5;
+  padding: 0.7rem;
+  gap: 0;
+  text-transform: uppercase;
+  transition-duration: 0.3s;
+
+  &:hover,
+  &:focus {
+    background: var(--accent);
+  }
+
+  & span {
+    height: 0;
+    width: 0;
+    font-size: 0;
+  }
+
+  & > *:not(:last-child) {
+    display: inline-block;
+    visibility: visible;
+    pointer-events: none;
+    opacity: 1;
+    margin-right: 0;
+  }
+
+  ${mediaQueries.tablet.sm} {
+    margin: 0 24px 24px 0;
+  }
+
+  ${mediaQueries.desktop} {
+    border-radius: 9999px;
+    padding: 14px 20px;
+    margin: 0 32px 32px 0;
+
+    & span {
+      height: unset;
+      width: unset;
+      font-size: unset;
+    }
+
+    & > *:not(:last-child) {
+      display: none;
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
 `;
 
 const scrollToTop = () => {

src/components/atoms/complex/button-group.tsx

@@ -1,10 +1,9 @@
-import tw from 'twin.macro';
+import styled from '@emotion/styled';
 
-export const ButtonGroup = tw.div`
-  inline-flex
-  flex-row
-  flex-wrap
-  items-center
-  justify-start
-  gap-8
+export const ButtonGroup = styled.div`
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.8rem;
 `;

src/components/atoms/complex/chip-group.tsx

@@ -1,9 +1,9 @@
-import tw from 'twin.macro';
+import styled from '@emotion/styled';
 
-export const ChipGroup = tw.ul`
-  flex
-  flex-wrap
-  list-none
-  py-10
-  gap-6
+export const ChipGroup = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 1rem 0;
+  gap: 0.6rem;
 `;

src/components/atoms/simple/button.tsx

@@ -1,32 +1,46 @@
+import { css } from '@emotion/react';
 import Icon from '@mdi/react';
 import { MouseEventHandler } from 'react';
-import tw from 'twin.macro';
 
 import { Component, ComponentProps } from '~/types';
 
-export const ButtonStyles = tw`
-  inline-flex
-  items-center
-  justify-center
-  bg-accent
-  text-accent-text
-  border-none
-  rounded
-  min-h-button
-  px-8
-  py-4
-  font-manrope
-  font-semibold
-  tracking-button
-  cursor-pointer
-  gap-4
-  truncate
-  shadow-sm
-  transition[all .25s ease-in-out]
+export const ButtonStyles = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--accent);
+  color: var(--on-accent);
+  border: none;
+  border-radius: 6px;
+  min-height: 42px;
+  padding: 0.4rem 0.8rem;
+  font-family: var(--manrope-font);
+  font-weight: 600;
+  letter-spacing: 0.03125rem;
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  gap: 0.4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-shadow: var(--shadow-sm);
 
-  disabled:(opacity-50 pointer-events-none cursor-not-allowed)
-  hocus:(shadow bg-accent-dark -translate-y-1 min-h-button)
-  [svg]:(only:(mx-auto))
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &:hover,
+  &:focus {
+    box-shadow: var(--shadow);
+    background-color: var(--accent-dark);
+    transform: translateY(-0.1rem);
+  }
+
+  & > svg:only-child {
+    margin: 0 auto;
+  }
 `;
 
 export interface BaseButtonProps {

src/components/atoms/simple/card.tsx

@@ -1,24 +1,34 @@
-import tw, { styled } from 'twin.macro';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import { Link } from './link';
 
-const baseCardStyles = tw`
-  block
-  rounded
-  p-0
-  border
-  border-divider
-  transition[all .25s ease-in-out]
+const baseCardStyles = css`
+  display: block;
+  border-radius: 6px;
+  padding: 0;
+  transition: all 0.25s ease-in-out;
+  border: 1px solid var(--divider);
 `;
 
 export const Card = styled.div`
   ${baseCardStyles}
 `;
 
-const linkCardStyles = tw`
-  --shadow-color[var(--card-base)]
-  shadow-none no-underline
-  hocus:(shadow-md border-card-shadow-border -translate-y-1)
+const linkCardStyles = css`
+  --shadow-color: var(--card-base);
+  --shadow: 0 3px 1px -2px rgba(var(--shadow-color), 0.12),
+    0 2px 2px 0 rgba(var(--shadow-color), 0.09),
+    0 1px 5px 0 rgba(var(--shadow-color), 0.07);
+  box-shadow: none;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    box-shadow: var(--shadow);
+    border-color: var(--card-shadow-border);
+    transform: translateY(-0.1rem);
+  }
 `;
 
 export const LinkCard = styled(Link)`