@pyreon/unistyle 0.24.5 → 0.24.6

package/src/__tests__/makeItResponsive.test.ts

@@ -1,431 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-vi.mock('@pyreon/ui-core', () => ({
-  isEmpty: (val: unknown) =>
-    val == null || (typeof val === 'object' && Object.keys(val as object).length === 0),
-  set: (obj: any, path: (string | number)[], value: unknown) => {
-    let current = obj
-    for (let i = 0; i < path.length - 1; i++) {
-      const key = path[i] as string | number
-      if (current[key] == null || typeof current[key] !== 'object') {
-        current[key] = {}
-      }
-      current = current[key]
-    }
-    const lastKey = path[path.length - 1] as string | number
-    current[lastKey] = value
-  },
-}))
-
-import makeItResponsive from '../responsive/makeItResponsive'
-
-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
-}
-
-const mockStyles = ({ theme }: { theme: Record<string, unknown> }) => {
-  return Object.entries(theme)
-    .map(([k, v]) => `${k}: ${v};`)
-    .join(' ')
-}
-
-describe('makeItResponsive', () => {
-  it('returns empty string when customTheme is empty/undefined', () => {
-    const responsive = makeItResponsive({
-      key: 'styles',
-      css: mockCss,
-      styles: mockStyles,
-    })
-
-    const result = responsive({ theme: {} })
-    expect(result).toBe('')
-  })
-
-  it('returns empty string when customTheme is empty object', () => {
-    const responsive = makeItResponsive({
-      theme: {},
-      key: 'styles',
-      css: mockCss,
-      styles: mockStyles,
-    })
-
-    const result = responsive({ theme: {} })
-    expect(result).toBe('')
-  })
-
-  it('without breakpoints: wraps styles output in css template', () => {
-    const responsive = makeItResponsive({
-      theme: { color: 'red' },
-      css: mockCss,
-      styles: mockStyles,
-    })
-
-    const result = responsive({ theme: {} })
-    expect(result).toContain('color: red;')
-  })
-
-  it('uses props[key] when theme is not provided', () => {
-    const responsive = makeItResponsive({
-      key: 'myStyles',
-      css: mockCss,
-      styles: mockStyles,
-    })
-
-    const result = responsive({
-      theme: {},
-      myStyles: { fontSize: '16px' },
-    })
-
-    expect(result).toContain('fontSize: 16px;')
-  })
-
-  it('with breakpoints and __PYREON__: returns array of media-wrapped styles per breakpoint', () => {
-    const sortedBreakpoints = ['xs', 'sm']
-    const media: Record<string, (strings: TemplateStringsArray, ...vals: any[]) => string> = {
-      xs: mockCss,
-      sm: (strings: TemplateStringsArray, ...vals: any[]) => {
-        let r = '@media (min-width: 36em) {'
-        for (let i = 0; i < strings.length; i++) {
-          r += strings[i]
-          if (i < vals.length) r += String(vals[i])
-        }
-        r += '}'
-        return r
-      },
-    }
-
-    const responsive = makeItResponsive({
-      theme: { color: { xs: 'red', sm: 'blue' } },
-      css: mockCss,
-      styles: mockStyles,
-      normalize: true,
-    })
-
-    const result = responsive({
-      theme: {
-        breakpoints: { xs: 0, sm: 576 },
-        __PYREON__: { sortedBreakpoints, media },
-      },
-    })
-
-    expect(Array.isArray(result)).toBe(true)
-    expect(result).toHaveLength(2)
-  })
-
-  it('caching: second call with same internalTheme object returns same result', () => {
-    const sortedBreakpoints = ['xs', 'sm']
-    const media: Record<string, (strings: TemplateStringsArray, ...vals: any[]) => string> = {
-      xs: mockCss,
-      sm: mockCss,
-    }
-
-    const themeObj = { color: { xs: 'red', sm: 'blue' } }
-
-    const responsive = makeItResponsive({
-      theme: themeObj,
-      css: mockCss,
-      styles: mockStyles,
-    })
-
-    const globalTheme = {
-      breakpoints: { xs: 0, sm: 576 },
-      __PYREON__: { sortedBreakpoints, media },
-    }
-
-    const result1 = responsive({ theme: globalTheme })
-    const result2 = responsive({ theme: globalTheme })
-
-    expect(result1).toEqual(result2)
-  })
-
-  it('normalize=false skips normalizeTheme step', () => {
-    const sortedBreakpoints = ['xs', 'sm']
-    const media: Record<string, (strings: TemplateStringsArray, ...vals: any[]) => string> = {
-      xs: mockCss,
-      sm: mockCss,
-    }
-
-    // When normalize=false, object values are not expanded across breakpoints.
-    // Provide a pre-normalized theme (object keyed by breakpoint names).
-    const responsive = makeItResponsive({
-      theme: { color: { xs: 'red', sm: 'blue' } },
-      css: mockCss,
-      styles: mockStyles,
-      normalize: false,
-    })
-
-    const result = responsive({
-      theme: {
-        breakpoints: { xs: 0, sm: 576 },
-        __PYREON__: { sortedBreakpoints, media },
-      },
-    })
-
-    expect(Array.isArray(result)).toBe(true)
-  })
-
-  describe('delta optimization (mirrors vitus-labs)', () => {
-    it('strips re-emitted unchanged declarations across breakpoints', () => {
-      // mockStyles emits `color: red; padding: 0;` at xs and the same color
-      // with a different padding at sm. The delta optimizer should drop
-      // `color: red` from sm because it's already cascaded from xs via
-      // `@media (min-width: …)`.
-      const sortedBreakpoints = ['xs', 'sm']
-      const captured: Record<string, string> = {}
-      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
-        xs: (s, ...vals) => {
-          let out = ''
-          for (let i = 0; i < s.length; i++) {
-            out += s[i]
-            if (i < vals.length) out += String(vals[i])
-          }
-          captured.xs = out
-          return out
-        },
-        sm: (s, ...vals) => {
-          let out = ''
-          for (let i = 0; i < s.length; i++) {
-            out += s[i]
-            if (i < vals.length) out += String(vals[i])
-          }
-          captured.sm = out
-          return out
-        },
-      }
-
-      const responsive = makeItResponsive({
-        theme: { color: { xs: 'red', sm: 'red' }, padding: { xs: '0', sm: '1rem' } },
-        css: mockCss,
-        styles: mockStyles,
-        normalize: true,
-      })
-
-      responsive({
-        theme: {
-          breakpoints: { xs: 0, sm: 576 },
-          __PYREON__: { sortedBreakpoints, media },
-        },
-      })
-
-      // xs sees full output
-      expect(captured.xs).toContain('color: red;')
-      expect(captured.xs).toContain('padding: 0;')
-      // sm sees only the delta — color is in cascade already
-      expect(captured.sm).toContain('padding: 1rem;')
-      expect(captured.sm).not.toContain('color:')
-    })
-
-    it('skips the media-template call entirely when a breakpoint has no deltas', () => {
-      const sortedBreakpoints = ['xs', 'sm']
-      let xsCalls = 0
-      let smCalls = 0
-      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
-        xs: (s, ...vals) => {
-          xsCalls++
-          let out = ''
-          for (let i = 0; i < s.length; i++) {
-            out += s[i]
-            if (i < vals.length) out += String(vals[i])
-          }
-          return out
-        },
-        sm: (s, ...vals) => {
-          smCalls++
-          let out = ''
-          for (let i = 0; i < s.length; i++) {
-            out += s[i]
-            if (i < vals.length) out += String(vals[i])
-          }
-          return out
-        },
-      }
-
-      const responsive = makeItResponsive({
-        // Identical values at both breakpoints — sm produces zero deltas.
-        theme: { color: { xs: 'red', sm: 'red' } },
-        css: mockCss,
-        styles: mockStyles,
-      })
-
-      const result = responsive({
-        theme: {
-          breakpoints: { xs: 0, sm: 576 },
-          __PYREON__: { sortedBreakpoints, media },
-        },
-      })
-
-      // xs renders (has content); sm produces no @media wrapper at all
-      expect(xsCalls).toBe(1)
-      expect(smCalls).toBe(0)
-      // sm slot is the empty-string sentinel
-      expect((result as unknown[])[1]).toBe('')
-    })
-  })
-
-  describe('stringify fallback (mirrors vitus-labs)', () => {
-    // Where the two paths diverge observably: `styles` is invoked
-    // ONCE per breakpoint in the optimized path (for stringification),
-    // and TWICE per breakpoint in the fallback path (once for
-    // stringify which returns null, then again to re-render against
-    // the engine for the @media wrapper). With 2 breakpoints that's
-    // 2 calls vs 4 calls — clean observable distinction.
-
-    it('takes the unoptimized path when styles result has [object Foo] toString', () => {
-      // Foreign-engine result whose default toString is `[object ForeignResult]`.
-      // stringifyResult returns null → canOptimize=false → fallback path.
-      class ForeignResult {
-        constructor(public payload: string) {}
-        // Default toString → "[object ForeignResult]"
-      }
-
-      const sortedBreakpoints = ['xs', 'sm']
-      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
-        xs: mockCss,
-        sm: mockCss,
-      }
-
-      let stylesCalls = 0
-      const stylesReturningForeign = ({ theme }: { theme: Record<string, unknown> }) => {
-        stylesCalls++
-        return new ForeignResult(JSON.stringify(theme))
-      }
-
-      // Distinct values per breakpoint so optimizeTheme keeps both keys
-      // (identical values get deduplicated upstream and never reach the
-      // optimization-vs-fallback split).
-      const responsive = makeItResponsive({
-        theme: { color: { xs: 'red', sm: 'blue' } },
-        css: mockCss,
-        styles: stylesReturningForeign as any,
-      })
-
-      responsive({
-        theme: {
-          breakpoints: { xs: 0, sm: 576 },
-          __PYREON__: { sortedBreakpoints, media },
-        },
-      })
-
-      // Fallback signature: stringify pass + re-render pass = 2 calls per bp
-      expect(stylesCalls).toBe(4)
-    })
-
-    it('takes the optimized path for plain-string styles results', () => {
-      const sortedBreakpoints = ['xs', 'sm']
-      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
-        xs: mockCss,
-        sm: mockCss,
-      }
-
-      let stylesCalls = 0
-      const stylesCountingMock = (args: { theme: Record<string, unknown> }) => {
-        stylesCalls++
-        return mockStyles(args)
-      }
-
-      const responsive = makeItResponsive({
-        theme: { color: { xs: 'red', sm: 'blue' } },
-        css: mockCss,
-        styles: stylesCountingMock,
-      })
-
-      responsive({
-        theme: {
-          breakpoints: { xs: 0, sm: 576 },
-          __PYREON__: { sortedBreakpoints, media },
-        },
-      })
-
-      // Optimized signature: stringify pass only = 1 call per bp
-      expect(stylesCalls).toBe(2)
-    })
-  })
-
-  describe('render-output cache (mirrors vitus-labs)', () => {
-    it('returns the same rendered output by reference when called twice with stable theme + internal-theme refs', () => {
-      const sortedBreakpoints = ['xs', 'sm']
-      let xsCalls = 0
-      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
-        xs: (s, ...vals) => {
-          xsCalls++
-          let out = ''
-          for (let i = 0; i < s.length; i++) {
-            out += s[i]
-            if (i < vals.length) out += String(vals[i])
-          }
-          return out
-        },
-        sm: mockCss,
-      }
-
-      const themeObj = { color: { xs: 'red', sm: 'blue' } }
-      const globalTheme = {
-        breakpoints: { xs: 0, sm: 576 },
-        __PYREON__: { sortedBreakpoints, media },
-      }
-
-      const responsive = makeItResponsive({
-        theme: themeObj,
-        css: mockCss,
-        styles: mockStyles,
-      })
-
-      const result1 = responsive({ theme: globalTheme })
-      const xsCallsAfterFirst = xsCalls
-      const result2 = responsive({ theme: globalTheme })
-
-      // Same identity means the rendered cache hit (no re-rendering)
-      expect(result2).toBe(result1)
-      // Render cache hit means the media template was NOT called again
-      expect(xsCalls).toBe(xsCallsAfterFirst)
-    })
-
-    it('re-renders when the outer theme reference changes (e.g. provider value swap)', () => {
-      const sortedBreakpoints = ['xs', 'sm']
-      let xsCalls = 0
-      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
-        xs: (s, ...vals) => {
-          xsCalls++
-          let out = ''
-          for (let i = 0; i < s.length; i++) {
-            out += s[i]
-            if (i < vals.length) out += String(vals[i])
-          }
-          return out
-        },
-        sm: mockCss,
-      }
-
-      const themeObj = { color: { xs: 'red', sm: 'blue' } }
-
-      const responsive = makeItResponsive({
-        theme: themeObj,
-        css: mockCss,
-        styles: mockStyles,
-      })
-
-      // Two distinct outer-theme objects with the same content
-      const globalA = {
-        breakpoints: { xs: 0, sm: 576 },
-        __PYREON__: { sortedBreakpoints, media },
-      }
-      const globalB = {
-        breakpoints: { xs: 0, sm: 576 },
-        __PYREON__: { sortedBreakpoints, media },
-      }
-
-      responsive({ theme: globalA })
-      const callsAfterA = xsCalls
-      responsive({ theme: globalB })
-
-      // New outer theme object → no render cache hit → media template re-runs
-      expect(xsCalls).toBeGreaterThan(callsAfterA)
-    })
-
-  })
-})

