@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

package/src/cli/init.ts

@@ -0,0 +1,225 @@
+import {basename} from 'node:path'
+import process from 'node:process'
+
+import {verifyAfterInit} from './checks.js'
+import {buildConfig, CONFIG_FILE, configExists, writeConfig} from './config.js'
+import {detect, LEGACY_COEXISTENCE_HINT, PACKAGE_NAME} from './detect.js'
+import {printChecks} from './doctor.js'
+import {installCommand, resolveInstallSpecs, resolveTypeSpecs, runInstall} from './install.js'
+import {color, confirm, fail, heading, info, step, success, warn} from './log.js'
+import {inspectStylesheet, STYLES_SPECIFIER, wireStylesheet} from './styles.js'
+import type {StylesheetInfo} from './styles.js'
+import {inspectTsconfig, reconcileTsconfig} from './tsconfig.js'
+import type {TsconfigInspection} from './tsconfig.js'
+import type {CliOptions, Detected} from './types.js'
+import {meetsNode, meetsReact, NODE_REQUIREMENT, REACT_MIN} from './versions.js'
+
+interface Plan {
+  specs: string[]
+  typeSpecs: string[]
+  install: string
+  stylesheet: StylesheetInfo
+  tsconfig: TsconfigInspection | null
+}
+
+/**
+ * Prints the React and Node checks. Missing React only warns, since the user may
+ * be scaffolding before installing it; an out-of-range React or Node sets
+ * `blocking`. `blocking` never hard-stops init. It only triggers a louder warning
+ * before the apply confirmation, so the user stays in control either way.
+ */
+function reportPrereqs({react}: Detected): {blocking: boolean} {
+  let blocking = false
+
+  const reactVersion = react.version
+  if (!reactVersion) {
+    warn(`React not detected. This package needs React >= ${REACT_MIN}.`)
+  } else if (meetsReact(reactVersion)) {
+    success(`React ${reactVersion} meets the >= ${REACT_MIN} requirement.`)
+  } else {
+    warn(`React ${reactVersion} is below ${REACT_MIN}. Components may not render correctly.`)
+    info(`  ${color.dim('fix:')} Upgrade React to >= ${REACT_MIN}`)
+    blocking = true
+  }
+
+  const nodeVersion = process.versions.node
+  if (meetsNode(nodeVersion)) {
+    success(`Node ${nodeVersion} meets the ${NODE_REQUIREMENT} requirement.`)
+  } else {
+    warn(`Node ${nodeVersion} is outside ${NODE_REQUIREMENT}. Install may behave unexpectedly.`)
+    info(`  ${color.dim('fix:')} Use Node ${NODE_REQUIREMENT}`)
+    blocking = true
+  }
+
+  return {blocking}
+}
+
+function parseReactMajor(version: string | null): number {
+  const match = typeof version === 'string' ? version.match(/\d+/) : null
+  return match ? Number(match[0]) : 19
+}
+
+function buildPlan(cwd: string, detected: Detected): Plan {
+  const specs = resolveInstallSpecs()
+  const {command, args} = installCommand(detected.packageManager, specs)
+  const reactMajor = parseReactMajor(detected.react.version)
+  const typeSpecs = detected.typescript ? resolveTypeSpecs(cwd, {reactMajor}) : []
+  const stylesheet = inspectStylesheet(cwd, detected.entry)
+  const tsconfig = detected.typescript ? inspectTsconfig(cwd) : null
+
+  return {specs, typeSpecs, install: `${command} ${args.join(' ')}`, stylesheet, tsconfig}
+}
+
+function printPlan(cwd: string, detected: Detected, plan: Plan): void {
+  heading('Plan')
+
+  step(`Install: ${color.bold(plan.install)}`)
+
+  if (plan.typeSpecs.length > 0) {
+    step(`Dev types: ${color.bold(plan.typeSpecs.join(' '))}`)
+  }
+
+  if (plan.stylesheet.imported) {
+    step(`Stylesheet: already imported in ${plan.stylesheet.importedIn ?? detected.entry}`)
+  } else if (plan.stylesheet.exists) {
+    step(`Stylesheet: add ${color.bold(`import '${STYLES_SPECIFIER}'`)} to ${detected.entry}`)
+  } else {
+    step(`Stylesheet: entry ${detected.entry} not found, will skip (add the import manually)`)
+  }
+
+  if (!detected.typescript || !plan.tsconfig) {
+    step('tsconfig: no TypeScript detected, skipping')
+  } else if (!plan.tsconfig.exists) {
+    step('tsconfig: create tsconfig.json with required options')
+  } else if (plan.tsconfig.changes.length === 0) {
+    step('tsconfig: already has required options')
+  } else {
+    const summary = plan.tsconfig.changes.map((c) => c.key).join(', ')
+    step(`tsconfig: update ${basename(plan.tsconfig.file)} (${summary})`)
+  }
+
+  step(configExists(cwd) ? `${CONFIG_FILE}: overwrite` : `${CONFIG_FILE}: create`)
+}
+
+/**
+ * The init lifecycle: detect the project, report prerequisites, build and print
+ * the plan, confirm, apply each step, then verify. `--dry` stops after the plan;
+ * `--yes` accepts the confirmation without prompting.
+ */
+export async function runInit(options: CliOptions): Promise<number> {
+  const {cwd, dry, yes} = options
+  const detected = detect(cwd)
+
+  heading('Sanity UI init')
+  info(
+    color.dim(
+      `framework: ${detected.framework} · package manager: ${detected.packageManager} · entry: ${detected.entry} · typescript: ${detected.typescript}`,
+    ),
+  )
+
+  if (detected.aliasedInstall) {
+    fail(
+      `This project installs v5 under the alias "${detected.aliasedInstall}". init is for new apps only.`,
+    )
+    info(`  ${color.dim('fix:')} ${LEGACY_COEXISTENCE_HINT}`)
+    return 1
+  }
+
+  if (detected.legacyInstall) {
+    fail(
+      `This project already has ${PACKAGE_NAME}@${detected.legacyInstall} (pre-v5). init is for new apps only.`,
+    )
+    info(`  ${color.dim('fix:')} ${LEGACY_COEXISTENCE_HINT}`)
+    return 1
+  }
+
+  heading('Requirements')
+  const {blocking} = reportPrereqs(detected)
+
+  const plan = buildPlan(cwd, detected)
+  printPlan(cwd, detected, plan)
+
+  if (dry) {
+    info('')
+    info(color.dim('Dry run: no changes made.'))
+    return 0
+  }
+
+  if (blocking) {
+    info('')
+    warn('Some requirements are unmet (see above). Continuing may not work.')
+  }
+
+  // Without a TTY there's no one to answer the prompt, so confirm() falls back to
+  // the default (apply). Say so explicitly rather than appearing to act silently;
+  // --dry is the preview-only path for anyone who doesn't want writes.
+  if (!yes && !process.stdin.isTTY) {
+    info('')
+    info(color.dim('Non-interactive (no TTY): applying automatically. Use --dry to preview.'))
+  }
+
+  const proceed = await confirm('\nApply these changes?', {defaultValue: true, assumeYes: yes})
+  if (!proceed) {
+    info('Aborted. No changes made.')
+    return 0
+  }
+
+  heading('Applying')
+
+  step(`Installing with ${detected.packageManager}…`)
+  const install = runInstall(cwd, detected.packageManager, plan.specs)
+  if (install.ok) {
+    success('Dependencies installed.')
+  } else if (install.reason === 'spawn') {
+    warn(`Could not run ${detected.packageManager}: ${install.message ?? 'unknown error'}`)
+    info(`  ${color.dim('fix:')} Install manually: ${install.command} ${install.args.join(' ')}`)
+  } else {
+    warn(`Install exited with code ${install.status ?? 'unknown'}.`)
+    info(
+      `  ${color.dim('hint:')} This is usually a peer-dependency conflict. Re-run the install and read the conflict, or retry with your package manager's legacy peer-deps flag.`,
+    )
+  }
+
+  if (plan.typeSpecs.length > 0) {
+    step('Installing React type definitions…')
+    const typeInstall = runInstall(cwd, detected.packageManager, plan.typeSpecs, {dev: true})
+    if (typeInstall.ok) success('Type definitions installed.')
+    else warn(`Could not install ${plan.typeSpecs.join(' ')}. Add them manually.`)
+  }
+
+  if (plan.stylesheet.exists && !plan.stylesheet.imported) {
+    const wired = wireStylesheet(cwd, detected.entry, {dryRun: false})
+    if (wired.wrote) success(`Imported the stylesheet in ${detected.entry}.`)
+  } else if (plan.stylesheet.imported) {
+    success('Stylesheet already imported.')
+  } else {
+    warn(`Could not find ${detected.entry}. Add \`import '${STYLES_SPECIFIER}'\` manually.`)
+  }
+
+  if (detected.typescript) {
+    const result = reconcileTsconfig(cwd, {dryRun: false})
+    if (result.created) success('Created tsconfig.json with required options.')
+    else if (result.unreadable) warn('tsconfig.json could not be parsed; left untouched.')
+    else if (result.changes.length === 0) success('tsconfig already has the required options.')
+    else success(`Updated tsconfig: ${result.changes.map((c) => c.key).join(', ')}.`)
+  }
+
+  const config = buildConfig({framework: detected.framework, entry: detected.entry})
+  writeConfig(cwd, config)
+  success(`Wrote ${CONFIG_FILE}.`)
+
+  heading('Verifying')
+  const results = verifyAfterInit(cwd)
+  printChecks(results)
+
+  const failed = results.filter((c) => c.status === 'fail')
+  info('')
+  if (failed.length === 0) {
+    success('Setup verified. Import components from @sanity/ui and start building.')
+    return 0
+  }
+  fail(
+    `${failed.length} check${failed.length === 1 ? '' : 's'} failed. Run \`npx ${PACKAGE_NAME}@alpha doctor\` for details.`,
+  )
+  return 1
+}

