diff --git a/.agents/skills/migrate-styled-components-to-vanilla-extract/SKILL.md b/.agents/skills/migrate-styled-components-to-vanilla-extract/SKILL.md index 3068b8c3fd..7dc784824e 100644 --- a/.agents/skills/migrate-styled-components-to-vanilla-extract/SKILL.md +++ b/.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 diff --git a/.changeset/smartling-vitest-vanilla-extract.md b/.changeset/smartling-vitest-vanilla-extract.md new file mode 100644 index 0000000000..6f70c864a0 --- /dev/null +++ b/.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 diff --git a/.changeset/transifex-vitest-vanilla-extract.md b/.changeset/transifex-vitest-vanilla-extract.md new file mode 100644 index 0000000000..d19a0573b0 --- /dev/null +++ b/.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 diff --git a/.changeset/translations-tab-vanilla-extract.md b/.changeset/translations-tab-vanilla-extract.md new file mode 100644 index 0000000000..f6412a72c4 --- /dev/null +++ b/.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) diff --git a/AGENTS.md b/AGENTS.md index 207a3c16e1..8d8b69f8eb 100644 --- a/AGENTS.md +++ b/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: diff --git a/plugins/sanity-plugin-studio-smartling/package.json b/plugins/sanity-plugin-studio-smartling/package.json index 3be5b1b579..3a79e71798 100644 --- a/plugins/sanity-plugin-studio-smartling/package.json +++ b/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:", diff --git a/plugins/sanity-plugin-studio-smartling/vitest.config.ts b/plugins/sanity-plugin-studio-smartling/vitest.config.ts index 8eda73152e..eec31393fd 100644 --- a/plugins/sanity-plugin-studio-smartling/vitest.config.ts +++ b/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'], diff --git a/plugins/sanity-plugin-transifex/package.json b/plugins/sanity-plugin-transifex/package.json index 645c9f9df9..41a01fbda3 100644 --- a/plugins/sanity-plugin-transifex/package.json +++ b/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:", diff --git a/plugins/sanity-plugin-transifex/vitest.config.ts b/plugins/sanity-plugin-transifex/vitest.config.ts index 8eda73152e..eec31393fd 100644 --- a/plugins/sanity-plugin-transifex/vitest.config.ts +++ b/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'], diff --git a/plugins/sanity-translations-tab/package.json b/plugins/sanity-translations-tab/package.json index b19f34b839..084a7b432d 100644 --- a/plugins/sanity-translations-tab/package.json +++ b/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" diff --git a/plugins/sanity-translations-tab/src/components/LanguageStatus.css.ts b/plugins/sanity-translations-tab/src/components/LanguageStatus.css.ts new file mode 100644 index 0000000000..e6d48ab6ba --- /dev/null +++ b/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%', + }, + }, +}) diff --git a/plugins/sanity-translations-tab/src/components/LanguageStatus.tsx b/plugins/sanity-translations-tab/src/components/LanguageStatus.tsx index 089f9cc861..9ccbb7c007 100644 --- a/plugins/sanity-translations-tab/src/components/LanguageStatus.tsx +++ b/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}