@pyreon/unistyle 0.11.1 → 0.11.2

package/src/__tests__/units.test.ts

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,34 @@
+import type { VNode } from "@pyreon/core"
+import { 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
+}
+
+/**
+ * Unistyle Provider — wraps the core Provider and enriches the theme
+ * with pre-computed sorted breakpoints and media-query tagged-template
+ * helpers consumed by `makeItResponsive`.
+ */
+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).
+  provide(ThemeContext, enrichedTheme)
+
+  return CoreProvider({ theme: enrichedTheme, children }) as VNode | null
+}
+
+export { context }
+
+export default Provider

package/src/enrichTheme.ts

@@ -0,0 +1,42 @@
+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/index.ts

@@ -0,0 +1,89 @@
+import type { TProvider } from "./context"
+import Provider, { context } from "./context"
+import type { PyreonTheme } from "./enrichTheme"
+import { enrichTheme } from "./enrichTheme"
+import type {
+  Breakpoints,
+  CreateMediaQueries,
+  MakeItResponsive,
+  MakeItResponsiveStyles,
+  NormalizeTheme,
+  SortBreakpoints,
+  TransformTheme,
+} from "./responsive"
+import {
+  breakpoints,
+  createMediaQueries,
+  makeItResponsive,
+  normalizeTheme,
+  sortBreakpoints,
+  transformTheme,
+} from "./responsive"
+import type {
+  AlignContent,
+  AlignContentAlignXKeys,
+  AlignContentAlignYKeys,
+  AlignContentDirectionKeys,
+  ExtendCss,
+  Styles,
+  StylesTheme,
+} from "./styles"
+import {
+  ALIGN_CONTENT_DIRECTION,
+  ALIGN_CONTENT_MAP_X,
+  ALIGN_CONTENT_MAP_Y,
+  alignContent,
+  extendCss,
+  styles,
+} from "./styles"
+import type { BrowserColors, Color, Defaults, PropertyValue, UnitValue } from "./types"
+import type { StripUnit, Value, Values } from "./units"
+import { stripUnit, value, values } from "./units"
+
+export type {
+  AlignContent,
+  AlignContentAlignXKeys,
+  AlignContentAlignYKeys,
+  AlignContentDirectionKeys,
+  Breakpoints,
+  BrowserColors,
+  Color,
+  CreateMediaQueries,
+  Defaults,
+  ExtendCss,
+  MakeItResponsive,
+  MakeItResponsiveStyles,
+  NormalizeTheme,
+  PropertyValue,
+  PyreonTheme,
+  SortBreakpoints,
+  StripUnit,
+  Styles,
+  StylesTheme,
+  TProvider,
+  TransformTheme,
+  UnitValue,
+  Value,
+  Values,
+}
+
+export {
+  ALIGN_CONTENT_DIRECTION,
+  ALIGN_CONTENT_MAP_X,
+  ALIGN_CONTENT_MAP_Y,
+  alignContent,
+  breakpoints,
+  context,
+  createMediaQueries,
+  enrichTheme,
+  extendCss,
+  makeItResponsive,
+  normalizeTheme,
+  Provider,
+  sortBreakpoints,
+  stripUnit,
+  styles,
+  transformTheme,
+  value,
+  values,
+}

package/src/responsive/breakpoints.ts

@@ -0,0 +1,15 @@
+const breakpoints = {
+  rootSize: 16,
+  breakpoints: {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1440,
+  },
+} as const
+
+export type Breakpoints = typeof breakpoints
+
+export default breakpoints

package/src/responsive/createMediaQueries.ts