package/src/__tests__/manifest-snapshot.test.ts

@@ -1,34 +0,0 @@
-import {
-  renderApiReferenceEntries,
-  renderLlmsFullSection,
-  renderLlmsTxtLine,
-} from '@pyreon/manifest'
-import manifest from '../manifest'
-
-describe('gen-docs — unistyle snapshot', () => {
-  it('renders a llms.txt bullet starting with the package prefix', () => {
-    const line = renderLlmsTxtLine(manifest)
-    expect(line.startsWith('- @pyreon/unistyle —')).toBe(true)
-  })
-
-  it('renders a llms-full.txt section with the right header', () => {
-    const section = renderLlmsFullSection(manifest)
-    expect(section.startsWith('## @pyreon/unistyle —')).toBe(true)
-    expect(section).toContain('```typescript')
-  })
-
-  it('renders MCP api-reference entries for every api[] item', () => {
-    const record = renderApiReferenceEntries(manifest)
-    expect(Object.keys(record).sort()).toEqual([
-      'unistyle/alignContent',
-      'unistyle/breakpoints',
-      'unistyle/createMediaQueries',
-      'unistyle/enrichTheme',
-      'unistyle/extendCss',
-      'unistyle/makeItResponsive',
-      'unistyle/stripUnit',
-      'unistyle/styles',
-      'unistyle/value',
-    ])
-  })
-})

