@pyreon/unistyle 0.11.1 → 0.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/unistyle",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
@@ -24,7 +24,8 @@
     "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "src"
   ],
   "engines": {
     "node": ">= 22"
@@ -43,13 +44,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.1",
-    "@pyreon/reactivity": "^0.11.1",
-    "@pyreon/ui-core": "^0.11.1",
-    "@pyreon/styler": "^0.11.1"
+    "@pyreon/core": "^0.11.2",
+    "@pyreon/reactivity": "^0.11.2",
+    "@pyreon/ui-core": "^0.11.2",
+    "@pyreon/styler": "^0.11.2"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.1"
+    "@pyreon/typescript": "^0.11.2"
   }
 }

package/src/__tests__/alignContent.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, it } from "vitest"
+import alignContent from "../styles/alignContent"
+
+describe("alignContent", () => {
+  it("returns null for empty attrs", () => {
+    expect(alignContent({} as any)).toBeNull()
+  })
+
+  it("returns null when direction is missing", () => {
+    expect(alignContent({ alignX: "left", alignY: "top" } as any)).toBeNull()
+  })
+
+  it("returns null when alignX is missing", () => {
+    expect(alignContent({ direction: "inline", alignY: "top" } as any)).toBeNull()
+  })
+
+  it("returns null when alignY is missing", () => {
+    expect(alignContent({ direction: "inline", alignX: "left" } as any)).toBeNull()
+  })
+
+  describe("inline direction (reverted)", () => {
+    it("returns row with align-items from Y and justify-content from X", () => {
+      const result = alignContent({ direction: "inline", alignX: "left", alignY: "top" })
+      expect(result).toBe(
+        "flex-direction: row; align-items: flex-start; justify-content: flex-start;",
+      )
+    })
+
+    it("maps right/bottom correctly", () => {
+      const result = alignContent({ direction: "inline", alignX: "right", alignY: "bottom" })
+      expect(result).toBe("flex-direction: row; align-items: flex-end; justify-content: flex-end;")
+    })
+
+    it("maps center/center", () => {
+      const result = alignContent({ direction: "inline", alignX: "center", alignY: "center" })
+      expect(result).toBe("flex-direction: row; align-items: center; justify-content: center;")
+    })
+
+    it("maps spaceBetween/spaceAround", () => {
+      const result = alignContent({
+        direction: "inline",
+        alignX: "spaceBetween",
+        alignY: "spaceAround",
+      })
+      expect(result).toBe(
+        "flex-direction: row; align-items: space-around; justify-content: space-between;",
+      )
+    })
+
+    it("maps block/block", () => {
+      const result = alignContent({ direction: "inline", alignX: "block", alignY: "block" })
+      expect(result).toBe("flex-direction: row; align-items: stretch; justify-content: stretch;")
+    })
+  })
+
+  describe("reverseInline direction (reverted)", () => {
+    it("returns row-reverse with align-items from Y and justify-content from X", () => {
+      const result = alignContent({ direction: "reverseInline", alignX: "left", alignY: "top" })
+      expect(result).toBe(
+        "flex-direction: row-reverse; align-items: flex-start; justify-content: flex-start;",
+      )
+    })
+
+    it("maps center/bottom", () => {
+      const result = alignContent({
+        direction: "reverseInline",
+        alignX: "center",
+        alignY: "bottom",
+      })
+      expect(result).toBe(
+        "flex-direction: row-reverse; align-items: flex-end; justify-content: center;",
+      )
+    })
+  })
+
+  describe("rows direction (non-reverted)", () => {
+    it("returns column with align-items from X and justify-content from Y", () => {
+      const result = alignContent({ direction: "rows", alignX: "left", alignY: "top" })
+      expect(result).toBe(
+        "flex-direction: column; align-items: flex-start; justify-content: flex-start;",
+      )
+    })
+
+    it("maps right/bottom correctly", () => {
+      const result = alignContent({ direction: "rows", alignX: "right", alignY: "bottom" })
+      expect(result).toBe(
+        "flex-direction: column; align-items: flex-end; justify-content: flex-end;",
+      )
+    })
+
+    it("maps center/spaceBetween", () => {
+      const result = alignContent({ direction: "rows", alignX: "center", alignY: "spaceBetween" })
+      expect(result).toBe(
+        "flex-direction: column; align-items: center; justify-content: space-between;",
+      )
+    })
+
+    it("maps spaceAround/block", () => {
+      const result = alignContent({ direction: "rows", alignX: "spaceAround", alignY: "block" })
+      expect(result).toBe(
+        "flex-direction: column; align-items: space-around; justify-content: stretch;",
+      )
+    })
+  })
+
+  describe("reverseRows direction (non-reverted)", () => {
+    it("returns column-reverse with align-items from X and justify-content from Y", () => {
+      const result = alignContent({ direction: "reverseRows", alignX: "left", alignY: "top" })
+      expect(result).toBe(
+        "flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start;",
+      )
+    })
+
+    it("maps block/center", () => {
+      const result = alignContent({ direction: "reverseRows", alignX: "block", alignY: "center" })
+      expect(result).toBe(
+        "flex-direction: column-reverse; align-items: stretch; justify-content: center;",
+      )
+    })
+  })
+})