@@ -0,0 +1,43 @@
+type Css = (strings: TemplateStringsArray, ...values: any[]) => any
+
+export type CreateMediaQueries = <
+  B extends Record<string, number>,
+  R extends number,
+  C extends Css,
+>(props: {
+  breakpoints: B
+  rootSize: R
+  css: C
+}) => Record<keyof B, (...args: any[]) => string>
+
+// Implementation uses Record<string, ...> which is widened from Record<keyof B, ...>;
+// the generic constraint on CreateMediaQueries ensures callers get the narrower type.
+const createMediaQueries: CreateMediaQueries = ((props: {
+  breakpoints: Record<string, number>
+  rootSize: number
+  css: Css
+}) => {
+  const { breakpoints, rootSize, css } = props
+
+  return Object.keys(breakpoints).reduce<
+    Record<string, (...args: [TemplateStringsArray, ...any[]]) => string>
+  >((acc, key) => {
+    const breakpointValue = breakpoints[key]
+
+    if (breakpointValue === 0) {
+      acc[key] = (...args: [TemplateStringsArray, ...any[]]) => css(...args)
+    } else if (breakpointValue != null) {
+      const emSize = breakpointValue / rootSize
+
+      acc[key] = (...args: [TemplateStringsArray, ...any[]]) => css`
+          @media only screen and (min-width: ${emSize}em) {
+            ${css(...args)};
+          }
+        `
+    }
+
+    return acc
+  }, {})
+}) as CreateMediaQueries
+
+export default createMediaQueries

package/src/responsive/index.ts

@@ -0,0 +1,14 @@
+export type { Breakpoints } from "./breakpoints"
+export { default as breakpoints } from "./breakpoints"
+export type { CreateMediaQueries } from "./createMediaQueries"
+export { default as createMediaQueries } from "./createMediaQueries"
+export type { MakeItResponsive, MakeItResponsiveStyles } from "./makeItResponsive"
+export { default as makeItResponsive } from "./makeItResponsive"
+export type { NormalizeTheme } from "./normalizeTheme"
+export { default as normalizeTheme } from "./normalizeTheme"
+export type { OptimizeTheme } from "./optimizeTheme"
+export { default as optimizeTheme } from "./optimizeTheme"
+export type { SortBreakpoints } from "./sortBreakpoints"
+export { default as sortBreakpoints } from "./sortBreakpoints"
+export type { TransformTheme } from "./transformTheme"
+export { default as transformTheme } from "./transformTheme"

package/src/responsive/makeItResponsive.ts

