@pyreon/styler 0.24.4 → 0.24.6

package/src/__tests__/forward.test.ts

@@ -1,282 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { buildProps, filterProps } from '../forward'
-
-describe('filterProps', () => {
-  describe('keeps standard HTML props', () => {
-    it('keeps id', () => {
-      const result = filterProps({ id: 'test' })
-      expect(result.id).toBe('test')
-    })
-
-    it('keeps className', () => {
-      const result = filterProps({ className: 'foo' })
-      expect(result.className).toBe('foo')
-    })
-
-    it('keeps style', () => {
-      const style = { color: 'red' }
-      const result = filterProps({ style })
-      expect(result.style).toBe(style)
-    })
-
-    it('keeps href', () => {
-      const result = filterProps({ href: '/path' })
-      expect(result.href).toBe('/path')
-    })
-
-    it('keeps disabled', () => {
-      const result = filterProps({ disabled: true })
-      expect(result.disabled).toBe(true)
-    })
-
-    it('keeps multiple standard props at once', () => {
-      const result = filterProps({
-        id: 'main',
-        tabIndex: 0,
-        role: 'button',
-        title: 'Click me',
-      })
-      expect(result).toEqual({
-        id: 'main',
-        tabIndex: 0,
-        role: 'button',
-        title: 'Click me',
-      })
-    })
-  })
-
-  describe('keeps data-* attributes', () => {
-    it('keeps data-testid', () => {
-      const result = filterProps({ 'data-testid': 'hello' })
-      expect(result['data-testid']).toBe('hello')
-    })
-
-    it('keeps data-custom', () => {
-      const result = filterProps({ 'data-custom': 'value' })
-      expect(result['data-custom']).toBe('value')
-    })
-  })
-
-  describe('keeps aria-* attributes', () => {
-    it('keeps aria-label', () => {
-      const result = filterProps({ 'aria-label': 'Close' })
-      expect(result['aria-label']).toBe('Close')
-    })
-
-    it('keeps aria-hidden', () => {
-      const result = filterProps({ 'aria-hidden': true })
-      expect(result['aria-hidden']).toBe(true)
-    })
-
-    it('keeps aria-describedby', () => {
-      const result = filterProps({ 'aria-describedby': 'desc' })
-      expect(result['aria-describedby']).toBe('desc')
-    })
-  })
-
-  describe('keeps event handlers', () => {
-    it('keeps onClick', () => {
-      const fn = () => undefined
-      const result = filterProps({ onClick: fn })
-      expect(result.onClick).toBe(fn)
-    })
-
-    it('keeps onMouseEnter', () => {
-      const fn = () => undefined
-      const result = filterProps({ onMouseEnter: fn })
-      expect(result.onMouseEnter).toBe(fn)
-    })
-
-    it('keeps onKeyDown', () => {
-      const fn = () => undefined
-      const result = filterProps({ onKeyDown: fn })
-      expect(result.onKeyDown).toBe(fn)
-    })
-  })
-
-  describe('strips $-prefixed transient props', () => {
-    it('strips $rocketstyle', () => {
-      const result = filterProps({ $rocketstyle: { color: 'red' } })
-      expect(result).toEqual({})
-    })
-
-    it('strips $element', () => {
-      const result = filterProps({ $element: 'button' })
-      expect(result).toEqual({})
-    })
-
-    it('strips $active', () => {
-      const result = filterProps({ $active: true })
-      expect(result).toEqual({})
-    })
-
-    it('strips multiple $-prefixed props while keeping valid ones', () => {
-      const result = filterProps({
-        $rocketstyle: {},
-        $element: 'div',
-        id: 'test',
-        'data-x': 'y',
-      })
-      expect(result).toEqual({ id: 'test', 'data-x': 'y' })
-    })
-  })
-
-  describe('strips as prop', () => {
-    it('strips the as prop', () => {
-      const result = filterProps({ as: 'button' })
-      expect(result).toEqual({})
-    })
-
-    it('strips as while keeping other props', () => {
-      const result = filterProps({ as: 'section', id: 'main' })
-      expect(result).toEqual({ id: 'main' })
-    })
-  })
-
-  describe('strips unknown props', () => {
-    it('strips customProp', () => {
-      const result = filterProps({ customProp: 'value' })
-      expect(result).toEqual({})
-    })
-
-    it('strips myThing', () => {
-      const result = filterProps({ myThing: 42 })
-      expect(result).toEqual({})
-    })
-
-    it('strips camelCase unknown props', () => {
-      const result = filterProps({ isActive: true, backgroundColor: 'red' })
-      expect(result).toEqual({})
-    })
-
-    it('returns empty object for all-unknown props', () => {
-      const result = filterProps({
-        foo: 1,
-        bar: 2,
-        baz: 3,
-        customThing: 'x',
-      })
-      expect(result).toEqual({})
-    })
-  })
-})
-
-describe('buildProps', () => {
-  describe('className merging', () => {
-    it('merges generatedCls with user className', () => {
-      const result = buildProps({ className: 'custom' }, 'pyr-abc', true)
-      expect(result.class).toBe('pyr-abc custom')
-    })
-
-    it('merges generatedCls with user class', () => {
-      const result = buildProps({ class: 'custom' }, 'pyr-abc', true)
-      expect(result.class).toBe('pyr-abc custom')
-    })
-
-    it('uses only generatedCls when no user className', () => {
-      const result = buildProps({}, 'pyr-abc', true)
-      expect(result.class).toBe('pyr-abc')
-    })
-
-    it('uses only user className when generatedCls is empty', () => {
-      const result = buildProps({ className: 'custom' }, '', true)
-      expect(result.class).toBe('custom')
-    })
-
-    it('sets no class when both are empty/missing', () => {
-      const result = buildProps({}, '', true)
-      expect(result.class).toBeUndefined()
-    })
-  })
-
-  describe('isDOM=false (component target)', () => {
-    it('forwards all props except as, className, class, and $-prefixed', () => {
-      const result = buildProps(
-        {
-          as: 'button',
-          className: 'user',
-          customProp: 'hello',
-          $rocketstyle: {},
-          $rocketstate: { hover: true },
-          'data-x': 'y',
-          onClick: () => undefined,
-        },
-        'pyr-abc',
-        false,
-      )
-
-      expect(result.customProp).toBe('hello')
-      expect(result.$rocketstyle).toBeUndefined()
-      expect(result.$rocketstate).toBeUndefined()
-      expect(result['data-x']).toBe('y')
-      expect(result.onClick).toBeDefined()
-      // as and className are not forwarded from rawProps (class is merged separately)
-      expect(result.as).toBeUndefined()
-      expect(result.class).toBe('pyr-abc user')
-    })
-  })
-
-  describe('isDOM=true (default filtering)', () => {
-    it('filters unknown DOM props', () => {
-      const result = buildProps({ customProp: 'hello', unknownThing: 42 }, 'pyr-abc', true)
-      expect(result.customProp).toBeUndefined()
-      expect(result.unknownThing).toBeUndefined()
-      expect(result.class).toBe('pyr-abc')
-    })
-
-    it('strips $-prefixed props', () => {
-      const result = buildProps({ $rocketstyle: {}, $active: true, id: 'test' }, 'pyr-abc', true)
-      expect(result.$rocketstyle).toBeUndefined()
-      expect(result.$active).toBeUndefined()
-      expect(result.id).toBe('test')
-    })
-
-    it('keeps data-* and aria-* attributes', () => {
-      const result = buildProps({ 'data-testid': 'btn', 'aria-label': 'Close' }, 'pyr-abc', true)
-      expect(result['data-testid']).toBe('btn')
-      expect(result['aria-label']).toBe('Close')
-    })
-
-    it('keeps standard HTML attributes', () => {
-      const result = buildProps({ id: 'main', disabled: true, tabIndex: 0 }, 'pyr-abc', true)
-      expect(result.id).toBe('main')
-      expect(result.disabled).toBe(true)
-      expect(result.tabIndex).toBe(0)
-    })
-
-    it('strips as prop', () => {
-      const result = buildProps({ as: 'section' }, 'pyr-abc', true)
-      expect(result.as).toBeUndefined()
-    })
-  })
-
-  describe('isDOM=true with customFilter', () => {
-    it('uses customFilter to decide which props to forward', () => {
-      const customFilter = (prop: string) => prop.startsWith('my')
-      const result = buildProps(
-        { myProp: 'yes', otherProp: 'no', id: 'skip' },
-        'pyr-abc',
-        true,
-        customFilter,
-      )
-      expect(result.myProp).toBe('yes')
-      expect(result.otherProp).toBeUndefined()
-      expect(result.id).toBeUndefined()
-    })
-
-    it('customFilter still skips as and className from rawProps', () => {
-      const customFilter = () => true
-      const result = buildProps(
-        { as: 'button', className: 'user', id: 'test' },
-        'pyr-abc',
-        true,
-        customFilter,
-      )
-      // as is always skipped
-      expect(result.as).toBeUndefined()
-      // class is merged, not forwarded from rawProps
-      expect(result.class).toBe('pyr-abc user')
-      expect(result.id).toBe('test')
-    })
-  })
-})

