@pyreon/unistyle 0.24.5 → 0.24.6

package/src/responsive/optimizeBreakpointDeltas.ts

@@ -1,190 +0,0 @@
-/**
- * Mobile-first cascade optimizer.
- *
- * Given an ordered array of CSS strings (one per breakpoint, smallest first),
- * returns a parallel array where each non-base breakpoint contains only the
- * declarations that DIFFER from the cumulative cascade so far. This relies on
- * mobile-first `@media (min-width: …)` semantics: properties set at smaller
- * breakpoints inherit at larger ones, so re-emitting an unchanged property is
- * pure byte waste.
- *
- * Example:
- *   ["color: red; padding: 0;", "color: red; padding: 1rem;"]
- *   → ["color: red; padding: 0;", "padding: 1rem;"]
- *
- * Top-level declarations are diffed by `prop:value`. Selector blocks
- * (`&:hover { … }`, `@supports { … }`) are treated as opaque and deduped by
- * exact text. Anything inside parens or quoted strings is skipped over so
- * `linear-gradient(red 0%, blue 100%)` and `content: ";"` parse correctly.
- *
- * Limitations:
- *  - shorthand/longhand interaction is not modeled. If breakpoint A sets
- *    `padding: 1rem` and breakpoint B sets `padding-top: 0`, both are kept
- *    (they have different `prop` keys). If A sets `padding-top: 1rem` and B
- *    sets `padding: 1rem`, B's `padding` is emitted because the cascade map
- *    has no entry for `padding`. This is correct: B's shorthand RESETS sides
- *    A didn't touch, so dropping it would change behaviour.
- *  - Nested blocks are deduped only by exact textual match. Two equivalent
- *    blocks with different whitespace would both be emitted.
- */
-
-interface DeclEntry {
-  kind: 'decl'
-  prop: string
-  value: string
-  raw: string // canonical "prop: value;" form
-}
-
-interface BlockEntry {
-  kind: 'block'
-  raw: string // entire "selector { body }" or stray block
-}
-
-type Entry = DeclEntry | BlockEntry
-
-/** Parse a CSS string into top-level declarations and opaque blocks. */
-const parse = (css: string): Entry[] => {
-  const entries: Entry[] = []
-  const len = css.length
-
-  let depth = 0
-  let parenDepth = 0
-  let quote = 0 // charCode of active quote (0 if none)
-  let segmentStart = 0
-
-  const pushSegment = (rawSegment: string) => {
-    const trimmed = rawSegment.trim()
-    if (!trimmed) return
-    // pushSegment is only reached for segments that ended with a top-level
-    // ";" — full "selector { ... }" blocks are captured separately by the
-    // brace walker, so this path always sees declarations (or malformed
-    // declaration-shaped fragments).
-    const text = trimmed.endsWith(';') ? trimmed.slice(0, -1) : trimmed
-    const colonIdx = text.indexOf(':')
-    if (colonIdx <= 0) {
-      // No ":" or starts with ":" → not a parseable declaration; keep raw
-      entries.push({ kind: 'block', raw: `${text};` })
-      return
-    }
-    const prop = text.slice(0, colonIdx).trim()
-    const value = text.slice(colonIdx + 1).trim()
-    if (!prop || !value) {
-      entries.push({ kind: 'block', raw: `${text};` })
-      return
-    }
-    entries.push({
-      kind: 'decl',
-      prop,
-      value,
-      raw: `${prop}: ${value};`,
-    })
-  }
-
-  for (let i = 0; i < len; i++) {
-    const code = css.charCodeAt(i)
-
-    // Inside a quoted string — skip until matching quote (ignoring escapes)
-    if (quote !== 0) {
-      if (code === 92 /* \ */) {
-        i++ // skip the next character
-      } else if (code === quote) {
-        quote = 0
-      }
-      continue
-    }
-
-    // Quote start
-    if (code === 34 /* " */ || code === 39 /* ' */) {
-      quote = code
-      continue
-    }
-
-    // Parens — content (e.g. linear-gradient args) shouldn't be interpreted
-    if (code === 40 /* ( */) {
-      parenDepth++
-      continue
-    }
-    if (code === 41 /* ) */) {
-      if (parenDepth > 0) parenDepth--
-      continue
-    }
-    if (parenDepth > 0) continue
-
-    if (code === 123 /* { */) {
-      depth++
-      continue
-    }
-    if (code === 125 /* } */) {
-      depth--
-      if (depth === 0) {
-        // End of a top-level block — capture from segmentStart..i (inclusive)
-        const raw = css.slice(segmentStart, i + 1).trim()
-        if (raw) entries.push({ kind: 'block', raw })
-        segmentStart = i + 1
-      }
-      continue
-    }
-
-    if (depth === 0 && code === 59 /* ; */) {
-      pushSegment(css.slice(segmentStart, i))
-      segmentStart = i + 1
-    }
-  }
-
-  // Trailing segment (no terminating semicolon)
-  if (segmentStart < len) {
-    const trailing = css.slice(segmentStart).trim()
-    if (trailing) {
-      if (depth > 0) {
-        // Unbalanced braces — keep the rest as opaque so output isn't lossy
-        entries.push({ kind: 'block', raw: trailing })
-      } else {
-        pushSegment(trailing)
-      }
-    }
-  }
-
-  return entries
-}
-
-/**
- * Apply the mobile-first cascade diff. The first entry passes through
- * unchanged; subsequent entries are pruned to the delta vs. the running
- * cascade (declarations by prop, blocks by exact text match).
- */
-export const optimizeBreakpointDeltas = (cssStrings: string[]): string[] => {
-  if (cssStrings.length <= 1) return cssStrings
-
-  const cascadeDecl = new Map<string, string>()
-  const cascadeBlocks = new Set<string>()
-  const out: string[] = new Array(cssStrings.length)
-
-  for (let i = 0; i < cssStrings.length; i++) {
-    const css = cssStrings[i]
-    if (!css) {
-      out[i] = ''
-      continue
-    }
-
-    const entries = parse(css)
-    const kept: string[] = []
-
-    for (const e of entries) {
-      if (e.kind === 'decl') {
-        if (cascadeDecl.get(e.prop) !== e.value) {
-          kept.push(e.raw)
-          cascadeDecl.set(e.prop, e.value)
-        }
-      } else if (!cascadeBlocks.has(e.raw)) {
-        kept.push(e.raw)
-        cascadeBlocks.add(e.raw)
-      }
-    }
-
-    out[i] = kept.join(' ')
-  }
-
-  return out
-}
-
-export default optimizeBreakpointDeltas