package/src/cli/install.test.ts

@@ -0,0 +1,52 @@
+import {mkdtempSync, rmSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
+
+import {installCommand, resolveInstallSpecs, resolveTypeSpecs} from './install.js'
+
+describe('resolveInstallSpecs', () => {
+  it('pins the package to its shipped version and icons to the declared version', () => {
+    const specs = resolveInstallSpecs()
+    expect(specs[0]).toMatch(/^@sanity\/ui@\d+\.\d+\.\d+/)
+    expect(specs.some((s) => s.startsWith('@sanity/icons@'))).toBe(true)
+  })
+
+  it('leaves dependencies the app never imports itself to the package manager', () => {
+    const specs = resolveInstallSpecs()
+    expect(specs.some((s) => s.startsWith('react-refractor'))).toBe(false)
+    expect(specs.some((s) => s.startsWith('clsx'))).toBe(false)
+  })
+})
+
+describe('installCommand', () => {
+  it('uses install for npm and add for others', () => {
+    expect(installCommand('npm', ['x']).args).toEqual(['install', 'x'])
+    expect(installCommand('pnpm', ['x']).args).toEqual(['add', 'x'])
+  })
+
+  it('applies the right dev flag per package manager', () => {
+    expect(installCommand('npm', ['x'], {dev: true}).args).toEqual(['install', '--save-dev', 'x'])
+    expect(installCommand('pnpm', ['x'], {dev: true}).args).toEqual(['add', '-D', 'x'])
+    expect(installCommand('yarn', ['x'], {dev: true}).args).toEqual(['add', '-D', 'x'])
+    expect(installCommand('bun', ['x'], {dev: true}).args).toEqual(['add', '-d', 'x'])
+  })
+})
+
+describe('resolveTypeSpecs', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-types-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('returns React type packages pinned to the major when none are installed', () => {
+    expect(resolveTypeSpecs(dir, {reactMajor: 19})).toEqual([
+      '@types/react@^19',
+      '@types/react-dom@^19',
+    ])
+  })
+})

