@pyreon/unistyle 0.24.5 → 0.24.6

package/src/__tests__/styles.test.ts

@@ -1,273 +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
-}
-
-describe('styles', () => {
-  it('empty theme produces no CSS properties (all fragments are empty)', () => {
-    const result = styles({ theme: {}, css: mockCss, rootSize: 16 })
-    // The result is a css`` template result with empty fragments — it
-    // contains template whitespace but no actual CSS property declarations.
-    // Trim and strip commas/whitespace to verify no real CSS is produced.
-    const cleaned = String(result).replace(/[,\s]/g, '')
-    expect(cleaned).toBe('')
-  })
-
-  it('single simple property: color', () => {
-    const result = styles({ theme: { color: 'red' }, css: mockCss, rootSize: 16 })
-    expect(result).toContain('color: red;')
-  })
-
-  it('simple property: display', () => {
-    const result = styles({ theme: { display: 'flex' }, css: mockCss, rootSize: 16 })
-    expect(result).toContain('display: flex;')
-  })
-
-  it('convert property: width converts via value() with rootSize', () => {
-    // width is a convert_fallback with keys ["width", "size"]
-    // 160 / 16 = 10rem
-    const result = styles({ theme: { width: 160 }, css: mockCss, rootSize: 16 })
-    expect(result).toContain('width:')
-    expect(result).toContain('10rem')
-  })
-
-  it('convert property: fontSize', () => {
-    // 32 / 16 = 2rem
-    const result = styles({ theme: { fontSize: 32 }, css: mockCss, rootSize: 16 })
-    expect(result).toContain('font-size:')
-    expect(result).toContain('2rem')
-  })
-
-  it('edge property: margin generates margin shorthand', () => {
-    // margin 16 / 16 = 1rem
-    const result = styles({ theme: { margin: 16 }, css: mockCss, rootSize: 16 })
-    expect(result).toContain('margin:')
-    expect(result).toContain('1rem')
-  })
-
-  it('edge property: padding', () => {
-    const result = styles({ theme: { padding: 8 }, css: mockCss, rootSize: 16 })
-    expect(result).toContain('padding:')
-    expect(result).toContain('0.5rem')
-  })
-
-  it('border radius: borderRadius generates border-radius', () => {
-    // 8 / 16 = 0.5rem
-    const result = styles({ theme: { borderRadius: 8 }, css: mockCss, rootSize: 16 })
-    expect(result).toContain('border-radius:')
-    expect(result).toContain('0.5rem')
-  })
-
-  it('multiple properties combined', () => {
-    const result = styles({
-      theme: { color: 'blue', display: 'flex', fontSize: 16 },
-      css: mockCss,
-      rootSize: 16,
-    })
-    expect(result).toContain('color: blue;')
-    expect(result).toContain('display: flex;')
-    expect(result).toContain('font-size: 1rem;')
-  })
-
-  it('special property: fullScreen', () => {
-    const result = styles({ theme: { fullScreen: true }, css: mockCss, rootSize: 16 })
-    expect(result).toContain('position: fixed;')
-    expect(result).toContain('top: 0;')
-    expect(result).toContain('left: 0;')
-    expect(result).toContain('right: 0;')
-    expect(result).toContain('bottom: 0;')
-  })
-
-  it('special property: fullScreen false produces no output', () => {
-    const result = styles({ theme: { fullScreen: false }, css: mockCss, rootSize: 16 })
-    expect(result).not.toContain('position: fixed;')
-  })
-
-  it('special property: backgroundImage', () => {
-    const result = styles({
-      theme: { backgroundImage: 'https://example.com/img.png' },
-      css: mockCss,
-      rootSize: 16,
-    })
-    expect(result).toContain('background-image: url(https://example.com/img.png);')
-  })
-
-  it('special property: hideEmpty', () => {
-    const result = styles({ theme: { hideEmpty: true }, css: mockCss, rootSize: 16 })
-    // CSS template output — normalize whitespace for comparison
-    const normalized = String(result).replace(/\s+/g, ' ')
-    expect(normalized).toContain('&:empty { display: none; }')
-  })
-
-  it('special property: clearFix', () => {
-    const result = styles({ theme: { clearFix: true }, css: mockCss, rootSize: 16 })
-    const normalized = String(result).replace(/\s+/g, ' ')
-    expect(normalized).toContain("&::after { clear: both; content: ''; display: table; }")
-  })
-
-  it('string values for convert properties pass through', () => {
-    const result = styles({ theme: { width: '50%' }, css: mockCss, rootSize: 16 })
-    expect(result).toContain('width: 50%;')
-  })
-
-  it('uses default rootSize when not provided', () => {
-    // default rootSize is undefined, value() defaults to 16
-    const result = styles({ theme: { fontSize: 32 }, css: mockCss })
-    expect(result).toContain('font-size:')
-    expect(result).toContain('2rem')
-  })
-})
-
-describe('Tier 1: key→index lookup correctness', () => {
-  it('produces identical output for typical rocketstyle theme object', () => {
-    // A realistic theme object from a rocketstyle component — has ~10 keys
-    const theme = {
-      color: '#333',
-      backgroundColor: '#fff',
-      fontSize: 14,
-      fontWeight: 600,
-      paddingTop: 8,
-      paddingBottom: 8,
-      paddingLeft: 12,
-      paddingRight: 12,
-      borderRadius: 4,
-      borderColor: '#ddd',
-      borderWidthTop: 1,
-      lineHeight: 1.5,
-      cursor: 'pointer',
-    }
-
-    const result = styles({ theme, css: mockCss, rootSize: 16 })
-    const output = String(result)
-
-    // Verify each property produces correct CSS
-    expect(output).toContain('color: #333;')
-    expect(output).toContain('background-color: #fff;')
-    expect(output).toContain('font-weight: 600;')
-    expect(output).toContain('cursor: pointer;')
-    expect(output).toContain('line-height: 1.5;')
-    // Unit conversion: 14px fontSize, 8px padding
-    expect(output).toContain('font-size:')
-    expect(output).toContain('padding:')
-    expect(output).toContain('border-radius:')
-    expect(output).toContain('border-color: #ddd;')
-  })
-
-  it('handles edge properties (margin/padding shorthand)', () => {
-    const theme = {
-      margin: 16,
-      marginTop: 8,
-      padding: 12,
-    }
-    const result = styles({ theme, css: mockCss, rootSize: 16 })
-    const output = String(result)
-    expect(output).toContain('margin')
-    expect(output).toContain('padding')
-  })
-
-  it('handles convert_fallback properties (width/size)', () => {
-    const theme = { width: 200, size: 100 }
-    const result = styles({ theme, css: mockCss, rootSize: 16 })
-    const output = String(result)
-    // width should win over size fallback for width
-    expect(output).toContain('width:')
-  })
-
-  it('empty theme fast-path produces no CSS (same as before)', () => {
-    const result = styles({ theme: {}, css: mockCss, rootSize: 16 })
-    const cleaned = String(result).replace(/[,\s]/g, '')
-    expect(cleaned).toBe('')
-  })
-})
-
-describe('Tier 1: performance characteristics', () => {
-  it('processes a typical 10-key theme in fewer iterations than full scan', () => {
-    // This test documents the performance contract: for a theme with N keys,
-    // we should iterate approximately N descriptors (plus some overlap from
-    // multi-key descriptors like convert_fallback), NOT all 257.
-    const theme = {
-      color: 'red',
-      backgroundColor: 'blue',
-      fontSize: 14,
-      padding: 8,
-      borderRadius: 4,
-    }
-
-    // Count iterations by checking that the output is correct (proving the
-    // fast path ran, not the fallback full-scan)
-    const result = styles({ theme, css: mockCss, rootSize: 16 })
-    const output = String(result)
-    expect(output).toContain('color: red;')
-    expect(output).toContain('background-color: blue;')
-    // The key insight: if the output is correct with 5 keys, the indexed
-    // path found the right descriptors without scanning all 257.
-    // The fallback only fires when NO matches are found — with 5 real keys
-    // the indexed path should always find matches.
-  })
-})
-
-  // Regression test for PR #283's `_fragments` reuse — the module-level array
-  // was captured by reference inside the returned CSSResult's values, so the
-  // next styles() call would clear the previous result's data before its
-  // consumer ever resolved it.
-  //
-  // Pre-fix: r1.values[0] (the fragments array) was the SAME reference as the
-  // module-level array; the second styles() call ran `_fragments.length = 0`
-  // and wiped r1's fragments to []. Post-fix: each call gets its own array.
-  //
-  // Real-app symptom this caused: rocketstyle dimension themes (state="primary"
-  // → blue background) produced empty CSS because element.ts calls
-  // makeItResponsive 5 times (base/hover/focus/active/disabled), each calling
-  // styles() under the hood. Only the LAST one kept its data; the rest
-  // resolved empty. See `packages/ui/components/src/bases/element.ts`.
-  describe('regression: CSSResult ownership of fragments array (PR #283 follow-up)', () => {
-    // Lazy-capturing mock: stores strings + values without resolving, mimicking
-    // the real CSSResult contract where consumers resolve later.
-    const lazyCss = (strings: TemplateStringsArray, ...values: unknown[]) => ({
-      strings,
-      values,
-    })
-
-    it('first result retains its fragments after a second styles() call', () => {
-      const r1 = styles({
-        theme: { color: 'red', fontSize: 14 },
-        css: lazyCss as never,
-        rootSize: 16,
-      })
-      const r1Fragments = (r1 as { values: unknown[] }).values[0]
-      const r1LenBefore = Array.isArray(r1Fragments) ? r1Fragments.length : -1
-      expect(r1LenBefore).toBeGreaterThan(0)
-
-      // Second call — pre-fix this cleared r1's array via shared module-level
-      // reference. Post-fix: each call owns its array.
-      styles({
-        theme: { backgroundColor: 'blue', padding: 8 },
-        css: lazyCss as never,
-        rootSize: 16,
-      })
-
-      const r1FragmentsAfter = (r1 as { values: unknown[] }).values[0]
-      const r1LenAfter = Array.isArray(r1FragmentsAfter) ? r1FragmentsAfter.length : -1
-      expect(r1LenAfter).toBe(r1LenBefore)
-    })
-
-    it('two results from sequential calls have INDEPENDENT fragments arrays', () => {
-      const r1 = styles({ theme: { color: 'red' }, css: lazyCss as never, rootSize: 16 })
-      const r2 = styles({ theme: { backgroundColor: 'blue' }, css: lazyCss as never, rootSize: 16 })
-
-      const r1Fragments = (r1 as { values: unknown[] }).values[0]
-      const r2Fragments = (r2 as { values: unknown[] }).values[0]
-      // Different array identities — r1 is not r2.
-      expect(r1Fragments).not.toBe(r2Fragments)
-      // Both populated.
-      expect(Array.isArray(r1Fragments) && r1Fragments.length).toBeGreaterThan(0)
-      expect(Array.isArray(r2Fragments) && r2Fragments.length).toBeGreaterThan(0)
-    })
-  })

