@pyreon/styler 0.24.5 → 0.24.6

package/src/__tests__/theme.test.ts

@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { ThemeContext, useTheme } from '../ThemeProvider'
-
-describe('ThemeContext', () => {
-  it('is a Context object', () => {
-    expect(ThemeContext).toBeDefined()
-    expect(ThemeContext.id).toBeDefined()
-  })
-
-  it('has an id property for context identification', () => {
-    expect(typeof ThemeContext.id).toBe('symbol')
-  })
-})
-
-describe('useTheme', () => {
-  it('is a function', () => {
-    expect(typeof useTheme).toBe('function')
-  })
-
-  it('returns the default theme (empty object) when called outside a provider', () => {
-    const theme = useTheme()
-    expect(theme).toEqual({})
-  })
-
-  it('can be called with a type parameter', () => {
-    interface MyTheme {
-      primary: string
-      spacing: number
-    }
-    const theme = useTheme<MyTheme>()
-    expect(theme).toBeDefined()
-  })
-})

package/src/__tests__/useCSS.test.ts

@@ -1,172 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest'
-import { css } from '../css'
-import { sheet } from '../sheet'
-import { useCSS } from '../useCSS'
-
-describe('useCSS', () => {
-  afterEach(() => {
-    sheet.clearAll()
-  })
-
-  describe('basic usage', () => {
-    it('returns a className string for static CSS', () => {
-      const template = css`
-        display: flex;
-      `
-      const result = useCSS(template)
-      expect(typeof result).toBe('string')
-      expect(result).toMatch(/^pyr-[0-9a-z]+$/)
-    })
-
-    it('returns different classNames for different CSS', () => {
-      const template1 = css`
-        display: flex;
-      `
-      const template2 = css`
-        display: block;
-      `
-
-      const r1 = useCSS(template1)
-      const r2 = useCSS(template2)
-
-      expect(r1).toMatch(/^pyr-/)
-      expect(r2).toMatch(/^pyr-/)
-      expect(r1).not.toBe(r2)
-    })
-
-    it('returns empty string for empty CSS', () => {
-      const template = css``
-      const result = useCSS(template)
-      expect(result).toBe('')
-    })
-
-    it('returns empty string for whitespace-only CSS', () => {
-      const template = css``
-      const result = useCSS(template)
-      expect(result).toBe('')
-    })
-  })
-
-  describe('dynamic values', () => {
-    it('works with static interpolation values', () => {
-      const color = 'red'
-      const template = css`
-        color: ${color};
-      `
-      const result = useCSS(template)
-      expect(result).toMatch(/^pyr-[0-9a-z]+$/)
-    })
-
-    it('works with function interpolations resolved via props', () => {
-      const template = css`
-        color: ${(p: any) => p.color};
-      `
-      const result = useCSS(template, { color: 'blue' })
-      expect(result).toMatch(/^pyr-[0-9a-z]+$/)
-    })
-
-    it('different prop values produce different classNames', () => {
-      const template = css`
-        color: ${(p: any) => p.color};
-      `
-
-      const r1 = useCSS(template, { color: 'red' })
-      const r2 = useCSS(template, { color: 'green' })
-
-      expect(r1).not.toBe(r2)
-    })
-  })
-
-  describe('caching', () => {
-    it('same CSS returns same className on repeated calls', () => {
-      const template = css`
-        display: flex;
-      `
-      const cls1 = useCSS(template)
-      const cls2 = useCSS(template)
-      expect(cls1).toBe(cls2)
-    })
-
-    it('same dynamic CSS with same props returns same className', () => {
-      const template = css`
-        color: ${(p: any) => p.color};
-      `
-      const cls1 = useCSS(template, { color: 'red' })
-      const cls2 = useCSS(template, { color: 'red' })
-      expect(cls1).toBe(cls2)
-    })
-  })
-
-  describe('cache hit path', () => {
-    it('reuses cached className with identical resolved CSS', () => {
-      const template = css`
-        color: ${(p: any) => p.color};
-      `
-      const cls1 = useCSS(template, { color: 'red' })
-      const cls2 = useCSS(template, { color: 'red' })
-      expect(cls1).toBe(cls2)
-      expect(cls1).toMatch(/^pyr-/)
-    })
-
-    it('updates className when resolved CSS changes', () => {
-      const template = css`
-        color: ${(p: any) => p.color};
-      `
-      const cls1 = useCSS(template, { color: 'red' })
-      const cls2 = useCSS(template, { color: 'blue' })
-      expect(cls1).not.toBe(cls2)
-    })
-  })
-
-  describe('boost parameter', () => {
-    it('does not throw when boost is true', () => {
-      const template = css`
-        display: flex;
-      `
-      const result = useCSS(template, undefined, true)
-      expect(result).toMatch(/^pyr-[0-9a-z]+$/)
-    })
-
-    it('does not throw when boost is false', () => {
-      const template = css`
-        display: flex;
-      `
-      const result = useCSS(template, undefined, false)
-      expect(result).toMatch(/^pyr-[0-9a-z]+$/)
-    })
-  })
-
-  describe('without theme and without props', () => {
-    it('uses empty object when no props and no theme', () => {
-      const template = css`
-        display: flex;
-      `
-      const result = useCSS(template)
-      expect(result).toMatch(/^pyr-[0-9a-z]+$/)
-    })
-
-    it('handles dynamic template without theme or props', () => {
-      const template = css`
-        color: ${(p: any) => p.color ?? 'red'};
-      `
-      const result = useCSS(template, undefined)
-      expect(result).toMatch(/^pyr-/)
-    })
-  })
-
-  describe('empty CSS from dynamic resolution', () => {
-    it('returns empty className when dynamic CSS resolves to empty', () => {
-      const template = css`
-        ${(p: any) => (p.color ? `color: ${p.color};` : '')}
-      `
-
-      // First call: non-empty CSS
-      const cls1 = useCSS(template, { color: 'red' })
-      expect(cls1).toMatch(/^pyr-/)
-
-      // Second call: empty CSS
-      const cls2 = useCSS(template, { color: undefined })
-      expect(cls2).toBe('')
-    })
-  })
-})

