@pyreon/unistyle 0.11.5 → 0.11.6

package/src/__tests__/styles.test.ts

@@ -1,8 +1,8 @@
-import { describe, expect, it } from "vitest"
-import styles from "../styles/styles/index"
+import { describe, expect, it } from 'vitest'
+import styles from '../styles/styles/index'
 
 const mockCss = (strings: TemplateStringsArray, ...vals: any[]) => {
-  let r = ""
+  let r = ''
   for (let i = 0; i < strings.length; i++) {
     r += strings[i]
     if (i < vals.length) r += String(vals[i])
@@ -10,110 +10,110 @@ const mockCss = (strings: TemplateStringsArray, ...vals: any[]) => {
   return r
 }
 
-describe("styles", () => {
-  it("empty theme returns empty string (all fragments are empty)", () => {
+describe('styles', () => {
+  it('empty theme returns empty string (all fragments are empty)', () => {
     const result = styles({ theme: {}, css: mockCss, rootSize: 16 })
-    expect(result).toBe("")
+    expect(result).toBe('')
   })
 
-  it("single simple property: color", () => {
-    const result = styles({ theme: { color: "red" }, css: mockCss, rootSize: 16 })
-    expect(result).toContain("color: red;")
+  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('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", () => {
+  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")
+    expect(result).toContain('width:')
+    expect(result).toContain('10rem')
   })
 
-  it("convert property: fontSize", () => {
+  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")
+    expect(result).toContain('font-size:')
+    expect(result).toContain('2rem')
   })
 
-  it("edge property: margin generates margin shorthand", () => {
+  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")
+    expect(result).toContain('margin:')
+    expect(result).toContain('1rem')
   })
 
-  it("edge property: padding", () => {
+  it('edge property: padding', () => {
     const result = styles({ theme: { padding: 8 }, css: mockCss, rootSize: 16 })
-    expect(result).toContain("padding:")
-    expect(result).toContain("0.5rem")
+    expect(result).toContain('padding:')
+    expect(result).toContain('0.5rem')
   })
 
-  it("border radius: borderRadius generates border-radius", () => {
+  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")
+    expect(result).toContain('border-radius:')
+    expect(result).toContain('0.5rem')
   })
 
-  it("multiple properties combined", () => {
+  it('multiple properties combined', () => {
     const result = styles({
-      theme: { color: "blue", display: "flex", fontSize: 16 },
+      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;")
+    expect(result).toContain('color: blue;')
+    expect(result).toContain('display: flex;')
+    expect(result).toContain('font-size: 1rem;')
   })
 
-  it("special property: fullScreen", () => {
+  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;")
+    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", () => {
+  it('special property: fullScreen false produces no output', () => {
     const result = styles({ theme: { fullScreen: false }, css: mockCss, rootSize: 16 })
-    expect(result).not.toContain("position: fixed;")
+    expect(result).not.toContain('position: fixed;')
   })
 
-  it("special property: backgroundImage", () => {
+  it('special property: backgroundImage', () => {
     const result = styles({
-      theme: { backgroundImage: "https://example.com/img.png" },
+      theme: { backgroundImage: 'https://example.com/img.png' },
       css: mockCss,
       rootSize: 16,
     })
-    expect(result).toContain("background-image: url(https://example.com/img.png);")
+    expect(result).toContain('background-image: url(https://example.com/img.png);')
   })
 
-  it("special property: hideEmpty", () => {
+  it('special property: hideEmpty', () => {
     const result = styles({ theme: { hideEmpty: true }, css: mockCss, rootSize: 16 })
-    expect(result).toContain("&:empty { display: none; }")
+    expect(result).toContain('&:empty { display: none; }')
   })
 
-  it("special property: clearFix", () => {
+  it('special property: clearFix', () => {
     const result = styles({ theme: { clearFix: true }, css: mockCss, rootSize: 16 })
     expect(result).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('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", () => {
+  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")
+    expect(result).toContain('font-size:')
+    expect(result).toContain('2rem')
   })
 })

package/src/__tests__/units.test.ts

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

package/src/context.tsx

@@ -1,9 +1,9 @@
-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"
+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
@@ -11,9 +11,14 @@ export type TProvider = {
 }
 
 /**
+ * @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

package/src/enrichTheme.ts

@@ -1,5 +1,5 @@
-import { config, isEmpty } from "@pyreon/ui-core"
-import { createMediaQueries, sortBreakpoints } from "./responsive"
+import { config, isEmpty } from '@pyreon/ui-core'
+import { createMediaQueries, sortBreakpoints } from './responsive'
 
 export type PyreonTheme = {
   rootSize?: number
@@ -24,7 +24,7 @@ export type PyreonTheme = {
  */
 export function enrichTheme<T extends PyreonTheme>(
   theme: T,
-): T & Required<Pick<PyreonTheme, "__PYREON__">> {
+): T & Required<Pick<PyreonTheme, '__PYREON__'>> {
   const { breakpoints, rootSize = 16 } = theme
 
   const sortedBreakpoints =

package/src/index.ts

@@ -1,7 +1,7 @@
-import type { TProvider } from "./context"
-import Provider, { context } from "./context"
-import type { PyreonTheme } from "./enrichTheme"
-import { enrichTheme } from "./enrichTheme"
+import type { TProvider } from './context'
+import Provider, { context } from './context'
+import type { PyreonTheme } from './enrichTheme'
+import { enrichTheme } from './enrichTheme'
 import type {
   Breakpoints,
   CreateMediaQueries,
@@ -10,7 +10,7 @@ import type {
   NormalizeTheme,
   SortBreakpoints,
   TransformTheme,
-} from "./responsive"
+} from './responsive'
 import {
   breakpoints,
   createMediaQueries,
@@ -18,7 +18,7 @@ import {
   normalizeTheme,
   sortBreakpoints,
   transformTheme,
-} from "./responsive"
+} from './responsive'
 import type {
   AlignContent,
   AlignContentAlignXKeys,
@@ -27,7 +27,7 @@ import type {
   ExtendCss,
   Styles,
   StylesTheme,
-} from "./styles"
+} from './styles'
 import {
   ALIGN_CONTENT_DIRECTION,
   ALIGN_CONTENT_MAP_X,
@@ -35,10 +35,10 @@ import {
   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"
+} 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,

package/src/responsive/createMediaQueries.ts

@@ -30,10 +30,10 @@ const createMediaQueries: CreateMediaQueries = ((props: {
       const emSize = breakpointValue / rootSize
 
       acc[key] = (...args: [TemplateStringsArray, ...any[]]) => css`
-          @media only screen and (min-width: ${emSize}em) {
-            ${css(...args)};
-          }
-        `
+        @media only screen and (min-width: ${emSize}em) {
+          ${css(...args)};
+        }
+      `
     }
 
     return acc

package/src/responsive/index.ts

@@ -1,14 +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"
+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

@@ -1,9 +1,9 @@
-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"
+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
 
@@ -51,11 +51,11 @@ const themeCache = new WeakMap<
 >()
 
 const makeItResponsive: MakeItResponsive =
-  ({ theme: customTheme, key = "", css, styles, normalize = true }) =>
+  ({ theme: customTheme, key = '', css, styles, normalize = true }) =>
   ({ theme = {}, ...props }) => {
     const internalTheme = customTheme || props[key]
 
-    if (isEmpty(internalTheme)) return ""
+    if (isEmpty(internalTheme)) return ''
 
     const { rootSize, breakpoints, __PYREON__, ...restTheme } = theme as Theme
 
@@ -105,7 +105,7 @@ const makeItResponsive: MakeItResponsive =
     return sortedBreakpoints.map((item: string) => {
       const breakpointTheme = optimizedTheme[item]
 
-      if (!breakpointTheme || !media) return ""
+      if (!breakpointTheme || !media) return ''
 
       const result = renderStyles(breakpointTheme)
 

package/src/responsive/normalizeTheme.ts

@@ -31,7 +31,7 @@ const handleObjectCb =
 const handleValueCb = (value: unknown) => () => value
 
 const shouldNormalize = (props: Record<string, any>) =>
-  Object.values(props).some((item) => typeof item === "object" || Array.isArray(item))
+  Object.values(props).some((item) => typeof item === 'object' || Array.isArray(item))
 
 export type NormalizeTheme = ({
   theme,
@@ -52,7 +52,7 @@ const normalizeTheme: NormalizeTheme = ({ theme, breakpoints }) => {
 
     if (Array.isArray(value)) {
       result[key] = getBpValues(handleArrayCb(value as (string | number)[]))
-    } else if (typeof value === "object") {
+    } else if (typeof value === 'object') {
       result[key] = getBpValues(handleObjectCb(value as Record<string, any>))
     } else {
       result[key] = getBpValues(handleValueCb(value))

package/src/responsive/transformTheme.ts

@@ -1,4 +1,4 @@
-import { isEmpty, set } from "@pyreon/ui-core"
+import { isEmpty, set } from '@pyreon/ui-core'
 
 const removeUnexpectedKeys = (obj: Record<string, unknown>, keys: string[]) => {
   const result: Record<string, unknown> = {}
@@ -31,7 +31,7 @@ const transformTheme: TransformTheme = ({ theme, breakpoints }) => {
         if (indexBreakpoint == null) return
         set(result, [indexBreakpoint, key], child)
       })
-    } else if (typeof value === "object" && value !== null) {
+    } else if (typeof value === 'object' && value !== null) {
       Object.entries(value).forEach(([childKey, childValue]) => {
         set(result, [childKey, key], childValue)
       })