package/src/__tests__/unistyle.browser.test.tsx

@@ -1,169 +0,0 @@
-/** @jsxImportSource @pyreon/core */
-import { h } from '@pyreon/core'
-import { css, sheet, styled } from '@pyreon/styler'
-import { mountInBrowser } from '@pyreon/test-utils/browser'
-import { afterEach, describe, expect, it } from 'vitest'
-import { enrichTheme } from '../enrichTheme'
-import Provider from '../context'
-import { makeItResponsive } from '../responsive'
-import { stripUnit, value } from '../units'
-
-// Real-Chromium smoke for @pyreon/unistyle.
-//
-// These tests assert real browser behavior for responsive utilities —
-// things that happy-dom cannot observe because it does not resolve
-// @media queries or compute styles.
-//
-// What the suite locks in:
-//   1. `enrichTheme` attaches sorted breakpoints + media helpers to
-//      `theme.__PYREON__`.
-//   2. The generated media-query helper emits `@media (min-width: XXem)`
-//      CSS that Chromium resolves — a breakpoint under the current
-//      viewport applies, one above does not.
-//   3. `<Provider>` provides the enriched theme so `styled()` components
-//      resolve `p.theme` and interpolation functions see breakpoint data.
-//   4. `value()` and `stripUnit()` produce the same strings in Node and
-//      the browser (pure math, but we lock parity).
-
-describe('@pyreon/unistyle in real browser', () => {
-  afterEach(() => {
-    sheet.clearCache()
-  })
-
-  it('enrichTheme attaches sortedBreakpoints and media helpers', () => {
-    const enriched = enrichTheme({
-      rootSize: 16,
-      breakpoints: { xs: 0, sm: 576, md: 768 },
-    })
-    expect(enriched.__PYREON__.sortedBreakpoints).toEqual(['xs', 'sm', 'md'])
-    expect(typeof enriched.__PYREON__.media?.xs).toBe('function')
-    expect(typeof enriched.__PYREON__.media?.sm).toBe('function')
-    expect(typeof enriched.__PYREON__.media?.md).toBe('function')
-  })
-
-  it('media helper emits @media rule that Chromium resolves at the current viewport', () => {
-    // Viewport is ~1280px in chromium headless — use a tiny breakpoint
-    // that is definitely below, and a huge one definitely above.
-    const w = window.innerWidth
-    expect(w).toBeGreaterThan(100)
-
-    const Under = styled('div')`
-      color: rgb(0, 0, 0);
-      @media (min-width: 50px) {
-        color: rgb(255, 0, 0);
-      }
-    `
-    const Over = styled('div')`
-      color: rgb(0, 0, 0);
-      @media (min-width: 99999px) {
-        color: rgb(0, 0, 255);
-      }
-    `
-    const u = mountInBrowser(h(Under, { id: 'u' }))
-    const o = mountInBrowser(h(Over, { id: 'o' }))
-    expect(getComputedStyle(u.container.querySelector<HTMLElement>('#u')!).color).toBe(
-      'rgb(255, 0, 0)',
-    )
-    expect(getComputedStyle(o.container.querySelector<HTMLElement>('#o')!).color).toBe(
-      'rgb(0, 0, 0)',
-    )
-    u.unmount()
-    o.unmount()
-  })
-
-  it('Provider enriches theme and styled() reads it via theme prop (no fallback — breaks loudly)', () => {
-    // Use a non-default sentinel color: if Provider/styler integration is
-    // broken, the interpolation receives `undefined`, the rule becomes
-    // `color: undefined;` (invalid), and Chromium computes the default
-    // black (rgb(0, 0, 0)) — the assertion fails immediately. No silent
-    // fallback hides a regression.
-    const theme = { rootSize: 16, breakpoints: { xs: 0, md: 768 }, tint: 'rgb(0, 200, 0)' }
-
-    const Themed = styled('div')<{ theme?: typeof theme }>`
-      ${(p) => css`
-        color: ${(p.theme as typeof theme).tint};
-      `}
-    `
-    const { container, unmount } = mountInBrowser(
-      h(Provider, { theme }, h(Themed, { id: 'p' })),
-    )
-    const el = container.querySelector<HTMLElement>('#p')!
-    expect(getComputedStyle(el).color).toBe('rgb(0, 200, 0)')
-    unmount()
-  })
-
-  it('makeItResponsive resolves a breakpoint-object responsive prop via @media at the current viewport', () => {
-    // The actual unistyle hot path: array/object responsive values flow
-    // through normalizeTheme → transformTheme → optimizeTheme and emit
-    // one `@media (min-width: …em)` rule per breakpoint. This test
-    // exercises that pipeline end-to-end against real Chromium.
-    const theme = enrichTheme({
-      rootSize: 16,
-      // xs=0 always applies; xl=99999 never applies at chromium default
-      // viewport (~1280). We expect xs to win, xl to be ignored.
-      breakpoints: { xs: 0, xl: 99999 },
-    })
-
-    const styles = ({ css: cssFn, theme: t }: { css: typeof css; theme: any }) => cssFn`
-      color: ${t.tone};
-    `
-    const responsive = makeItResponsive({ key: '$colors', styles, css })
-
-    const ResponsiveBox = styled('div')<{ $colors: Record<string, string>; theme?: typeof theme }>`
-      ${(p) => responsive(p as any)};
-    `
-
-    const { container, unmount } = mountInBrowser(
-      h(
-        Provider,
-        { theme },
-        h(ResponsiveBox, {
-          id: 'r',
-          // Outer keys are property names; inner keys are breakpoints.
-          $colors: { tone: { xs: 'rgb(255, 0, 0)', xl: 'rgb(0, 0, 255)' } },
-        }),
-      ),
-    )
-    const el = container.querySelector<HTMLElement>('#r')!
-    expect(window.innerWidth).toBeLessThan(99999)
-    expect(getComputedStyle(el).color).toBe('rgb(255, 0, 0)')
-    unmount()
-  })
-
-  it('makeItResponsive resolves a breakpoint-array responsive prop (mobile-first cascade)', () => {
-    const theme = enrichTheme({
-      rootSize: 16,
-      breakpoints: { xs: 0, sm: 99999 },
-    })
-
-    const styles = ({ css: cssFn, theme: t }: { css: typeof css; theme: any }) => cssFn`
-      padding: ${t.pad};
-    `
-    const responsive = makeItResponsive({ key: '$pad', styles, css })
-
-    const Padded = styled('div')<{ $pad: any; theme?: typeof theme }>`
-      ${(p) => responsive(p as any)};
-    `
-
-    const { container, unmount } = mountInBrowser(
-      h(
-        Provider,
-        { theme },
-        h(Padded, { id: 'p', $pad: { pad: ['8px', '32px'] } }),
-      ),
-    )
-    const el = container.querySelector<HTMLElement>('#p')!
-    // xs (always-on) should apply 8px; sm (99999) does not apply.
-    expect(getComputedStyle(el).padding).toBe('8px')
-    unmount()
-  })
-
-  it('value() and stripUnit() behave identically in the browser', () => {
-    expect(value(16)).toBe('1rem')
-    expect(value('16px')).toBe('1rem')
-    expect(value('50%')).toBe('50%')
-    expect(value(null)).toBeNull()
-    expect(stripUnit('24px', true)).toEqual([24, 'px'])
-    expect(stripUnit('2.5rem', true)).toEqual([2.5, 'rem'])
-  })
-})

