From 8101a6b84601d321c5f0d7896b7fc41ebc80a2f3 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 6 Aug 2026 07:32:31 +0000 Subject: [PATCH 1/3] refactor(sanity-plugin-cloudinary): migrate styling to vanilla-extract Replace styled-components and static inline styles with colocated .css.ts modules, enable the tsdown vanilla-extract integration, and drop the styled-components peer dependency. --- .changeset/cloudinary-vanilla-extract.md | 5 + plugins/sanity-plugin-cloudinary/package.json | 19 +- .../src/components/AssetDiff.css.ts | 12 + .../src/components/AssetDiff.tsx | 12 +- .../src/components/AssetListFunctions.css.ts | 10 + .../src/components/AssetListFunctions.tsx | 16 +- .../src/components/AssetPreview.css.ts | 34 +++ .../src/components/AssetPreview.tsx | 70 +++-- .../CloudinaryReferenceInput.css.ts | 10 + .../components/CloudinaryReferenceInput.tsx | 20 +- .../src/components/WidgetInput.css.ts | 17 ++ .../src/components/WidgetInput.tsx | 35 ++- .../asset-source/CloudinaryAssetSource.css.ts | 5 + .../asset-source/CloudinaryAssetSource.tsx | 11 +- .../src/index.test.ts | 1 + .../sanity-plugin-cloudinary/tsdown.config.ts | 2 +- .../sanity-plugin-cloudinary/vitest.config.ts | 3 + pnpm-lock.yaml | 264 +++++++++--------- 18 files changed, 355 insertions(+), 191 deletions(-) create mode 100644 .changeset/cloudinary-vanilla-extract.md create mode 100644 plugins/sanity-plugin-cloudinary/src/components/AssetDiff.css.ts create mode 100644 plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.css.ts create mode 100644 plugins/sanity-plugin-cloudinary/src/components/AssetPreview.css.ts create mode 100644 plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.css.ts create mode 100644 plugins/sanity-plugin-cloudinary/src/components/WidgetInput.css.ts create mode 100644 plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.css.ts diff --git a/.changeset/cloudinary-vanilla-extract.md b/.changeset/cloudinary-vanilla-extract.md new file mode 100644 index 0000000000..0bb954b389 --- /dev/null +++ b/.changeset/cloudinary-vanilla-extract.md @@ -0,0 +1,5 @@ +--- +"sanity-plugin-cloudinary": patch +--- + +Migrate styling from styled-components to vanilla-extract (zero-runtime CSS) diff --git a/plugins/sanity-plugin-cloudinary/package.json b/plugins/sanity-plugin-cloudinary/package.json index e4ca0db93a..4a66376313 100644 --- a/plugins/sanity-plugin-cloudinary/package.json +++ b/plugins/sanity-plugin-cloudinary/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" } }, @@ -46,8 +60,10 @@ "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:", @@ -58,8 +74,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" diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.css.ts b/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.css.ts new file mode 100644 index 0000000000..d9a3d9d8c7 --- /dev/null +++ b/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.css.ts @@ -0,0 +1,12 @@ +import {style} from '@vanilla-extract/css' + +export const videoDiff = style({ + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', +}) + +export const previewImage = style({ + maxWidth: '100%', + height: 'auto', +}) diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.tsx b/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.tsx index e5f00ce495..8078b6a5f1 100644 --- a/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.tsx +++ b/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.tsx @@ -6,6 +6,8 @@ import {assetUrl} from '../utils' import {namespace, type Secrets} from './SecretsConfigView' import VideoPlayer from './VideoPlayer' +import {previewImage, videoDiff} from './AssetDiff.css' + type Props = { value: CloudinaryAsset | undefined } @@ -22,19 +24,13 @@ const CloudinaryDiffPreview = ({value}: Props) => { if (value.resource_type === 'video' && url) { return ( -
+
) } - return preview + return preview } type DiffProps = { diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.css.ts b/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.css.ts new file mode 100644 index 0000000000..7438a092b7 --- /dev/null +++ b/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.css.ts @@ -0,0 +1,10 @@ +import {style} from '@vanilla-extract/css' + +export const fullWidthButton = style({ + selectors: { + // Match the previous inline `width: 100%` against Button's own width rules. + '&&': { + width: '100%', + }, + }, +}) diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.tsx b/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.tsx index 102253457b..aaf8d566f4 100644 --- a/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.tsx +++ b/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.tsx @@ -1,7 +1,7 @@ import {PlugIcon} from '@sanity/icons/Plug' import {useSecrets} from '@sanity/studio-secrets' import {Box, Button, Flex} from '@sanity/ui' -import {useCallback, useState} from 'react' +import {type ComponentProps, useCallback, useState} from 'react' import { type ArrayInputFunctionsProps, ArrayOfObjectsFunctions, @@ -17,6 +17,17 @@ import type {InsertHandlerParams} from '../types' import {openMediaSelector} from '../utils' import SecretsConfigView, {namespace} from './SecretsConfigView' +import {fullWidthButton} from './AssetListFunctions.css' + +function FullWidthButton({className, ...props}: ComponentProps) { + return ( +