package/src/__tests__/borderRadius.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, it } from "vitest"
+import borderRadius from "../styles/shorthands/borderRadius"
+
+const empty = {
+  full: undefined,
+  top: undefined,
+  bottom: undefined,
+  left: undefined,
+  right: undefined,
+  topLeft: undefined,
+  topRight: undefined,
+  bottomLeft: undefined,
+  bottomRight: undefined,
+}
+
+const br = borderRadius()
+
+describe("borderRadius", () => {
+  it("returns null when no values provided", () => {
+    expect(br(empty)).toBeNull()
+  })
+
+  describe("full shorthand", () => {
+    it("all same value produces single-value shorthand", () => {
+      expect(br({ ...empty, full: 16 })).toBe("border-radius: 1rem;")
+    })
+
+    it("zero is a valid value", () => {
+      expect(br({ ...empty, full: 0 })).toBe("border-radius: 0;")
+    })
+
+    it("string values pass through", () => {
+      expect(br({ ...empty, full: "50%" })).toBe("border-radius: 50%;")
+    })
+  })
+
+  describe("two-value shorthand", () => {
+    it("tl===br and tr===bl produces two-value shorthand", () => {
+      const result = br({
+        ...empty,
+        topLeft: 16,
+        topRight: 32,
+        bottomRight: 16,
+        bottomLeft: 32,
+      })
+      expect(result).toBe("border-radius: 1rem 2rem;")
+    })
+  })
+
+  describe("three-value shorthand", () => {
+    it("tl, tr===bl, br produces three-value shorthand", () => {
+      const result = br({
+        ...empty,
+        topLeft: 16,
+        topRight: 32,
+        bottomRight: 48,
+        bottomLeft: 32,
+      })
+      expect(result).toBe("border-radius: 1rem 2rem 3rem;")
+    })
+  })
+
+  describe("four-value shorthand", () => {
+    it("all different produces four-value shorthand", () => {
+      const result = br({
+        ...empty,
+        topLeft: 16,
+        topRight: 32,
+        bottomRight: 48,
+        bottomLeft: 64,
+      })
+      expect(result).toBe("border-radius: 1rem 2rem 3rem 4rem;")
+    })
+  })
+
+  describe("per-side values", () => {
+    it("top sets topLeft and topRight", () => {
+      const result = br({ ...empty, top: 16, bottom: 32 })
+      expect(result).toBe("border-radius: 1rem 1rem 2rem 2rem;")
+    })
+
+    it("left sets topLeft and bottomLeft", () => {
+      const result = br({ ...empty, left: 16, right: 32 })
+      expect(result).toBe("border-radius: 1rem 2rem 2rem 1rem;")
+    })
+  })
+
+  describe("individual corners override sides", () => {
+    it("topLeft overrides top and left", () => {
+      const result = br({ ...empty, top: 16, topLeft: 32, bottom: 16 })
+      // tl=32, tr=16, br=16, bl=16 → tr===bl so 3-value shorthand
+      expect(result).toBe("border-radius: 2rem 1rem 1rem;")
+    })
+
+    it("bottomRight overrides bottom and right", () => {
+      const result = br({ ...empty, full: 16, bottomRight: 32 })
+      // tl=16, tr=16, br=32, bl=16 → tr===bl so 3-value shorthand
+      expect(result).toBe("border-radius: 1rem 1rem 2rem;")
+    })
+  })
+
+  describe("individual properties when not all corners have values", () => {
+    it("only topLeft is set", () => {
+      const result = br({ ...empty, topLeft: 16 })
+      expect(result).toBe("border-top-left-radius: 1rem;")
+    })
+
+    it("topLeft and bottomRight are set", () => {
+      const result = br({ ...empty, topLeft: 16, bottomRight: 32 })
+      expect(result).toBe("border-top-left-radius: 1rem;border-bottom-right-radius: 2rem;")
+    })
+
+    it("top only sets topLeft and topRight individual properties", () => {
+      const result = br({ ...empty, top: 16 })
+      expect(result).toBe("border-top-left-radius: 1rem;border-top-right-radius: 1rem;")
+    })
+  })
+
+  describe("custom rootSize", () => {
+    it("uses custom rootSize for conversion", () => {
+      const brCustom = borderRadius(10)
+      expect(brCustom({ ...empty, full: 20 })).toBe("border-radius: 2rem;")
+    })
+  })
+})

