@pyreon/unistyle 0.11.0 → 0.11.2

package/src/__tests__/edge.test.ts

@@ -0,0 +1,164 @@
+import { describe, expect, it } from "vitest"
+import edge from "../styles/shorthands/edge"
+
+const empty = {
+  full: undefined,
+  x: undefined,
+  y: undefined,
+  top: undefined,
+  left: undefined,
+  right: undefined,
+  bottom: undefined,
+}
+
+const e = edge()
+
+describe("edge", () => {
+  it("returns null when no values provided", () => {
+    expect(e("margin", empty)).toBeNull()
+  })
+
+  describe("full shorthand (all same)", () => {
+    it("margin with single value", () => {
+      expect(e("margin", { ...empty, full: 16 })).toBe("margin: 1rem;")
+    })
+
+    it("padding with single value", () => {
+      expect(e("padding", { ...empty, full: 32 })).toBe("padding: 2rem;")
+    })
+
+    it("inset with single value", () => {
+      expect(e("inset", { ...empty, full: 16 })).toBe("inset: 1rem;")
+    })
+  })
+
+  describe("two-value shorthand", () => {
+    it("top===bottom and right===left", () => {
+      const result = e("margin", { ...empty, y: 16, x: 32 })
+      expect(result).toBe("margin: 1rem 2rem;")
+    })
+  })
+
+  describe("three-value shorthand", () => {
+    it("top, right===left, bottom", () => {
+      const result = e("padding", {
+        ...empty,
+        top: 16,
+        right: 32,
+        bottom: 48,
+        left: 32,
+      })
+      expect(result).toBe("padding: 1rem 2rem 3rem;")
+    })
+  })
+
+  describe("four-value shorthand", () => {
+    it("all different sides", () => {
+      const result = e("margin", {
+        ...empty,
+        top: 16,
+        right: 32,
+        bottom: 48,
+        left: 64,
+      })
+      expect(result).toBe("margin: 1rem 2rem 3rem 4rem;")
+    })
+  })
+
+  describe("x and y values", () => {
+    it("x sets left and right", () => {
+      const result = e("margin", { ...empty, x: 16 })
+      expect(result).toBe("margin-left: 1rem;margin-right: 1rem;")
+    })
+
+    it("y sets top and bottom", () => {
+      const result = e("margin", { ...empty, y: 16 })
+      expect(result).toBe("margin-top: 1rem;margin-bottom: 1rem;")
+    })
+  })
+
+  describe("individual sides override x/y/full", () => {
+    it("top overrides y", () => {
+      const result = e("margin", { ...empty, y: 16, top: 32, x: 16 })
+      // t=32, r=16, b=16, l=16 → r===l so 3-value shorthand
+      expect(result).toBe("margin: 2rem 1rem 1rem;")
+    })
+
+    it("left overrides x", () => {
+      const result = e("padding", { ...empty, full: 16, left: 32 })
+      expect(result).toBe("padding: 1rem 1rem 1rem 2rem;")
+    })
+  })
+
+  describe("border-width uses px unit", () => {
+    it("border-width with full value", () => {
+      expect(e("border-width", { ...empty, full: 1 })).toBe("border-width: 1px;")
+    })
+
+    it("border-width individual sides", () => {
+      const result = e("border-width", { ...empty, top: 1, bottom: 2 })
+      expect(result).toBe("border-top-width: 1px;border-bottom-width: 2px;")
+    })
+  })
+
+  describe("border-style does not use units", () => {
+    it("border-style with full value", () => {
+      expect(e("border-style", { ...empty, full: "solid" })).toBe("border-style: solid;")
+    })
+
+    it("border-style individual sides", () => {
+      const result = e("border-style", { ...empty, top: "solid", bottom: "dashed" })
+      expect(result).toBe("border-top-style: solid;border-bottom-style: dashed;")
+    })
+  })
+
+  describe("border-color does not use units", () => {
+    it("border-color with full value", () => {
+      expect(e("border-color", { ...empty, full: "red" })).toBe("border-color: red;")
+    })
+
+    it("border-color individual sides", () => {
+      const result = e("border-color", { ...empty, top: "red", left: "blue" })
+      expect(result).toBe("border-top-color: red;border-left-color: blue;")
+    })
+  })
+
+  describe("individual format when not all sides have values", () => {
+    it("only top is set", () => {
+      expect(e("margin", { ...empty, top: 16 })).toBe("margin-top: 1rem;")
+    })
+
+    it("only left and right are set", () => {
+      const result = e("padding", { ...empty, left: 16, right: 32 })
+      expect(result).toBe("padding-left: 1rem;padding-right: 2rem;")
+    })
+
+    it("inset individual sides", () => {
+      const result = e("inset", { ...empty, top: 0, left: 16 })
+      expect(result).toBe("top: 0;left: 1rem;")
+    })
+  })
+
+  describe("zero values are valid", () => {
+    it("zero full value", () => {
+      expect(e("margin", { ...empty, full: 0 })).toBe("margin: 0;")
+    })
+
+    it("zero individual side", () => {
+      expect(e("padding", { ...empty, top: 0 })).toBe("padding-top: 0;")
+    })
+  })
+
+  describe("custom rootSize", () => {
+    it("uses custom rootSize for conversion", () => {
+      const eCustom = edge(10)
+      expect(eCustom("margin", { ...empty, full: 20 })).toBe("margin: 2rem;")
+    })
+  })
+
+  describe("string values", () => {
+    it("passes through string values like auto", () => {
+      expect(e("margin", { ...empty, full: "auto" })).toBe("margin: auto;")
+    })
+  })
+})