@@ -0,0 +1,118 @@
+import { isEmpty } from "@pyreon/ui-core"
+import type createMediaQueries from "./createMediaQueries"
+import normalizeTheme from "./normalizeTheme"
+import optimizeTheme from "./optimizeTheme"
+import type sortBreakpoints from "./sortBreakpoints"
+import transformTheme from "./transformTheme"
+
+type Css = (strings: TemplateStringsArray, ...values: any[]) => any
+
+type CustomTheme = Record<string, Record<string, unknown> | number | string | boolean>
+
+type Theme = Partial<{
+  rootSize: number
+  breakpoints: Record<string, number>
+  __PYREON__: Partial<{
+    media: ReturnType<typeof createMediaQueries>
+    sortedBreakpoints: ReturnType<typeof sortBreakpoints>
+  }>
+}> &
+  CustomTheme
+
+export type MakeItResponsiveStyles<T extends Partial<Record<string, any>> = any> = ({
+  theme,
+  css,
+  rootSize,
+  globalTheme,
+}: {
+  theme: T
+  css: Css
+  rootSize?: number | undefined
+  globalTheme?: Record<string, any> | undefined
+}) => ReturnType<typeof css> | string | any
+
+export type MakeItResponsive = ({
+  theme,
+  key,
+  css,
+  styles,
+  normalize,
+}: {
+  theme?: CustomTheme
+  key?: string
+  css: any
+  styles: MakeItResponsiveStyles
+  normalize?: boolean
+}) => (props: { theme?: Theme; [prop: string]: any }) => any
+
+const themeCache = new WeakMap<
+  object,
+  { breakpoints: unknown; optimized: Record<string, Record<string, unknown>> }
+>()
+
+const makeItResponsive: MakeItResponsive =
+  ({ theme: customTheme, key = "", css, styles, normalize = true }) =>
+  ({ theme = {}, ...props }) => {
+    const internalTheme = customTheme || props[key]
+
+    if (isEmpty(internalTheme)) return ""
+
+    const { rootSize, breakpoints, __PYREON__, ...restTheme } = theme as Theme
+
+    const renderStyles = (styleTheme: Record<string, unknown>): ReturnType<typeof styles> =>
+      styles({ theme: styleTheme, css, rootSize, globalTheme: restTheme })
+
+    if (isEmpty(breakpoints) || isEmpty(__PYREON__)) {
+      return css`
+        ${renderStyles(internalTheme)}
+      `
+    }
+
+    // isEmpty guard above ensures __PYREON__ is defined here
+    const { media, sortedBreakpoints } = __PYREON__ as NonNullable<typeof __PYREON__>
+
+    let optimizedTheme: Record<string, Record<string, unknown>>
+
+    const cached = themeCache.get(internalTheme)
+    if (cached && cached.breakpoints === sortedBreakpoints) {
+      optimizedTheme = cached.optimized
+    } else {
+      let helperTheme = internalTheme
+
+      if (normalize) {
+        helperTheme = normalizeTheme({
+          theme: internalTheme,
+          breakpoints: sortedBreakpoints,
+        })
+      }
+
+      const transformedTheme = transformTheme({
+        theme: helperTheme,
+        breakpoints: sortedBreakpoints,
+      })
+
+      optimizedTheme = optimizeTheme({
+        theme: transformedTheme,
+        breakpoints: sortedBreakpoints,
+      })
+
+      themeCache.set(internalTheme, {
+        breakpoints: sortedBreakpoints,
+        optimized: optimizedTheme,
+      })
+    }
+
+    return sortedBreakpoints.map((item: string) => {
+      const breakpointTheme = optimizedTheme[item]
+
+      if (!breakpointTheme || !media) return ""
+
+      const result = renderStyles(breakpointTheme)
+
+      return (media as Record<string, any>)[item]`
+        ${result};
+      `
+    })
+  }
+
+export default makeItResponsive

package/src/responsive/normalizeTheme.ts

@@ -0,0 +1,65 @@
+type AssignToBreakpointKey = (
+  breakpoints: string[],
+) => (
+  valueFn: (breakpoint: string, i: number, bps: string[], result: Record<string, unknown>) => void,
+) => Record<string, unknown>
+
+const assignToBreakpointKey: AssignToBreakpointKey = (breakpoints) => (valueFn) => {
+  const result: Record<string, unknown> = {}
+  breakpoints.forEach((item, i) => {
+    result[item] = valueFn(item, i, breakpoints, result)
+  })
+  return result
+}
+
+const handleArrayCb = (arr: (string | number)[]) => (_: unknown, i: number) => {
+  const currentValue = arr[i]
+  const lastValue = arr[arr.length - 1]
+  return currentValue ?? lastValue
+}
+
+const handleObjectCb =
+  (obj: Record<string, unknown>) =>
+  (bp: string, i: number, bps: string[], res: Record<string, unknown>) => {
+    const currentValue = obj[bp]
+    const prevBp = bps[i - 1]
+    const previousValue = prevBp != null ? res[prevBp] : undefined
+    if (currentValue != null) return currentValue
+    return previousValue
+  }
+
+const handleValueCb = (value: unknown) => () => value
+
+const shouldNormalize = (props: Record<string, any>) =>
+  Object.values(props).some((item) => typeof item === "object" || Array.isArray(item))
+
+export type NormalizeTheme = ({
+  theme,
+  breakpoints,
+}: {
+  theme: Record<string, unknown>
+  breakpoints: string[]
+}) => Record<string, unknown>
+
+const normalizeTheme: NormalizeTheme = ({ theme, breakpoints }) => {
+  if (!shouldNormalize(theme)) return theme
+
+  const getBpValues = assignToBreakpointKey(breakpoints)
+  const result: Record<string, unknown> = {}
+
+  Object.entries(theme).forEach(([key, value]) => {
+    if (value == null) return
+
+    if (Array.isArray(value)) {
+      result[key] = getBpValues(handleArrayCb(value as (string | number)[]))
+    } else if (typeof value === "object") {
+      result[key] = getBpValues(handleObjectCb(value as Record<string, any>))
+    } else {
+      result[key] = getBpValues(handleValueCb(value))
+    }
+  })
+
+  return result
+}
+
+export default normalizeTheme

