Migrate sanity-plugin-media styling from styled-components to vanilla-extract

.changeset/media-vanilla-extract.md

@@ -0,0 +1,5 @@
+---
+"sanity-plugin-media": patch
+---
+
+Migrate styling from styled-components to vanilla-extract (zero-runtime CSS)

dev/e2e-studio/package.json

@@ -19,6 +19,7 @@
     "styled-components": "catalog:"
   },
   "devDependencies": {
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@tsconfig/vite-react": "^8.1.1",
     "@types/react": "catalog:",
     "typescript": "catalog:"

dev/e2e-studio/sanity.cli.ts

@@ -1,4 +1,6 @@
+import {vanillaExtractPlugin} from '@sanity/vanilla-extract-vite-plugin'
 import {defineCliConfig} from 'sanity/cli'
+import {mergeConfig, type UserConfig} from 'vite'
 
 const projectId = process.env.SANITY_E2E_PROJECT_ID || 'a1psl692'
 const dataset = process.env.SANITY_E2E_DATASET || 'plugins'
@@ -7,16 +9,22 @@ const firefoxDataset = process.env.SANITY_E2E_DATASET_FIREFOX || dataset
 
 export default defineCliConfig({
   api: {projectId, dataset},
-  vite: {
-    // SANITY_E2E_* vars are not auto-exposed like SANITY_STUDIO_*; inline them
-    // so sanity.config.ts can read them in the browser bundle.
-    // Always stringify concrete fallbacks — `JSON.stringify(undefined)` is not a
-    // valid Vite `define` value and leaves the studio without a project id.
-    define: {
-      'process.env.SANITY_E2E_PROJECT_ID': JSON.stringify(projectId),
-      'process.env.SANITY_E2E_DATASET': JSON.stringify(dataset),
-      'process.env.SANITY_E2E_DATASET_CHROMIUM': JSON.stringify(chromiumDataset),
-      'process.env.SANITY_E2E_DATASET_FIREFOX': JSON.stringify(firefoxDataset),
-    },
+  vite(viteConfig): UserConfig {
+    return mergeConfig(viteConfig, {
+      // Required so plugins styled with vanilla-extract (e.g. sanity-plugin-media)
+      // have their `.css.ts` files compiled to real CSS instead of failing at
+      // runtime with "Styles were unable to be assigned to a file".
+      plugins: [vanillaExtractPlugin()],
+      // SANITY_E2E_* vars are not auto-exposed like SANITY_STUDIO_*; inline them
+      // so sanity.config.ts can read them in the browser bundle.
+      // Always stringify concrete fallbacks — `JSON.stringify(undefined)` is not a
+      // valid Vite `define` value and leaves the studio without a project id.
+      define: {
+        'process.env.SANITY_E2E_PROJECT_ID': JSON.stringify(projectId),
+        'process.env.SANITY_E2E_DATASET': JSON.stringify(dataset),
+        'process.env.SANITY_E2E_DATASET_CHROMIUM': JSON.stringify(chromiumDataset),
+        'process.env.SANITY_E2E_DATASET_FIREFOX': JSON.stringify(firefoxDataset),
+      },
+    } satisfies UserConfig)
   },
 })

plugins/sanity-plugin-media/package.json

@@ -30,11 +30,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"
     }
   },
@@ -51,6 +65,8 @@
     "@sanity/ui": "catalog:",
     "@sanity/uuid": "catalog:",
     "@tanem/react-nprogress": "^5.0.63",
+    "@vanilla-extract/dynamic": "catalog:",
+    "clsx": "catalog:",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "catalog:",
     "filesize": "^9.0.11",