package/src/__tests__/enrichTheme.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest"
+import { enrichTheme } from "../enrichTheme"
+
+describe("enrichTheme", () => {
+  it("adds __PYREON__ with sortedBreakpoints and media", () => {
+    const theme = { rootSize: 16, breakpoints: { xs: 0, sm: 576, md: 768 } }
+    const result = enrichTheme(theme)
+
+    expect(result.__PYREON__).toBeDefined()
+    expect(result.__PYREON__.sortedBreakpoints).toEqual(["xs", "sm", "md"])
+    expect(result.__PYREON__.media).toBeDefined()
+    expect(typeof result.__PYREON__.media?.sm).toBe("function")
+  })
+
+  it("preserves custom theme properties", () => {
+    const theme = { rootSize: 16, colors: { primary: "blue" } }
+    const result = enrichTheme(theme)
+
+    expect(result.colors).toEqual({ primary: "blue" })
+    expect(result.rootSize).toBe(16)
+  })
+
+  it("handles theme without breakpoints", () => {
+    const theme = { rootSize: 16 }
+    const result = enrichTheme(theme)
+
+    expect(result.__PYREON__).toBeDefined()
+    expect(result.__PYREON__.sortedBreakpoints).toBeUndefined()
+    expect(result.__PYREON__.media).toBeUndefined()
+  })
+
+  it("handles empty breakpoints", () => {
+    const theme = { rootSize: 16, breakpoints: {} }
+    const result = enrichTheme(theme)
+
+    expect(result.__PYREON__.sortedBreakpoints).toBeUndefined()
+    expect(result.__PYREON__.media).toBeUndefined()
+  })
+
+  it("defaults rootSize to 16", () => {
+    const theme = { breakpoints: { sm: 576 } }
+    const result = enrichTheme(theme)
+
+    // Media queries should be created (breakpoints present)
+    expect(result.__PYREON__.media).toBeDefined()
+  })
+
+  it("is a pure function — does not mutate input", () => {
+    const theme = { rootSize: 16, breakpoints: { xs: 0, md: 768 } }
+    const copy = { ...theme }
+    enrichTheme(theme)
+
+    expect(theme).toEqual(copy)
+    expect((theme as any).__PYREON__).toBeUndefined()
+  })
+})

package/src/__tests__/extendCss.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest"
+import extendCss from "../styles/extendCss"
+
+describe("extendCss", () => {
+  it("returns empty string for null input", () => {
+    expect(extendCss(null)).toBe("")
+  })
+
+  it("returns empty string for undefined input", () => {
+    expect(extendCss(undefined)).toBe("")
+  })
+
+  it("returns the string as-is for string input", () => {
+    expect(extendCss("color: red;")).toBe("color: red;")
+  })
+
+  it("returns empty string for empty string input", () => {
+    expect(extendCss("")).toBe("")
+  })
+
+  it("calls function with simpleCss tagged template and returns result", () => {
+    const result = extendCss((css) => css`color: red; font-size: 16px;`)
+    expect(result).toBe("color: red; font-size: 16px;")
+  })
+
+  it("handles function with interpolated values", () => {
+    const size = 16
+    const result = extendCss((css) => css`font-size: ${size}px;`)
+    expect(result).toBe("font-size: 16px;")
+  })
+
+  it("handles function with multiple interpolated values", () => {
+    const color = "red"
+    const size = 14
+    const result = extendCss((css) => css`color: ${color}; font-size: ${size}px;`)
+    expect(result).toBe("color: red; font-size: 14px;")
+  })
+
+  it("handles function with null/undefined interpolated values as empty string", () => {
+    const nullVal = null as string | null
+    const undefVal = undefined as string | undefined
+    const result = extendCss((css) => css`color: ${nullVal}; font-size: ${undefVal}px;`)
+    expect(result).toBe("color: ; font-size: px;")
+  })
+})