package/src/responsive/optimizeTheme.ts

@@ -1,60 +0,0 @@
-export type OptimizeTheme = ({
-  theme,
-  breakpoints,
-}: {
-  theme: Record<string, Record<string, unknown>>
-  breakpoints: string[]
-}) => Record<string, Record<string, unknown>>
-
-const shallowEqual = (
-  a: Record<string, unknown> | undefined,
-  b: Record<string, unknown> | undefined,
-): boolean => {
-  if (a === b) return true
-  if (!a || !b) return false
-  // for-in + counting avoids the two `Object.keys` array allocations the
-  // prior implementation paid on every breakpoint optimization step.
-  // Ported from vitus-labs `e573e6c4`; measured upstream: +4.0% on the
-  // EQUAL hot path (the common case in steady-state renders).
-  let aCount = 0
-  for (const key in a) {
-    aCount++
-    if (a[key] !== b[key]) return false
-  }
-  let bCount = 0
-  for (const _ in b) bCount++
-  return aCount === bCount
-}
-
-/**
- * Removes breakpoints whose full-object styles are identical to the
- * previous one. Simple all-or-nothing: if ANY property differs from
- * the previous breakpoint, emit the ENTIRE current breakpoint.
- *
- * This matches the reference implementation (vitus-labs/ui-system) and
- * the original monorepo-migration version (commit 2b7c5876). Previous
- * "optimizations" (PRs #159, #208) that tried per-property diffing
- * broke responsive styles in subtle ways — shorthand/longhand CSS
- * property interactions, properties that depend on each other,
- * properties that need to be emitted together to cascade correctly.
- *
- * The all-or-nothing approach is the correct level of deduplication —
- * we skip the breakpoint when it's entirely redundant, and let the
- * browser's CSS cascade handle the rest.
- */
-const optimizeTheme: OptimizeTheme = ({ theme, breakpoints }) => {
-  const result: Record<string, Record<string, unknown>> = {}
-
-  for (let i = 0; i < breakpoints.length; i++) {
-    const key = breakpoints[i] as string
-    const previousBreakpoint = breakpoints[i - 1] as string
-    const current = theme[key]
-    if (current && (i === 0 || !shallowEqual(theme[previousBreakpoint], current))) {
-      result[key] = current
-    }
-  }
-
-  return result
-}
-
-export default optimizeTheme

