@pyreon/unistyle 0.24.5 → 0.24.6

package/src/__tests__/processDescriptor.test.ts

@@ -1,322 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import processDescriptor from '../styles/styles/processDescriptor'
-import type { PropertyDescriptor } from '../styles/styles/propertyMap'
-import type { InnerTheme } from '../styles/styles/types'
-
-// Minimal helpers matching the signature expected by processDescriptor
-const mockCss = (strings: TemplateStringsArray, ...vals: any[]) => {
-  let result = ''
-  for (let i = 0; i < strings.length; i++) {
-    result += strings[i]
-    if (i < vals.length) result += String(vals[i] ?? '')
-  }
-  return result
-}
-
-const mockCalc = (...params: any[]) => {
-  const val = params.find((p) => p != null)
-  if (val == null) return null
-  if (typeof val === 'string') return val
-  return `${val / 16}rem`
-}
-
-const mockEdge = (_property: string, _values: any) => null
-const mockBorderRadius = (_props: any) => null
-
-const t = (overrides: Partial<InnerTheme> = {}): InnerTheme => overrides as InnerTheme
-
-describe('processDescriptor', () => {
-  describe('simple kind', () => {
-    const d: PropertyDescriptor = { kind: 'simple', css: 'display', key: 'display' }
-
-    it('returns CSS declaration when key has a value', () => {
-      const result = processDescriptor(
-        d,
-        t({ display: 'flex' }),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('display: flex;')
-    })
-
-    it('returns empty string when key is null', () => {
-      const result = processDescriptor(
-        d,
-        t({ display: null as any }),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('')
-    })
-
-    it('returns empty string when key is undefined', () => {
-      const result = processDescriptor(
-        d,
-        t({}),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('')
-    })
-  })
-
-  describe('convert kind', () => {
-    const d: PropertyDescriptor = { kind: 'convert', css: 'width', key: 'width' }
-
-    it('returns converted value through calc function', () => {
-      const result = processDescriptor(
-        d,
-        t({ width: 32 } as any),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('width: 2rem;')
-    })
-
-    it('passes through string values', () => {
-      const result = processDescriptor(
-        d,
-        t({ width: '50%' } as any),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('width: 50%;')
-    })
-  })
-
-  describe('convert_fallback kind', () => {
-    const d: PropertyDescriptor = {
-      kind: 'convert_fallback',
-      css: 'width',
-      keys: ['width', 'size'] as (keyof InnerTheme)[],
-    }
-
-    it('uses first defined key value', () => {
-      const result = processDescriptor(
-        d,
-        t({ width: 16 } as any),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('width: 1rem;')
-    })
-  })
-
-  describe('special kind', () => {
-    it('returns fullScreen CSS when fullScreen is truthy', () => {
-      const d: PropertyDescriptor = { kind: 'special', id: 'fullScreen' }
-      const result = processDescriptor(
-        d,
-        t({ fullScreen: true } as any),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toContain('position: fixed')
-      expect(result).toContain('top: 0')
-    })
-
-    it('returns empty string when fullScreen is falsy', () => {
-      const d: PropertyDescriptor = { kind: 'special', id: 'fullScreen' }
-      const result = processDescriptor(
-        d,
-        t({}),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('')
-    })
-
-    it('returns backgroundImage CSS when set', () => {
-      const d: PropertyDescriptor = { kind: 'special', id: 'backgroundImage' }
-      const result = processDescriptor(
-        d,
-        t({ backgroundImage: 'url.png' } as any),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      // Result is a css`` template result — normalize whitespace
-      const normalized = String(result).replace(/\s+/g, ' ').trim()
-      expect(normalized).toContain('background-image: url(url.png);')
-    })
-
-    it('returns animation CSS when keyframe is set', () => {
-      const d: PropertyDescriptor = { kind: 'special', id: 'animation' }
-      const result = processDescriptor(
-        d,
-        t({ keyframe: 'fadeIn', animation: '0.3s ease' } as any),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('animation: fadeIn 0.3s ease;')
-    })
-
-    it('returns hideEmpty pseudo-selector when hideEmpty is true', () => {
-      const d: PropertyDescriptor = { kind: 'special', id: 'hideEmpty' }
-      const result = processDescriptor(
-        d,
-        t({ hideEmpty: true } as any),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toContain('&:empty')
-      expect(result).toContain('display: none')
-    })
-
-    it('returns clearFix pseudo-element when clearFix is true', () => {
-      const d: PropertyDescriptor = { kind: 'special', id: 'clearFix' }
-      const result = processDescriptor(
-        d,
-        t({ clearFix: true } as any),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toContain('&::after')
-      expect(result).toContain('clear: both')
-    })
-
-    it('returns empty string for unknown special id', () => {
-      const d: PropertyDescriptor = { kind: 'special', id: 'unknown' }
-      const result = processDescriptor(
-        d,
-        t({}),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('')
-    })
-  })
-
-  describe('edge kind', () => {
-    it('delegates to shorthand function', () => {
-      const d: PropertyDescriptor = {
-        kind: 'edge',
-        property: 'margin',
-        keys: {
-          full: 'margin' as keyof InnerTheme,
-          x: 'marginX' as keyof InnerTheme,
-          y: 'marginY' as keyof InnerTheme,
-          top: 'marginTop' as keyof InnerTheme,
-          left: 'marginLeft' as keyof InnerTheme,
-          bottom: 'marginBottom' as keyof InnerTheme,
-          right: 'marginRight' as keyof InnerTheme,
-        },
-      }
-      const customEdge = () => 'margin: 1rem;'
-      const result = processDescriptor(
-        d,
-        t({ margin: 16 } as any),
-        mockCss,
-        mockCalc,
-        customEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('margin: 1rem;')
-    })
-
-    it('returns empty string when shorthand returns null', () => {
-      const d: PropertyDescriptor = {
-        kind: 'edge',
-        property: 'padding',
-        keys: {
-          full: 'padding' as keyof InnerTheme,
-          x: 'paddingX' as keyof InnerTheme,
-          y: 'paddingY' as keyof InnerTheme,
-          top: 'paddingTop' as keyof InnerTheme,
-          left: 'paddingLeft' as keyof InnerTheme,
-          bottom: 'paddingBottom' as keyof InnerTheme,
-          right: 'paddingRight' as keyof InnerTheme,
-        },
-      }
-      const result = processDescriptor(
-        d,
-        t({}),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('')
-    })
-  })
-
-  describe('border_radius kind', () => {
-    it('delegates to borderRadius function', () => {
-      const d: PropertyDescriptor = {
-        kind: 'border_radius',
-        keys: {
-          full: 'borderRadius' as keyof InnerTheme,
-          top: 'borderRadiusTop' as keyof InnerTheme,
-          bottom: 'borderRadiusBottom' as keyof InnerTheme,
-          left: 'borderRadiusLeft' as keyof InnerTheme,
-          right: 'borderRadiusRight' as keyof InnerTheme,
-          topLeft: 'borderRadiusTopLeft' as keyof InnerTheme,
-          topRight: 'borderRadiusTopRight' as keyof InnerTheme,
-          bottomLeft: 'borderRadiusBottomLeft' as keyof InnerTheme,
-          bottomRight: 'borderRadiusBottomRight' as keyof InnerTheme,
-        },
-      }
-      const customBR = () => 'border-radius: 4px;'
-      const result = processDescriptor(
-        d,
-        t({ borderRadius: 4 } as any),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        customBR as any,
-      )
-      expect(result).toBe('border-radius: 4px;')
-    })
-
-    it('returns empty string when borderRadius returns null', () => {
-      const d: PropertyDescriptor = {
-        kind: 'border_radius',
-        keys: {
-          full: 'borderRadius' as keyof InnerTheme,
-          top: 'borderRadiusTop' as keyof InnerTheme,
-          bottom: 'borderRadiusBottom' as keyof InnerTheme,
-          left: 'borderRadiusLeft' as keyof InnerTheme,
-          right: 'borderRadiusRight' as keyof InnerTheme,
-          topLeft: 'borderRadiusTopLeft' as keyof InnerTheme,
-          topRight: 'borderRadiusTopRight' as keyof InnerTheme,
-          bottomLeft: 'borderRadiusBottomLeft' as keyof InnerTheme,
-          bottomRight: 'borderRadiusBottomRight' as keyof InnerTheme,
-        },
-      }
-      const result = processDescriptor(
-        d,
-        t({}),
-        mockCss,
-        mockCalc,
-        mockEdge as any,
-        mockBorderRadius as any,
-      )
-      expect(result).toBe('')
-    })
-  })
-})

package/src/__tests__/responsive.test.ts

@@ -1,221 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import breakpoints from '../responsive/breakpoints'
-import normalizeTheme from '../responsive/normalizeTheme'
-import optimizeTheme from '../responsive/optimizeTheme'
-import sortBreakpoints from '../responsive/sortBreakpoints'
-import transformTheme from '../responsive/transformTheme'
-
-describe('breakpoints', () => {
-  it('has expected default config', () => {
-    expect(breakpoints.rootSize).toBe(16)
-    expect(breakpoints.breakpoints).toHaveProperty('xs')
-    expect(breakpoints.breakpoints).toHaveProperty('sm')
-    expect(breakpoints.breakpoints).toHaveProperty('md')
-    expect(breakpoints.breakpoints).toHaveProperty('lg')
-    expect(breakpoints.breakpoints).toHaveProperty('xl')
-    expect(breakpoints.breakpoints).toHaveProperty('xxl')
-  })
-
-  it('has correct pixel values', () => {
-    expect(breakpoints.breakpoints.xs).toBe(0)
-    expect(breakpoints.breakpoints.sm).toBe(576)
-    expect(breakpoints.breakpoints.md).toBe(768)
-    expect(breakpoints.breakpoints.lg).toBe(992)
-    expect(breakpoints.breakpoints.xl).toBe(1200)
-    expect(breakpoints.breakpoints.xxl).toBe(1440)
-  })
-})
-
-describe('sortBreakpoints', () => {
-  it('sorts breakpoints by value ascending, returns keys', () => {
-    const bps = { md: 768, xs: 0, xl: 1200, sm: 576 }
-    const sorted = sortBreakpoints(bps)
-    expect(sorted).toEqual(['xs', 'sm', 'md', 'xl'])
-  })
-
-  it('handles already sorted breakpoints', () => {
-    const sorted = sortBreakpoints({ xs: 0, sm: 576, md: 768 })
-    expect(sorted).toEqual(['xs', 'sm', 'md'])
-  })
-
-  it('handles single breakpoint', () => {
-    expect(sortBreakpoints({ xs: 0 })).toEqual(['xs'])
-  })
-
-  it('handles empty object', () => {
-    expect(sortBreakpoints({})).toEqual([])
-  })
-
-  it('sorts full default breakpoint set', () => {
-    const sorted = sortBreakpoints(breakpoints.breakpoints)
-    expect(sorted).toEqual(['xs', 'sm', 'md', 'lg', 'xl', 'xxl'])
-  })
-})
-
-describe('normalizeTheme', () => {
-  const bpKeys = ['xs', 'sm', 'md', 'lg', 'xl']
-
-  it('returns theme as-is when no nested objects/arrays', () => {
-    const theme = { color: 'red', fontSize: 16 }
-    const result = normalizeTheme({ theme, breakpoints: bpKeys })
-    expect(result).toEqual(theme)
-  })
-
-  it('expands array values across breakpoints', () => {
-    const theme = { fontSize: [12, 14, 16, 18, 20] }
-    const result = normalizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.fontSize).toEqual({
-      xs: 12,
-      sm: 14,
-      md: 16,
-      lg: 18,
-      xl: 20,
-    })
-  })
-
-  it('array values use last value for extra breakpoints', () => {
-    const theme = { fontSize: [12, 14] }
-    const result = normalizeTheme({ theme, breakpoints: bpKeys })
-    expect((result.fontSize as Record<string, unknown>).xs).toBe(12)
-    expect((result.fontSize as Record<string, unknown>).sm).toBe(14)
-    expect((result.fontSize as Record<string, unknown>).md).toBe(14)
-  })
-
-  it('expands object values with carry-forward', () => {
-    const theme = { fontSize: { xs: 12, md: 16 } }
-    const result = normalizeTheme({ theme, breakpoints: bpKeys })
-    const fs = result.fontSize as Record<string, unknown>
-    expect(fs.xs).toBe(12)
-    expect(fs.sm).toBe(12) // carried from xs
-    expect(fs.md).toBe(16)
-    expect(fs.lg).toBe(16) // carried from md
-  })
-
-  it('skips null values', () => {
-    const theme = { color: null, fontSize: 16 }
-    const result = normalizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.color).toBeUndefined()
-  })
-})
-
-describe('transformTheme', () => {
-  const bpKeys = ['xs', 'sm', 'md']
-
-  it('pivots scalar values to first breakpoint', () => {
-    const theme = { color: 'red' }
-    const result = transformTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ color: 'red' })
-  })
-
-  it('pivots object values to breakpoints', () => {
-    const theme = { color: { xs: 'red', md: 'blue' } }
-    const result = transformTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ color: 'red' })
-    expect(result.md).toEqual({ color: 'blue' })
-  })
-
-  it('pivots array values by index', () => {
-    const theme = { fontSize: [12, 14, 16] }
-    const result = transformTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ fontSize: 12 })
-    expect(result.sm).toEqual({ fontSize: 14 })
-    expect(result.md).toEqual({ fontSize: 16 })
-  })
-
-  it('returns empty object for empty theme', () => {
-    expect(transformTheme({ theme: {}, breakpoints: bpKeys })).toEqual({})
-  })
-
-  it('returns empty object for empty breakpoints', () => {
-    expect(transformTheme({ theme: { color: 'red' }, breakpoints: [] })).toEqual({})
-  })
-
-  it('filters out unexpected breakpoint keys', () => {
-    const theme = { color: { xs: 'red', unknown: 'green' } }
-    const result = transformTheme({ theme, breakpoints: bpKeys })
-    expect(result).not.toHaveProperty('unknown')
-  })
-})
-
-describe('optimizeTheme', () => {
-  const bpKeys = ['xs', 'sm', 'md', 'lg']
-
-  it('keeps first breakpoint', () => {
-    const theme = {
-      xs: { color: 'red' },
-      sm: { color: 'blue' },
-    }
-    const result = optimizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ color: 'red' })
-  })
-
-  it('removes duplicate breakpoints', () => {
-    const theme = {
-      xs: { color: 'red' },
-      sm: { color: 'red' },
-      md: { color: 'blue' },
-    }
-    const result = optimizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ color: 'red' })
-    expect(result.sm).toBeUndefined()
-    expect(result.md).toEqual({ color: 'blue' })
-  })
-
-  it('keeps breakpoints with different values', () => {
-    const theme = {
-      xs: { color: 'red', fontSize: 12 },
-      sm: { color: 'red', fontSize: 14 },
-    }
-    const result = optimizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toBeDefined()
-    expect(result.sm).toBeDefined()
-  })
-
-  it('handles empty theme', () => {
-    expect(optimizeTheme({ theme: {}, breakpoints: bpKeys })).toEqual({})
-  })
-
-  it('keeps entire breakpoint when ANY property differs from previous (all-or-nothing)', () => {
-    // Simple all-or-nothing: if the breakpoint differs from the previous
-    // one AT ALL (via shallow comparison), emit the ENTIRE breakpoint.
-    // Matches reference implementation and original monorepo-migration
-    // version. Previous per-property "optimizations" broke shorthand/
-    // longhand interactions and property ordering guarantees.
-    const theme = {
-      xs: { maxWidth: '90%', height: '100%' },
-      sm: { maxWidth: '33.75rem', height: '100%' },
-      md: { maxWidth: '43.75rem', height: '100%' },
-      lg: { maxWidth: '58.75rem', height: '100%' },
-    }
-    const result = optimizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ maxWidth: '90%', height: '100%' })
-    // Full breakpoints kept — height IS duplicated but that's correct:
-    // the browser cascades one media query's properties independently,
-    // and partial property emission breaks shorthand/longhand ordering.
-    expect(result.sm).toEqual({ maxWidth: '33.75rem', height: '100%' })
-    expect(result.md).toEqual({ maxWidth: '43.75rem', height: '100%' })
-    expect(result.lg).toEqual({ maxWidth: '58.75rem', height: '100%' })
-  })
-
-  it('drops breakpoint when FULLY identical to previous (shallowEqual)', () => {
-    const theme = {
-      xs: { color: 'red', size: 12 },
-      sm: { color: 'red', size: 12 }, // identical to xs — dropped
-      md: { color: 'blue', size: 12 }, // differs → full breakpoint kept
-    }
-    const result = optimizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ color: 'red', size: 12 })
-    expect(result.sm).toBeUndefined()
-    expect(result.md).toEqual({ color: 'blue', size: 12 })
-  })
-
-  it('emits full breakpoint when keys differ (property added/removed)', () => {
-    const theme = {
-      xs: { color: 'red' },
-      sm: { color: 'red', padding: 10 },
-    }
-    const result = optimizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ color: 'red' })
-    expect(result.sm).toEqual({ color: 'red', padding: 10 })
-  })
-})