package/src/__tests__/units.test.ts

@@ -1,134 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import stripUnit from '../units/stripUnit'
-import value from '../units/value'
-import values from '../units/values'
-
-describe('stripUnit', () => {
-  it('strips px unit and returns number', () => {
-    expect(stripUnit('16px')).toBe(16)
-  })
-
-  it('strips rem unit and returns number', () => {
-    expect(stripUnit('1.5rem')).toBe(1.5)
-  })
-
-  it('strips em unit and returns number', () => {
-    expect(stripUnit('2em')).toBe(2)
-  })
-
-  it('strips % and returns number', () => {
-    expect(stripUnit('50%')).toBe(50)
-  })
-
-  it('handles negative values', () => {
-    expect(stripUnit('-10px')).toBe(-10)
-  })
-
-  it('handles decimal values', () => {
-    expect(stripUnit('0.5rem')).toBe(0.5)
-  })
-
-  it('returns original string for non-numeric strings', () => {
-    expect(stripUnit('auto')).toBe('auto')
-  })
-
-  it('passes through numbers', () => {
-    expect(stripUnit(42)).toBe(42)
-  })
-
-  describe('with unitReturn=true', () => {
-    it('returns [value, unit] tuple for px', () => {
-      expect(stripUnit('16px', true)).toEqual([16, 'px'])
-    })
-
-    it('returns [value, unit] tuple for rem', () => {
-      expect(stripUnit('2rem', true)).toEqual([2, 'rem'])
-    })
-
-    it('returns [value, unit] tuple for %', () => {
-      expect(stripUnit('50%', true)).toEqual([50, '%'])
-    })
-
-    it('returns [value, unit] tuple for em', () => {
-      expect(stripUnit('1.5em', true)).toEqual([1.5, 'em'])
-    })
-
-    it('returns [value, empty string] for unitless number string', () => {
-      expect(stripUnit('42', true)).toEqual([42, ''])
-    })
-
-    it('returns [number, undefined] for number input', () => {
-      expect(stripUnit(42, true)).toEqual([42, undefined])
-    })
-  })
-})
-
-describe('value', () => {
-  it('returns string values as-is', () => {
-    expect(value('50%')).toBe('50%')
-    expect(value('2em')).toBe('2em')
-    expect(value('100vh')).toBe('100vh')
-  })
-
-  it('returns 0 as-is', () => {
-    expect(value(0)).toBe(0)
-  })
-
-  it('returns null for null/undefined', () => {
-    expect(value(null)).toBeNull()
-    expect(value(undefined)).toBeNull()
-  })
-
-  it('converts unitless numbers to rem by default (divides by rootSize)', () => {
-    // 16 / 16 = 1rem
-    expect(value(16)).toBe('1rem')
-    // 32 / 16 = 2rem
-    expect(value(32)).toBe('2rem')
-  })
-
-  it('converts px values to rem', () => {
-    expect(value('16px')).toBe('1rem')
-    expect(value('32px')).toBe('2rem')
-  })
-
-  it('respects custom rootSize', () => {
-    // 20 / 10 = 2rem
-    expect(value(20, 10)).toBe('2rem')
-  })
-
-  it('respects outputUnit=px for unitless numbers', () => {
-    expect(value(16, 16, 'px')).toBe('16px')
-  })
-})
-
-describe('values', () => {
-  it('returns the first defined value converted', () => {
-    expect(values([undefined, null, 16])).toBe('1rem')
-  })
-
-  it('returns the first value if defined', () => {
-    expect(values([32, 16])).toBe('2rem')
-  })
-
-  it('passes through string values', () => {
-    expect(values(['50%'])).toBe('50%')
-  })
-
-  it('returns null when all values are null/undefined', () => {
-    expect(values([undefined, null])).toBeNull()
-  })
-
-  it('returns 0 for zero value', () => {
-    expect(values([0])).toBe(0)
-  })
-
-  it('joins array values with spaces', () => {
-    const result = values([[16, 32]])
-    expect(result).toContain('1rem')
-    expect(result).toContain('2rem')
-  })
-
-  it('respects rootSize parameter', () => {
-    expect(values([20], 10)).toBe('2rem')
-  })
-})