package/src/__tests__/index.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest"
+import * as unistyle from "../index"
+
+describe("index exports", () => {
+  it("exports breakpoints", () => {
+    expect(unistyle.breakpoints).toBeDefined()
+    expect(typeof unistyle.breakpoints).toBe("object")
+  })
+
+  it("exports sortBreakpoints", () => {
+    expect(unistyle.sortBreakpoints).toBeDefined()
+    expect(typeof unistyle.sortBreakpoints).toBe("function")
+  })
+
+  it("exports createMediaQueries", () => {
+    expect(unistyle.createMediaQueries).toBeDefined()
+    expect(typeof unistyle.createMediaQueries).toBe("function")
+  })
+
+  it("exports makeItResponsive", () => {
+    expect(unistyle.makeItResponsive).toBeDefined()
+    expect(typeof unistyle.makeItResponsive).toBe("function")
+  })
+
+  it("exports normalizeTheme", () => {
+    expect(unistyle.normalizeTheme).toBeDefined()
+    expect(typeof unistyle.normalizeTheme).toBe("function")
+  })
+
+  it("exports transformTheme", () => {
+    expect(unistyle.transformTheme).toBeDefined()
+    expect(typeof unistyle.transformTheme).toBe("function")
+  })
+
+  it("exports styles", () => {
+    expect(unistyle.styles).toBeDefined()
+    expect(typeof unistyle.styles).toBe("function")
+  })
+
+  it("exports alignContent", () => {
+    expect(unistyle.alignContent).toBeDefined()
+    expect(typeof unistyle.alignContent).toBe("function")
+  })
+
+  it("exports extendCss", () => {
+    expect(unistyle.extendCss).toBeDefined()
+    expect(typeof unistyle.extendCss).toBe("function")
+  })
+
+  it("exports stripUnit", () => {
+    expect(unistyle.stripUnit).toBeDefined()
+    expect(typeof unistyle.stripUnit).toBe("function")
+  })
+
+  it("exports value", () => {
+    expect(unistyle.value).toBeDefined()
+    expect(typeof unistyle.value).toBe("function")
+  })
+
+  it("exports values", () => {
+    expect(unistyle.values).toBeDefined()
+    expect(typeof unistyle.values).toBe("function")
+  })
+
+  it("exports Provider", () => {
+    expect(unistyle.Provider).toBeDefined()
+    expect(typeof unistyle.Provider).toBe("function")
+  })
+
+  it("exports context", () => {
+    expect(unistyle.context).toBeDefined()
+  })
+
+  it("exports align content constants", () => {
+    expect(unistyle.ALIGN_CONTENT_DIRECTION).toBeDefined()
+    expect(unistyle.ALIGN_CONTENT_MAP_X).toBeDefined()
+    expect(unistyle.ALIGN_CONTENT_MAP_Y).toBeDefined()
+  })
+})

package/src/__tests__/makeItResponsive.test.ts