package/src/css.ts

@@ -1,13 +0,0 @@
-import { CSSResult, type Interpolation } from './resolve'
-
-/**
- * Tagged template function for CSS. Captures the template strings and
- * interpolation values as a lazy CSSResult — resolution is deferred
- * until a styled component renders.
- *
- * Works as both a tagged template (`css\`...\``) and a regular function
- * call (`css(...args)`) since tagged templates are syntactic sugar for
- * function calls with (TemplateStringsArray, ...values).
- */
-export const css = (strings: TemplateStringsArray, ...values: Interpolation[]): CSSResult =>
-  new CSSResult(strings, values)

package/src/env.d.ts

@@ -1,6 +0,0 @@
-/**
- * Minimal process type — just enough for `process.env.NODE_ENV` checks.
- * Avoids requiring @types/node in consumers that import pyreon source
- * via the `"bun"` export condition.
- */
-declare var process: { env: { NODE_ENV?: string } }

package/src/forward.ts

@@ -1,308 +0,0 @@
-/**
- * HTML prop filtering. Prevents unknown props from being forwarded to DOM
- * elements (which causes warnings). Props starting with `$` are
- * transient (styling-only) and are always filtered out.
- */
-
-// Common HTML attributes, event handlers, and ARIA/data attributes.
-//
-// Using a plain object with `key in HTML_PROPS` instead of `Set.has(key)`:
-// V8 inlines `in` checks via hidden-class lookups (the object has a fixed
-// shape at module load and never changes), which is meaningfully faster
-// than going through the Set protocol on hot prop-filter paths. Measured
-// upstream (vitus-labs `be471b19`): +19% on the 5-lookup mix benchmark
-// (4 hits + 1 miss).
-const HTML_PROPS_LIST = [
-  // Core props
-  'className',
-  'class',
-  'dangerouslySetInnerHTML',
-  'htmlFor',
-  'id',
-  'key',
-  'ref',
-  'style',
-  'tabIndex',
-  'role',
-  // Event handlers
-  'onAbort',
-  'onAnimationEnd',
-  'onAnimationIteration',
-  'onAnimationStart',
-  'onBlur',
-  'onChange',
-  'onClick',
-  'onCompositionEnd',
-  'onCompositionStart',
-  'onCompositionUpdate',
-  'onContextMenu',
-  'onCopy',
-  'onCut',
-  'onDoubleClick',
-  'onDrag',
-  'onDragEnd',
-  'onDragEnter',
-  'onDragLeave',
-  'onDragOver',
-  'onDragStart',
-  'onDrop',
-  'onError',
-  'onFocus',
-  'onInput',
-  'onKeyDown',
-  'onKeyPress',
-  'onKeyUp',
-  'onLoad',
-  'onMouseDown',
-  'onMouseEnter',
-  'onMouseLeave',
-  'onMouseMove',
-  'onMouseOut',
-  'onMouseOver',
-  'onMouseUp',
-  'onPaste',
-  'onPointerCancel',
-  'onPointerDown',
-  'onPointerEnter',
-  'onPointerLeave',
-  'onPointerMove',
-  'onPointerOut',
-  'onPointerOver',
-  'onPointerUp',
-  'onScroll',
-  'onSelect',
-  'onSubmit',
-  'onTouchCancel',
-  'onTouchEnd',
-  'onTouchMove',
-  'onTouchStart',
-  'onTransitionEnd',
-  'onWheel',
-  // HTML attributes
-  'accept',
-  'acceptCharset',
-  'accessKey',
-  'action',
-  'allow',
-  'allowFullScreen',
-  'alt',
-  'as',
-  'async',
-  'autoCapitalize',
-  'autoComplete',
-  'autoCorrect',
-  'autoFocus',
-  'autoPlay',
-  'capture',
-  'cellPadding',
-  'cellSpacing',
-  'charSet',
-  'checked',
-  'cite',
-  'cols',
-  'colSpan',
-  'content',
-  'contentEditable',
-  'controls',
-  'controlsList',
-  'coords',
-  'crossOrigin',
-  'dateTime',
-  'decoding',
-  'default',
-  'defaultChecked',
-  'defaultValue',
-  'defer',
-  'dir',
-  'disabled',
-  'disablePictureInPicture',
-  'disableRemotePlayback',
-  'download',
-  'draggable',
-  'encType',
-  'enterKeyHint',
-  'fetchPriority',
-  'form',
-  'formAction',
-  'formEncType',
-  'formMethod',
-  'formNoValidate',
-  'formTarget',
-  'frameBorder',
-  'headers',
-  'height',
-  'hidden',
-  'high',
-  'href',
-  'hrefLang',
-  'httpEquiv',
-  'inputMode',
-  'integrity',
-  'is',
-  'label',
-  'lang',
-  'list',
-  'loading',
-  'loop',
-  'low',
-  'max',
-  'maxLength',
-  'media',
-  'method',
-  'min',
-  'minLength',
-  'multiple',
-  'muted',
-  'name',
-  'noModule',
-  'noValidate',
-  'nonce',
-  'open',
-  'optimum',
-  'pattern',
-  'placeholder',
-  'playsInline',
-  'poster',
-  'preload',
-  'readOnly',
-  'referrerPolicy',
-  'rel',
-  'required',
-  'reversed',
-  'rows',
-  'rowSpan',
-  'sandbox',
-  'scope',
-  'scoped',
-  'scrolling',
-  'selected',
-  'shape',
-  'size',
-  'sizes',
-  'slot',
-  'span',
-  'spellCheck',
-  'src',
-  'srcDoc',
-  'srcLang',
-  'srcSet',
-  'start',
-  'step',
-  'summary',
-  'target',
-  'title',
-  'translate',
-  'type',
-  'useMap',
-  'value',
-  'width',
-  'wrap',
-] as const
-
-// Build the lookup object once at module load. `null`-prototype keeps the
-// object's hidden class lean and means `in` checks don't accidentally pick
-// up `Object.prototype` keys.
-const HTML_PROPS: Record<string, true> = Object.create(null)
-for (const k of HTML_PROPS_LIST) HTML_PROPS[k] = true
-
-/**
- * Filters props for HTML elements. Keeps valid HTML attrs, data-*, aria-*.
- * Rejects unknown props and $-prefixed transient props.
- */
-export const filterProps = (props: Record<string, unknown>): Record<string, unknown> => {
-  const filtered: Record<string, unknown> = {}
-
-  for (const key in props) {
-    // Skip transient props ($-prefixed) — used for styling-only props
-    if (key.charCodeAt(0) === 36) continue // '$'
-
-    // Skip `as` prop — handled separately by styled
-    if (key === 'as') continue
-
-    // Keep data-* and aria-* attributes
-    if (key.startsWith('data-') || key.startsWith('aria-')) {
-      filtered[key] = props[key]
-      continue
-    }
-
-    // Keep known HTML props — `in` against the null-prototype lookup
-    // object beats `Set.has` on the hot DOM-filter path.
-    if (key in HTML_PROPS) {
-      filtered[key] = props[key]
-    }
-  }
-
-  return filtered
-}
-
-/**
- * Build final props for a styled component in a single pass.
- * Combines className merging, ref injection, and prop filtering into one
- * allocation and one iteration.
- *
- * Copies own property DESCRIPTORS rather than values for forwarded
- * props — getter-shaped reactive props (compiler-emitted `_rp(() =>
- * signal())` converted to getters by `makeReactiveProps`) survive the
- * copy with their reactive subscription intact. A bare `result[key] =
- * rawProps[key]` fires the getter at setup time and stores a static
- * value, breaking signal-driven reactivity for any consumer that reads
- * `props.x` in a reactive scope downstream.
- */
-export const buildProps = (
-  rawProps: Record<string, any>,
-  generatedCls: string,
-  isDOM: boolean,
-  customFilter?: (prop: string) => boolean,
-): Record<string, any> => {
-  const result: Record<string, any> = {}
-
-  // Merge generated + user className. Reading `rawProps.class` /
-  // `.className` synchronously is fine — `class` is consumed at this
-  // boundary (merged with the generated class), never forwarded
-  // reactively. The string we write is consumed by the DOM at apply
-  // time, not stored as a getter.
-  const userCls = rawProps.class || rawProps.className
-  if (generatedCls) {
-    result.class = userCls ? `${generatedCls} ${userCls}` : generatedCls
-  } else if (userCls) {
-    result.class = userCls
-  }
-
-  // Helper: copy a prop's OWN descriptor (preserves getters) into result.
-  // Falls back to a no-op if the source has no own descriptor for the key.
-  const copyDescriptor = (key: string): void => {
-    const d = Object.getOwnPropertyDescriptor(rawProps, key)
-    if (d) Object.defineProperty(result, key, d)
-  }
-
-  // Component target — forward all props except as/className/class and $-prefixed
-  if (!isDOM) {
-    for (const key in rawProps) {
-      if (key === 'as' || key === 'className' || key === 'class') continue
-      if (key.charCodeAt(0) === 36) continue // $-prefixed transient
-      copyDescriptor(key)
-    }
-    return result
-  }
-
-  // DOM element with custom shouldForwardProp
-  if (customFilter) {
-    for (const key in rawProps) {
-      if (key === 'as' || key === 'className' || key === 'class') continue
-      if (customFilter(key)) copyDescriptor(key)
-    }
-    return result
-  }
-
-  // DOM element with default filtering
-  for (const key in rawProps) {
-    if (key === 'as' || key === 'className' || key === 'class') continue
-    if (key.charCodeAt(0) === 36) continue // $-prefixed transient
-    if (key.startsWith('data-') || key.startsWith('aria-')) {
-      copyDescriptor(key)
-      continue
-    }
-    if (key in HTML_PROPS) copyDescriptor(key)
-  }
-  return result
-}

