Migrate to vanilla-extract from styled-components

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.tsx'],
@@ -10,6 +11,17 @@ const config: StorybookConfig = {
   docs: {
     autodocs: false,
   },
+  async viteFinal(config) {
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      plugins: [
+        vanillaExtractPlugin({
+          identifiers: 'debug',
+        }),
+      ],
+    });
+  },
 };
 
 export default config;

.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Work+Sans:400,600&display=swap"
+  rel="stylesheet"
+/>

.storybook/preview.tsx

@@ -1,13 +1,12 @@
+import '../src/global.css';
 import React from 'react';
 import type { Preview } from '@storybook/react';
-import { GlobalStyle } from '../src/styles/global-styles';
 import { HistoryContextProvider } from '../src/context/HistoryContext';
 
 const preview: Preview = {
   decorators: [
     (Story) => (
       <HistoryContextProvider>
-        <GlobalStyle />
         <Story />
       </HistoryContextProvider>
     ),

package.json

@@ -43,11 +43,14 @@
     "singleQuote": true
   },
   "resolutions": {
+    "jackspeak": "2.1.1",
     "strip-ansi": "6.0.1"
   },
   "dependencies": {
+    "@vanilla-extract/css": "^1.14.2",
     "body-scroll-lock": "^3.1.5",
     "clipboard-polyfill": "^3.0.2",
+    "clsx": "^2.1.0",
     "debounce": "^2.0.0",
     "focus-trap": "^7.5.4",
     "fuse.js": "^7.0.0",
@@ -62,7 +65,6 @@
     "react-dom": "18.2.0",
     "react-md-spinner": "^1.0.0",
     "react-transition-group": "^4.4.5",
-    "styled-components": "6.1.8",
     "unstated-next": "^1.1.0",
     "use-intersection": "^0.2.1",
     "x-img-diff-js": "^0.3.5"
@@ -82,6 +84,7 @@
     "@types/react-dom": "^18.2.24",
     "@types/react-measure": "^2.0.12",
     "@types/react-transition-group": "^4.4.10",
+    "@vanilla-extract/vite-plugin": "^4.0.7",
     "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
     "eslint": "8.57.0",

src/App/App.css.ts

@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+import { Space, tokens } from '../styles/variables.css';
+
+export const brand = style({
+  position: 'absolute',
+  top: Space * 3,
+  right: Space * 3,
+});
+
+export const layout = style({
+  display: 'flex',
+  height: '100%',
+  isolation: 'isolate',
+});
+
+export const content = style({
+  flex: '1 0 auto',
+  maxWidth: '100%',
+});
+
+export const help = style({
+  position: 'fixed',
+  right: Space * 3,
+  bottom: Space * 3,
+  borderRadius: '50%',
+  background: tokens.color.brandSecondary,
+  boxShadow: tokens.shadow.lv2,
+  zIndex: 10,
+});

src/App/App.tsx

@@ -1,47 +1,19 @@
-import React, { useState, useCallback, useRef } from 'react';
-import styled from 'styled-components';
-import { Sidebar } from '../components/Sidebar';
-import { GlobalStyle } from '../styles/global-styles';
+import React, { useCallback, useRef, useState } from 'react';
+import { Footer } from '../components/Footer';
+import { HelpDialog } from '../components/HelpDialog';
+import { IconButton } from '../components/IconButton';
 import { Logo } from '../components/Logo';
-import { Space, Shadow, Color } from '../styles/variables';
 import { Main } from '../components/Main';
-import { Footer } from '../components/Footer';
-import { Viewer } from '../components/Viewer';
 import { Notification } from '../components/Notification';
-import { IconButton } from '../components/IconButton';
+import { Sidebar } from '../components/Sidebar';
+import { Viewer } from '../components/Viewer';
 import { HelpIcon } from '../components/icons/HelpIcon';
-import { HelpDialog } from '../components/HelpDialog';
+import { EntityContainer } from '../containers/entity/EntityContainer';
 import { SidebarContainer } from '../containers/sidebar/SidebarContainer';
-import { findFirstFocusable } from '../utils/selector';
 import { useMousetrap } from '../hooks/useMousetrap';
-import { EntityContainer } from '../containers/entity/EntityContainer';
-
-const Layout = styled.main`
-  display: flex;
-  height: 100%;
-  isolation: isolate;
-`;
-
-const Content = styled.div`
-  flex: 1 0 auto;
-  max-width: 100%;
-`;
-
-const Brand = styled.span`
-  position: absolute;
-  top: ${Space * 3}px;
-  right: ${Space * 3}px;
-`;
-
-const Help = styled.span`
-  position: fixed;
-  right: ${Space * 3}px;
-  bottom: ${Space * 3}px;
-  border-radius: 50%;
-  background: ${Color.BRAND_SECONDARY};
-  box-shadow: ${Shadow.LEVEL2};
-  z-index: 10;
-`;
+import { findFirstFocusable } from '../utils/selector';
+import { Color } from '../styles/variables.css';
+import * as styles from './App.css';
 
 export type Props = {};
 
@@ -146,25 +118,23 @@ export const App = () => {
 
   return (
     <>
-      <GlobalStyle />
-
-      <Brand>
+      <span className={styles.brand}>
         <Logo size={40} />
-      </Brand>
+      </span>
 
-      <Layout>
+      <main className={styles.layout}>
         <Sidebar inputRef={filterRef} listRef={listRef} />
-        <Content>
+        <div className={styles.content}>
           <Main />
           <Footer />
-        </Content>
-      </Layout>
+        </div>
+      </main>
 
-      <Help>
+      <span className={styles.help}>
         <IconButton variant="dark" onClick={handleHelpClick}>
           <HelpIcon fill={Color.WHITE} />
         </IconButton>
-      </Help>
+      </span>
       <HelpDialog open={helpDialogOpen} onRequestClose={handleHelpClose} />
 
       <Viewer />

src/components/Card/Card.css.ts

@@ -0,0 +1,66 @@
+import { style } from '@vanilla-extract/css';
+import { BreakPoint, Space, tokens } from '../../styles/variables.css';
+
+export const wrapper = style({
+  position: 'relative',
+});
+
+export const inner = style({
+  display: 'block',
+  width: '100%',
+  borderWidth: 0,
+  borderRadius: 6,
+  background: tokens.color.white,
+  boxShadow: tokens.shadow.lv3,
+  color: tokens.color.textBase,
+  fontSize: 'inherit',
+  textDecoration: 'none',
+  cursor: 'pointer',
+  transition: `box-shadow ${tokens.duration.fadeIn} ${tokens.easing.standard}`,
+  ':hover': {
+    boxShadow: tokens.shadow.lv1,
+  },
+  ':focus-visible': {
+    boxShadow: tokens.state.focus,
+  },
+});
+
+export const sign = style({
+  position: 'absolute',
+  top: Space * 1,
+  left: Space * 1,
+  zIndex: 10,
+});
+
+export const image = style({
+  position: 'relative',
+  overflow: 'hidden',
+  height: '260px',
+  borderRadius: '6px 6px 0 0',
+});
+
+export const imageInner = style({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: 2,
+});
+
+export const title = style({
+  padding: Space * 2,
+  textAlign: 'left',
+  '@media': {
+    [`(min-width: ${BreakPoint.MEDIUM}px)`]: {
+      padding: Space * 3,
+    },
+  },
+});
+
+export const menu = style({
+  position: 'absolute',
+  top: Space * 0.5,
+  right: Space * 0.5,
+  zIndex: 10,
+});

src/components/Card/Card.stories.tsx

@@ -27,6 +27,15 @@ export default {
 
 export const Overview: Story = {};
 
+export const WithLongName: Story = {
+  args: {
+    entity: {
+      ...defaultEntity,
+      name: 'abcdef'.repeat(20),
+    },
+  },
+};
+
 export const WithNew: Story = {
   args: {
     entity: {