package/src/__tests__/globalStyle.test.ts

@@ -1,72 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest'
-import { createGlobalStyle } from '../globalStyle'
-import { sheet } from '../sheet'
-
-describe('createGlobalStyle -- empty CSS paths', () => {
-  afterEach(() => {
-    sheet.clearAll()
-  })
-
-  it('static: returns null for empty template', () => {
-    const GlobalStyle = createGlobalStyle``
-    const result = GlobalStyle({})
-    expect(result).toBeNull()
-  })
-
-  it('static: returns null for whitespace-only template', () => {
-    const GlobalStyle = createGlobalStyle`   `
-    const result = GlobalStyle({})
-    expect(result).toBeNull()
-  })
-
-  it('dynamic: returns null when interpolation resolves to empty CSS', () => {
-    const GlobalStyle = createGlobalStyle`${({ theme }: any) => (theme.empty ? '' : '')}`
-    const result = GlobalStyle({})
-    expect(result).toBeNull()
-  })
-
-  it('dynamic: returns null when interpolation resolves to whitespace', () => {
-    const GlobalStyle = createGlobalStyle`${() => '   '}`
-    const result = GlobalStyle({})
-    expect(result).toBeNull()
-  })
-})
-
-describe('createGlobalStyle', () => {
-  afterEach(() => {
-    sheet.clearAll()
-  })
-
-  it('returns a component function', () => {
-    const GlobalStyle = createGlobalStyle`
-      body { margin: 0; }
-    `
-    expect(typeof GlobalStyle).toBe('function')
-  })
-
-  it('renders nothing (returns null)', () => {
-    const GlobalStyle = createGlobalStyle`
-      body { margin: 0; padding: 0; }
-    `
-    const result = GlobalStyle({})
-    expect(result).toBeNull()
-  })
-
-  it('handles dynamic interpolations with theme', () => {
-    // Dynamic path: function interpolation causes per-render resolution
-    const GlobalStyle = createGlobalStyle`
-      body { font-family: ${({ theme }: any) => theme?.font ?? 'sans-serif'}; }
-    `
-    const result = GlobalStyle({})
-    expect(result).toBeNull()
-  })
-
-  it('handles static interpolations', () => {
-    const color = 'red'
-    const GlobalStyle = createGlobalStyle`
-      body { color: ${color}; }
-    `
-    const result = GlobalStyle({})
-    expect(result).toBeNull()
-  })
-})