package/src/__tests__/special-keys.test.ts

@@ -1,120 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import styles from '../styles/styles/index'
-
-const mockCss = (strings: TemplateStringsArray, ...vals: any[]) => {
-  let r = ''
-  for (let i = 0; i < strings.length; i++) {
-    r += strings[i]
-    if (i < vals.length) r += String(vals[i])
-  }
-  return r
-}
-
-// Regression: kind: 'special' descriptors (`fullScreen`, `hideEmpty`,
-// `clearFix`, `extendCss`, `backgroundImage`, `animation`) only carry an
-// `id` field — no `key` / `keys`. The keyToIndices builder used to walk
-// only `d.key` / `d.keys`, so special descriptors were never indexed.
-//
-// In single-special-property themes the bug was masked by the fallback
-// path (`if (fragments.length === 0 && Object.keys(t).length > 0)` triggers
-// a full-scan that hits processSpecial). The moment ANY non-special key is
-// also present in the theme — the real-world shape, e.g. `<Overlay>` with
-// `{ fullScreen: true, background: 'rgba(0,0,0,0.5)' }` — the fast path
-// processes `background`, fragments.length === 1, fallback skipped, the
-// special is silently dropped.
-//
-// Fix: index `d.id` alongside `d.key` / `d.keys` so the fast path resolves
-// special descriptors directly.
-describe('kind: special descriptors paired with non-special properties', () => {
-  it('fullScreen + background → both render', () => {
-    const result = styles({
-      theme: { fullScreen: true, background: 'rgba(0,0,0,0.5)' },
-      css: mockCss,
-      rootSize: 16,
-    })
-    const output = String(result)
-    expect(output).toContain('position: fixed;')
-    expect(output).toContain('top: 0;')
-    expect(output).toContain('background: rgba(0,0,0,0.5);')
-  })
-
-  it('hideEmpty + color → both render', () => {
-    const result = styles({
-      theme: { hideEmpty: true, color: 'red' },
-      css: mockCss,
-      rootSize: 16,
-    })
-    const normalized = String(result).replace(/\s+/g, ' ')
-    expect(normalized).toContain('&:empty { display: none; }')
-    expect(normalized).toContain('color: red;')
-  })
-
-  it('clearFix + padding → both render', () => {
-    const result = styles({
-      theme: { clearFix: true, padding: 8 },
-      css: mockCss,
-      rootSize: 16,
-    })
-    const normalized = String(result).replace(/\s+/g, ' ')
-    expect(normalized).toContain("&::after { clear: both; content: ''; display: table; }")
-    expect(normalized).toContain('padding:')
-    expect(normalized).toContain('0.5rem')
-  })
-
-  it('extendCss + color → both render', () => {
-    const result = styles({
-      theme: { extendCss: 'border: 1px solid red;', color: 'blue' },
-      css: mockCss,
-      rootSize: 16,
-    })
-    const output = String(result)
-    expect(output).toContain('border: 1px solid red;')
-    expect(output).toContain('color: blue;')
-  })
-
-  it('backgroundImage + color → both render', () => {
-    const result = styles({
-      theme: { backgroundImage: 'https://example.com/img.png', color: 'green' },
-      css: mockCss,
-      rootSize: 16,
-    })
-    const output = String(result)
-    expect(output).toContain('background-image: url(https://example.com/img.png);')
-    expect(output).toContain('color: green;')
-  })
-
-  it('animation + color → both render', () => {
-    const result = styles({
-      theme: { animation: 'fadeIn 1s ease-in', color: 'purple' },
-      css: mockCss,
-      rootSize: 16,
-    })
-    const output = String(result)
-    expect(output).toContain('animation:')
-    expect(output).toContain('fadeIn 1s ease-in')
-    expect(output).toContain('color: purple;')
-  })
-
-  it('multiple specials + non-specials → all render', () => {
-    const result = styles({
-      theme: {
-        fullScreen: true,
-        hideEmpty: true,
-        clearFix: true,
-        extendCss: 'outline: 2px dashed orange;',
-        color: 'red',
-        padding: 16,
-      },
-      css: mockCss,
-      rootSize: 16,
-    })
-    const normalized = String(result).replace(/\s+/g, ' ')
-    expect(normalized).toContain('position: fixed;')
-    expect(normalized).toContain('&:empty { display: none; }')
-    expect(normalized).toContain("&::after { clear: both; content: ''; display: table; }")
-    expect(normalized).toContain('outline: 2px dashed orange;')
-    expect(normalized).toContain('color: red;')
-    expect(normalized).toContain('padding:')
-    expect(normalized).toContain('1rem')
-  })
-})