package/src/context.tsx

@@ -1,44 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { nativeCompat, provide } from '@pyreon/core'
-import { ThemeContext } from '@pyreon/styler'
-import { Provider as CoreProvider, context } from '@pyreon/ui-core'
-import type { PyreonTheme } from './enrichTheme'
-import { enrichTheme } from './enrichTheme'
-
-export type TProvider = {
-  theme: PyreonTheme
-  children?: VNode | null
-}
-
-/**
- * @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
- *
- * Unistyle Provider — wraps the core Provider and enriches the theme
- * with pre-computed sorted breakpoints and media-query tagged-template
- * helpers consumed by `makeItResponsive`.
- *
- * @deprecated Prefer `<PyreonUI theme={theme} mode="light">` which handles
- * all three context layers (styler, core, mode) in one component.
- */
-function Provider(props: TProvider): VNode | null {
-  const { theme, children } = props
-
-  const enrichedTheme = enrichTheme(theme)
-
-  // Provide enriched theme to both the ui-core context (for rocketstyle/elements)
-  // AND the styler ThemeContext (for styled() components and makeItResponsive).
-  // Without this, styled() components receive an empty theme and all responsive
-  // styles are skipped (@media queries produce NaN values).
-  // ThemeContext is a ReactiveContext — provide an accessor.
-  provide(ThemeContext, () => enrichedTheme)
-
-  return CoreProvider({ theme: enrichedTheme, children }) as VNode | null
-}
-
-// Mark as native — invoked by PyreonUI internally; needs Pyreon's setup
-// frame for provide(ThemeContext, ...) to reach descendants.
-nativeCompat(Provider)
-
-export { context }
-
-export default Provider

