@pyreon/unistyle 0.11.1 → 0.11.3

package/src/__tests__/processDescriptor.test.ts

@@ -0,0 +1,320 @@
+import { describe, expect, it } from "vitest"
+import processDescriptor from "../styles/styles/processDescriptor"
+import type { PropertyDescriptor } from "../styles/styles/propertyMap"
+import type { InnerTheme } from "../styles/styles/types"
+
+// Minimal helpers matching the signature expected by processDescriptor
+const mockCss = (strings: TemplateStringsArray, ...vals: any[]) => {
+  let result = ""
+  for (let i = 0; i < strings.length; i++) {
+    result += strings[i]
+    if (i < vals.length) result += String(vals[i] ?? "")
+  }
+  return result
+}
+
+const mockCalc = (...params: any[]) => {
+  const val = params.find((p) => p != null)
+  if (val == null) return null
+  if (typeof val === "string") return val
+  return `${val / 16}rem`
+}
+
+const mockEdge = (_property: string, _values: any) => null
+const mockBorderRadius = (_props: any) => null
+
+const t = (overrides: Partial<InnerTheme> = {}): InnerTheme => overrides as InnerTheme
+
+describe("processDescriptor", () => {
+  describe("simple kind", () => {
+    const d: PropertyDescriptor = { kind: "simple", css: "display", key: "display" }
+
+    it("returns CSS declaration when key has a value", () => {
+      const result = processDescriptor(
+        d,
+        t({ display: "flex" }),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("display: flex;")
+    })
+
+    it("returns empty string when key is null", () => {
+      const result = processDescriptor(
+        d,
+        t({ display: null as any }),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("")
+    })
+
+    it("returns empty string when key is undefined", () => {
+      const result = processDescriptor(
+        d,
+        t({}),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("")
+    })
+  })
+
+  describe("convert kind", () => {
+    const d: PropertyDescriptor = { kind: "convert", css: "width", key: "width" }
+
+    it("returns converted value through calc function", () => {
+      const result = processDescriptor(
+        d,
+        t({ width: 32 } as any),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("width: 2rem;")
+    })
+
+    it("passes through string values", () => {
+      const result = processDescriptor(
+        d,
+        t({ width: "50%" } as any),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("width: 50%;")
+    })
+  })
+
+  describe("convert_fallback kind", () => {
+    const d: PropertyDescriptor = {
+      kind: "convert_fallback",
+      css: "width",
+      keys: ["width", "size"] as (keyof InnerTheme)[],
+    }
+
+    it("uses first defined key value", () => {
+      const result = processDescriptor(
+        d,
+        t({ width: 16 } as any),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("width: 1rem;")
+    })
+  })
+
+  describe("special kind", () => {
+    it("returns fullScreen CSS when fullScreen is truthy", () => {
+      const d: PropertyDescriptor = { kind: "special", id: "fullScreen" }
+      const result = processDescriptor(
+        d,
+        t({ fullScreen: true } as any),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toContain("position: fixed")
+      expect(result).toContain("top: 0")
+    })
+
+    it("returns empty string when fullScreen is falsy", () => {
+      const d: PropertyDescriptor = { kind: "special", id: "fullScreen" }
+      const result = processDescriptor(
+        d,
+        t({}),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("")
+    })
+
+    it("returns backgroundImage CSS when set", () => {
+      const d: PropertyDescriptor = { kind: "special", id: "backgroundImage" }
+      const result = processDescriptor(
+        d,
+        t({ backgroundImage: "url.png" } as any),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("background-image: url(url.png);")
+    })
+
+    it("returns animation CSS when keyframe is set", () => {
+      const d: PropertyDescriptor = { kind: "special", id: "animation" }
+      const result = processDescriptor(
+        d,
+        t({ keyframe: "fadeIn", animation: "0.3s ease" } as any),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("animation: fadeIn 0.3s ease;")
+    })
+
+    it("returns hideEmpty pseudo-selector when hideEmpty is true", () => {
+      const d: PropertyDescriptor = { kind: "special", id: "hideEmpty" }
+      const result = processDescriptor(
+        d,
+        t({ hideEmpty: true } as any),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toContain("&:empty")
+      expect(result).toContain("display: none")
+    })
+
+    it("returns clearFix pseudo-element when clearFix is true", () => {
+      const d: PropertyDescriptor = { kind: "special", id: "clearFix" }
+      const result = processDescriptor(
+        d,
+        t({ clearFix: true } as any),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toContain("&::after")
+      expect(result).toContain("clear: both")
+    })
+
+    it("returns empty string for unknown special id", () => {
+      const d: PropertyDescriptor = { kind: "special", id: "unknown" }
+      const result = processDescriptor(
+        d,
+        t({}),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("")
+    })
+  })
+
+  describe("edge kind", () => {
+    it("delegates to shorthand function", () => {
+      const d: PropertyDescriptor = {
+        kind: "edge",
+        property: "margin",
+        keys: {
+          full: "margin" as keyof InnerTheme,
+          x: "marginX" as keyof InnerTheme,
+          y: "marginY" as keyof InnerTheme,
+          top: "marginTop" as keyof InnerTheme,
+          left: "marginLeft" as keyof InnerTheme,
+          bottom: "marginBottom" as keyof InnerTheme,
+          right: "marginRight" as keyof InnerTheme,
+        },
+      }
+      const customEdge = () => "margin: 1rem;"
+      const result = processDescriptor(
+        d,
+        t({ margin: 16 } as any),
+        mockCss,
+        mockCalc,
+        customEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("margin: 1rem;")
+    })
+
+    it("returns empty string when shorthand returns null", () => {
+      const d: PropertyDescriptor = {
+        kind: "edge",
+        property: "padding",
+        keys: {
+          full: "padding" as keyof InnerTheme,
+          x: "paddingX" as keyof InnerTheme,
+          y: "paddingY" as keyof InnerTheme,
+          top: "paddingTop" as keyof InnerTheme,
+          left: "paddingLeft" as keyof InnerTheme,
+          bottom: "paddingBottom" as keyof InnerTheme,
+          right: "paddingRight" as keyof InnerTheme,
+        },
+      }
+      const result = processDescriptor(
+        d,
+        t({}),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("")
+    })
+  })
+
+  describe("border_radius kind", () => {
+    it("delegates to borderRadius function", () => {
+      const d: PropertyDescriptor = {
+        kind: "border_radius",
+        keys: {
+          full: "borderRadius" as keyof InnerTheme,
+          top: "borderRadiusTop" as keyof InnerTheme,
+          bottom: "borderRadiusBottom" as keyof InnerTheme,
+          left: "borderRadiusLeft" as keyof InnerTheme,
+          right: "borderRadiusRight" as keyof InnerTheme,
+          topLeft: "borderRadiusTopLeft" as keyof InnerTheme,
+          topRight: "borderRadiusTopRight" as keyof InnerTheme,
+          bottomLeft: "borderRadiusBottomLeft" as keyof InnerTheme,
+          bottomRight: "borderRadiusBottomRight" as keyof InnerTheme,
+        },
+      }
+      const customBR = () => "border-radius: 4px;"
+      const result = processDescriptor(
+        d,
+        t({ borderRadius: 4 } as any),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        customBR as any,
+      )
+      expect(result).toBe("border-radius: 4px;")
+    })
+
+    it("returns empty string when borderRadius returns null", () => {
+      const d: PropertyDescriptor = {
+        kind: "border_radius",
+        keys: {
+          full: "borderRadius" as keyof InnerTheme,
+          top: "borderRadiusTop" as keyof InnerTheme,
+          bottom: "borderRadiusBottom" as keyof InnerTheme,
+          left: "borderRadiusLeft" as keyof InnerTheme,
+          right: "borderRadiusRight" as keyof InnerTheme,
+          topLeft: "borderRadiusTopLeft" as keyof InnerTheme,
+          topRight: "borderRadiusTopRight" as keyof InnerTheme,
+          bottomLeft: "borderRadiusBottomLeft" as keyof InnerTheme,
+          bottomRight: "borderRadiusBottomRight" as keyof InnerTheme,
+        },
+      }
+      const result = processDescriptor(
+        d,
+        t({}),
+        mockCss,
+        mockCalc,
+        mockEdge as any,
+        mockBorderRadius as any,
+      )
+      expect(result).toBe("")
+    })
+  })
+})

package/src/__tests__/responsive.test.ts

@@ -0,0 +1,177 @@
+import { describe, expect, it } from "vitest"
+import breakpoints from "../responsive/breakpoints"
+import normalizeTheme from "../responsive/normalizeTheme"
+import optimizeTheme from "../responsive/optimizeTheme"
+import sortBreakpoints from "../responsive/sortBreakpoints"
+import transformTheme from "../responsive/transformTheme"
+
+describe("breakpoints", () => {
+  it("has expected default config", () => {
+    expect(breakpoints.rootSize).toBe(16)
+    expect(breakpoints.breakpoints).toHaveProperty("xs")
+    expect(breakpoints.breakpoints).toHaveProperty("sm")
+    expect(breakpoints.breakpoints).toHaveProperty("md")
+    expect(breakpoints.breakpoints).toHaveProperty("lg")
+    expect(breakpoints.breakpoints).toHaveProperty("xl")
+    expect(breakpoints.breakpoints).toHaveProperty("xxl")
+  })
+
+  it("has correct pixel values", () => {
+    expect(breakpoints.breakpoints.xs).toBe(0)
+    expect(breakpoints.breakpoints.sm).toBe(576)
+    expect(breakpoints.breakpoints.md).toBe(768)
+    expect(breakpoints.breakpoints.lg).toBe(992)
+    expect(breakpoints.breakpoints.xl).toBe(1200)
+    expect(breakpoints.breakpoints.xxl).toBe(1440)
+  })
+})
+
+describe("sortBreakpoints", () => {
+  it("sorts breakpoints by value ascending, returns keys", () => {
+    const bps = { md: 768, xs: 0, xl: 1200, sm: 576 }
+    const sorted = sortBreakpoints(bps)
+    expect(sorted).toEqual(["xs", "sm", "md", "xl"])
+  })
+
+  it("handles already sorted breakpoints", () => {
+    const sorted = sortBreakpoints({ xs: 0, sm: 576, md: 768 })
+    expect(sorted).toEqual(["xs", "sm", "md"])
+  })
+
+  it("handles single breakpoint", () => {
+    expect(sortBreakpoints({ xs: 0 })).toEqual(["xs"])
+  })
+
+  it("handles empty object", () => {
+    expect(sortBreakpoints({})).toEqual([])
+  })
+
+  it("sorts full default breakpoint set", () => {
+    const sorted = sortBreakpoints(breakpoints.breakpoints)
+    expect(sorted).toEqual(["xs", "sm", "md", "lg", "xl", "xxl"])
+  })
+})
+
+describe("normalizeTheme", () => {
+  const bpKeys = ["xs", "sm", "md", "lg", "xl"]
+
+  it("returns theme as-is when no nested objects/arrays", () => {
+    const theme = { color: "red", fontSize: 16 }
+    const result = normalizeTheme({ theme, breakpoints: bpKeys })
+    expect(result).toEqual(theme)
+  })
+
+  it("expands array values across breakpoints", () => {
+    const theme = { fontSize: [12, 14, 16, 18, 20] }
+    const result = normalizeTheme({ theme, breakpoints: bpKeys })
+    expect(result.fontSize).toEqual({
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 18,
+      xl: 20,
+    })
+  })
+
+  it("array values use last value for extra breakpoints", () => {
+    const theme = { fontSize: [12, 14] }
+    const result = normalizeTheme({ theme, breakpoints: bpKeys })
+    expect((result.fontSize as Record<string, unknown>).xs).toBe(12)
+    expect((result.fontSize as Record<string, unknown>).sm).toBe(14)
+    expect((result.fontSize as Record<string, unknown>).md).toBe(14)
+  })
+
+  it("expands object values with carry-forward", () => {
+    const theme = { fontSize: { xs: 12, md: 16 } }
+    const result = normalizeTheme({ theme, breakpoints: bpKeys })
+    const fs = result.fontSize as Record<string, unknown>
+    expect(fs.xs).toBe(12)
+    expect(fs.sm).toBe(12) // carried from xs
+    expect(fs.md).toBe(16)
+    expect(fs.lg).toBe(16) // carried from md
+  })
+
+  it("skips null values", () => {
+    const theme = { color: null, fontSize: 16 }
+    const result = normalizeTheme({ theme, breakpoints: bpKeys })
+    expect(result.color).toBeUndefined()
+  })
+})
+
+describe("transformTheme", () => {
+  const bpKeys = ["xs", "sm", "md"]
+
+  it("pivots scalar values to first breakpoint", () => {
+    const theme = { color: "red" }
+    const result = transformTheme({ theme, breakpoints: bpKeys })
+    expect(result.xs).toEqual({ color: "red" })
+  })
+
+  it("pivots object values to breakpoints", () => {
+    const theme = { color: { xs: "red", md: "blue" } }
+    const result = transformTheme({ theme, breakpoints: bpKeys })
+    expect(result.xs).toEqual({ color: "red" })
+    expect(result.md).toEqual({ color: "blue" })
+  })
+
+  it("pivots array values by index", () => {
+    const theme = { fontSize: [12, 14, 16] }
+    const result = transformTheme({ theme, breakpoints: bpKeys })
+    expect(result.xs).toEqual({ fontSize: 12 })
+    expect(result.sm).toEqual({ fontSize: 14 })
+    expect(result.md).toEqual({ fontSize: 16 })
+  })
+
+  it("returns empty object for empty theme", () => {
+    expect(transformTheme({ theme: {}, breakpoints: bpKeys })).toEqual({})
+  })
+
+  it("returns empty object for empty breakpoints", () => {
+    expect(transformTheme({ theme: { color: "red" }, breakpoints: [] })).toEqual({})
+  })
+
+  it("filters out unexpected breakpoint keys", () => {
+    const theme = { color: { xs: "red", unknown: "green" } }
+    const result = transformTheme({ theme, breakpoints: bpKeys })
+    expect(result).not.toHaveProperty("unknown")
+  })
+})
+
+describe("optimizeTheme", () => {
+  const bpKeys = ["xs", "sm", "md", "lg"]
+
+  it("keeps first breakpoint", () => {
+    const theme = {
+      xs: { color: "red" },
+      sm: { color: "blue" },
+    }
+    const result = optimizeTheme({ theme, breakpoints: bpKeys })
+    expect(result.xs).toEqual({ color: "red" })
+  })
+
+  it("removes duplicate breakpoints", () => {
+    const theme = {
+      xs: { color: "red" },
+      sm: { color: "red" },
+      md: { color: "blue" },
+    }
+    const result = optimizeTheme({ theme, breakpoints: bpKeys })
+    expect(result.xs).toEqual({ color: "red" })
+    expect(result.sm).toBeUndefined()
+    expect(result.md).toEqual({ color: "blue" })
+  })
+
+  it("keeps breakpoints with different values", () => {
+    const theme = {
+      xs: { color: "red", fontSize: 12 },
+      sm: { color: "red", fontSize: 14 },
+    }
+    const result = optimizeTheme({ theme, breakpoints: bpKeys })
+    expect(result.xs).toBeDefined()
+    expect(result.sm).toBeDefined()
+  })
+
+  it("handles empty theme", () => {
+    expect(optimizeTheme({ theme: {}, breakpoints: bpKeys })).toEqual({})
+  })
+})

package/src/__tests__/styles.test.ts

@@ -0,0 +1,119 @@
+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 returns empty string (all fragments are empty)", () => {
+    const result = styles({ theme: {}, css: mockCss, rootSize: 16 })
+    expect(result).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 })
+    expect(result).toContain("&:empty { display: none; }")
+  })
+
+  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("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")
+  })
+})