package/src/globalStyle.ts

@@ -1,53 +0,0 @@
-/**
- * createGlobalStyle() — tagged template function that injects global CSS
- * rules (not scoped to a class name). Returns a component function that
- * injects styles when called and supports dynamic interpolations via
- * props/theme.
- *
- * Usage:
- *   const GlobalStyle = createGlobalStyle`
- *     body { margin: 0; font-family: ${({ theme }) => theme.font}; }
- *     *, *::before, *::after { box-sizing: border-box; }
- *   `
- */
-import type { ComponentFn } from '@pyreon/core'
-import { type Interpolation, normalizeCSS, resolve } from './resolve'
-import { isDynamic } from './shared'
-import { sheet } from './sheet'
-import { useTheme } from './ThemeProvider'
-
-export const createGlobalStyle = (
-  strings: TemplateStringsArray,
-  ...values: Interpolation[]
-): ComponentFn => {
-  const hasDynamicValues = values.some(isDynamic)
-
-  // STATIC FAST PATH: compute once at creation time
-  if (!hasDynamicValues) {
-    const cssText = normalizeCSS(resolve(strings, values, {}))
-
-    // Inject into sheet immediately. `normalizeCSS` already strips
-    // leading/trailing whitespace, so a length check is equivalent to the
-    // prior `.trim()` (no O(n) whitespace scan, no string allocation).
-    // Ported from vitus-labs `be471b19`.
-    if (cssText.length > 0) sheet.insertGlobal(cssText)
-
-    const StaticGlobal: ComponentFn = () => null
-    return StaticGlobal
-  }
-
-  // DYNAMIC PATH: resolve on every render with theme/props
-  const DynamicGlobal: ComponentFn = (props: Record<string, any>) => {
-    const theme = useTheme()
-    const allProps = { ...props, theme }
-    const cssText = normalizeCSS(resolve(strings, values, allProps))
-
-    // Length check — `normalizeCSS` already trims. Ported from
-    // vitus-labs `be471b19`.
-    if (cssText.length > 0) sheet.insertGlobal(cssText)
-
-    return null
-  }
-
-  return DynamicGlobal
-}