package/src/cli/install.ts

@@ -0,0 +1,107 @@
+import {spawnSync} from 'node:child_process'
+import process from 'node:process'
+
+import {isPackageInstalled, PACKAGE_NAME} from './detect.js'
+import {readSelfPackage} from './selfPackage.js'
+import type {PackageManager} from './types.js'
+
+const ICONS = '@sanity/icons'
+const DEV_FLAG: Record<PackageManager, string> = {
+  npm: '--save-dev',
+  pnpm: '-D',
+  yarn: '-D',
+  bun: '-d',
+}
+
+export interface InstallResult {
+  ok: boolean
+  command: string
+  args: string[]
+  reason?: 'spawn' | 'exit'
+  message?: string
+  status?: number | null
+}
+
+/** Strips range operators to the exact floor version, e.g. "^3.7.4" -> "3.7.4". */
+function exactFromRange(range: string | undefined): string | null {
+  if (typeof range !== 'string') return null
+  const match = range.match(/\d+\.\d+\.\d+(?:-[\w.]+)?/)
+  return match ? match[0] : null
+}
+
+/**
+ * Builds the exact specs to install from this package's own manifest: the
+ * package at its shipped version, and icons at the version it declares in
+ * dependencies. Nothing here is invented.
+ *
+ * Icons is already a dependency, so the package manager installs it either way.
+ * It is listed explicitly because apps import icons directly to pass to
+ * components (`<Button iconStart={AddIcon} />`), and under pnpm an import that
+ * isn't in the app's own package.json doesn't resolve. Dependencies the app
+ * never imports itself (react-refractor, clsx) are left to the package manager.
+ * React/react-dom are peers that belong to the host app, so they are left out
+ * too (the prereq check verifies them).
+ */
+export function resolveInstallSpecs(): string[] {
+  const self = readSelfPackage()
+  const deps = self.dependencies ?? {}
+
+  const specs = [`${PACKAGE_NAME}@${self.version ?? 'latest'}`]
+
+  const iconsVersion = exactFromRange(deps[ICONS])
+  specs.push(iconsVersion ? `${ICONS}@${iconsVersion}` : ICONS)
+
+  return specs
+}
+
+/**
+ * The React type packages a TypeScript project needs to type-check JSX and the
+ * component props. Only the ones not already installed are returned, pinned to
+ * the project's React major (defaulting to the supported React 19).
+ */
+export function resolveTypeSpecs(cwd: string, {reactMajor = 19} = {}): string[] {
+  const major = Number.isInteger(reactMajor) ? reactMajor : 19
+  return ['@types/react', '@types/react-dom']
+    .filter((name) => !isPackageInstalled(cwd, name))
+    .map((name) => `${name}@^${major}`)
+}
+
+export function installCommand(
+  packageManager: PackageManager,
+  specs: string[],
+  {dev = false} = {},
+): {command: string; args: string[]} {
+  const verb = packageManager === 'npm' ? 'install' : 'add'
+  const flags = dev ? [DEV_FLAG[packageManager]] : []
+  return {command: packageManager, args: [verb, ...flags, ...specs]}
+}
+
+/**
+ * Runs the install with inherited stdio. Returns a structured result so the
+ * caller can explain a peer-dependency conflict in plain language instead of
+ * failing silently.
+ */
+export function runInstall(
+  cwd: string,
+  packageManager: PackageManager,
+  specs: string[],
+  {dev = false} = {},
+): InstallResult {
+  const {command, args} = installCommand(packageManager, specs, {dev})
+  // On Windows the package managers are .cmd shims, and spawning them without a
+  // shell throws (ENOENT, or EINVAL since the Node .cmd security fix). The args
+  // are package specs we build ourselves, so there is nothing to escape.
+  const result = spawnSync(command, args, {
+    cwd,
+    stdio: 'inherit',
+    shell: process.platform === 'win32',
+  })
+
+  if (result.error) {
+    return {ok: false, reason: 'spawn', message: result.error.message, command, args}
+  }
+  if (result.status !== 0) {
+    return {ok: false, reason: 'exit', status: result.status, command, args}
+  }
+  return {ok: true, command, args}
+}