package/src/responsive/sortBreakpoints.ts

@@ -1,10 +0,0 @@
-export type SortBreakpoints = <T extends Record<string, number>>(breakpoints: T) => (keyof T)[]
-
-const sortBreakpoints: SortBreakpoints = (breakpoints) => {
-  const result = Object.keys(breakpoints).sort(
-    (a, b) => (breakpoints[a] ?? 0) - (breakpoints[b] ?? 0),
-  )
-  return result
-}
-
-export default sortBreakpoints

package/src/responsive/transformTheme.ts

@@ -1,54 +0,0 @@
-import { isEmpty, set } from '@pyreon/ui-core'
-
-const removeUnexpectedKeys = (obj: Record<string, unknown>, keys: string[]) => {
-  const result: Record<string, unknown> = {}
-  keys.forEach((bp) => {
-    const value = obj[bp]
-    if (value) {
-      result[bp] = value
-    }
-  })
-  return result
-}
-
-export type TransformTheme = ({
-  theme,
-  breakpoints,
-}: {
-  theme: Record<string, unknown>
-  breakpoints: string[]
-}) => any
-
-const transformTheme: TransformTheme = ({ theme, breakpoints }) => {
-  const result = {}
-
-  if (isEmpty(theme) || isEmpty(breakpoints)) return result
-
-  // for-in + nested for-in avoids the two `Object.entries(...)` array
-  // allocations (outer + inner per object value) the prior forEach paid.
-  // Same for `value.forEach((child, i) => ...)` → indexed for-loop.
-  // Ported from vitus-labs `e573e6c4`.
-  for (const key in theme) {
-    const value = theme[key]
-    if (Array.isArray(value) && value.length > 0) {
-      for (let i = 0; i < value.length; i++) {
-        const indexBreakpoint = breakpoints[i]
-        if (indexBreakpoint == null) continue
-        set(result, [indexBreakpoint, key], value[i])
-      }
-    } else if (typeof value === 'object' && value !== null) {
-      const obj = value as Record<string, unknown>
-      for (const childKey in obj) {
-        set(result, [childKey, key], obj[childKey])
-      }
-    } else if (value != null) {
-      const firstBreakpoint = breakpoints[0]
-      if (firstBreakpoint == null) continue
-      set(result, [firstBreakpoint, key], value)
-    }
-  }
-
-  return removeUnexpectedKeys(result, breakpoints)
-}
-
-export default transformTheme

package/src/styles/alignContent.ts

