@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.11",
+  "version": "3.0.0-static.13",
   "keywords": [
-    "sanity",
+    "react",
     "ui",
+    "kit",
+    "library",
     "primitives",
-    "react",
     "components",
-    "design-system"
+    "utils"
   ],
   "homepage": "https://www.sanity.io/",
   "bugs": {
@@ -108,8 +109,13 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
+    "cssnano": "^7.0.7",
     "csstype": "^3.1.3",
     "framer-motion": "^12.9.7",
+    "gzip-size": "^7.0.0",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "pretty-bytes": "^7.0.0",
     "react-compiler-runtime": "19.1.0-rc.1",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
@@ -181,7 +187,6 @@
     "magic-string": "^0.30.17",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-is": "^19.1.0",

package/src/cli/buildCommand.ts

@@ -1,48 +1,75 @@
+/* eslint-disable no-console */
+
 import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
 import {buildTheme_v3, RootTheme} from '@sanity/ui/theme'
+import cssnano from 'cssnano'
 import fs from 'fs/promises'
+import {gzipSizeSync} from 'gzip-size'
 import path from 'path'
+import postcss from 'postcss'
+import {format, resolveConfig} from 'prettier'
+import prettyBytes from 'pretty-bytes'
+
+async function minify(css: string) {
+  return postcss([cssnano()]).process(css, {from: undefined})
+}
+
+async function prettify(css: string) {
+  const options = await resolveConfig(__dirname)
+
+  if (!options) {
+    throw new Error('Prettier config not found')
+  }
+
+  return format(css, {...options, filepath: 'index.css', printWidth: 9999})
+}
+
+function prettySize(str: string) {
+  return `${prettyBytes(str.length)} / ${prettyBytes(gzipSizeSync(str))}`
+}
 
 async function buildPalette(outDir: string) {
   const css = compilePalette()
+  const minified = await minify(css)
+  const prettified = await prettify(css)
 
   await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(path.resolve(outDir, 'sanity-palette.css'), prettified, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'sanity-palette.min.css'), minified.css, 'utf-8')
 
-  await fs.writeFile(path.resolve(outDir, 'sanity-palette.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- sanity-palette.css')
+  console.log(`- built sanity-palette.css (${prettySize(prettified)})`)
+  console.log(`- built sanity-palette.min.css (${prettySize(minified.css)})`)
 }
 
 async function buildTheme(outDir: string) {
-  const css = compileTheme({v3: buildTheme_v3()} as RootTheme)
+  const css = await prettify(compileTheme({v3: buildTheme_v3()} as RootTheme))
+  const minified = await minify(css)
+  const prettified = await prettify(css)
 
   await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), prettified, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'sanity-theme.min.css'), minified.css, 'utf-8')
 
-  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- sanity-theme.css')
+  console.log(`- built sanity-theme.css (${prettySize(prettified)})`)
+  console.log(`- built sanity-theme.min.css (${prettySize(minified.css)})`)
 }
 
 async function buildSystem(outDir: string) {
-  const css = compileSystem()
+  const css = await prettify(compileSystem())
+  const minified = await minify(css)
+  const prettified = await prettify(css)
 
   await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(path.resolve(outDir, 'system.css'), prettified, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'system.min.css'), minified.css, 'utf-8')
 
-  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- system.css')
+  console.log(`- built system.css (${prettySize(prettified)})`)
+  console.log(`- built system.min.css (${prettySize(minified.css)})`)
 }
 
 export async function buildCommand(options: {cwd?: string; outDir?: string}): Promise<void> {
   const cwd = options.cwd ?? process.cwd()
   const outDir = options.outDir ?? path.resolve(cwd, 'dist')
 
-  await buildPalette(outDir)
-
-  await buildTheme(outDir)
-
-  await buildSystem(outDir)
+  await Promise.all([buildPalette(outDir), buildTheme(outDir), buildSystem(outDir)])
 }

package/src/css/_comp.ts