@@ -0,0 +1,171 @@
+import { describe, expect, it, vi } from "vitest"
+
+vi.mock("@pyreon/ui-core", () => ({
+  isEmpty: (val: unknown) =>
+    val == null || (typeof val === "object" && Object.keys(val as object).length === 0),
+  set: (obj: any, path: (string | number)[], value: unknown) => {
+    let current = obj
+    for (let i = 0; i < path.length - 1; i++) {
+      const key = path[i] as string | number
+      if (current[key] == null || typeof current[key] !== "object") {
+        current[key] = {}
+      }
+      current = current[key]
+    }
+    const lastKey = path[path.length - 1] as string | number
+    current[lastKey] = value
+  },
+}))
+
+import makeItResponsive from "../responsive/makeItResponsive"
+
+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
+}
+
+const mockStyles = ({ theme }: { theme: Record<string, unknown> }) => {
+  return Object.entries(theme)
+    .map(([k, v]) => `${k}: ${v};`)
+    .join(" ")
+}
+
+describe("makeItResponsive", () => {
+  it("returns empty string when customTheme is empty/undefined", () => {
+    const responsive = makeItResponsive({
+      key: "styles",
+      css: mockCss,
+      styles: mockStyles,
+    })
+
+    const result = responsive({ theme: {} })
+    expect(result).toBe("")
+  })
+
+  it("returns empty string when customTheme is empty object", () => {
+    const responsive = makeItResponsive({
+      theme: {},
+      key: "styles",
+      css: mockCss,
+      styles: mockStyles,
+    })
+
+    const result = responsive({ theme: {} })
+    expect(result).toBe("")
+  })
+
+  it("without breakpoints: wraps styles output in css template", () => {
+    const responsive = makeItResponsive({
+      theme: { color: "red" },
+      css: mockCss,
+      styles: mockStyles,
+    })
+
+    const result = responsive({ theme: {} })
+    expect(result).toContain("color: red;")
+  })
+
+  it("uses props[key] when theme is not provided", () => {
+    const responsive = makeItResponsive({
+      key: "myStyles",
+      css: mockCss,
+      styles: mockStyles,
+    })
+
+    const result = responsive({
+      theme: {},
+      myStyles: { fontSize: "16px" },
+    })
+
+    expect(result).toContain("fontSize: 16px;")
+  })
+
+  it("with breakpoints and __PYREON__: returns array of media-wrapped styles per breakpoint", () => {
+    const sortedBreakpoints = ["xs", "sm"]
+    const media: Record<string, (strings: TemplateStringsArray, ...vals: any[]) => string> = {
+      xs: mockCss,
+      sm: (strings: TemplateStringsArray, ...vals: any[]) => {
+        let r = "@media (min-width: 36em) {"
+        for (let i = 0; i < strings.length; i++) {
+          r += strings[i]
+          if (i < vals.length) r += String(vals[i])
+        }
+        r += "}"
+        return r
+      },
+    }
+
+    const responsive = makeItResponsive({
+      theme: { color: { xs: "red", sm: "blue" } },
+      css: mockCss,
+      styles: mockStyles,
+      normalize: true,
+    })
+
+    const result = responsive({
+      theme: {
+        breakpoints: { xs: 0, sm: 576 },
+        __PYREON__: { sortedBreakpoints, media },
+      },
+    })
+
+    expect(Array.isArray(result)).toBe(true)
+    expect(result).toHaveLength(2)
+  })
+
+  it("caching: second call with same internalTheme object returns same result", () => {
+    const sortedBreakpoints = ["xs", "sm"]
+    const media: Record<string, (strings: TemplateStringsArray, ...vals: any[]) => string> = {
+      xs: mockCss,
+      sm: mockCss,
+    }
+
+    const themeObj = { color: { xs: "red", sm: "blue" } }
+
+    const responsive = makeItResponsive({
+      theme: themeObj,
+      css: mockCss,
+      styles: mockStyles,
+    })
+
+    const globalTheme = {
+      breakpoints: { xs: 0, sm: 576 },
+      __PYREON__: { sortedBreakpoints, media },
+    }
+
+    const result1 = responsive({ theme: globalTheme })
+    const result2 = responsive({ theme: globalTheme })
+
+    expect(result1).toEqual(result2)
+  })
+
+  it("normalize=false skips normalizeTheme step", () => {
+    const sortedBreakpoints = ["xs", "sm"]
+    const media: Record<string, (strings: TemplateStringsArray, ...vals: any[]) => string> = {
+      xs: mockCss,
+      sm: mockCss,
+    }
+
+    // When normalize=false, object values are not expanded across breakpoints.
+    // Provide a pre-normalized theme (object keyed by breakpoint names).
+    const responsive = makeItResponsive({
+      theme: { color: { xs: "red", sm: "blue" } },
+      css: mockCss,
+      styles: mockStyles,
+      normalize: false,
+    })
+
+    const result = responsive({
+      theme: {
+        breakpoints: { xs: 0, sm: 576 },
+        __PYREON__: { sortedBreakpoints, media },
+      },
+    })
+
+    expect(Array.isArray(result)).toBe(true)
+  })
+})