@@ -1,62 +0,0 @@
-import { isEmpty } from '@pyreon/ui-core'
-
-export type AlignContentDirectionKeys = keyof typeof ALIGN_CONTENT_DIRECTION
-export type AlignContentAlignXKeys = keyof typeof ALIGN_CONTENT_MAP_X
-export type AlignContentAlignYKeys = keyof typeof ALIGN_CONTENT_MAP_Y
-
-const ALIGN_CONTENT_MAP_SHARED = {
-  center: 'center',
-  spaceBetween: 'space-between',
-  spaceAround: 'space-around',
-  block: 'stretch',
-}
-
-export const ALIGN_CONTENT_MAP_X = {
-  left: 'flex-start',
-  right: 'flex-end',
-  ...ALIGN_CONTENT_MAP_SHARED,
-} as const
-
-export const ALIGN_CONTENT_MAP_Y = {
-  top: 'flex-start',
-  bottom: 'flex-end',
-  ...ALIGN_CONTENT_MAP_SHARED,
-} as const
-
-export const ALIGN_CONTENT_DIRECTION = {
-  inline: 'row',
-  reverseInline: 'row-reverse',
-  rows: 'column',
-  reverseRows: 'column-reverse',
-} as const
-
-export type AlignContent = ({
-  direction,
-  alignX,
-  alignY,
-}: {
-  direction: AlignContentDirectionKeys
-  alignX: AlignContentAlignXKeys
-  alignY: AlignContentAlignYKeys
-}) => string | null
-
-const alignContent: AlignContent = (attrs) => {
-  const { direction, alignX, alignY } = attrs
-
-  if (isEmpty(attrs) || !direction || !alignX || !alignY) {
-    return null
-  }
-
-  // Direct comparisons avoid the per-call 2-element array allocation that
-  // `['inline', 'reverseInline'].includes(direction)` paid. Hot path: fires
-  // for every styled component with a `direction` prop. Ported from
-  // vitus-labs `e573e6c4`.
-  const isReverted = direction === 'inline' || direction === 'reverseInline'
-  const dir = ALIGN_CONTENT_DIRECTION[direction]
-  const x = ALIGN_CONTENT_MAP_X[alignX]
-  const y = ALIGN_CONTENT_MAP_Y[alignY]
-
-  return `flex-direction: ${dir}; align-items: ${isReverted ? y : x}; justify-content: ${isReverted ? x : y};`
-}
-
-export default alignContent

package/src/styles/extendCss.ts

@@ -1,26 +0,0 @@
-export type ExtendCss = (
-  styles:
-    | ((css: (strings: TemplateStringsArray, ...values: any[]) => string) => string)
-    | string
-    | null
-    | undefined,
-) => string
-
-const simpleCss = (strings: TemplateStringsArray, ...values: any[]): string => {
-  let result = ''
-  for (let i = 0; i < strings.length; i++) {
-    result += strings[i]
-    if (i < values.length) result += String(values[i] ?? '')
-  }
-  return result
-}
-
-const extendCss: ExtendCss = (styles) => {
-  if (!styles) return ''
-  if (typeof styles === 'function') {
-    return styles(simpleCss)
-  }
-  return styles
-}
-
-export default extendCss

package/src/styles/index.ts

@@ -1,16 +0,0 @@
-export type {
-  AlignContent,
-  AlignContentAlignXKeys,
-  AlignContentAlignYKeys,
-  AlignContentDirectionKeys,
-} from './alignContent'
-export {
-  ALIGN_CONTENT_DIRECTION,
-  ALIGN_CONTENT_MAP_X,
-  ALIGN_CONTENT_MAP_Y,
-  default as alignContent,
-} from './alignContent'
-export type { ExtendCss } from './extendCss'
-export { default as extendCss } from './extendCss'
-export type { ITheme, Styles, StylesTheme } from './styles'
-export { default as styles } from './styles'

package/src/styles/shorthands/borderRadius.ts