@@ -1,9 +1,9 @@
-import {getClassNames} from './composeClassNames'
+import {_getClassNames} from './composeClassNames'
 import {scopeClassName} from './scopeClassName'
 
 export function _comp(...classNames: Array<string | false | undefined>): string | undefined {
   return (
-    getClassNames(...classNames)
+    _getClassNames(...classNames)
       .filter(Boolean)
       .map(scopeClassName)
       .join(' ') || undefined

package/src/css/{compile/compileStyle.ts → _compileStyle.ts}

@@ -1,9 +1,9 @@
-import {PREFIX} from '../constants'
-import {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from '../types'
-import {isArray} from '../util'
+import {PREFIX} from './constants'
+import {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from './types'
+import {isArray} from './util'
 
-/** @public */
-export function compileStyle(style: Style): string {
+/** @internal */
+export function _compileStyle(style: Style): string {
   let css = ''
 
   if (style.rules) {
@@ -20,7 +20,7 @@ export function compileStyle(style: Style): string {
         keyframesCss += `}\n`
       }
 
-      keyframesCss += `\n}\n`
+      keyframesCss += `\n}\n\n`
 
       css += keyframesCss
     }
@@ -39,7 +39,7 @@ export function compileStyle(style: Style): string {
   return css
 }
 
-function compileStyleRules(rules: StyleRules) {
+export function compileStyleRules(rules: StyleRules) {
   let css = ''
 
   const mediaMap = new Map<

package/src/css/{system.style.ts → _system.style.ts}

@@ -67,8 +67,9 @@ import {tooltipStyle} from './primitives/tooltip/tooltip.style'
 import {type Style} from './types'
 import {srOnlyStyle} from './utils/srOnly/srOnly.style'
 
-export const systemStyle: Style = _mergeStyles([
-  // NOTE: order matters in CSS
+/** @internal */
+export const _systemStyle: Style = _mergeStyles([
+  // NOTE: Order matters in CSS!
 
   {
     // define order of layers

package/src/css/aspects/display/display.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {DisplayStyleProps} from './types'
 
+/** @internal */
 export function display(props: DisplayStyleProps): string | undefined {
   return composeClassNames(_resp(undefined, props.display))
 }

package/src/css/aspects/display/types.ts

@@ -1,8 +1,6 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type Display =
   | 'block'
   | 'inline-block'
@@ -12,6 +10,7 @@ export type Display =
   | 'inline-grid'
   | 'none'
 
+/** @public */
 export interface DisplayStyleProps {
   display?: ResponsiveProp<Display>
 }

package/src/css/aspects/flex/types.ts

@@ -1,18 +1,12 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
 
-/**
- * @public
- */
+/** @public */
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
 
-/**
- * @public
- */
+/** @public */
 export type FlexJustify =
   | 'flex-start'
   | 'flex-end'
@@ -21,9 +15,7 @@ export type FlexJustify =
   | 'space-around'
   | 'space-evenly'
 
-/**
- * @public
- */
+/** @public */
 export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
 /** @public */

package/src/css/aspects/flexItem/types.ts

@@ -1,8 +1,6 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type FlexValue =
   | 'none'
   | 'auto'

package/src/css/aspects/font/types.ts

@@ -1,8 +1,6 @@
 import {FontWeight} from '@sanity/ui/theme'
 
-/**
- * @public
- */
+/** @public */
 export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
 /** @public */

package/src/css/aspects/grid/grid.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {GridStyleProps} from './types'
 
+/** @internal */
 export function grid(props: GridStyleProps): string | undefined {
   return composeClassNames(
     _resp('auto-cols', props.autoCols),

package/src/css/aspects/grid/types.ts

@@ -1,22 +1,18 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
 
-/**
- * @public
- */
+/** @public */
 export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
 
-/**
- * @public
- */
+/** @public */
 export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
+/** @public */
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
+/** @public */
 export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 /** @public */

package/src/css/aspects/gridItem/gridItem.ts

@@ -2,7 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {GridItemStyleProps} from './types'
 
-/** @public */
+/** @internal */
 export function gridItem(props: GridItemStyleProps): string | undefined {
   return composeClassNames(
     _resp(`col`, props.column),

package/src/css/aspects/gridItem/types.ts

@@ -1,35 +1,24 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type GridItemColumn = 'auto' | 'full' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemColumnStart = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemColumnEnd = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemRow = 'auto' | 'full' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemRowStart = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemRowEnd = 'auto' | number
 
+/** @public */
 export interface GridItemStyleProps {
   column?: ResponsiveProp<GridItemColumn>
   columnStart?: ResponsiveProp<GridItemColumnStart>

package/src/css/aspects/height/height.ts

@@ -2,16 +2,15 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type BoxHeight = 'stretch' | 'fill'
 
+/** @public */
 export interface HeightStyleProps {
   height?: ResponsiveProp<BoxHeight>
 }
 
-/** @public */
+/** @internal */
 export function height(props: HeightStyleProps): string | undefined {
   return composeClassNames(_resp(`h`, props.height))
 }

package/src/css/aspects/inset/inset.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {InsetStyleProps} from './types'
 
+/** @internal */
 export function inset(props: InsetStyleProps): string | undefined {
   return composeClassNames(
     _resp('inset', props.inset),

package/src/css/aspects/margin/margin.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {MarginStyleProps} from './types'
 
+/** @internal */
 export function margin(props: MarginStyleProps): string | undefined {
   return composeClassNames(
     _resp('m', props.margin),

package/src/css/aspects/margin/types.ts

@@ -1,5 +1,6 @@
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export interface MarginStyleProps {
   margin?: ResponsiveProp<number>
   marginTop?: ResponsiveProp<number>

package/src/css/aspects/maxWidth/maxWidth.ts

@@ -1,6 +1,7 @@
 import {_resp} from '../../_resp'
 import {MaxWidthStyleProps} from './types'
 
+/** @internal */
 export function maxWidth(props: MaxWidthStyleProps): string {
   return _resp('max-w', props.maxWidth) ?? ''
 }

package/src/css/aspects/maxWidth/types.ts

@@ -2,6 +2,7 @@ import {ContainerWidth} from '@sanity/ui/theme'
 
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export interface MaxWidthStyleProps {
   maxWidth?: ResponsiveProp<ContainerWidth | 'auto' | 'fill'>
 }

package/src/css/aspects/minWidth/minWidth.ts

@@ -1,6 +1,7 @@
 import {_resp} from '../../_resp'
 import {MinWidthStyleProps} from './types'
 
+/** @internal */
 export function minWidth(props: MinWidthStyleProps): string {
   return _resp('min-w', props.minWidth) ?? ''
 }

package/src/css/aspects/minWidth/types.ts

@@ -1,7 +1,9 @@
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
 
+/** @public */
 export interface MinWidthStyleProps {
   minWidth?: ResponsiveProp<MinWidth>
 }

package/src/css/aspects/overflow/overflow.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {OverflowStyleProps} from './types'
 
+/** @internal */
 export function overflow(props: OverflowStyleProps): string | undefined {
   return composeClassNames(
     _resp(`overflow`, props.overflow),

package/src/css/aspects/padding/padding.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {PaddingStyleProps} from './types'
 
+/** @internal */
 export function padding(props: PaddingStyleProps): string | undefined {
   return composeClassNames(
     _resp('p', props.padding),

package/src/css/aspects/pointerEvents/pointerEvents.ts

@@ -1,6 +1,7 @@
 import {composeClassNames} from '../../composeClassNames'
 import {PointerEventsStyleProps} from './types'
 
+/** @internal */
 export function pointerEvents(props: PointerEventsStyleProps): string | undefined {
   return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`)
 }

package/src/css/aspects/position/position.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {PositionStyleProps} from './types'
 
+/** @internal */
 export function position(props: PositionStyleProps): string | undefined {
   return composeClassNames(_resp('position', props.position))
 }

package/src/css/aspects/shadow/shadow.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {ShadowStyleProps} from './types'
 
+/** @internal */
 export function shadow(props: ShadowStyleProps): string | undefined {
   return composeClassNames(_resp('shadow', props.shadow))
 }

package/src/css/aspects/textOverflow/textOverflow.ts

@@ -1,6 +1,7 @@
 import {_comp} from '../../_comp'
 import {TextOverflowStyleProps} from './types'
 
+/** @internal */
 export function textOverflow(props: TextOverflowStyleProps): string | undefined {
   return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`)
 }

package/src/css/aspects/textOverflow/types.ts

@@ -1,3 +1,4 @@
+/** @internal */
 export interface TextOverflowStyleProps {
   /**
    * Controls how overflowing text is treated.

package/src/css/aspects/width/types.ts

@@ -2,8 +2,10 @@ import {ContainerWidth} from '@sanity/ui/theme'
 
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export type Width = ContainerWidth | 'fill'
 
+/** @public */
 export interface WidthStyleProps {
   width?: ResponsiveProp<Width>
 }

package/src/css/aspects/width/width.ts

@@ -1,6 +1,7 @@
 import {_resp} from '../../_resp'
 import {WidthStyleProps} from './types'
 
+/** @internal */
 export function width(props: WidthStyleProps): string {
   return _resp('w', props.width) ?? ''
 }

package/src/css/{compile/compilePalette.ts → compilePalette.ts}

@@ -1,23 +1,27 @@
 import {color} from '@sanity/color'
 import {HUES, TINTS} from '@sanity/ui/theme'
 
-import {varNames} from '../varNames'
-import {compileRule} from './compileRule'
+import {_compileStyle} from './_compileStyle'
+import {Properties} from './types'
+import {varNames} from './varNames'
 
+/** @internal */
 export function compilePalette(): string {
-  const props: Record<string, string> = {
-    ...compileHues(),
+  return _compileStyle({
+    layers: {
+      theme: {
+        ':root': compilePaletteProperties(),
+      },
+    },
+  })
+}
 
+function compilePaletteProperties() {
+  const rules: Properties = {
     [varNames.black]: color.black.hex,
     [varNames.white]: color.white.hex,
   }
 
-  return compileRule(':root', props, {keyframes: {}, media: {}})
-}
-
-function compileHues() {
-  const rules: Record<string, string> = {}
-
   for (const hue of HUES) {
     for (const tint of TINTS) {
       rules[varNames[hue][tint]] = color[hue][tint].hex

package/src/css/compileSystem.ts

@@ -0,0 +1,7 @@
+import {_compileStyle} from './_compileStyle'
+import {_systemStyle} from './_system.style'
+
+/** @internal */
+export function compileSystem(): string {
+  return _compileStyle(_systemStyle)
+}

package/src/css/{compile/compileTheme.ts → compileTheme.ts}

@@ -2,6 +2,7 @@ import {type RootTheme} from '@sanity/ui/theme'
 
 import {compileTheme_v3} from './compileTheme_v3'
 
+/** @internal */
 export function compileTheme(theme: RootTheme): string {
   if (theme.v3) {
     return compileTheme_v3(theme.v3)