refactor(sanity-translations-tab): migrate styled-components to vanilla-extract

.agents/skills/migrate-styled-components-to-vanilla-extract/SKILL.md

@@ -221,6 +221,14 @@ Use `@sanity/vanilla-extract-vite-plugin` (faster drop-in for the upstream
 `@vanilla-extract/vite-plugin`). If a host app or studio already registers the Vite plugin
 globally, you don't need to touch that file for the workspace under migration.
 
+**Dependent workspace Vitest projects:** other packages that depend on the migrated workspace via
+`workspace:^` resolve its `.` export to `./src/index.ts` during monorepo tests. Their package-exports
+(and any other) suites then transitively import `.css.ts` modules. After migration, run
+`pnpm test run` (full suite) and, for each failing dependent, register `vanillaExtractPlugin()` in
+that package's `vitest.config.ts` and add `"@sanity/vanilla-extract-vite-plugin": "catalog:"` as a
+`devDependency` (same pattern as the migrated workspace). Add a separate patch changeset for each
+dependent whose `package.json` / Vitest config changed.
+
 > **Optional, jsdom-only:** if the workspace has `jsdom`/`happy-dom` suites that don't assert on real
 > CSS (layout, `getComputedStyle`), you can skip runtime style injection with
 > `setupFiles: ['@vanilla-extract/css/disableRuntimeStyles']`. This does **not** replace the Vite

.changeset/smartling-vitest-vanilla-extract.md

@@ -0,0 +1,5 @@
+---
+"sanity-plugin-studio-smartling": patch
+---
+
+Register vanilla-extract in Vitest so workspace imports of sanity-translations-tab resolve `.css.ts` modules

.changeset/transifex-vitest-vanilla-extract.md

@@ -0,0 +1,5 @@
+---
+"sanity-plugin-transifex": patch
+---
+
+Register vanilla-extract in Vitest so workspace imports of sanity-translations-tab resolve `.css.ts` modules

.changeset/translations-tab-vanilla-extract.md

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

AGENTS.md

@@ -414,6 +414,12 @@ migrations:
   `plugins/sanity-plugin-bynder-input` — all fully migrated on the current tsdown setup.
   `@sanity/color-input` is the dynamic-styling example (`styleVariants`, `createVar` +
   `assignInlineVars`, `useTheme_v2()`).
+- **Dependent Vitest projects:** after migration, run the full `pnpm test run`. Workspace
+  dependents that import the migrated package via `workspace:^` resolve its `.` export to
+  `./src/index.ts` and will fail package-exports (or other) tests until they also register
+  `vanillaExtractPlugin()` in their `vitest.config.ts` and add
+  `"@sanity/vanilla-extract-vite-plugin": "catalog:"` as a `devDependency`. See the migration
+  skill Step 5.
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed instructions on:
 

plugins/sanity-plugin-studio-smartling/package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@sanity/tsconfig": "catalog:",
     "@sanity/tsdown-config": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "babel-plugin-react-compiler": "catalog:",

plugins/sanity-plugin-studio-smartling/vitest.config.ts

@@ -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'],

plugins/sanity-plugin-transifex/package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@sanity/tsconfig": "catalog:",
     "@sanity/tsdown-config": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "babel-plugin-react-compiler": "catalog:",

plugins/sanity-plugin-transifex/vitest.config.ts

@@ -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'],

plugins/sanity-translations-tab/package.json

@@ -24,11 +24,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"
     }
   },
@@ -42,13 +56,16 @@
     "@sanity/icons": "catalog:",
     "@sanity/ui": "catalog:",
     "@sanity/util": "catalog:",