@@ -1,89 +0,0 @@
-import { value } from '../../units'
-
-type PropertyValue = string | number | null | undefined
-type PV = PropertyValue
-
-const isValidValue = (v: unknown) => !!v || v === 0
-
-type CornerValues = {
-  full: PV
-  top: PV
-  bottom: PV
-  left: PV
-  right: PV
-  topLeft: PV
-  topRight: PV
-  bottomLeft: PV
-  bottomRight: PV
-}
-
-const hasAnyValue = (v: CornerValues) =>
-  isValidValue(v.full) ||
-  isValidValue(v.top) ||
-  isValidValue(v.bottom) ||
-  isValidValue(v.left) ||
-  isValidValue(v.right) ||
-  isValidValue(v.topLeft) ||
-  isValidValue(v.topRight) ||
-  isValidValue(v.bottomLeft) ||
-  isValidValue(v.bottomRight)
-
-const resolveCorners = (v: CornerValues) => {
-  const corners: PV[] = [v.full, v.full, v.full, v.full]
-  if (isValidValue(v.top)) {
-    corners[0] = v.top
-    corners[1] = v.top
-  }
-  if (isValidValue(v.bottom)) {
-    corners[2] = v.bottom
-    corners[3] = v.bottom
-  }
-  if (isValidValue(v.left)) {
-    corners[0] = v.left
-    corners[3] = v.left
-  }
-  if (isValidValue(v.right)) {
-    corners[1] = v.right
-    corners[2] = v.right
-  }
-  if (isValidValue(v.topLeft)) corners[0] = v.topLeft
-  if (isValidValue(v.topRight)) corners[1] = v.topRight
-  if (isValidValue(v.bottomRight)) corners[2] = v.bottomRight
-  if (isValidValue(v.bottomLeft)) corners[3] = v.bottomLeft
-  return corners
-}
-
-const formatShorthand = (corners: PV[], calc: (p: PV) => any) => {
-  const [tl, tr, br, bl] = corners
-  if (corners.every((val, _, arr) => val === arr[0])) return `border-radius: ${calc(tl)};`
-  if (tl === br && tr === bl) return `border-radius: ${calc(tl)} ${calc(tr)};`
-  if (tl && tr === bl && br) return `border-radius: ${calc(tl)} ${calc(tr)} ${calc(br)};`
-  return `border-radius: ${calc(tl)} ${calc(tr)} ${calc(br)} ${calc(bl)};`
-}
-
-const CORNER_CSS = [
-  'border-top-left-radius',
-  'border-top-right-radius',
-  'border-bottom-right-radius',
-  'border-bottom-left-radius',
-] as const
-
-const formatIndividual = (corners: PV[], calc: (p: PV) => any) => {
-  let output = ''
-  for (let i = 0; i < corners.length; i++) {
-    if (isValidValue(corners[i])) output += `${CORNER_CSS[i]}: ${calc(corners[i])};`
-  }
-  return output
-}
-
-export type BorderRadius = (rootSize?: number) => (props: CornerValues) => string | null
-
-const borderRadius: BorderRadius = (rootSize) => (props) => {
-  if (!hasAnyValue(props)) return null
-  const calc = (param: PV) => value(param, rootSize)
-  const corners = resolveCorners(props)
-  if (corners.every((val) => isValidValue(val))) return formatShorthand(corners, calc)
-  return formatIndividual(corners, calc)
-}
-
-export default borderRadius

package/src/styles/shorthands/edge.ts