package/src/hash.ts

@@ -1,28 +0,0 @@
-/**
- * Fast FNV-1a non-cryptographic hash. Returns base-36 string for compact class names.
- *
- * 32-bit hash space → ~4.3 billion unique values. Collision probability is
- * negligible for typical applications (< 10,000 unique CSS rules).
- */
-
-/** FNV-1a offset basis — starting state for streaming hash. */
-export const HASH_INIT = 2166136261
-
-const FNV_PRIME = 16777619
-
-/** Feed a string segment into the running hash state.
- * Streaming: hashUpdate(hashUpdate(HASH_INIT, 'ab'), 'cd') === hash('abcd').
- */
-export const hashUpdate = (init: number, str: string): number => {
-  let h = init
-  for (let i = 0; i < str.length; i++) {
-    h = Math.imul(h ^ str.charCodeAt(i), FNV_PRIME)
-  }
-  return h
-}
-
-/** Finalize a hash state into a base-36 class name suffix. */
-export const hashFinalize = (h: number): string => (h >>> 0).toString(36)
-
-/** Hash a complete string in one shot. Returns base-36 string. */
-export const hash = (str: string): string => hashFinalize(hashUpdate(HASH_INIT, str))

package/src/index.ts

@@ -1,15 +0,0 @@
-export { css } from './css'
-export { buildProps, filterProps } from './forward'
-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 { isDynamic } from './shared'
-export type { StyleSheetOptions } from './sheet'
-export { createSheet, StyleSheet, sheet } from './sheet'
-export type { StyledFunction, StyledOptions } from './styled'
-export { styled } from './styled'
-export type { DefaultTheme } from './ThemeProvider'
-export { ThemeContext, ThemeProvider, useTheme, useThemeAccessor } from './ThemeProvider'
-export { useCSS } from './useCSS'

package/src/keyframes.ts

@@ -1,36 +0,0 @@
-/**
- * keyframes() tagged template function. Creates a CSS @keyframes rule,
- * injects it into the stylesheet, and returns the generated animation name.
- *
- * Usage:
- *   const fadeIn = keyframes`
- *     from { opacity: 0; }
- *     to { opacity: 1; }
- *   `
- *   // fadeIn === "pyr-kf-abc123" (deterministic, hash-based)
- */
-import { hash } from './hash'
-import { type Interpolation, normalizeCSS, resolve } from './resolve'
-import { sheet } from './sheet'
-
-class KeyframesResult {
-  readonly name: string
-
-  constructor(strings: TemplateStringsArray, values: Interpolation[]) {
-    const body = normalizeCSS(resolve(strings, values, {}))
-    const h = hash(body)
-    this.name = `pyr-kf-${h}`
-
-    sheet.insertKeyframes(this.name, body)
-  }
-
-  /** Returns the animation name when used in string context. */
-  toString(): string {
-    return this.name
-  }
-}
-
-export const keyframes = (
-  strings: TemplateStringsArray,
-  ...values: Interpolation[]
-): KeyframesResult => new KeyframesResult(strings, values)