package/src/__tests__/hash.test.ts

@@ -1,70 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { hash } from '../hash'
-
-describe('hash', () => {
-  it('returns a string', () => {
-    expect(typeof hash('test')).toBe('string')
-  })
-
-  it('is deterministic — same input always produces same output', () => {
-    const input = 'display: flex; color: red;'
-    expect(hash(input)).toBe(hash(input))
-  })
-
-  it('produces different hashes for different inputs', () => {
-    expect(hash('color: red')).not.toBe(hash('color: blue'))
-  })
-
-  it('returns base-36 string (compact)', () => {
-    const result = hash('some css')
-    expect(result).toMatch(/^[0-9a-z]+$/)
-  })
-
-  it('handles empty string', () => {
-    const result = hash('')
-    expect(typeof result).toBe('string')
-    expect(result.length).toBeGreaterThan(0)
-  })
-
-  it('handles long CSS strings', () => {
-    const longCSS = 'display: flex; '.repeat(100)
-    const result = hash(longCSS)
-    expect(typeof result).toBe('string')
-    // base-36 uint32 is at most 7 chars
-    expect(result.length).toBeLessThan(10)
-  })
-
-  it('handles special characters in CSS', () => {
-    const css = `@media (min-width: 48em) { .foo { content: "hello"; } }`
-    const result = hash(css)
-    expect(typeof result).toBe('string')
-  })
-
-  it('produces consistent hash for FNV-1a offset basis on empty string', () => {
-    // Empty string: h stays at FNV_OFFSET = 2166136261, base36 = "zzzzzz" range
-    const result = hash('')
-    // Just verify it is stable
-    expect(result).toBe(hash(''))
-  })
-
-  it('handles unicode characters', () => {
-    const result = hash('content: "🎉";')
-    expect(typeof result).toBe('string')
-    expect(result.length).toBeGreaterThan(0)
-  })
-
-  it('single character inputs produce distinct hashes', () => {
-    const hashes = new Set<string>()
-    for (let i = 0; i < 26; i++) {
-      hashes.add(hash(String.fromCharCode(97 + i)))
-    }
-    // All 26 lowercase letters should hash to unique values
-    expect(hashes.size).toBe(26)
-  })
-
-  it('hash is unsigned 32-bit (no negative values)', () => {
-    // base-36 of a uint32 is always positive
-    const result = hash('test negative')
-    expect(Number.parseInt(result, 36)).toBeGreaterThanOrEqual(0)
-  })
-})

