fix(dashboard-widget-netlify): migrate styled-components to vanilla-extract

.changeset/netlify-widget-vanilla-extract.md

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

plugins/sanity-plugin-dashboard-widget-netlify/package.json

@@ -27,11 +27,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"
     }
   },
@@ -40,14 +54,17 @@
     "prepack": "turbo run build"
   },
   "dependencies": {
-    "@sanity/ui": "catalog:"
+    "@sanity/ui": "catalog:",
+    "clsx": "catalog:"
   },
   "devDependencies": {
     "@sanity/dashboard": "workspace:*",
     "@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 @@
     "@sanity/dashboard": "workspace:^",
     "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-dashboard-widget-netlify/src/components/NetlifyWidget.css.ts

@@ -0,0 +1,11 @@
+import {style} from '@vanilla-extract/css'
+
+export const contentCard = style({
+  selectors: {
+    // Double specificity so this wins over Card/Box's own `min-height: 0`
+    // (styled-components used to win via CSSOM insertion order).
+    '&&': {
+      minHeight: 66,
+    },
+  },
+})

plugins/sanity-plugin-dashboard-widget-netlify/src/components/NetlifyWidget.tsx

@@ -1,13 +1,16 @@
 import {DashboardWidgetContainer} from '@sanity/dashboard'
 import {Button, Flex, Card, Text, Box} from '@sanity/ui'
-import {styled} from 'styled-components'
+import {clsx} from 'clsx/lite'
+import type {ComponentProps} from 'react'
 
 import {type NetlifyWidgetProps} from '../types'
 import SiteList from './SiteList'
 
-const ContentCard = styled(Card)`
-  min-height: 66px;
-`
+import {contentCard} from './NetlifyWidget.css'
+
+function ContentCard({className, ...props}: ComponentProps<typeof Card>) {
+  return <Card {...props} className={clsx(contentCard, className)} />
+}
 
 export default function NetlifyWidget(props: NetlifyWidgetProps) {
   const netlifySitesUrl = 'https://app.netlify.com/account/sites'

plugins/sanity-plugin-dashboard-widget-netlify/src/index.test.ts

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

plugins/sanity-plugin-dashboard-widget-netlify/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-plugin-dashboard-widget-netlify/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'],

pnpm-workspace.yaml

@@ -49,6 +49,7 @@ catalog:
   '@vis.gl/react-google-maps': ^1.9.0
   '@vitest/coverage-v8': ^4.1.10
   babel-plugin-react-compiler: ^1.0.0
+  clsx: ^2.1.1
   date-fns: ^4.4.0
   groq: ^6.9.0
   jsdom: ^29.1.1