package/src/__tests__/camelToKebab.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest"
+import camelToKebab from "../styles/styles/camelToKebab"
+
+describe("camelToKebab", () => {
+  it("converts camelCase to kebab-case", () => {
+    expect(camelToKebab("backgroundColor")).toBe("background-color")
+  })
+
+  it("converts multiple uppercase letters", () => {
+    expect(camelToKebab("borderTopLeftRadius")).toBe("border-top-left-radius")
+  })
+
+  it("returns lowercase strings unchanged", () => {
+    expect(camelToKebab("color")).toBe("color")
+  })
+
+  it("returns empty string for empty input", () => {
+    expect(camelToKebab("")).toBe("")
+  })
+
+  it("handles single uppercase letter", () => {
+    expect(camelToKebab("A")).toBe("-a")
+  })
+
+  it("handles leading lowercase", () => {
+    expect(camelToKebab("fontSize")).toBe("font-size")
+  })
+
+  it("handles consecutive uppercase letters individually", () => {
+    expect(camelToKebab("msOverflowStyle")).toBe("ms-overflow-style")
+  })
+
+  it("handles boxSizing", () => {
+    expect(camelToKebab("boxSizing")).toBe("box-sizing")
+  })
+
+  it("handles flexDirection", () => {
+    expect(camelToKebab("flexDirection")).toBe("flex-direction")
+  })
+
+  it("handles justifyContent", () => {
+    expect(camelToKebab("justifyContent")).toBe("justify-content")
+  })
+})

package/src/__tests__/context.test.ts

@@ -0,0 +1,147 @@
+import { describe, expect, it, vi } from "vitest"
+
+vi.mock("@pyreon/ui-core", () => {
+  const mockContext = { id: Symbol("test-context") }
+  return {
+    Provider: vi.fn((props: any) => props.children ?? null),
+    config: {
+      css: (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
+      },
+    },
+    context: mockContext,
+    isEmpty: (val: unknown) =>
+      val == null || (typeof val === "object" && Object.keys(val as object).length === 0),
+  }
+})
+
+import { Provider as CoreProvider } from "@pyreon/ui-core"
+import Provider, { context } from "../context"
+
+const mockCoreProvider = CoreProvider as ReturnType<typeof vi.fn>
+
+/** Extract the first argument from the first mock call. */
+const firstCallArg = () => {
+  const calls = mockCoreProvider.mock.calls
+  expect(calls.length).toBeGreaterThan(0)
+  return (calls[0] as any[])[0] as any
+}
+
+describe("Provider", () => {
+  it("exports context from @pyreon/ui-core", () => {
+    expect(context).toBeDefined()
+    expect(context).toHaveProperty("id")
+  })
+
+  it("calls CoreProvider with enriched theme", () => {
+    mockCoreProvider.mockClear()
+
+    Provider({
+      theme: { rootSize: 16 },
+      children: null,
+    })
+
+    expect(mockCoreProvider).toHaveBeenCalledTimes(1)
+    const calledWith = firstCallArg()
+    expect(calledWith.theme).toHaveProperty("__PYREON__")
+  })
+
+  it("when theme has no breakpoints: __PYREON__ has undefined sortedBreakpoints and media", () => {
+    mockCoreProvider.mockClear()
+
+    Provider({
+      theme: { rootSize: 16 },
+      children: null,
+    })
+
+    const enrichedTheme = firstCallArg().theme
+    expect(enrichedTheme.__PYREON__.sortedBreakpoints).toBeUndefined()
+    expect(enrichedTheme.__PYREON__.media).toBeUndefined()
+  })
+
+  it("when theme has empty breakpoints: __PYREON__ has undefined sortedBreakpoints and media", () => {
+    mockCoreProvider.mockClear()
+
+    Provider({
+      theme: { rootSize: 16, breakpoints: {} },
+      children: null,
+    })
+
+    const enrichedTheme = firstCallArg().theme
+    expect(enrichedTheme.__PYREON__.sortedBreakpoints).toBeUndefined()
+    expect(enrichedTheme.__PYREON__.media).toBeUndefined()
+  })
+
+  it("when theme has breakpoints: __PYREON__ has sortedBreakpoints and media objects", () => {
+    mockCoreProvider.mockClear()
+
+    Provider({
+      theme: {
+        rootSize: 16,
+        breakpoints: { xs: 0, sm: 576, md: 768 },
+      },
+      children: null,
+    })
+
+    const enrichedTheme = firstCallArg().theme
+    expect(enrichedTheme.__PYREON__.sortedBreakpoints).toEqual(["xs", "sm", "md"])
+    expect(enrichedTheme.__PYREON__.media).toBeDefined()
+    expect(Object.keys(enrichedTheme.__PYREON__.media)).toEqual(["xs", "sm", "md"])
+  })
+
+  it("passes children through to CoreProvider", () => {
+    mockCoreProvider.mockClear()
+
+    const mockChild = { type: "div" } as any
+    Provider({
+      theme: { rootSize: 16 },
+      children: mockChild,
+    })
+
+    const calledWith = firstCallArg()
+    expect(calledWith.children).toBe(mockChild)
+  })
+
+  it("preserves other theme properties in enriched theme", () => {
+    mockCoreProvider.mockClear()
+
+    Provider({
+      theme: { rootSize: 16, customProp: "hello" } as any,
+      children: null,
+    })
+
+    const enrichedTheme = firstCallArg().theme
+    expect(enrichedTheme.rootSize).toBe(16)
+    expect(enrichedTheme.customProp).toBe("hello")
+  })
+
+  it("media functions are callable tagged template functions", () => {
+    mockCoreProvider.mockClear()
+
+    Provider({
+      theme: {
+        rootSize: 16,
+        breakpoints: { xs: 0, sm: 576 },
+      },
+      children: null,
+    })
+
+    const media = firstCallArg().theme.__PYREON__.media
+    expect(typeof media.xs).toBe("function")
+    expect(typeof media.sm).toBe("function")
+
+    // xs (value 0) should pass through
+    const xsResult = media.xs`color: red;`
+    expect(xsResult).toContain("color: red;")
+    expect(xsResult).not.toContain("@media")
+
+    // sm (value 576) should wrap in media query
+    const smResult = media.sm`color: blue;`
+    expect(smResult).toContain("@media only screen and (min-width: 36em)")
+  })
+})

