@pyreon/unistyle 0.11.4 → 0.11.6

package/src/__tests__/borderRadius.test.ts

@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest"
-import borderRadius from "../styles/shorthands/borderRadius"
+import { describe, expect, it } from 'vitest'
+import borderRadius from '../styles/shorthands/borderRadius'
 
 const empty = {
   full: undefined,
@@ -15,27 +15,27 @@ const empty = {
 
 const br = borderRadius()
 
-describe("borderRadius", () => {
-  it("returns null when no values provided", () => {
+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;")
+  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('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%;")
+    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", () => {
+  describe('two-value shorthand', () => {
+    it('tl===br and tr===bl produces two-value shorthand', () => {
       const result = br({
         ...empty,
         topLeft: 16,
@@ -43,12 +43,12 @@ describe("borderRadius", () => {
         bottomRight: 16,
         bottomLeft: 32,
       })
-      expect(result).toBe("border-radius: 1rem 2rem;")
+      expect(result).toBe('border-radius: 1rem 2rem;')
     })
   })
 
-  describe("three-value shorthand", () => {
-    it("tl, tr===bl, br produces three-value shorthand", () => {
+  describe('three-value shorthand', () => {
+    it('tl, tr===bl, br produces three-value shorthand', () => {
       const result = br({
         ...empty,
         topLeft: 16,
@@ -56,12 +56,12 @@ describe("borderRadius", () => {
         bottomRight: 48,
         bottomLeft: 32,
       })
-      expect(result).toBe("border-radius: 1rem 2rem 3rem;")
+      expect(result).toBe('border-radius: 1rem 2rem 3rem;')
     })
   })
 
-  describe("four-value shorthand", () => {
-    it("all different produces four-value shorthand", () => {
+  describe('four-value shorthand', () => {
+    it('all different produces four-value shorthand', () => {
       const result = br({
         ...empty,
         topLeft: 16,
@@ -69,57 +69,57 @@ describe("borderRadius", () => {
         bottomRight: 48,
         bottomLeft: 64,
       })
-      expect(result).toBe("border-radius: 1rem 2rem 3rem 4rem;")
+      expect(result).toBe('border-radius: 1rem 2rem 3rem 4rem;')
     })
   })
 
-  describe("per-side values", () => {
-    it("top sets topLeft and topRight", () => {
+  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;")
+      expect(result).toBe('border-radius: 1rem 1rem 2rem 2rem;')
     })
 
-    it("left sets topLeft and bottomLeft", () => {
+    it('left sets topLeft and bottomLeft', () => {
       const result = br({ ...empty, left: 16, right: 32 })
-      expect(result).toBe("border-radius: 1rem 2rem 2rem 1rem;")
+      expect(result).toBe('border-radius: 1rem 2rem 2rem 1rem;')
     })
   })
 
-  describe("individual corners override sides", () => {
-    it("topLeft overrides top and left", () => {
+  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;")
+      expect(result).toBe('border-radius: 2rem 1rem 1rem;')
     })
 
-    it("bottomRight overrides bottom and right", () => {
+    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;")
+      expect(result).toBe('border-radius: 1rem 1rem 2rem;')
     })
   })
 
-  describe("individual properties when not all corners have values", () => {
-    it("only topLeft is set", () => {
+  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;")
+      expect(result).toBe('border-top-left-radius: 1rem;')
     })
 
-    it("topLeft and bottomRight are set", () => {
+    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;")
+      expect(result).toBe('border-top-left-radius: 1rem;border-bottom-right-radius: 2rem;')
     })
 
-    it("top only sets topLeft and topRight individual properties", () => {
+    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;")
+      expect(result).toBe('border-top-left-radius: 1rem;border-top-right-radius: 1rem;')
     })
   })
 
-  describe("custom rootSize", () => {
-    it("uses custom rootSize for conversion", () => {
+  describe('custom rootSize', () => {
+    it('uses custom rootSize for conversion', () => {
       const brCustom = borderRadius(10)
-      expect(brCustom({ ...empty, full: 20 })).toBe("border-radius: 2rem;")
+      expect(brCustom({ ...empty, full: 20 })).toBe('border-radius: 2rem;')
     })
   })
 })

package/src/__tests__/camelToKebab.test.ts

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

package/src/__tests__/context.test.ts

@@ -1,12 +1,12 @@
-import { describe, expect, it, vi } from "vitest"
+import { describe, expect, it, vi } from 'vitest'
 
-vi.mock("@pyreon/ui-core", () => {
-  const mockContext = { id: Symbol("test-context") }
+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 = ""
+        let r = ''
         for (let i = 0; i < strings.length; i++) {
           r += strings[i]
           if (i < vals.length) r += String(vals[i])
@@ -16,12 +16,12 @@ vi.mock("@pyreon/ui-core", () => {
     },
     context: mockContext,
     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),
   }
 })
 
-import { Provider as CoreProvider } from "@pyreon/ui-core"
-import Provider, { context } from "../context"
+import { Provider as CoreProvider } from '@pyreon/ui-core'
+import Provider, { context } from '../context'
 
 const mockCoreProvider = CoreProvider as ReturnType<typeof vi.fn>
 
@@ -32,13 +32,13 @@ const firstCallArg = () => {
   return (calls[0] as any[])[0] as any
 }
 
-describe("Provider", () => {
-  it("exports context from @pyreon/ui-core", () => {
+describe('Provider', () => {
+  it('exports context from @pyreon/ui-core', () => {
     expect(context).toBeDefined()
-    expect(context).toHaveProperty("id")
+    expect(context).toHaveProperty('id')
   })
 
-  it("calls CoreProvider with enriched theme", () => {
+  it('calls CoreProvider with enriched theme', () => {
     mockCoreProvider.mockClear()
 
     Provider({
@@ -48,10 +48,10 @@ describe("Provider", () => {
 
     expect(mockCoreProvider).toHaveBeenCalledTimes(1)
     const calledWith = firstCallArg()
-    expect(calledWith.theme).toHaveProperty("__PYREON__")
+    expect(calledWith.theme).toHaveProperty('__PYREON__')
   })
 
-  it("when theme has no breakpoints: __PYREON__ has undefined sortedBreakpoints and media", () => {
+  it('when theme has no breakpoints: __PYREON__ has undefined sortedBreakpoints and media', () => {
     mockCoreProvider.mockClear()
 
     Provider({
@@ -64,7 +64,7 @@ describe("Provider", () => {
     expect(enrichedTheme.__PYREON__.media).toBeUndefined()
   })
 
-  it("when theme has empty breakpoints: __PYREON__ has undefined sortedBreakpoints and media", () => {
+  it('when theme has empty breakpoints: __PYREON__ has undefined sortedBreakpoints and media', () => {
     mockCoreProvider.mockClear()
 
     Provider({
@@ -77,7 +77,7 @@ describe("Provider", () => {
     expect(enrichedTheme.__PYREON__.media).toBeUndefined()
   })
 
-  it("when theme has breakpoints: __PYREON__ has sortedBreakpoints and media objects", () => {
+  it('when theme has breakpoints: __PYREON__ has sortedBreakpoints and media objects', () => {
     mockCoreProvider.mockClear()
 
     Provider({
@@ -89,15 +89,15 @@ describe("Provider", () => {
     })
 
     const enrichedTheme = firstCallArg().theme
-    expect(enrichedTheme.__PYREON__.sortedBreakpoints).toEqual(["xs", "sm", "md"])
+    expect(enrichedTheme.__PYREON__.sortedBreakpoints).toEqual(['xs', 'sm', 'md'])
     expect(enrichedTheme.__PYREON__.media).toBeDefined()
-    expect(Object.keys(enrichedTheme.__PYREON__.media)).toEqual(["xs", "sm", "md"])
+    expect(Object.keys(enrichedTheme.__PYREON__.media)).toEqual(['xs', 'sm', 'md'])
   })
 
-  it("passes children through to CoreProvider", () => {
+  it('passes children through to CoreProvider', () => {
     mockCoreProvider.mockClear()
 
-    const mockChild = { type: "div" } as any
+    const mockChild = { type: 'div' } as any
     Provider({
       theme: { rootSize: 16 },
       children: mockChild,
@@ -107,20 +107,20 @@ describe("Provider", () => {
     expect(calledWith.children).toBe(mockChild)
   })
 
-  it("preserves other theme properties in enriched theme", () => {
+  it('preserves other theme properties in enriched theme', () => {
     mockCoreProvider.mockClear()
 
     Provider({
-      theme: { rootSize: 16, customProp: "hello" } as any,
+      theme: { rootSize: 16, customProp: 'hello' } as any,
       children: null,
     })
 
     const enrichedTheme = firstCallArg().theme
     expect(enrichedTheme.rootSize).toBe(16)
-    expect(enrichedTheme.customProp).toBe("hello")
+    expect(enrichedTheme.customProp).toBe('hello')
   })
 
-  it("media functions are callable tagged template functions", () => {
+  it('media functions are callable tagged template functions', () => {
     mockCoreProvider.mockClear()
 
     Provider({
@@ -132,16 +132,16 @@ describe("Provider", () => {
     })
 
     const media = firstCallArg().theme.__PYREON__.media
-    expect(typeof media.xs).toBe("function")
-    expect(typeof media.sm).toBe("function")
+    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")
+    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)")
+    expect(smResult).toContain('@media only screen and (min-width: 36em)')
   })
 })

package/src/__tests__/createMediaQueries.test.ts

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