package/src/responsive/optimizeTheme.ts

@@ -0,0 +1,39 @@
+export type OptimizeTheme = ({
+  theme,
+  breakpoints,
+}: {
+  theme: Record<string, Record<string, unknown>>
+  breakpoints: string[]
+}) => Record<string, Record<string, unknown>>
+
+const shallowEqual = (
+  a: Record<string, unknown> | undefined,
+  b: Record<string, unknown> | undefined,
+): boolean => {
+  if (a === b) return true
+  if (!a || !b) return false
+  const keysA = Object.keys(a)
+  const keysB = Object.keys(b)
+  if (keysA.length !== keysB.length) return false
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false
+  }
+  return true
+}
+
+const optimizeTheme: OptimizeTheme = ({ theme, breakpoints }) => {
+  const result: Record<string, Record<string, unknown>> = {}
+
+  for (let i = 0; i < breakpoints.length; i++) {
+    const key = breakpoints[i] as string
+    const previousBreakpoint = breakpoints[i - 1] as string
+    const current = theme[key]
+    if (current && (i === 0 || !shallowEqual(theme[previousBreakpoint], current))) {
+      result[key] = current
+    }
+  }
+
+  return result
+}
+
+export default optimizeTheme

package/src/responsive/sortBreakpoints.ts

@@ -0,0 +1,10 @@
+export type SortBreakpoints = <T extends Record<string, number>>(breakpoints: T) => (keyof T)[]
+
+const sortBreakpoints: SortBreakpoints = (breakpoints) => {
+  const result = Object.keys(breakpoints).sort(
+    (a, b) => (breakpoints[a] ?? 0) - (breakpoints[b] ?? 0),
+  )
+  return result
+}
+
+export default sortBreakpoints

package/src/responsive/transformTheme.ts

@@ -0,0 +1,48 @@
+import { isEmpty, set } from "@pyreon/ui-core"
+
+const removeUnexpectedKeys = (obj: Record<string, unknown>, keys: string[]) => {
+  const result: Record<string, unknown> = {}
+  keys.forEach((bp) => {
+    const value = obj[bp]
+    if (value) {
+      result[bp] = value
+    }
+  })
+  return result
+}
+
+export type TransformTheme = ({
+  theme,
+  breakpoints,
+}: {
+  theme: Record<string, unknown>
+  breakpoints: string[]
+}) => any
+
+const transformTheme: TransformTheme = ({ theme, breakpoints }) => {
+  const result = {}
+
+  if (isEmpty(theme) || isEmpty(breakpoints)) return result
+
+  Object.entries(theme).forEach(([key, value]) => {
+    if (Array.isArray(value) && value.length > 0) {
+      value.forEach((child, i) => {
+        const indexBreakpoint = breakpoints[i]
+        if (indexBreakpoint == null) return
+        set(result, [indexBreakpoint, key], child)
+      })
+    } else if (typeof value === "object" && value !== null) {
+      Object.entries(value).forEach(([childKey, childValue]) => {
+        set(result, [childKey, key], childValue)
+      })
+    } else if (value != null) {
+      const firstBreakpoint = breakpoints[0]
+      if (firstBreakpoint == null) return
+      set(result, [firstBreakpoint, key], value)
+    }
+  })
+
+  return removeUnexpectedKeys(result, breakpoints)
+}
+
+export default transformTheme