package/src/__tests__/native-marker.test.ts

@@ -1,9 +0,0 @@
-import { isNativeCompat } from '@pyreon/core'
-import { describe, expect, it } from 'vitest'
-import UnistyleProvider from '../context'
-
-describe('native-compat marker — @pyreon/unistyle', () => {
-  it('Provider is marked native', () => {
-    expect(isNativeCompat(UnistyleProvider)).toBe(true)
-  })
-})

package/src/__tests__/optimizeBreakpointDeltas.test.ts

@@ -1,124 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { optimizeBreakpointDeltas } from '../responsive'
-
-describe('optimizeBreakpointDeltas', () => {
-  describe('cascade pruning', () => {
-    it('returns input unchanged when there is one or fewer breakpoints', () => {
-      expect(optimizeBreakpointDeltas([])).toEqual([])
-      expect(optimizeBreakpointDeltas(['color: red;'])).toEqual(['color: red;'])
-    })
-
-    it('strips re-emitted unchanged declarations from later breakpoints', () => {
-      const out = optimizeBreakpointDeltas([
-        'color: red; padding: 0;',
-        'color: red; padding: 1rem;',
-      ])
-      expect(out[0]).toBe('color: red; padding: 0;')
-      // `color: red` was already in the cascade — only padding survives
-      expect(out[1]).toBe('padding: 1rem;')
-    })
-
-    it('keeps changed declarations across multiple breakpoints', () => {
-      const out = optimizeBreakpointDeltas([
-        'color: red; font-size: 12px;',
-        'color: blue; font-size: 12px;',
-        'color: blue; font-size: 16px;',
-      ])
-      expect(out[0]).toBe('color: red; font-size: 12px;')
-      expect(out[1]).toBe('color: blue;')
-      expect(out[2]).toBe('font-size: 16px;')
-    })
-
-    it('emits empty string when a later breakpoint adds no deltas', () => {
-      const out = optimizeBreakpointDeltas([
-        'color: red; padding: 0;',
-        'color: red; padding: 0;',
-      ])
-      expect(out[0]).toBe('color: red; padding: 0;')
-      expect(out[1]).toBe('')
-    })
-
-    it('passes through empty / null breakpoints unchanged', () => {
-      const out = optimizeBreakpointDeltas(['color: red;', '', 'color: blue;'])
-      expect(out[0]).toBe('color: red;')
-      expect(out[1]).toBe('')
-      expect(out[2]).toBe('color: blue;')
-    })
-  })
-
-  describe('parser edge cases', () => {
-    it('skips colons inside parens (linear-gradient args)', () => {
-      const out = optimizeBreakpointDeltas([
-        'background: linear-gradient(red 0%, blue 100%);',
-        'background: linear-gradient(red 0%, blue 100%);',
-      ])
-      expect(out[0]).toBe('background: linear-gradient(red 0%, blue 100%);')
-      // Same value cascades — delta is empty
-      expect(out[1]).toBe('')
-    })
-
-    it('skips semicolons inside quoted strings (content: ";")', () => {
-      const out = optimizeBreakpointDeltas([
-        `content: ";"; color: red;`,
-        `content: ";"; color: blue;`,
-      ])
-      // Both declarations parsed correctly on bp1; bp2 only color delta
-      expect(out[0]).toContain(`content: ";";`)
-      expect(out[0]).toContain('color: red;')
-      expect(out[1]).toBe('color: blue;')
-    })
-
-    it('treats nested selector blocks as opaque, deduped by exact text', () => {
-      const out = optimizeBreakpointDeltas([
-        '&:hover { color: red; } padding: 0;',
-        '&:hover { color: red; } padding: 1rem;',
-      ])
-      // The hover block dedupes; padding delta survives
-      expect(out[1]).not.toContain('&:hover')
-      expect(out[1]).toContain('padding: 1rem;')
-    })
-
-    it('keeps differently-shaped nested blocks across breakpoints', () => {
-      const out = optimizeBreakpointDeltas([
-        '&:hover { color: red; }',
-        '&:hover { color: blue; }',
-      ])
-      expect(out[0]).toContain('&:hover { color: red; }')
-      // Different inner text → not deduped
-      expect(out[1]).toContain('&:hover { color: blue; }')
-    })
-
-    it('handles trailing declarations with no terminating semicolon', () => {
-      const out = optimizeBreakpointDeltas(['color: red', 'color: blue'])
-      expect(out[0]).toBe('color: red;')
-      expect(out[1]).toBe('color: blue;')
-    })
-
-    it('preserves @supports / @media-style nested blocks as opaque blocks', () => {
-      const out = optimizeBreakpointDeltas([
-        '@supports (display: grid) { display: grid; }',
-        '@supports (display: grid) { display: grid; } color: red;',
-      ])
-      expect(out[0]).toBe('@supports (display: grid) { display: grid; }')
-      // @supports block dedupes; color is new
-      expect(out[1]).toBe('color: red;')
-    })
-
-    it('keeps shorthand and longhand decls separately (no shorthand modeling)', () => {
-      const out = optimizeBreakpointDeltas([
-        'padding: 1rem;',
-        'padding-top: 0;',
-      ])
-      // Different `prop` keys → both retained
-      expect(out[0]).toBe('padding: 1rem;')
-      expect(out[1]).toBe('padding-top: 0;')
-    })
-
-    it('keeps malformed declaration-shaped fragments without losing them', () => {
-      const out = optimizeBreakpointDeltas([':abc;', ':abc;'])
-      // No prop name (starts with `:`) → kept as opaque block; deduped on bp2
-      expect(out[0]).toBe(':abc;')
-      expect(out[1]).toBe('')
-    })
-  })
-})