package/src/cli/log.ts

@@ -0,0 +1,79 @@
+import process from 'node:process'
+import readline from 'node:readline/promises'
+
+// Colorize only a real terminal, and honor the NO_COLOR convention (https://no-color.org).
+const noColor = process.env['NO_COLOR'] !== undefined
+const supportsColor = process.stdout.isTTY && !noColor
+
+function paint(code: string, text: string): string {
+  if (!supportsColor) return text
+  return `\u001b[${code}m${text}\u001b[0m`
+}
+
+export const color = {
+  bold: (t: string) => paint('1', t),
+  dim: (t: string) => paint('2', t),
+  red: (t: string) => paint('31', t),
+  green: (t: string) => paint('32', t),
+  yellow: (t: string) => paint('33', t),
+  blue: (t: string) => paint('34', t),
+  cyan: (t: string) => paint('36', t),
+}
+
+export function info(message: string): void {
+  process.stdout.write(`${message}\n`)
+}
+
+export function step(message: string): void {
+  process.stdout.write(`${color.cyan('›')} ${message}\n`)
+}
+
+export function success(message: string): void {
+  process.stdout.write(`${color.green('✓')} ${message}\n`)
+}
+
+export function warn(message: string): void {
+  process.stdout.write(`${color.yellow('!')} ${message}\n`)
+}
+
+export function fail(message: string): void {
+  process.stdout.write(`${color.red('✗')} ${message}\n`)
+}
+
+/** Real errors (unexpected exceptions) go to stderr; report output uses fail(). */
+export function errorLine(message: string): void {
+  // Gate color on stderr (where this writes), not stdout, so a redirected stderr
+  // doesn't receive ANSI codes while stdout is still a TTY.
+  const mark = process.stderr.isTTY && !noColor ? '\u001b[31m✗\u001b[0m' : '✗'
+  process.stderr.write(`${mark} ${message}\n`)
+}
+
+export function heading(message: string): void {
+  process.stdout.write(`\n${color.bold(message)}\n`)
+}
+
+interface ConfirmOptions {
+  defaultValue?: boolean
+  assumeYes?: boolean
+}
+
+/**
+ * Ask a yes/no question. In non-interactive contexts (no TTY) it resolves to
+ * the provided default so CI and agents never block.
+ */
+export async function confirm(question: string, options: ConfirmOptions = {}): Promise<boolean> {
+  const {defaultValue = true, assumeYes = false} = options
+  if (assumeYes || !process.stdin.isTTY) return defaultValue
+
+  const rl = readline.createInterface({input: process.stdin, output: process.stdout})
+  try {
+    const hint = defaultValue ? 'Y/n' : 'y/N'
+    const answer = (await rl.question(`${question} ${color.dim(`(${hint})`)} `))
+      .trim()
+      .toLowerCase()
+    if (answer === '') return defaultValue
+    return answer === 'y' || answer === 'yes'
+  } finally {
+    rl.close()
+  }
+}