package/src/__tests__/createMediaQueries.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it } from "vitest"
+import createMediaQueries from "../responsive/createMediaQueries"
+
+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("createMediaQueries", () => {
+  it("returns an object with keys matching breakpoint names", () => {
+    const result = createMediaQueries({
+      breakpoints: { xs: 0, sm: 576, md: 768 },
+      rootSize: 16,
+      css: mockCss,
+    })
+
+    expect(Object.keys(result)).toEqual(["xs", "sm", "md"])
+  })
+
+  it("multiple breakpoints produce correct number of keys", () => {
+    const result = createMediaQueries({
+      breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 },
+      rootSize: 16,
+      css: mockCss,
+    })
+
+    expect(Object.keys(result)).toHaveLength(5)
+  })
+
+  it("for breakpoint with value 0: passes through to css directly (no @media wrapper)", () => {
+    const result = createMediaQueries({
+      breakpoints: { xs: 0 },
+      rootSize: 16,
+      css: mockCss,
+    })
+
+    const output = result.xs`color: red;`
+    expect(output).toBe("color: red;")
+    expect(output).not.toContain("@media")
+  })
+
+  it("for breakpoint with non-zero value: wraps in @media with em calculation", () => {
+    const result = createMediaQueries({
+      breakpoints: { sm: 576 },
+      rootSize: 16,
+      css: mockCss,
+    })
+
+    const output = result.sm`color: blue;`
+    // 576 / 16 = 36
+    expect(output).toContain("@media only screen and (min-width: 36em)")
+    expect(output).toContain("color: blue;")
+  })
+
+  it("calculates em size as breakpointValue / rootSize", () => {
+    const result = createMediaQueries({
+      breakpoints: { md: 768 },
+      rootSize: 16,
+      css: mockCss,
+    })
+
+    const output = result.md`font-size: 1rem;`
+    // 768 / 16 = 48
+    expect(output).toContain("48em")
+  })
+
+  it("respects custom rootSize", () => {
+    const result = createMediaQueries({
+      breakpoints: { lg: 992 },
+      rootSize: 10,
+      css: mockCss,
+    })
+
+    const output = result.lg`display: flex;`
+    // 992 / 10 = 99.2
+    expect(output).toContain("99.2em")
+  })
+
+  it("handles mixed zero and non-zero breakpoints", () => {
+    const result = createMediaQueries({
+      breakpoints: { xs: 0, sm: 576, md: 768 },
+      rootSize: 16,
+      css: mockCss,
+    })
+
+    const xsOutput = result.xs`color: red;`
+    const smOutput = result.sm`color: blue;`
+    const mdOutput = result.md`color: green;`
+
+    expect(xsOutput).not.toContain("@media")
+    expect(smOutput).toContain("@media only screen and (min-width: 36em)")
+    expect(mdOutput).toContain("@media only screen and (min-width: 48em)")
+  })
+})