@sanity/pkg-utils 6.12.2 → 6.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/pkg-utils",
-  "version": "6.12.2",
+  "version": "6.13.0",
   "description": "Simple utilities for modern npm packages.",
   "keywords": [
     "sanity-io",
@@ -84,8 +84,8 @@
     "browserslist": "^4.24.3",
     "cac": "^6.7.14",
     "chalk": "^4.1.2",
-    "chokidar": "^4.0.2",
-    "esbuild": "^0.24.0",
+    "chokidar": "^4.0.3",
+    "esbuild": "^0.24.2",
     "esbuild-register": "^3.6.0",
     "find-config": "^1.0.0",
     "get-latest-version": "^5.1.0",
@@ -101,7 +101,7 @@
     "prompts": "^2.4.2",
     "recast": "0.23.9",
     "rimraf": "^4.4.1",
-    "rollup": "^4.28.1",
+    "rollup": "^4.29.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "rxjs": "^7.8.1",
     "treeify": "^1.1.0",
@@ -140,13 +140,13 @@
     "lint-staged": "^15.0.2",
     "npm-run-all2": "^7.0.2",
     "outdent": "^0.8.0",
-    "rollup-plugin-visualizer": "^5.12.0",
+    "rollup-plugin-visualizer": "^5.13.1",
     "semver": "^7.6.0",
     "ts-node": "^10.9.2",
     "typescript": "5.7.2",
     "vitest": "^2.1.8",
     "vitest-github-actions-reporter": "^0.11.1",
-    "@sanity/pkg-utils": "6.12.2"
+    "@sanity/pkg-utils": "6.13.0"
   },
   "peerDependencies": {
     "babel-plugin-react-compiler": "*",

package/src/node/core/config/types.ts

@@ -170,6 +170,31 @@ export interface PkgConfigOptions {
     plugins?: BabelPluginItem[] | null | undefined
     /** @alpha */
     reactCompiler?: boolean
+    /** @alpha */
+    styledComponents?:
+      | boolean
+      | {
+          /** @defaultValue true */
+          displayName?: boolean
+          /**
+           * @defaultValue []
+           * @example ["@xstyled/styled-components", "@xstyled/styled-components/*"]
+           */
+          topLevelImportPaths?: string[]
+          /** @defaultValue true */
+          ssr?: boolean
+          /** @defaultValue fale */
+          fileName?: boolean
+          /** @defaultValue ["index"] */
+          meaninglessFileNames?: string[]
+          /** @defaultValue true */
+          minify?: boolean
+          /** @defaultValue false */
+          transpileTemplateLiterals?: boolean
+          namespace?: string
+          /** @defaultValue true */
+          pure?: boolean
+        }
   }
   /**
    * Configure the React Compiler.

package/src/node/tasks/rollup/resolveRollupConfig.ts

@@ -1,5 +1,6 @@
 import path from 'node:path'
 
+import type {PluginItem} from '@babel/core'
 import {optimizeLodashImports} from '@optimize-lodash/rollup-plugin'
 import alias from '@rollup/plugin-alias'
 import {babel, getBabelOutputPlugin} from '@rollup/plugin-babel'
@@ -96,13 +97,35 @@ export function resolveRollupConfig(
     }),
     commonjs(),
     json(),
-    (isReactCompiler || config?.babel?.reactCompiler) &&
+    (isReactCompiler || config?.babel?.reactCompiler || config?.babel?.styledComponents) &&
       babel({
         babelrc: false,
         presets: ['@babel/preset-typescript'],
         babelHelpers: 'bundled',
         extensions: ['.ts', '.tsx', '.js', '.jsx'],
-        plugins: [['babel-plugin-react-compiler', config?.reactCompilerOptions || {}]],
+        plugins: [
+          // The styled-components plugin needs to run before the react-compiler plugin, in case the css prop is used
+          config?.babel?.styledComponents && [
+            'babel-plugin-styled-components',
+            {
+              // Unnecessary, as the way we use styled-components in Sanity is usually by wrapping `@sanity/ui` primitives, not declaring new ones like "const Button = styled.button``"
+              fileName: false,
+              // Native template literals take less space than this transpilation
+              transpileTemplateLiterals: false,
+              // Massively helps dead code elimination and tree-shaking
+              pure: true,
+              // disabled, as pkg-utils tends to be used for npm publishing, while other tooling, like `sanity dev`, `next dev`, etc are used for testing
+              cssProp: false,
+              ...(typeof config.babel.styledComponents === 'object'
+                ? config.babel.styledComponents
+                : {}),
+            },
+          ],
+          (isReactCompiler || config?.babel?.reactCompiler) && [
+            'babel-plugin-react-compiler',
+            config?.reactCompilerOptions || {},
+          ],
+        ].filter(Boolean) as PluginItem[],
       }),
     esbuild({
       jsx: config?.jsx ?? 'automatic',
@@ -131,7 +154,8 @@ export function resolveRollupConfig(
       }),
     minify &&
       terser({
-        compress: {directives: false},
+        compress: {directives: false, passes: 10},
+        ecma: 2020,
         output: {
           comments: (_node, comment) => {
             const text = comment.value
@@ -145,6 +169,7 @@ export function resolveRollupConfig(
 
             return false
           },
+          preserve_annotations: true,
         },
       }),
   ].filter(Boolean) as Plugin[]