package/src/enrichTheme.ts

@@ -1,42 +0,0 @@
-import { config, isEmpty } from '@pyreon/ui-core'
-import { createMediaQueries, sortBreakpoints } from './responsive'
-
-export type PyreonTheme = {
-  rootSize?: number
-  breakpoints?: Record<string, number>
-  __PYREON__?: {
-    sortedBreakpoints: string[] | undefined
-    media: Record<string, (...args: any[]) => any> | undefined
-  }
-} & Record<string, unknown>
-
-/**
- * Enrich a theme with pre-computed responsive utilities.
- * Adds sorted breakpoints and media-query tagged-template helpers
- * to `theme.__PYREON__` for consumption by `makeItResponsive`.
- *
- * This is a pure function — safe to call outside of component context.
- *
- * @example
- * const enriched = enrichTheme({ rootSize: 16, breakpoints: { xs: 0, sm: 576, md: 768 } })
- * enriched.__PYREON__.sortedBreakpoints // ['xs', 'sm', 'md']
- * enriched.__PYREON__.media.sm          // tagged-template for @media (min-width: 36em)
- */
-export function enrichTheme<T extends PyreonTheme>(
-  theme: T,
-): T & Required<Pick<PyreonTheme, '__PYREON__'>> {
-  const { breakpoints, rootSize = 16 } = theme
-
-  const sortedBreakpoints =
-    breakpoints && !isEmpty(breakpoints) ? sortBreakpoints(breakpoints) : undefined
-
-  const media =
-    breakpoints && !isEmpty(breakpoints)
-      ? createMediaQueries({ breakpoints, css: config.css, rootSize })
-      : undefined
-
-  return {
-    ...theme,
-    __PYREON__: { sortedBreakpoints, media },
-  }
-}

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 } }