sanity-io · stipsan · Aug 6, 2026
@@ -0,0 +1,5 @@
+---
+"sanity-plugin-asset-source-unsplash": patch
+---
+
+Migrate internal styling from styled-components to vanilla-extract (zero-runtime CSS)
@@ -28,11 +28,25 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./bundle.css": {
+      "types": "./dist/bundle-css.d.ts",
+      "browser": "./dist/bundle.css",
+      "style": "./dist/bundle.css",
+      "node": "./dist/bundle-css.js",
+      "default": "./dist/bundle-css.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
     "exports": {
       ".": "./dist/index.js",
+      "./bundle.css": {
+        "types": "./dist/bundle-css.d.ts",
+        "browser": "./dist/bundle.css",
+        "style": "./dist/bundle.css",
+        "node": "./dist/bundle-css.js",
+        "default": "./dist/bundle-css.js"
+      },
       "./package.json": "./package.json"
     }
   },
@@ -43,15 +57,18 @@
   "dependencies": {
     "@sanity/icons": "catalog:",
     "@sanity/ui": "catalog:",
+    "@vanilla-extract/dynamic": "catalog:",
     "lodash-es": "catalog:",
     "react-photo-album": "catalog:"
   },
   "devDependencies": {
     "@sanity/tsconfig": "catalog:",
     "@sanity/tsdown-config": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
+    "@vanilla-extract/css": "catalog:",
     "babel-plugin-react-compiler": "catalog:",
     "react": "catalog:",
     "sanity": "catalog:",
@@ -60,8 +77,7 @@
   },
   "peerDependencies": {
     "react": "catalog:peer",
-    "sanity": "catalog:peer",
-    "styled-components": "catalog:peer"
+    "sanity": "catalog:peer"
   },
   "engines": {
     "node": ">=20.19 <22 || >=22.12"

@@ -0,0 +1,10 @@
+import {keyframes, style} from '@vanilla-extract/css'
+
+const rotate = keyframes({
+  from: {transform: 'rotate(0deg)'},
+  to: {transform: 'rotate(360deg)'},
+})
+
+export const animatedSpinnerIcon = style({
+  animation: `${rotate} 500ms linear infinite`,
+})
@@ -1,22 +1,13 @@
 import {SearchIcon} from '@sanity/icons/Search'
 import {SpinnerIcon} from '@sanity/icons/Spinner'
 import {TextInput} from '@sanity/ui'
-import {startTransition, useOptimistic} from 'react'
-import {styled, keyframes} from 'styled-components'
+import {startTransition, useOptimistic, type ComponentProps} from 'react'
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`
+import {animatedSpinnerIcon} from './SearchInput.css'
 
-const AnimatedSpinnerIcon = styled(SpinnerIcon)`
-  animation: ${rotate} 500ms linear infinite;
-`
+function AnimatedSpinnerIcon(props: ComponentProps<typeof SpinnerIcon>) {
+  return <SpinnerIcon {...props} className={animatedSpinnerIcon} />
+}
 
 export function SearchInput({
   value,

@@ -0,0 +1,9 @@
+import {globalStyle, style} from '@vanilla-extract/css'
+
+export const unsplashDialog = style({})
+
+// The Dialog's own `height="100%"` prop does not cascade to its internal
+// DialogCard/Card wrapper, so it must be forced here.
+globalStyle(`${unsplashDialog} > [data-ui="DialogCard"] > [data-ui="Card"]`, {
+  height: '100%',
+})
@@ -1,20 +1,19 @@
 import {Dialog, Stack, Box} from '@sanity/ui'
 import memoize from 'lodash-es/memoize.js'
-import {lazy, Suspense, useMemo, useRef, useState} from 'react'
+import {lazy, Suspense, useMemo, useRef, useState, type ComponentProps} from 'react'
 import {type AssetSourceComponentProps, useClient} from 'sanity'
-import {styled} from 'styled-components'
 
 import type {FetcherResult, UnsplashPhoto} from '../types'
 import {Loader} from './Loader'
 import {SearchInput} from './SearchInput'
 
+import {unsplashDialog} from './UnsplashAssetSource.css'
+
 const RESULTS_PER_PAGE = 42
 
-const StyledDialog = styled(Dialog)`
-  & > [data-ui='DialogCard'] > [data-ui='Card'] {
-    height: 100%;
-  }
-`
+function StyledDialog(props: ComponentProps<typeof Dialog>) {
+  return <Dialog {...props} className={unsplashDialog} />
+}
 
 const UnsplashAssetSourceGallery = lazy(() => import('./UnsplashPhotoGallery'))
 

@@ -0,0 +1,29 @@
+import {createVar, globalStyle, style, type StyleRule} from '@vanilla-extract/css'
+
+export const creditLineFgVar = createVar()
+export const creditLineBgVar = createVar()
+
+export const creditLineLink = style({
+  textDecoration: 'none',
+  cursor: 'pointer',
+})
+
+globalStyle(`${creditLineLink}:hover [data-ui="Text"]`, {
+  textDecoration: 'underline',
+})
+
+globalStyle(`${creditLineLink}:focus [data-ui="Text"]`, {
+  textDecoration: 'underline',
+})
+
+export const creditLine = style({
+  // -webkit-user-drag is a non-standard vendor property not covered by csstype.
+  WebkitUserDrag: 'none',
+  position: 'absolute',
+  backgroundColor: creditLineBgVar,
+  bottom: 0,
+} as StyleRule)
+
+globalStyle(`${creditLine} [data-ui="Text"]`, {
+  color: creditLineFgVar,
+})
@@ -1,35 +1,36 @@
-import {Text, Card} from '@sanity/ui'
-import {getTheme_v2} from '@sanity/ui/theme'
-import {styled} from 'styled-components'
+import {Text, Card, useTheme_v2} from '@sanity/ui'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+import {type ComponentProps} from 'react'
 
-const CreditLineLink = styled.a`
-  text-decoration: none;
-  cursor: pointer;
-  &:hover,
-  &:focus {
-    [data-ui='Text'] {
-      text-decoration: underline;
-    }
-  }
-`
+import {
+  creditLine,
+  creditLineBgVar,
+  creditLineFgVar,
+  creditLineLink,
+} from './UnsplashCreditLine.css'
 
-const CreditLine = styled(Card)`
-  ${({theme}) => {
-    const v2 = getTheme_v2({sanity: theme.sanity})
-    return `
-     --creditline-fg: ${v2.color.fg};
-     --creditline-bg: ${v2.color.bg};
-   `
-  }};
-  -webkit-user-drag: none;
-  position: absolute;
-  background-color: var(--creditline-bg);
-  bottom: 0;
+function CreditLineLink({children, ...props}: ComponentProps<'a'>) {
+  return (
+    <a {...props} className={creditLineLink}>
+      {children}
+    </a>
+  )
+}
+
+function CreditLine(props: ComponentProps<typeof Card>) {
+  const {color} = useTheme_v2()
 
-  [data-ui='Text'] {
-    color: var(--creditline-fg);
-  }
-`
+  return (
+    <Card
+      {...props}
+      className={creditLine}
+      style={assignInlineVars({
+        [creditLineFgVar]: color.fg,
+        [creditLineBgVar]: color.bg,
+      })}
+    />
+  )
+}
 
 const UTM_SOURCE = 'sanity-plugin-asset-source-unsplash'
 export function UnsplashCreditLine({

@@ -10,12 +10,13 @@ test('package exports', {timeout: 30_000}, async () => {
   })
 
   expect(manifest.exports).toMatchInlineSnapshot(`
-      {
-        ".": {
-          "UnsplashIcon": "function",
-          "unsplashAssetSource": "object",
-          "unsplashImageAsset": "function",
-        },
-      }
-    `)
+    {
+      ".": {
+        "UnsplashIcon": "function",
+        "unsplashAssetSource": "object",
+        "unsplashImageAsset": "function",
+      },
+      "./bundle.css": {},
+    }
+  `)
 })
@@ -2,6 +2,6 @@ import {defineConfig} from '@sanity/tsdown-config'
 import type {UserConfig} from 'tsdown'
 
 export default defineConfig({
-  styledComponents: true,
   reactCompiler: true,
+  vanillaExtract: true,
 }) satisfies Promise<UserConfig>
@@ -1,7 +1,10 @@
+import {vanillaExtractPlugin} from '@sanity/vanilla-extract-vite-plugin'
 import {defineConfig} from 'vitest/config'
 
 export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
   test: {
+    setupFiles: ['@vanilla-extract/css/disableRuntimeStyles'],
     server: {
       deps: {
         inline: ['vitest-package-exports'],