diff --git a/.changeset/netlify-widget-vanilla-extract.md b/.changeset/netlify-widget-vanilla-extract.md new file mode 100644 index 0000000000..01b979fd3a --- /dev/null +++ b/.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) diff --git a/plugins/sanity-plugin-dashboard-widget-netlify/package.json b/plugins/sanity-plugin-dashboard-widget-netlify/package.json index e18f5529ce..f6e4ba3bfc 100644 --- a/plugins/sanity-plugin-dashboard-widget-netlify/package.json +++ b/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" diff --git a/plugins/sanity-plugin-dashboard-widget-netlify/src/components/NetlifyWidget.css.ts b/plugins/sanity-plugin-dashboard-widget-netlify/src/components/NetlifyWidget.css.ts new file mode 100644 index 0000000000..2d89662f26 --- /dev/null +++ b/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, + }, + }, +}) diff --git a/plugins/sanity-plugin-dashboard-widget-netlify/src/components/NetlifyWidget.tsx b/plugins/sanity-plugin-dashboard-widget-netlify/src/components/NetlifyWidget.tsx index 154a5e3cd6..b8b2464ad0 100644 --- a/plugins/sanity-plugin-dashboard-widget-netlify/src/components/NetlifyWidget.tsx +++ b/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) { + return +} export default function NetlifyWidget(props: NetlifyWidgetProps) { const netlifySitesUrl = 'https://app.netlify.com/account/sites' diff --git a/plugins/sanity-plugin-dashboard-widget-netlify/src/index.test.ts b/plugins/sanity-plugin-dashboard-widget-netlify/src/index.test.ts index 0f62242078..ebb5b7e128 100644 --- a/plugins/sanity-plugin-dashboard-widget-netlify/src/index.test.ts +++ b/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": {}, } `) }) diff --git a/plugins/sanity-plugin-dashboard-widget-netlify/tsdown.config.ts b/plugins/sanity-plugin-dashboard-widget-netlify/tsdown.config.ts index 757ef5c8f1..95e821b63c 100644 --- a/plugins/sanity-plugin-dashboard-widget-netlify/tsdown.config.ts +++ b/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 diff --git a/plugins/sanity-plugin-dashboard-widget-netlify/vitest.config.ts b/plugins/sanity-plugin-dashboard-widget-netlify/vitest.config.ts index 8eda73152e..eec31393fd 100644 --- a/plugins/sanity-plugin-dashboard-widget-netlify/vitest.config.ts +++ b/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'], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index df0da1262a..94e79c5357 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -97,6 +97,9 @@ catalogs: babel-plugin-react-compiler: specifier: ^1.0.0 version: 1.0.0 + clsx: + specifier: ^2.1.1 + version: 2.1.1 date-fns: specifier: ^4.4.0 version: 4.4.0 @@ -2109,6 +2112,9 @@ importers: '@sanity/ui': specifier: 'catalog:' version: 3.5.1(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.8)(react@19.2.8)(styled-components@6.4.4) + clsx: + specifier: 'catalog:' + version: 2.1.1 sanity: specifier: next version: 6.9.1-next.6(@babel/core@7.29.7)(@babel/runtime@7.29.7)(@emotion/is-prop-valid@1.4.0)(@noble/hashes@2.2.0)(@rolldown/plugin-babel@0.2.3)(@sanity/sdk@2.19.0)(@types/node@24.13.3)(@types/react-dom@19.2.4)(@types/react@19.2.18)(@vitejs/devtools@0.4.12)(babel-plugin-react-compiler@1.0.0)(esbuild@0.28.1)(jiti@2.7.0)(oxfmt@0.61.0)(react-dom@19.2.8)(react@19.2.8)(rolldown@1.2.1)(styled-components@6.4.4)(terser@5.49.0)(typescript@7.0.2) @@ -2122,12 +2128,18 @@ importers: '@sanity/tsdown-config': specifier: 'catalog:' version: 0.21.3(@babel/runtime@7.29.7)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(rolldown@1.2.1)(tsdown@0.22.14)(typescript@7.0.2)(vite@8.2.0) + '@sanity/vanilla-extract-vite-plugin': + specifier: 'catalog:' + version: 0.2.8(babel-plugin-macros@3.1.0)(vite@8.2.0) '@types/react': specifier: 'catalog:' version: 19.2.18 '@types/react-dom': specifier: 'catalog:' version: 19.2.4(@types/react@19.2.18) + '@vanilla-extract/css': + specifier: 'catalog:' + version: 1.21.2(babel-plugin-macros@3.1.0) babel-plugin-react-compiler: specifier: 'catalog:' version: 1.0.0 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 6516aa75b8..b22ba96cc7 100644 --- a/pnpm-workspace.yaml +++ b/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