@@ -1,108 +0,0 @@
-import { value } from '../../units'
-
-type CssUnits =
-  | 'px'
-  | 'rem'
-  | '%'
-  | 'em'
-  | 'ex'
-  | 'cm'
-  | 'mm'
-  | 'in'
-  | 'pt'
-  | 'pc'
-  | 'ch'
-  | 'vh'
-  | 'vw'
-  | 'vmin'
-  | 'vmax'
-
-const isValidValue = (v: unknown) => !!v || v === 0
-
-type Property = 'inset' | 'margin' | 'padding' | 'border-width' | 'border-style' | 'border-color'
-type Value = string | number | null | undefined
-type Side = 'top' | 'bottom' | 'left' | 'right'
-
-type EdgeValues = {
-  full: Value
-  x: Value
-  y: Value
-  top: Value
-  left: Value
-  right: Value
-  bottom: Value
-}
-
-type Definitions = Record<Property, { unit?: CssUnits; edgeCss: (side: Side) => string }>
-
-const definitions: Definitions = {
-  inset: { unit: 'rem', edgeCss: (side) => side },
-  margin: { unit: 'rem', edgeCss: (side) => `margin-${side}` },
-  padding: { unit: 'rem', edgeCss: (side) => `padding-${side}` },
-  'border-width': { unit: 'px', edgeCss: (side) => `border-${side}-width` },
-  'border-style': { edgeCss: (side) => `border-${side}-style` },
-  'border-color': { edgeCss: (side) => `border-${side}-color` },
-}
-
-const hasAnyValue = (vals: EdgeValues) =>
-  isValidValue(vals.top) ||
-  isValidValue(vals.bottom) ||
-  isValidValue(vals.left) ||
-  isValidValue(vals.right) ||
-  isValidValue(vals.x) ||
-  isValidValue(vals.y) ||
-  isValidValue(vals.full)
-
-const resolveSides = ({ full, x, y, top, left, right, bottom }: EdgeValues) => {
-  const sides: Value[] = [full, full, full, full]
-  if (isValidValue(x)) {
-    sides[1] = x
-    sides[3] = x
-  }
-  if (isValidValue(y)) {
-    sides[0] = y
-    sides[2] = y
-  }
-  if (isValidValue(top)) sides[0] = top
-  if (isValidValue(right)) sides[1] = right
-  if (isValidValue(bottom)) sides[2] = bottom
-  if (isValidValue(left)) sides[3] = left
-  return sides
-}
-
-const formatShorthand = (property: Property, sides: Value[], calc: (v: Value) => Value) => {
-  const [t, r, b, l] = sides
-  if (sides.every((val, _, arr) => val === arr[0])) return `${property}: ${calc(t)};`
-  if (t === b && r === l) return `${property}: ${calc(t)} ${calc(r)};`
-  if (t && r === l && b) return `${property}: ${calc(t)} ${calc(r)} ${calc(b)};`
-  return `${property}: ${calc(t)} ${calc(r)} ${calc(b)} ${calc(l)};`
-}
-
-const formatIndividual = (
-  sides: Value[],
-  edgeCss: (side: Side) => string,
-  calc: (v: Value) => Value,
-) => {
-  const [t, r, b, l] = sides
-  let output = ''
-  if (isValidValue(t)) output += `${edgeCss('top')}: ${calc(t)};`
-  if (isValidValue(b)) output += `${edgeCss('bottom')}: ${calc(b)};`
-  if (isValidValue(l)) output += `${edgeCss('left')}: ${calc(l)};`
-  if (isValidValue(r)) output += `${edgeCss('right')}: ${calc(r)};`
-  return output
-}
-
-export type Edge = (rootSize?: number) => (property: Property, values: EdgeValues) => string | null
-
-const edge: Edge =
-  (rootSize = 16) =>
-  (property, values) => {
-    if (!hasAnyValue(values)) return null
-    const { unit, edgeCss } = definitions[property]
-    const calc = (param: Value) => (unit ? value(param, rootSize, unit) : param)
-    const sides = resolveSides(values)
-    if (sides.every((val) => isValidValue(val))) return formatShorthand(property, sides, calc)
-    return formatIndividual(sides, edgeCss, calc)
-  }
-
-export default edge

package/src/styles/shorthands/index.ts

@@ -1,4 +0,0 @@
-export type { BorderRadius } from './borderRadius'
-export { default as borderRadius } from './borderRadius'
-export type { Edge } from './edge'
-export { default as edge } from './edge'

package/src/styles/styles/camelToKebab.ts

@@ -1,3 +0,0 @@
-const camelToKebab = (s: string): string => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
-
-export default camelToKebab