styled-components -> emotion. closes #95

.babelrc

@@ -8,13 +8,28 @@
       }
     ],
     "@babel/preset-react",
-    "@babel/preset-typescript"
+    "@babel/preset-typescript",
+    "@emotion/babel-preset-css-prop"
   ],
   "plugins": [
+    "emotion",
     "@babel/plugin-transform-runtime",
-    ["styled-components", { "pure": true }],
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-react-jsx",
-    "babel-plugin-macros"
+    "babel-plugin-macros",
+    [
+      "@emotion/babel-plugin-jsx-pragmatic",
+      {
+        "export": "jsx",
+        "import": "__cssprop",
+        "module": "@emotion/react"
+      }
+    ],
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "pragma": "__cssprop",
+        "pragmaFrag": "React.Fragment"
+      }
+    ]
   ]
 }

apps/web-console/src/hooks/use-toast/ToastStack.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import type { Toast as ToastModel } from './types'
-import { createGlobalStyle } from 'styled-components'
+import { Global } from '@emotion/react'
 import { ActionToast, ConfirmToast, Toast } from '@oxide/ui'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
-import 'twin.macro'
+import { css } from 'twin.macro'
 
-export const ToastAnimations = createGlobalStyle`
+const toastAnimations = css`
   .toast-enter {
     transform: translateY(100%);
     opacity: 0;
@@ -29,6 +29,8 @@ export const ToastAnimations = createGlobalStyle`
   }
 `
 
+export const ToastAnimations = () => <Global styles={toastAnimations} />
+
 interface ToastStackProps {
   toasts: ToastModel[]
   onRemoveToast: (id: string) => void

apps/web-console/src/pages/instance/InstanceCreatePage.tsx

@@ -18,7 +18,7 @@ import { useApiMutation } from '@oxide/api'
 import { useBreadcrumbs } from '../../hooks'
 import { getServerError } from '../../util/errors'
 
-const Heading = tw.h2`text-white text-lg mt-8 first:mt-0`
+const Heading = tw.h2`text-white text-lg mt-8 first-of-type:mt-0`
 
 const Description = tw.p`text-gray-300 text-sm mt-2 max-w-prose`
 

libs/css-helpers/breakpoints.ts

@@ -1,4 +1,4 @@
-import type { SimpleInterpolation } from 'styled-components'
+import type { CSSInterpolation } from '@emotion/serialize'
 import { css } from 'twin.macro'
 
 export type Breakpoint = 'xs' | 'sm' | 'lg' | 'xl' | '2xl'
@@ -11,7 +11,8 @@ export const breakpoints: Record<Breakpoint, number> = {
 }
 
 /**
- * This helper works simlarly to the `css` helper from `styled-components` however, it first takes a breakpoint and only applies the styles for that given breakpoint.
+ * This helper works simlarly to the `css`, but it takes a breakpoint and only
+ * applies the styles for that given breakpoint.
  *
  * ## Usage
  *
@@ -29,7 +30,7 @@ export const breakpoints: Record<Breakpoint, number> = {
  */
 export const breakpoint =
   (breakpoint: Breakpoint) =>
-  (first: TemplateStringsArray, ...args: SimpleInterpolation[]) =>
+  (first: TemplateStringsArray, ...args: CSSInterpolation[]) =>
     css`
       @media (min-width: ${breakpoints[breakpoint]}px) {
         ${css(first, ...args)}

libs/ui/.storybook/preview.js

@@ -2,12 +2,12 @@ import React from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { DocsContainer } from '@storybook/addon-docs/blocks'
 import { darkUI } from './theme'
-import { createGlobalStyle } from 'styled-components'
+import { Global, css } from '@emotion/react'
 import { GlobalStyle } from '@oxide/ui'
 import { breakpoints } from '@oxide/css-helpers'
 
 // Bug: https://github.com/storybookjs/storybook/issues/14029
-const DocsStyleOverrides = createGlobalStyle`
+const docsStyleOverrides = css`
   table.sbdocs tr {
     background-color: inherit;
     color: inherit;
@@ -22,12 +22,19 @@ const DocsStyleOverrides = createGlobalStyle`
     padding-top: 1.5rem;
   }
 
-  h1.sbdocs, h2.sbdocs, h3.sbdocs, h4.sbdocs, h5.sbdocs, h6.sbdocs, p.sbdocs {
+  h1.sbdocs,
+  h2.sbdocs,
+  h3.sbdocs,
+  h4.sbdocs,
+  h5.sbdocs,
+  h6.sbdocs,
+  p.sbdocs {
     /* Use single direction margins only */
     margin: 1.25em 0 0 0 !important;
   }
 
-  a, a:link {
+  a,
+  a:link {
     text-decoration: underline !important;
   }
 
@@ -51,7 +58,7 @@ export const parameters = {
     container: ({ children, context }) => (
       <DocsContainer context={context}>
         <GlobalStyle />
-        <DocsStyleOverrides />
+        <Global styles={docsStyleOverrides} />
         <Router>{children}</Router>
       </DocsContainer>
     ),

libs/ui/src/global-styles/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { createGlobalStyle } from 'styled-components'
-import tw, { GlobalStyles as BaseStyles } from 'twin.macro'
+import { Global } from '@emotion/react'
+import tw, { css, GlobalStyles as BaseStyles } from 'twin.macro'
 
 import './fonts.css'
 
-const CustomStyles = createGlobalStyle`
+const customStyles = css`
   body {
     ${tw`box-border bg-blue-gray-900 text-gray-300 font-mono font-normal`}
   }
@@ -31,10 +31,11 @@ const CustomStyles = createGlobalStyle`
   }
 
   // https://github.com/ben-rogerson/twin.macro/blob/16911c0/src/config/preflightStyles.js#L232
-  button, [role="button"] {
+  button,
+  [role='button'] {
     cursor: auto;
   }
-  
+
   // https://github.com/ben-rogerson/twin.macro/blob/16911c0/src/config/preflightStyles.js#L274-L284
   svg {
     display: inline;
@@ -45,6 +46,6 @@ const CustomStyles = createGlobalStyle`
 export const GlobalStyle = () => (
   <>
     <BaseStyles />
-    <CustomStyles />
+    <Global styles={customStyles} />
   </>
 )

libs/ui/src/lib/breadcrumbs/Breadcrumbs.tsx

@@ -8,7 +8,7 @@ export interface BreadcrumbsProps {
   data: Crumb[]
 }
 
-const Item = tw.li`inline-block not-first:before:(content['/'] mx-2 text-yellow-500)`
+const Item = tw.li`inline-block not-first-of-type:before:(content['/'] mx-2 text-yellow-500)`
 
 const Link_ = tw(Link)`visited:text-gray-400 hover:text-green-500`
 

libs/ui/src/lib/dropdown/Dropdown.tsx

@@ -113,7 +113,7 @@ const StyledOption = styled.li<{ size: SizeType; isHighlighted: boolean }>`
     box-shadow: 0 0 0 1px ${color('green500')};
   }
 
-  &:first-child {
+  &:first-of-type {
     margin-top: ${spacing(2)};
   }
 

libs/ui/src/lib/icon/Icon.tsx

@@ -5,26 +5,20 @@ import type { IconComponentProps } from './IconComponent'
 import { IconComponent } from './IconComponent'
 
 export interface IconProps extends IconComponentProps {
-  /**
-   * Add optional margin
-   */
   align?: 'left' | 'right'
-  /**
-   * Set the color using a theme color ("green500")
-   */
   color?: Color
   /**
    * Amount to rotate the SVG icon (useful for "chevron"); expects a number followed by an [angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) unit: `90deg`, `0.5turn`
    */
   rotate?: string
 }
 
-export const Icon = styled(IconComponent).withConfig({
-  shouldForwardProp: (prop) => {
-    // Do not pass 'align', 'color', 'rotate' (etc) props to the DOM
-    // but do pass 'svgProps' to SvgIcon
-    return ['className', 'svgProps', 'name'].includes(prop)
-  },
+const propsToForward: PropertyKey[] = ['className', 'svgProps', 'name']
+
+// Do not pass 'align', 'color', 'rotate' (etc) props to the DOM
+// but do pass 'svgProps' to SvgIcon
+export const Icon = styled(IconComponent, {
+  shouldForwardProp: (prop) => propsToForward.includes(prop),
 })<IconProps>`
   align-self: center; /* displays correct height for Safari */
   flex-shrink: 0;
@@ -35,14 +29,9 @@ export const Icon = styled(IconComponent).withConfig({
   fill: ${({ color }) => (color ? getColor(color) : 'currentColor')};
 
   ${({ rotate }) => rotate && `transform: rotate(${rotate})`};
-  ${({ align }) => {
-    if (align === 'left') {
-      return `margin-right: 0.5em;`
-    }
-    if (align === 'right') {
-      return `margin-left: 0.5em;`
-    }
-  }}
+
+  ${({ align }) => align === 'left' && `margin-right: 0.5em;`}
+  ${({ align }) => align === 'right' && `margin-left: 0.5em;`}
 `
 
 export default Icon

libs/ui/src/lib/instance-details/InstanceDetails.tsx

@@ -11,12 +11,9 @@ export interface InstanceDetailsProps {
 }
 
 const Cell = styled.span`
-  :before {
+  :not(:first-of-type):before {
     content: ' // ';
   }
-  :first-child:before {
-    content: '';
-  }
 `
 
 export const InstanceDetails = ({ instance }: InstanceDetailsProps) => {

libs/ui/src/lib/table/Table.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, forwardRef, useContext } from 'react'
 import type { FC, ReactNode } from 'react'
 
+import isPropValid from '@emotion/is-prop-valid'
 import tw, { css, styled } from 'twin.macro'
 import { VariableSizeList } from 'react-window'
 import AutoSizer from 'react-virtualized-auto-sizer'
@@ -23,7 +24,6 @@ export interface TableColumn {
 
 export type TableData = Record<string, ReactNode>[]
 export interface TableProps {
-  /** Allow styled-components to add custom styles */
   className?: string
   /**
    * Column headers to render. Header is the title of the column for the table. Accessor is the key on the data object.
@@ -86,10 +86,9 @@ const StyledRowGroup = styled.div`
 `
 
 /* TODO: Table cells have the ability to be greedy with size or be restricted based on the content inside */
-const StyledCell = styled.div.withConfig({
+const StyledCell = styled('div', {
   // Do not pass 'width' prop to the DOM
-  shouldForwardProp: (prop, defaultValidatorFn) =>
-    !['width'].includes(prop) && defaultValidatorFn(prop),
+  shouldForwardProp: (prop) => prop !== 'width' && isPropValid(prop),
 })<{ arrange?: 'fill' | 'none'; width?: number }>`
   display: flex;
   align-items: flex-start;
@@ -116,7 +115,7 @@ const StyledCell = styled.div.withConfig({
     }
   }};
 
-  &:not(:first-child) {
+  &:not(:first-of-type) {
     box-shadow: inset 1px 0 0 ${BORDER_COLOR};
   }
 `

libs/ui/src/lib/toast/Toast.tsx

@@ -107,7 +107,7 @@ export interface ConfirmToastProps extends BaseToastProps {
 
 const SplitActions = tw.div`flex flex-col border-l border-gray-300`
 
-const SplitActionContainer = tw.div`flex flex-1 first:(border-b border-gray-300)`
+const SplitActionContainer = tw.div`flex flex-1 first-of-type:(border-b border-gray-300)`
 
 export const ConfirmToast = ({
   icon,

package.json

@@ -10,14 +10,20 @@
     "test": "jest",
     "lint": "eslint --ext .js,.ts,.tsx,.json .",
     "fmt": "prettier --write .",
-    "storybook": "start-storybook --ci -c libs/ui/.storybook -p 4400",
+    "storybook": "NODE_ENV=production start-storybook --ci -c libs/ui/.storybook -p 4400",
     "storybook:clean": "rm -rf node_modules/.cache && yarn storybook",
     "typecheck": "tsc",
     "plop": "plop"
   },
   "private": true,
   "dependencies": {
+    "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/is-prop-valid": "^1.1.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
     "@popperjs/core": "^2.9.2",
+    "babel-plugin-macros": "^3.1.0",
     "core-js": "^3.11.0",
     "date-fns": "^2.21.2",
     "document-register-element": "1.13.1",
@@ -33,7 +39,6 @@
     "react-transition-group": "^4.4.1",
     "react-virtualized-auto-sizer": "^1.0.4",
     "react-window": "^1.8.6",
-    "styled-components": "^5.3.0",
     "tslib": "^2.0.0",
     "uuid": "^8.3.2"
   },
@@ -61,15 +66,13 @@
     "@types/react-transition-group": "^4.4.1",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
-    "@types/styled-components": "5.1.9",
     "@types/uuid": "^8.3.0",
     "@types/webpack": "^4.41.26",
     "@types/webpack-dev-server": "^3.11.2",
     "@typescript-eslint/eslint-plugin": "^4.22.1",
     "@typescript-eslint/parser": "^4.22.1",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
-    "babel-plugin-styled-components": "^1.12.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.1.3",
     "eslint": "7.10.0",
@@ -99,7 +102,7 @@
   },
   "babelMacros": {
     "twin": {
-      "preset": "styled-components"
+      "preset": "emotion"
     }
   }
 }

tsconfig.json

@@ -15,7 +15,8 @@
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
     "baseUrl": ".",
     "noEmit": true,
     "paths": {