feat: remove styled-components dependency (#181)

Author: stipsan

README.md

@@ -7,7 +7,7 @@ An environment for designing, reviewing, and quality-testing React components.
 npm install @sanity/ui-workshop -D
 
 # Install peer dependencies
-npm install @sanity/ui react react-dom styled-components
+npm install @sanity/ui react react-dom
 ```
 
 [![npm version](https://img.shields.io/npm/v/@sanity/ui-workshop.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui-workshop)

package.config.ts

@@ -14,8 +14,19 @@ export default defineConfig({
     },
   },
   tsconfig: 'tsconfig.dist.json',
-  babel: {reactCompiler: true, styledComponents: true},
+  babel: {reactCompiler: true},
   reactCompilerOptions: {target: '19'},
+  rollup: {
+    output: {
+      intro: (chunkInfo) => {
+        if (chunkInfo.isEntry === true && chunkInfo.name === 'index') {
+          return `import './bundle.css'`
+        }
+        return ''
+      },
+    },
+    vanillaExtract: true,
+  },
   dts: 'rolldown',
   strictOptions: {noImplicitSideEffects: 'off'},
 })

package.json

@@ -21,6 +21,9 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "type": "module",
+  "imports": {
+    "#styles": "./src/core/styles.css.ts"
+  },
   "exports": {
     ".": {
       "source": "./exports/index.ts",
@@ -105,6 +108,9 @@
   },
   "dependencies": {
     "@sanity/icons": "^3.7.4",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/css-utils": "^0.1.6",
+    "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^4.7.0",
     "axe-core": "^4.10.3",
@@ -140,7 +146,6 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
-    "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "commitlint": "^19.8.1",
     "eslint": "^8.57.1",
@@ -160,16 +165,14 @@
     "react-dom": "^19.1.1",
     "react-is": "^19.1.1",
     "semantic-release": "^23.1.1",
-    "styled-components": "^6.1.19",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.9.2",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@sanity/ui": "^3",
     "react": "^19",
-    "react-dom": "^19",
-    "styled-components": "^6.1"
+    "react-dom": "^19"
   },
   "packageManager": "pnpm@9.15.9",
   "publishConfig": {

pnpm-lock.yaml

@@ -1,92 +1,18 @@
-import {createGlobalStyle} from 'styled-components'
+import {useRootTheme} from '@sanity/ui'
+import {setElementVars} from '@vanilla-extract/dynamic'
+import {useInsertionEffect} from 'react'
 
-export const GlobalStyle = createGlobalStyle`
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-Regular.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-Italic.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-Medium.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-MediumItalic.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-SemiBold.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 600;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-Bold.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-BoldItalic.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 800;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-ExtraBold.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 800;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-ExtraBoldItalic.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-Black.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: url("https://studio-static.sanity.io/Inter-BlackItalic.woff2") format("woff2");
-  }
+import {bodyBackgroundColor} from '#styles'
 
-  body {
-    background-color: ${({theme}) => theme.sanity.color.base.bg};
-  }
-`
+export function GlobalStyle(): null {
+  const {scheme, theme} = useRootTheme()
+  const bg = theme.v2!.color[scheme].default.bg!
+
+  useInsertionEffect(() => {
+    setElementVars(document.body, {
+      [bodyBackgroundColor]: bg,
+    })
+  }, [bg])
+
+  return null
+}

src/core/GlobalStyle.ts

@@ -1,19 +1,19 @@
-import {BoxDisplay, Card, Container, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
-import {memo, useMemo, useState} from 'react'
-import {styled} from 'styled-components'
+import {Card, Container, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+import {memo, useState} from 'react'
+
+import {
+  iframe,
+  iframeContainer,
+  viewportMaxHeight,
+  viewportMaxWidth,
+  zoom as zoomVar,
+} from '#styles'
 
 import {VIEWPORT_OPTIONS} from './constants'
 import {buildFrameUrl} from './helpers'
 import {useWorkshop} from './useWorkshop'
 
-const Frame = styled.iframe`
-  display: block;
-  border: 0;
-  height: 100%;
-  width: 100%;
-  view-transition-name: canvas;
-`
-
 /** @internal */
 export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
   frameRef: React.Ref<HTMLIFrameElement>
@@ -29,28 +29,8 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
     buildFrameUrl({baseUrl: frameUrl, path, payload, scheme, viewport, zoom}),
   )
 
-  const containerStyle = useMemo(
-    () => ({
-      maxWidth: viewportW === 'auto' ? undefined : `${(viewportW || 1) * zoom}px`,
-      maxHeight: viewportH ? `${(viewportH || 1) * zoom}px` : undefined,
-    }),
-    [viewportW, viewportH, zoom],
-  )
-
-  const display: BoxDisplay = useMemo(() => (hidden ? 'none' : 'block'), [hidden])
-
-  const frameStyle = useMemo(
-    () => ({
-      transform: `scale(${zoom})`,
-      transformOrigin: '0 0',
-      width: `${100 / zoom}%`,
-      height: `${100 / zoom}%`,
-    }),
-    [zoom],
-  )
-
   return (
-    <Card display={display} flex={1} overflow="hidden" tone="transparent">
+    <Card display={hidden ? 'none' : 'block'} flex={1} overflow="hidden" tone="transparent">
       <Flex align="center" height="fill" justify="center" sizing="border">
         {path === '/' && (
           <Container width={0}>
@@ -66,13 +46,18 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
         {!frameReady && path !== '/' && <Spinner muted />}
 
         <Container
+          className={iframeContainer}
           height="fill"
           hidden={!frameReady || path === '/'}
-          style={containerStyle}
+          style={assignInlineVars({
+            [viewportMaxWidth]: viewportW === 'auto' ? undefined : `${viewportW}px`,
+            [viewportMaxHeight]: viewportH ? `${viewportH}px` : undefined,
+            [zoomVar]: `${zoom}`,
+          })}
           width="auto"
         >
           <Card height="fill" shadow={1}>
-            <Frame ref={frameRef} src={initialFrameUrl} style={frameStyle} />
+            <iframe className={iframe} ref={frameRef} src={initialFrameUrl} />
           </Card>
         </Container>
       </Flex>