Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Back to changelog

Tasks released for Sanity Studio + dependency upgrades for styled-components and @sanity/ui ++

⚠️ This upgrade requires styled-components@6.1 and @sanity/ui@2

This release comes with version requirements for the following packages:

  • styled-components@6.1 (required for all Studio projects)
  • @sanity/ui@2 (optional)

If you're maintaining a plugin for Sanity Studio, we recommend upgrading its dependencies too.

styled-components (required)

We have seen incompatibility issues when styled-components@5 is used outside of the Vite configuration that ships with sanity, for example, when the Studio is embedded in a Next.js or Remix project.

Styled Components is a required dependency for Sanity Studio projects. By upgrading it, you can also delete the @types/styled-components and react-is dependencies that were required with styled-components@5:

# npm
npm install sanity@latest styled-components@^6.1
npm rm @types/styled-components react-is

# pnpm

pnpm install sanity@latest styled-components@^6.1
pnpm rm @types/styled-components react-is

# yarn

yarn add sanity@latest styled-components@^6.1
yarn rm @types/styled-components react-is

Note: if you have local customizations in your Sanity Studio that are using styled-components you may need to make some minor adjustments to the customization code. For more details, please consult the styled-components migration guide.

@sanity/ui

Studio projects that use @sanity/ui for customizations and have it as a dependency in package.json need to upgrade to @sanity/ui@2:

# npm
npm install "@sanity/ui@^2"

# pnpm
pnpm install "@sanity/ui@^2"

# yarn
yarn add "@sanity/ui@^2"

✨ Highlights

Tasks (Beta)

Sanity Studio now ships with Tasks. You can now:

  • Target tasks for specific documents
  • Assigned tasks to Studio members
  • Comment on tasks, and use @-mentions
  • Resolve tasks

Tasks ships enabled by default. If you want to disable tasks in your Studio, you can do so with this configuration:

export default defineConfig({
  // ... rest of config
	unstable_tasks: { enabled: false },
})

Learn more about Tasks in the documentation:

Other features

  • Resolves "Masquerading as CJS and ESM" type errors
  • Adds ESM with .mjs exports for full support of Node.js' native ESM mode while still offering support for .esm.js exports for legacy bundlers
  • Adds missing sideEffects: false conditions to package.json files, improving tree-shaking and reducing bundle sizes for embedded Sanity Studio projects
  • Simplifies the Shopify schema starter template

🐛 Notable bugfixes

  • Fixes a bug where wrongly formatted configuration would be inserted into tsconfig.json when sanity init was run inside of a Next.js project
  • Fixes an issue where importing .scss or .sass files from the studio configuration or a descendant file would cause certain CLI commands to crash
  • Improves error message when extracted schema (from sanity schema extract) could not be found when running sanity typegen generate
  • Fixes an issue where the CLI might suggest deprecated Sanity v2 commands if you mistype a command name
  • Makes the current field on slugs required when used with the --enforce-required-fields flag in sanity typegen contexts
  • Fixes a bug where running npx sanity init in a Next.js project would break the tsconfig.json configuration

Documentation affected by this release

Published April 09, 2024