+    "@vanilla-extract/dynamic": "catalog:",
     "sanity-naive-html-serializer": "workspace:^"
   },
   "devDependencies": {
     "@sanity/tsconfig": "catalog:",
     "@sanity/tsdown-config": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@vanilla-extract/css": "catalog:",
     "babel-plugin-react-compiler": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
@@ -59,8 +76,7 @@
   "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-translations-tab/src/components/LanguageStatus.css.ts

@@ -0,0 +1,10 @@
+import {style} from '@vanilla-extract/css'
+
+export const importButton = style({
+  selectors: {
+    // Override Button's own width so the control fills the grid cell.
+    '&&': {
+      width: '100%',
+    },
+  },
+})

plugins/sanity-translations-tab/src/components/LanguageStatus.tsx

@@ -4,6 +4,8 @@ import {useCallback, useState} from 'react'
 
 import ProgressBar from './ProgressBar'
 
+import {importButton} from './LanguageStatus.css'
+
 type LanguageStatusProps = {
   title: string
   progress: number
@@ -41,7 +43,7 @@ export const LanguageStatus = ({
         ) : null}
         <Box gridColumnStart={5} gridColumnEnd={6}>
           <Button
-            style={{width: `100%`}}
+            className={importButton}
             mode="ghost"
             onClick={handleImport}
             text={busy ? 'Importing...' : 'Import'}

plugins/sanity-translations-tab/src/components/NewTask.css.ts

@@ -0,0 +1,13 @@
+import {style} from '@vanilla-extract/css'
+
+export const wrapText = style({
+  whiteSpace: 'normal',
+})
+
+export const localeButton = style({
+  cursor: 'pointer',
+})
+
+export const localeSwitch = style({
+  pointerEvents: 'none',
+})

plugins/sanity-translations-tab/src/components/NewTask.tsx

@@ -1,11 +1,12 @@
 import {Button, Box, Flex, Grid, Select, Stack, Switch, Text, useToast} from '@sanity/ui'
 import {useState, useContext, useCallback} from 'react'
-import type {ChangeEvent} from 'react'
-import {styled} from 'styled-components'
+import type {ChangeEvent, ComponentProps} from 'react'
 
 import type {TranslationLocale} from '../types'
 import {TranslationContext} from './TranslationContext'
 
+import {localeButton, localeSwitch, wrapText} from './NewTask.css'
+
 type Props = {
   locales: TranslationLocale[]
   refreshTask: () => Promise<void>
@@ -17,9 +18,9 @@ type LocaleCheckboxProps = {
   checked: boolean
 }
 
-const WrapText = styled(Box)`
-  white-space: normal;
-`
+function WrapText({className, ...props}: ComponentProps<typeof Box>) {
+  return <Box {...props} className={`${wrapText} ${className ?? ''}`} />
+}
 
 const LocaleCheckbox = ({locale, toggle, checked}: LocaleCheckboxProps) => {
   const onClick = useCallback(() => toggle(locale.localeId, !checked), [locale, toggle, checked])
@@ -29,12 +30,12 @@ const LocaleCheckbox = ({locale, toggle, checked}: LocaleCheckboxProps) => {
       mode="ghost"
       onClick={onClick}
       disabled={locale.enabled === false}
-      style={{cursor: `pointer`}}
+      className={localeButton}
       radius={2}
     >
       <Flex align="center" gap={3}>
         <Switch
-          style={{pointerEvents: `none`}}
+          className={localeSwitch}
           disabled={locale.enabled === false}
           onChange={onClick}
           checked={checked}

plugins/sanity-translations-tab/src/components/ProgressBar.css.ts

@@ -0,0 +1,22 @@
+import {createVar, style} from '@vanilla-extract/css'
+
+export const scaleXVar = createVar()
+
+export const root = style({
+  width: '100%',
+  position: 'relative',
+})
+
+export const labelOverlay = style({
+  position: 'absolute',
+  inset: 0,
+  zIndex: 1,
+})
+
+export const bar = style({
+  width: '100%',
+  transform: `scaleX(${scaleXVar})`,
+  transformOrigin: 'left',
+  transition: 'transform .2s ease',
+  boxSizing: 'border-box',
+})

plugins/sanity-translations-tab/src/components/ProgressBar.tsx

@@ -1,4 +1,7 @@
 import {Card, Flex, Label} from '@sanity/ui'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+
+import {bar, labelOverlay, root, scaleXVar} from './ProgressBar.css'
 
 export default function ProgressBar({progress}: {progress: number}) {
   if (typeof progress === 'undefined') {
@@ -7,29 +10,15 @@ export default function ProgressBar({progress}: {progress: number}) {
   }
 
   return (
-    <Card border radius={2} style={{width: `100%`, position: `relative`}}>
-      <Flex
-        style={{
-          position: `absolute`,
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0,
-          zIndex: 1,
-        }}
-        align="center"
-        justify="center"
-      >
+    <Card border radius={2} className={root}>
+      <Flex className={labelOverlay} align="center" justify="center">
         <Label size={1}>{progress}%</Label>
       </Flex>
       <Card
-        style={{
-          width: '100%',
-          transform: `scaleX(${progress / 100})`,
-          transformOrigin: 'left',
-          transition: 'transform .2s ease',
-          boxSizing: 'border-box',
-        }}
+        className={bar}
+        style={assignInlineVars({
+          [scaleXVar]: String(progress / 100),
+        })}
         padding={2}
         tone="positive"
       />

plugins/sanity-translations-tab/src/index.test.ts

@@ -29,6 +29,7 @@ test('package exports', {timeout: 30_000}, async () => {
         "legacyDocumentLevelConfig": "object",
         "legacyDocumentLevelPatch": "function",
       },
+      "./bundle.css": {},
     }
   `)
 })

plugins/sanity-translations-tab/tsdown.config.ts

@@ -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>

plugins/sanity-translations-tab/vitest.config.ts

@@ -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'],