package/src/cli/selfPackage.ts

@@ -0,0 +1,14 @@
+import {readFileSync} from 'node:fs'
+
+import type {PackageJson} from './types.js'
+
+/**
+ * Reads this package's own package.json so the CLI installs the exact version
+ * it ships with and the real declared ranges, never invented ones. The path is
+ * two levels up from both src/cli (dev) and dist/cli (published), which both
+ * resolve to the package root.
+ */
+export function readSelfPackage(): PackageJson {
+  const url = new URL('../../package.json', import.meta.url)
+  return JSON.parse(readFileSync(url, 'utf8')) as PackageJson
+}

package/src/cli/styles.test.ts

@@ -0,0 +1,130 @@
+import {mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
+
+import {hasStylesImport, inspectStylesheet, wireStylesheet} from './styles.js'
+
+describe('hasStylesImport', () => {
+  it('matches single and double quoted imports', () => {
+    expect(hasStylesImport(`import '@sanity/ui/styles.css'`)).toBe(true)
+    expect(hasStylesImport(`import "@sanity/ui/styles.css"`)).toBe(true)
+    expect(hasStylesImport(`import './app.css'`)).toBe(false)
+  })
+
+  it('matches a require of the stylesheet', () => {
+    expect(hasStylesImport(`require('@sanity/ui/styles.css')`)).toBe(true)
+  })
+
+  it('ignores a commented-out or string mention of the path', () => {
+    expect(hasStylesImport(`// import '@sanity/ui/styles.css'`)).toBe(false)
+    expect(hasStylesImport(`const note = 'see @sanity/ui/styles.css'`)).toBe(false)
+  })
+})
+
+describe('wireStylesheet', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-styles-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  function write(rel: string, content: string): string {
+    const full = join(dir, rel)
+    mkdirSync(join(full, '..'), {recursive: true})
+    writeFileSync(full, content)
+    return full
+  }
+
+  it('inserts after the leading import block', () => {
+    write(
+      'src/main.tsx',
+      `import {createRoot} from 'react-dom/client'\nimport App from './App'\n\ncreateRoot()\n`,
+    )
+    const result = wireStylesheet(dir, 'src/main.tsx')
+    expect(result.wrote).toBe(true)
+    const lines = readFileSync(join(dir, 'src/main.tsx'), 'utf8').split('\n')
+    expect(lines[2]).toBe(`import '@sanity/ui/styles.css'`)
+  })
+
+  it('inserts after a multiline import without splitting it', () => {
+    write(
+      'src/main.tsx',
+      `import {\n  StrictMode,\n  useState,\n} from 'react'\nimport App from './App'\n\ncreateRoot()\n`,
+    )
+    wireStylesheet(dir, 'src/main.tsx')
+    const content = readFileSync(join(dir, 'src/main.tsx'), 'utf8')
+    // The import must land after the whole react import, not between its lines.
+    expect(content).toContain(
+      `} from 'react'\nimport App from './App'\nimport '@sanity/ui/styles.css'`,
+    )
+    expect(content).not.toMatch(/import \{\nimport '@sanity-labs/)
+  })
+
+  it('keeps a leading use-client directive first', () => {
+    write('app/layout.tsx', `'use client'\nimport {x} from 'y'\n`)
+    wireStylesheet(dir, 'app/layout.tsx')
+    const lines = readFileSync(join(dir, 'app/layout.tsx'), 'utf8').split('\n')
+    expect(lines[0]).toBe(`'use client'`)
+    expect(lines.includes(`import '@sanity/ui/styles.css'`)).toBe(true)
+  })
+
+  it('injects into astro frontmatter', () => {
+    write('src/layouts/Layout.astro', `---\nconst {title} = Astro.props\n---\n<html></html>\n`)
+    wireStylesheet(dir, 'src/layouts/Layout.astro')
+    const content = readFileSync(join(dir, 'src/layouts/Layout.astro'), 'utf8')
+    expect(content).toContain(`import '@sanity/ui/styles.css'`)
+    expect(content.indexOf(`import '@sanity/ui/styles.css'`)).toBeLessThan(
+      content.indexOf('<html>'),
+    )
+  })
+
+  it('is idempotent', () => {
+    write('src/main.tsx', `import App from './App'\n`)
+    wireStylesheet(dir, 'src/main.tsx')
+    const second = wireStylesheet(dir, 'src/main.tsx')
+    expect(second.already).toBe(true)
+    expect(second.wrote).toBe(false)
+  })
+
+  it('reports a missing entry instead of throwing', () => {
+    const result = wireStylesheet(dir, 'src/main.tsx')
+    expect(result.missing).toBe(true)
+  })
+})
+
+describe('inspectStylesheet', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-inspect-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('finds the import in a sibling file when not in the entry', () => {
+    mkdirSync(join(dir, 'src'), {recursive: true})
+    writeFileSync(join(dir, 'src/main.tsx'), `import App from './App'\n`)
+    writeFileSync(join(dir, 'src/App.tsx'), `import '@sanity/ui/styles.css'\n`)
+    const result = inspectStylesheet(dir, 'src/main.tsx')
+    expect(result.imported).toBe(true)
+    expect(result.importedIn).toBe(join('src', 'App.tsx'))
+  })
+
+  it('finds the import in a nested route file', () => {
+    mkdirSync(join(dir, 'app/routes'), {recursive: true})
+    writeFileSync(join(dir, 'app/root.tsx'), `export default function Root() {}\n`)
+    writeFileSync(join(dir, 'app/routes/home.tsx'), `import '@sanity/ui/styles.css'\n`)
+    const result = inspectStylesheet(dir, 'app/root.tsx')
+    expect(result.imported).toBe(true)
+  })
+
+  it('reports missing when absent everywhere', () => {
+    mkdirSync(join(dir, 'src'), {recursive: true})
+    writeFileSync(join(dir, 'src/main.tsx'), `import App from './App'\n`)
+    expect(inspectStylesheet(dir, 'src/main.tsx').imported).toBe(false)
+  })
+})