package/src/__tests__/hybrid-injection.test.ts

@@ -1,225 +0,0 @@
-/**
- * Tests for the hybrid injection approach:
- * - Client (jsdom): shared <style data-pyreon-styler> sheet
- * - CSS rules present in the CSSOM sheet after insertion
- * - `layer` option threaded from styled() through to the sheet
- *
- * Ported to VNode-level testing: we call the component function directly
- * and inspect the returned VNode + the sheet's CSSOM.
- */
-
-import type { VNode } from '@pyreon/core'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { createGlobalStyle } from '../globalStyle'
-import { sheet } from '../sheet'
-import { styled } from '../styled'
-
-/** Helper: collect all CSS rule texts from the shared <style data-pyreon-styler> sheet. */
-const getSheetRules = (): string[] => {
-  const el = document.querySelector('style[data-pyreon-styler]') as HTMLStyleElement | null
-  if (!el?.sheet) return []
-  return Array.from(el.sheet.cssRules).map((r) => r.cssText)
-}
-
-/** Helper: find rules matching a className in the CSSOM. */
-const findRulesFor = (className: string): string[] =>
-  getSheetRules().filter((r) => r.includes(`.${className}`))
-
-describe('hybrid injection — CSS in shared sheet', () => {
-  afterEach(() => {
-    sheet.clearAll()
-  })
-
-  describe('static styled components', () => {
-    it('injects CSS rules into the shared <style data-pyreon-styler> element', () => {
-      const Comp = styled('div')`
-        color: red;
-      `
-      const vnode = Comp({}) as VNode
-      const className = vnode.props.class as string
-
-      const rules = findRulesFor(className)
-      expect(rules.length).toBeGreaterThanOrEqual(1)
-      expect(rules.some((r) => r.includes('color: red'))).toBe(true)
-    })
-
-    it('multiple static components share the same <style> element', () => {
-      const A = styled('div')`
-        color: red;
-      `
-      const B = styled('span')`
-        font-size: 20px;
-      `
-
-      A({})
-      B({})
-
-      // Both should be in the same sheet
-      const styleEls = document.querySelectorAll('style[data-pyreon-styler]')
-      expect(styleEls.length).toBe(1)
-
-      const rules = getSheetRules()
-      expect(rules.some((r) => r.includes('color: red'))).toBe(true)
-      expect(rules.some((r) => r.includes('font-size: 20px'))).toBe(true)
-    })
-  })
-
-  describe('dynamic styled components', () => {
-    it('injects CSS into the shared sheet', () => {
-      const Comp = styled('div')`
-        color: ${(p: any) => p.$color};
-      `
-      const vnode = Comp({ $color: 'blue' }) as VNode
-      const className = vnode.props.class as string
-
-      const rules = findRulesFor(className)
-      expect(rules.length).toBeGreaterThanOrEqual(1)
-      expect(rules.some((r) => r.includes('color: blue'))).toBe(true)
-    })
-
-    it('different prop values inject different CSS rules into the sheet', () => {
-      const Comp = styled('div')`
-        color: ${(p: any) => p.$color};
-      `
-      const vnode1 = Comp({ $color: 'red' }) as VNode
-      const cls1 = vnode1.props.class as string
-
-      const vnode2 = Comp({ $color: 'green' }) as VNode
-      const cls2 = vnode2.props.class as string
-
-      expect(cls1).not.toBe(cls2)
-
-      // Both rules should be in the sheet
-      expect(findRulesFor(cls1).some((r) => r.includes('color: red'))).toBe(true)
-      expect(findRulesFor(cls2).some((r) => r.includes('color: green'))).toBe(true)
-    })
-  })
-
-  describe('createGlobalStyle', () => {
-    it('static global styles are injected into the shared sheet', () => {
-      const GlobalStyle = createGlobalStyle`
-        body { margin: 0; }
-      `
-      // Static global styles are injected at creation time
-      GlobalStyle({})
-
-      const rules = getSheetRules()
-      expect(rules.some((r) => r.includes('margin') && r.includes('0'))).toBe(true)
-    })
-  })
-})
-
-describe('hybrid injection — VNode output (no <style> in tree)', () => {
-  afterEach(() => {
-    sheet.clearAll()
-  })
-
-  describe('styled components', () => {
-    it('static component returns a VNode of the correct tag', () => {
-      const Comp = styled('div')`
-        color: red;
-      `
-      const vnode = Comp({}) as VNode
-
-      // Should return a VNode for <div>, not a <style>
-      expect(vnode.type).toBe('div')
-    })
-
-    it('dynamic component returns a VNode of the correct tag', () => {
-      const Comp = styled('div')`
-        color: ${(p: any) => p.$color};
-      `
-      const vnode = Comp({ $color: 'red' }) as VNode
-
-      expect(vnode.type).toBe('div')
-    })
-
-    it('multiple styled components produce correct VNode types', () => {
-      const A = styled('div')`
-        color: red;
-      `
-      const B = styled('span')`
-        color: blue;
-      `
-
-      const vnodeA = A({}) as VNode
-      const vnodeB = B({}) as VNode
-
-      expect(vnodeA.type).toBe('div')
-      expect(vnodeB.type).toBe('span')
-    })
-  })
-
-  describe('createGlobalStyle', () => {
-    it('static global style returns null', () => {
-      const GlobalStyle = createGlobalStyle`body { margin: 0; }`
-      const result = GlobalStyle({})
-
-      expect(result).toBeNull()
-    })
-  })
-})
-
-describe('hybrid injection — layer option at component level', () => {
-  afterEach(() => {
-    sheet.clearAll()
-  })
-
-  it('static layered component generates className', () => {
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
-    const Comp = styled('div', { layer: 'rocketstyle' })`
-      color: red;
-    `
-    const vnode = Comp({}) as VNode
-    const className = vnode.props.class as string
-
-    // className is generated regardless of CSSOM @layer support
-    expect(className).toMatch(/^pyr-/)
-    warnSpy.mockRestore()
-  })
-
-  it('dynamic layered component generates className', () => {
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
-    const Comp = styled('div', { layer: 'rocketstyle' })`
-      color: ${(p: any) => p.$color};
-    `
-    const vnode = Comp({ $color: 'blue' }) as VNode
-    const className = vnode.props.class as string
-
-    // className is generated regardless of CSSOM @layer support
-    expect(className).toMatch(/^pyr-/)
-    warnSpy.mockRestore()
-  })
-
-  it('default sheet component produces valid className and injects rule', () => {
-    const Comp = styled('div')`
-      color: green;
-    `
-    const vnode = Comp({}) as VNode
-    const className = vnode.props.class as string
-
-    expect(className).toMatch(/^pyr-/)
-    // In environments without @layer support (happy-dom), rules are inserted
-    // without layer wrapping. In real browsers, they'd be in @layer pyreon.
-    const rules = findRulesFor(className)
-    expect(rules.length).toBeGreaterThanOrEqual(1)
-    const baseRule = rules[0] as string
-    expect(baseRule).toContain(`.${className}`)
-    expect(baseRule).toContain('color: green')
-  })
-
-  it('layered component with @media generates className', () => {
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
-    const Comp = styled('div', { layer: 'rocketstyle' })`
-      color: red;
-      @media (min-width: 768px) {
-        font-size: 20px;
-      }
-    `
-    const vnode = Comp({}) as VNode
-    const className = vnode.props.class as string
-
-    expect(className).toMatch(/^pyr-/)
-    warnSpy.mockRestore()
-  })
-})

package/src/__tests__/index.ts

@@ -1,14 +0,0 @@
-/**
- * Test barrel / helper file.
- * Re-exports commonly used test utilities from the styler source.
- */
-export { css } from '../css'
-export { createGlobalStyle } from '../globalStyle'
-export { HASH_INIT, hash, hashFinalize, hashUpdate } from '../hash'
-export { keyframes } from '../keyframes'
-export type { CSSResult, Interpolation } from '../resolve'
-export { clearNormCache, normalizeCSS, resolve, resolveValue } from '../resolve'
-export type { StyleSheetOptions } from '../sheet'
-export { createSheet, StyleSheet, sheet } from '../sheet'
-export { styled } from '../styled'
-export { ThemeContext, ThemeProvider, useTheme } from '../ThemeProvider'