@@ -72,26 +88,26 @@
   "devDependencies": {
     "@sanity/tsconfig": "catalog:",
     "@sanity/tsdown-config": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@testing-library/jest-dom": "catalog:",
     "@testing-library/react": "catalog:",
     "@testing-library/user-event": "^14.6.1",
     "@types/pluralize": "^0.0.33",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@types/react-file-icon": "^1.0.5",
+    "@vanilla-extract/css": "catalog:",
     "babel-plugin-react-compiler": "catalog:",
     "jsdom": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "sanity": "catalog:",
-    "styled-components": "catalog:",
     "tsdown": "catalog:"
   },
   "peerDependencies": {
     "react": "catalog:peer",
     "react-dom": "catalog:peer",
-    "sanity": "catalog:peer",
-    "styled-components": "catalog:peer"
+    "sanity": "catalog:peer"
   },
   "engines": {
     "node": ">=20.19 <22 || >=22.12"

plugins/sanity-plugin-media/src/components/AssetGridVirtualized/AssetGridVirtualized.css.ts

@@ -0,0 +1,17 @@
+import {style} from '@vanilla-extract/css'
+
+const CARD_HEIGHT = 220
+const CARD_WIDTH = 240
+
+export const itemContainer = style({
+  height: CARD_HEIGHT,
+  width: CARD_WIDTH,
+})
+
+export const listContainer = style({
+  display: 'grid',
+  gridTemplateColumns: `repeat(auto-fill, ${CARD_WIDTH}px)`,
+  gridTemplateRows: `repeat(auto-fill, ${CARD_HEIGHT}px)`,
+  justifyContent: 'center',
+  margin: '0 auto',
+})

plugins/sanity-plugin-media/src/components/AssetGridVirtualized/index.tsx

@@ -1,22 +1,21 @@
+import {clsx} from 'clsx/lite'
 import {memo} from 'react'
 import {VirtuosoGrid} from 'react-virtuoso'
-import {styled} from 'styled-components'
 
 import useTypedSelector from '../../hooks/useTypedSelector'
 import type {CardAssetData, CardFolderData, CardUploadData} from '../../types'
 import CardAsset from '../CardAsset'
 import CardFolder from '../CardFolder'
 import CardUpload from '../CardUpload'
 
+import {itemContainer, listContainer} from './AssetGridVirtualized.css'
+
 type Props = {
   items: (CardAssetData | CardFolderData | CardUploadData)[]
   onLoadMore?: () => void
   source?: string
 }
 
-const CARD_HEIGHT = 220
-const CARD_WIDTH = 240
-
 const VirtualCell = memo(
   ({
     item,
@@ -43,29 +42,16 @@ const VirtualCell = memo(
   },
 )
 
-const StyledItemContainer = styled.div`
-  height: ${CARD_HEIGHT}px;
-  width: ${CARD_WIDTH}px;
-`
-
 const ItemContainer = (props: any) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
-  const {context, ref, ...rest} = props
-  return <StyledItemContainer ref={ref} {...rest} />
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid warnings about `context` passed as an attribute
+  const {className, context, ref, ...rest} = props
+  return <div className={clsx(itemContainer, className)} ref={ref} {...rest} />
 }
 
-const StyledListContainer = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, ${CARD_WIDTH}px);
-  grid-template-rows: repeat(auto-fill, ${CARD_HEIGHT}px);
-  justify-content: center;
-  margin: 0 auto;
-`
-
 const ListContainer = (props: any) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
-  const {context, ref, ...rest} = props
-  return <StyledListContainer ref={ref} {...rest} />
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid warnings about `context` passed as an attribute
+  const {className, context, ref, ...rest} = props
+  return <div className={clsx(listContainer, className)} ref={ref} {...rest} />
 }
 
 const AssetGridVirtualized = (props: Props) => {

plugins/sanity-plugin-media/src/components/CardAsset/CardAsset.css.ts

@@ -0,0 +1,69 @@
+import {createVar, style} from '@vanilla-extract/css'
+
+import {PANEL_HEIGHT} from '../../constants'
+
+export const cardWrapper = style({
+  boxSizing: 'border-box',
+  height: '100%',
+  overflow: 'hidden',
+  position: 'relative',
+  width: '100%',
+})
+
+export const cardContainerBase = style({
+  height: '100%',
+  position: 'relative',
+  transition: 'all 300ms',
+  userSelect: 'none',
+  width: '100%',
+})
+
+export const pickedBorderColorVar = createVar()
+
+export const cardContainerPicked = style({
+  border: `1px solid ${pickedBorderColorVar} !important`,
+})
+
+export const cardContainerNotPicked = style({
+  border: '1px solid inherit',
+})
+
+export const cardContainerUpdating = style({
+  pointerEvents: 'none',
+})
+
+export const cardContainerNotUpdating = style({
+  'pointerEvents': 'auto',
+  '@media': {
+    '(hover: hover) and (pointer: fine)': {
+      selectors: {
+        '&:hover': {
+          border: '1px solid var(--card-border-color)',
+        },
+      },
+    },
+  },
+})
+
+export const contextActionHoverBgVar = createVar()
+
+export const contextActionContainer = style({
+  'cursor': 'pointer',
+  'height': `${PANEL_HEIGHT}px`,
+  'transition': 'all 300ms',
+  '@media': {
+    '(hover: hover) and (pointer: fine)': {
+      selectors: {
+        '&:hover': {
+          background: contextActionHoverBgVar,
+        },
+      },
+    },
+  },
+})
+
+export const warningOutlineIconColorVar = createVar()
+
+export const warningOutlineIcon = style({
+  color: warningOutlineIconColorVar,
+})