@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

package/src/css/cli/buildCommand.ts

@@ -0,0 +1,36 @@
+import fs from 'fs/promises'
+import path from 'path'
+import {buildTheme as buildUITheme} from '@sanity/ui/theme'
+import {compileSystem} from '../compile/compileSystem'
+import {compileTheme} from '../compile/compileTheme'
+
+async function buildSystem(outDir: string) {
+  const css = compileSystem()
+
+  await fs.mkdir(outDir, {recursive: true})
+
+  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
+
+  // eslint-disable-next-line no-console
+  console.log('- system.css')
+}
+
+async function buildTheme(outDir: string) {
+  const css = compileTheme(buildUITheme().v2!)
+
+  await fs.mkdir(outDir, {recursive: true})
+
+  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), css, 'utf-8')
+
+  // eslint-disable-next-line no-console
+  console.log('- sanity-theme.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 buildSystem(outDir)
+
+  await buildTheme(outDir)
+}

package/src/css/cli/index.ts

@@ -0,0 +1,38 @@
+import cac from 'cac'
+
+import {version} from '../../../package.json'
+
+const cli = cac('ui')
+
+// cli
+//   .command('dev')
+//   .option('--cwd [cwd]', 'Output directory')
+//   .action(async (options) => {
+//     const {devCommand} = await import('./devCommand')
+
+//     await devCommand({
+//       ...options,
+//       cwd: options.cwd || process.cwd(),
+//     })
+//   })
+
+cli
+  .command('build')
+  .option('--cwd [cwd]', 'Working directory')
+  .option('--outDir [outDir]', 'Output directory')
+  .action(async (options) => {
+    const {buildCommand} = await import('./buildCommand')
+
+    await buildCommand({
+      ...options,
+      cwd: options.cwd || process.cwd(),
+    })
+  })
+
+cli.command('').action(() => {
+  cli.outputHelp()
+})
+
+cli.help()
+cli.version(version)
+cli.parse()

package/src/css/compile/comileRules.ts

@@ -0,0 +1,59 @@
+import {type Properties, type Rules} from '../types'
+import {compileRule, compileMediaQueryRule} from './compileRule'
+
+/** @public */
+export function compileRules(rules: Rules): string {
+  let css = ''
+
+  const keyframes: Record<string, Record<string, Properties>> = {}
+  const mediaQueries: Record<string, Record<string, Properties>> = {}
+
+  for (const [className, props] of Object.entries(rules)) {
+    const selectorCss = compileRule(`.${className}`.replace(/:/g, '\\:'), props)
+
+    css += selectorCss ? `${selectorCss}\n` : ''
+
+    if (props['@keyframes']) {
+      for (const name in props['@keyframes']) {
+        // if (!keyframes[name]) {
+        //   keyframes[name] = {from: {}, to: {}}
+        // }
+
+        keyframes[name] = props['@keyframes'][name]
+        // keyframes[name][className] = props['@keyframes'][key]
+      }
+    }
+
+    if (props['@media']) {
+      for (const key in props['@media']) {
+        if (!mediaQueries[key]) {
+          mediaQueries[key] = {}
+        }
+
+        mediaQueries[key][className] = props['@media'][key]
+      }
+    }
+  }
+
+  for (const [name, value] of Object.entries(keyframes)) {
+    let keyframesCss = `@keyframes ${name} {\n`
+
+    for (const [key, props] of Object.entries(value)) {
+      keyframesCss += `  ${key} {\n`
+      keyframesCss += compileRule('', props).replace(/\n/g, '\n    ') + '\n'
+      keyframesCss += `  }\n`
+    }
+
+    keyframesCss += `}\n`
+
+    css += keyframesCss
+  }
+
+  // console.log('keyframes', keyframes)
+
+  for (const [query, queryRules] of Object.entries(mediaQueries)) {
+    css += compileMediaQueryRule(query, queryRules) + '\n'
+  }
+
+  return css.replace(/\n{2,}/g, '\n').trimStart()
+}

package/src/css/compile/compileRule.ts

@@ -0,0 +1,58 @@
+import {type Properties} from '../types'
+
+export function compileRule(selector: string, props: Properties): string {
+  return compileProperties(selector, props) + compileNestedRules(selector, props['@nest'])
+}
+
+function compileProperties(selector: string, props: Properties) {
+  let css = '{'
+
+  for (const key in props) {
+    if (key === '@keyframes') continue // ignore
+    if (key === '@media') continue // ignore
+    if (key === '@nest') continue // ignore
+
+    const value = (props as Record<string, string>)[key]
+
+    const valueArr = Array.isArray(value) ? value : [value]
+
+    for (const v of valueArr) {
+      css += toSnakeCase(key) + ':' + v + ';'
+    }
+  }
+
+  if (css.length === 1) return ''
+
+  return selector + css + '}'
+}
+
+function compileNestedRules(selector: string, props?: Record<string, Properties>) {
+  if (!props) return ''
+
+  let css = ''
+
+  for (const key in props) {
+    const value = (props as Record<string, string>)[key]
+
+    css +=
+      '\n' +
+      key.replace(/&/g, selector) +
+      compileProperties(selector, value as Properties).substring(selector.length)
+  }
+
+  return css
+}
+
+export function compileMediaQueryRule(query: string, rules: Record<string, Properties>): string {
+  let css = `@media ${query}{`
+
+  for (const key in rules) {
+    css += '\n  ' + compileRule(`.${key}`.replace(/:/g, '\\:'), rules[key])
+  }
+
+  return css + '\n}'
+}
+
+function toSnakeCase(value: string) {
+  return value.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase())
+}

package/src/css/compile/compileSystem.ts

@@ -0,0 +1,7 @@
+import {rules} from '../rules'
+import {compileRules} from './comileRules'
+
+/** @public */
+export function compileSystem(): string {
+  return compileRules(rules)
+}