@pyreon/unistyle 0.11.5 → 0.11.7

package/src/__tests__/edge.test.ts

@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest"
-import edge from "../styles/shorthands/edge"
+import { describe, expect, it } from 'vitest'
+import edge from '../styles/shorthands/edge'
 
 const empty = {
   full: undefined,
@@ -13,152 +13,152 @@ const empty = {
 
 const e = edge()
 
-describe("edge", () => {
-  it("returns null when no values provided", () => {
-    expect(e("margin", empty)).toBeNull()
+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;")
+  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('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;")
+    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('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", {
+  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;")
+      expect(result).toBe('padding: 1rem 2rem 3rem;')
     })
   })
 
-  describe("four-value shorthand", () => {
-    it("all different sides", () => {
-      const result = e("margin", {
+  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;")
+      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;")
+  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;")
+    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 })
+  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;")
+      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;")
+    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;")
+  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;")
+    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;")
+  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;")
+    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;")
+  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;")
+    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;")
+  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('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;")
+    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;")
+  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;")
+    it('zero individual side', () => {
+      expect(e('padding', { ...empty, top: 0 })).toBe('padding-top: 0;')
     })
   })
 
-  describe("custom rootSize", () => {
-    it("uses custom rootSize for conversion", () => {
+  describe('custom rootSize', () => {
+    it('uses custom rootSize for conversion', () => {
       const eCustom = edge(10)
-      expect(eCustom("margin", { ...empty, full: 20 })).toBe("margin: 2rem;")
+      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;")
+  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

@@ -1,26 +1,26 @@
-import { describe, expect, it } from "vitest"
-import { enrichTheme } from "../enrichTheme"
+import { describe, expect, it } from 'vitest'
+import { enrichTheme } from '../enrichTheme'
 
-describe("enrichTheme", () => {
-  it("adds __PYREON__ with sortedBreakpoints and media", () => {
+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__.sortedBreakpoints).toEqual(['xs', 'sm', 'md'])
     expect(result.__PYREON__.media).toBeDefined()
-    expect(typeof result.__PYREON__.media?.sm).toBe("function")
+    expect(typeof result.__PYREON__.media?.sm).toBe('function')
   })
 
-  it("preserves custom theme properties", () => {
-    const theme = { rootSize: 16, colors: { primary: "blue" } }
+  it('preserves custom theme properties', () => {
+    const theme = { rootSize: 16, colors: { primary: 'blue' } }
     const result = enrichTheme(theme)
 
-    expect(result.colors).toEqual({ primary: "blue" })
+    expect(result.colors).toEqual({ primary: 'blue' })
     expect(result.rootSize).toBe(16)
   })
 
-  it("handles theme without breakpoints", () => {
+  it('handles theme without breakpoints', () => {
     const theme = { rootSize: 16 }
     const result = enrichTheme(theme)
 
@@ -29,7 +29,7 @@ describe("enrichTheme", () => {
     expect(result.__PYREON__.media).toBeUndefined()
   })
 
-  it("handles empty breakpoints", () => {
+  it('handles empty breakpoints', () => {
     const theme = { rootSize: 16, breakpoints: {} }
     const result = enrichTheme(theme)
 
@@ -37,7 +37,7 @@ describe("enrichTheme", () => {
     expect(result.__PYREON__.media).toBeUndefined()
   })
 
-  it("defaults rootSize to 16", () => {
+  it('defaults rootSize to 16', () => {
     const theme = { breakpoints: { sm: 576 } }
     const result = enrichTheme(theme)
 
@@ -45,7 +45,7 @@ describe("enrichTheme", () => {
     expect(result.__PYREON__.media).toBeDefined()
   })
 
-  it("is a pure function — does not mutate input", () => {
+  it('is a pure function — does not mutate input', () => {
     const theme = { rootSize: 16, breakpoints: { xs: 0, md: 768 } }
     const copy = { ...theme }
     enrichTheme(theme)

package/src/__tests__/index.test.ts

@@ -1,77 +1,77 @@
-import { describe, expect, it } from "vitest"
-import * as unistyle from "../index"
+import { describe, expect, it } from 'vitest'
+import * as unistyle from '../index'
 
-describe("index exports", () => {
-  it("exports breakpoints", () => {
+describe('index exports', () => {
+  it('exports breakpoints', () => {
     expect(unistyle.breakpoints).toBeDefined()
-    expect(typeof unistyle.breakpoints).toBe("object")
+    expect(typeof unistyle.breakpoints).toBe('object')
   })
 
-  it("exports sortBreakpoints", () => {
+  it('exports sortBreakpoints', () => {
     expect(unistyle.sortBreakpoints).toBeDefined()
-    expect(typeof unistyle.sortBreakpoints).toBe("function")
+    expect(typeof unistyle.sortBreakpoints).toBe('function')
   })
 
-  it("exports createMediaQueries", () => {
+  it('exports createMediaQueries', () => {
     expect(unistyle.createMediaQueries).toBeDefined()
-    expect(typeof unistyle.createMediaQueries).toBe("function")
+    expect(typeof unistyle.createMediaQueries).toBe('function')
   })
 
-  it("exports makeItResponsive", () => {
+  it('exports makeItResponsive', () => {
     expect(unistyle.makeItResponsive).toBeDefined()
-    expect(typeof unistyle.makeItResponsive).toBe("function")
+    expect(typeof unistyle.makeItResponsive).toBe('function')
   })
 
-  it("exports normalizeTheme", () => {
+  it('exports normalizeTheme', () => {
     expect(unistyle.normalizeTheme).toBeDefined()
-    expect(typeof unistyle.normalizeTheme).toBe("function")
+    expect(typeof unistyle.normalizeTheme).toBe('function')
   })
 
-  it("exports transformTheme", () => {
+  it('exports transformTheme', () => {
     expect(unistyle.transformTheme).toBeDefined()
-    expect(typeof unistyle.transformTheme).toBe("function")
+    expect(typeof unistyle.transformTheme).toBe('function')
   })
 
-  it("exports styles", () => {
+  it('exports styles', () => {
     expect(unistyle.styles).toBeDefined()
-    expect(typeof unistyle.styles).toBe("function")
+    expect(typeof unistyle.styles).toBe('function')
   })
 
-  it("exports alignContent", () => {
+  it('exports alignContent', () => {
     expect(unistyle.alignContent).toBeDefined()
-    expect(typeof unistyle.alignContent).toBe("function")
+    expect(typeof unistyle.alignContent).toBe('function')
   })
 
-  it("exports extendCss", () => {
+  it('exports extendCss', () => {
     expect(unistyle.extendCss).toBeDefined()
-    expect(typeof unistyle.extendCss).toBe("function")
+    expect(typeof unistyle.extendCss).toBe('function')
   })
 
-  it("exports stripUnit", () => {
+  it('exports stripUnit', () => {
     expect(unistyle.stripUnit).toBeDefined()
-    expect(typeof unistyle.stripUnit).toBe("function")
+    expect(typeof unistyle.stripUnit).toBe('function')
   })
 
-  it("exports value", () => {
+  it('exports value', () => {
     expect(unistyle.value).toBeDefined()
-    expect(typeof unistyle.value).toBe("function")
+    expect(typeof unistyle.value).toBe('function')
   })
 
-  it("exports values", () => {
+  it('exports values', () => {
     expect(unistyle.values).toBeDefined()
-    expect(typeof unistyle.values).toBe("function")
+    expect(typeof unistyle.values).toBe('function')
   })
 
-  it("exports Provider", () => {
+  it('exports Provider', () => {
     expect(unistyle.Provider).toBeDefined()
-    expect(typeof unistyle.Provider).toBe("function")
+    expect(typeof unistyle.Provider).toBe('function')
   })
 
-  it("exports context", () => {
+  it('exports context', () => {
     expect(unistyle.context).toBeDefined()
   })
 
-  it("exports align content constants", () => {
+  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

@@ -1,13 +1,13 @@
-import { describe, expect, it, vi } from "vitest"
+import { describe, expect, it, vi } from 'vitest'
 
-vi.mock("@pyreon/ui-core", () => ({
+vi.mock('@pyreon/ui-core', () => ({
   isEmpty: (val: unknown) =>
-    val == null || (typeof val === "object" && Object.keys(val as object).length === 0),
+    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") {
+      if (current[key] == null || typeof current[key] !== 'object') {
         current[key] = {}
       }
       current = current[key]
@@ -17,10 +17,10 @@ vi.mock("@pyreon/ui-core", () => ({
   },
 }))
 
-import makeItResponsive from "../responsive/makeItResponsive"
+import makeItResponsive from '../responsive/makeItResponsive'
 
 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])
@@ -31,76 +31,76 @@ const mockCss = (strings: TemplateStringsArray, ...vals: any[]) => {
 const mockStyles = ({ theme }: { theme: Record<string, unknown> }) => {
   return Object.entries(theme)
     .map(([k, v]) => `${k}: ${v};`)
-    .join(" ")
+    .join(' ')
 }
 
-describe("makeItResponsive", () => {
-  it("returns empty string when customTheme is empty/undefined", () => {
+describe('makeItResponsive', () => {
+  it('returns empty string when customTheme is empty/undefined', () => {
     const responsive = makeItResponsive({
-      key: "styles",
+      key: 'styles',
       css: mockCss,
       styles: mockStyles,
     })
 
     const result = responsive({ theme: {} })
-    expect(result).toBe("")
+    expect(result).toBe('')
   })
 
-  it("returns empty string when customTheme is empty object", () => {
+  it('returns empty string when customTheme is empty object', () => {
     const responsive = makeItResponsive({
       theme: {},
-      key: "styles",
+      key: 'styles',
       css: mockCss,
       styles: mockStyles,
     })
 
     const result = responsive({ theme: {} })
-    expect(result).toBe("")
+    expect(result).toBe('')
   })
 
-  it("without breakpoints: wraps styles output in css template", () => {
+  it('without breakpoints: wraps styles output in css template', () => {
     const responsive = makeItResponsive({
-      theme: { color: "red" },
+      theme: { color: 'red' },
       css: mockCss,
       styles: mockStyles,
     })
 
     const result = responsive({ theme: {} })
-    expect(result).toContain("color: red;")
+    expect(result).toContain('color: red;')
   })
 
-  it("uses props[key] when theme is not provided", () => {
+  it('uses props[key] when theme is not provided', () => {
     const responsive = makeItResponsive({
-      key: "myStyles",
+      key: 'myStyles',
       css: mockCss,
       styles: mockStyles,
     })
 
     const result = responsive({
       theme: {},
-      myStyles: { fontSize: "16px" },
+      myStyles: { fontSize: '16px' },
     })
 
-    expect(result).toContain("fontSize: 16px;")
+    expect(result).toContain('fontSize: 16px;')
   })
 
-  it("with breakpoints and __PYREON__: returns array of media-wrapped styles per breakpoint", () => {
-    const sortedBreakpoints = ["xs", "sm"]
+  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) {"
+        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 += "}"
+        r += '}'
         return r
       },
     }
 
     const responsive = makeItResponsive({
-      theme: { color: { xs: "red", sm: "blue" } },
+      theme: { color: { xs: 'red', sm: 'blue' } },
       css: mockCss,
       styles: mockStyles,
       normalize: true,
@@ -117,14 +117,14 @@ describe("makeItResponsive", () => {
     expect(result).toHaveLength(2)
   })
 
-  it("caching: second call with same internalTheme object returns same result", () => {
-    const sortedBreakpoints = ["xs", "sm"]
+  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 themeObj = { color: { xs: 'red', sm: 'blue' } }
 
     const responsive = makeItResponsive({
       theme: themeObj,
@@ -143,8 +143,8 @@ describe("makeItResponsive", () => {
     expect(result1).toEqual(result2)
   })
 
-  it("normalize=false skips normalizeTheme step", () => {
-    const sortedBreakpoints = ["xs", "sm"]
+  it('normalize=false skips normalizeTheme step', () => {
+    const sortedBreakpoints = ['xs', 'sm']
     const media: Record<string, (strings: TemplateStringsArray, ...vals: any[]) => string> = {
       xs: mockCss,
       sm: mockCss,
@@ -153,7 +153,7 @@ describe("makeItResponsive", () => {
     // 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" } },
+      theme: { color: { xs: 'red', sm: 'blue' } },
       css: mockCss,
       styles: mockStyles,
       normalize: false,