@pyreon/unistyle 0.11.5 → 0.11.6

package/src/__tests__/processDescriptor.test.ts

@@ -1,14 +1,14 @@
-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"
+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 = ""
+  let result = ''
   for (let i = 0; i < strings.length; i++) {
     result += strings[i]
-    if (i < vals.length) result += String(vals[i] ?? "")
+    if (i < vals.length) result += String(vals[i] ?? '')
   }
   return result
 }
@@ -16,7 +16,7 @@ const mockCss = (strings: TemplateStringsArray, ...vals: any[]) => {
 const mockCalc = (...params: any[]) => {
   const val = params.find((p) => p != null)
   if (val == null) return null
-  if (typeof val === "string") return val
+  if (typeof val === 'string') return val
   return `${val / 16}rem`
 }
 
@@ -25,23 +25,23 @@ 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" }
+describe('processDescriptor', () => {
+  describe('simple kind', () => {
+    const d: PropertyDescriptor = { kind: 'simple', css: 'display', key: 'display' }
 
-    it("returns CSS declaration when key has a value", () => {
+    it('returns CSS declaration when key has a value', () => {
       const result = processDescriptor(
         d,
-        t({ display: "flex" }),
+        t({ display: 'flex' }),
         mockCss,
         mockCalc,
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("display: flex;")
+      expect(result).toBe('display: flex;')
     })
 
-    it("returns empty string when key is null", () => {
+    it('returns empty string when key is null', () => {
       const result = processDescriptor(
         d,
         t({ display: null as any }),
@@ -50,10 +50,10 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("")
+      expect(result).toBe('')
     })
 
-    it("returns empty string when key is undefined", () => {
+    it('returns empty string when key is undefined', () => {
       const result = processDescriptor(
         d,
         t({}),
@@ -62,14 +62,14 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("")
+      expect(result).toBe('')
     })
   })
 
-  describe("convert kind", () => {
-    const d: PropertyDescriptor = { kind: "convert", css: "width", key: "width" }
+  describe('convert kind', () => {
+    const d: PropertyDescriptor = { kind: 'convert', css: 'width', key: 'width' }
 
-    it("returns converted value through calc function", () => {
+    it('returns converted value through calc function', () => {
       const result = processDescriptor(
         d,
         t({ width: 32 } as any),
@@ -78,30 +78,30 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("width: 2rem;")
+      expect(result).toBe('width: 2rem;')
     })
 
-    it("passes through string values", () => {
+    it('passes through string values', () => {
       const result = processDescriptor(
         d,
-        t({ width: "50%" } as any),
+        t({ width: '50%' } as any),
         mockCss,
         mockCalc,
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("width: 50%;")
+      expect(result).toBe('width: 50%;')
     })
   })
 
-  describe("convert_fallback kind", () => {
+  describe('convert_fallback kind', () => {
     const d: PropertyDescriptor = {
-      kind: "convert_fallback",
-      css: "width",
-      keys: ["width", "size"] as (keyof InnerTheme)[],
+      kind: 'convert_fallback',
+      css: 'width',
+      keys: ['width', 'size'] as (keyof InnerTheme)[],
     }
 
-    it("uses first defined key value", () => {
+    it('uses first defined key value', () => {
       const result = processDescriptor(
         d,
         t({ width: 16 } as any),
@@ -110,13 +110,13 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("width: 1rem;")
+      expect(result).toBe('width: 1rem;')
     })
   })
 
-  describe("special kind", () => {
-    it("returns fullScreen CSS when fullScreen is truthy", () => {
-      const d: PropertyDescriptor = { kind: "special", id: "fullScreen" }
+  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),
@@ -125,12 +125,12 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toContain("position: fixed")
-      expect(result).toContain("top: 0")
+      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" }
+    it('returns empty string when fullScreen is falsy', () => {
+      const d: PropertyDescriptor = { kind: 'special', id: 'fullScreen' }
       const result = processDescriptor(
         d,
         t({}),
@@ -139,37 +139,37 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("")
+      expect(result).toBe('')
     })
 
-    it("returns backgroundImage CSS when set", () => {
-      const d: PropertyDescriptor = { kind: "special", id: "backgroundImage" }
+    it('returns backgroundImage CSS when set', () => {
+      const d: PropertyDescriptor = { kind: 'special', id: 'backgroundImage' }
       const result = processDescriptor(
         d,
-        t({ backgroundImage: "url.png" } as any),
+        t({ backgroundImage: 'url.png' } as any),
         mockCss,
         mockCalc,
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("background-image: url(url.png);")
+      expect(result).toBe('background-image: url(url.png);')
     })
 
-    it("returns animation CSS when keyframe is set", () => {
-      const d: PropertyDescriptor = { kind: "special", id: "animation" }
+    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),
+        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;")
+      expect(result).toBe('animation: fadeIn 0.3s ease;')
     })
 
-    it("returns hideEmpty pseudo-selector when hideEmpty is true", () => {
-      const d: PropertyDescriptor = { kind: "special", id: "hideEmpty" }
+    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),
@@ -178,12 +178,12 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toContain("&:empty")
-      expect(result).toContain("display: none")
+      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" }
+    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),
@@ -192,12 +192,12 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toContain("&::after")
-      expect(result).toContain("clear: both")
+      expect(result).toContain('&::after')
+      expect(result).toContain('clear: both')
     })
 
-    it("returns empty string for unknown special id", () => {
-      const d: PropertyDescriptor = { kind: "special", id: "unknown" }
+    it('returns empty string for unknown special id', () => {
+      const d: PropertyDescriptor = { kind: 'special', id: 'unknown' }
       const result = processDescriptor(
         d,
         t({}),
@@ -206,26 +206,26 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("")
+      expect(result).toBe('')
     })
   })
 
-  describe("edge kind", () => {
-    it("delegates to shorthand function", () => {
+  describe('edge kind', () => {
+    it('delegates to shorthand function', () => {
       const d: PropertyDescriptor = {
-        kind: "edge",
-        property: "margin",
+        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,
+          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 customEdge = () => 'margin: 1rem;'
       const result = processDescriptor(
         d,
         t({ margin: 16 } as any),
@@ -234,21 +234,21 @@ describe("processDescriptor", () => {
         customEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("margin: 1rem;")
+      expect(result).toBe('margin: 1rem;')
     })
 
-    it("returns empty string when shorthand returns null", () => {
+    it('returns empty string when shorthand returns null', () => {
       const d: PropertyDescriptor = {
-        kind: "edge",
-        property: "padding",
+        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,
+          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(
@@ -259,27 +259,27 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("")
+      expect(result).toBe('')
     })
   })
 
-  describe("border_radius kind", () => {
-    it("delegates to borderRadius function", () => {
+  describe('border_radius kind', () => {
+    it('delegates to borderRadius function', () => {
       const d: PropertyDescriptor = {
-        kind: "border_radius",
+        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,
+          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 customBR = () => 'border-radius: 4px;'
       const result = processDescriptor(
         d,
         t({ borderRadius: 4 } as any),
@@ -288,22 +288,22 @@ describe("processDescriptor", () => {
         mockEdge as any,
         customBR as any,
       )
-      expect(result).toBe("border-radius: 4px;")
+      expect(result).toBe('border-radius: 4px;')
     })
 
-    it("returns empty string when borderRadius returns null", () => {
+    it('returns empty string when borderRadius returns null', () => {
       const d: PropertyDescriptor = {
-        kind: "border_radius",
+        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,
+          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(
@@ -314,7 +314,7 @@ describe("processDescriptor", () => {
         mockEdge as any,
         mockBorderRadius as any,
       )
-      expect(result).toBe("")
+      expect(result).toBe('')
     })
   })
 })

package/src/__tests__/responsive.test.ts

@@ -1,22 +1,22 @@
-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", () => {
+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")
+    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", () => {
+  it('has correct pixel values', () => {
     expect(breakpoints.breakpoints.xs).toBe(0)
     expect(breakpoints.breakpoints.sm).toBe(576)
     expect(breakpoints.breakpoints.md).toBe(768)
@@ -26,42 +26,42 @@ describe("breakpoints", () => {
   })
 })
 
-describe("sortBreakpoints", () => {
-  it("sorts breakpoints by value ascending, returns keys", () => {
+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"])
+    expect(sorted).toEqual(['xs', 'sm', 'md', 'xl'])
   })
 
-  it("handles already sorted breakpoints", () => {
+  it('handles already sorted breakpoints', () => {
     const sorted = sortBreakpoints({ xs: 0, sm: 576, md: 768 })
-    expect(sorted).toEqual(["xs", "sm", "md"])
+    expect(sorted).toEqual(['xs', 'sm', 'md'])
   })
 
-  it("handles single breakpoint", () => {
-    expect(sortBreakpoints({ xs: 0 })).toEqual(["xs"])
+  it('handles single breakpoint', () => {
+    expect(sortBreakpoints({ xs: 0 })).toEqual(['xs'])
   })
 
-  it("handles empty object", () => {
+  it('handles empty object', () => {
     expect(sortBreakpoints({})).toEqual([])
   })
 
-  it("sorts full default breakpoint set", () => {
+  it('sorts full default breakpoint set', () => {
     const sorted = sortBreakpoints(breakpoints.breakpoints)
-    expect(sorted).toEqual(["xs", "sm", "md", "lg", "xl", "xxl"])
+    expect(sorted).toEqual(['xs', 'sm', 'md', 'lg', 'xl', 'xxl'])
   })
 })
 
-describe("normalizeTheme", () => {
-  const bpKeys = ["xs", "sm", "md", "lg", "xl"]
+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 }
+  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", () => {
+  it('expands array values across breakpoints', () => {
     const theme = { fontSize: [12, 14, 16, 18, 20] }
     const result = normalizeTheme({ theme, breakpoints: bpKeys })
     expect(result.fontSize).toEqual({
@@ -73,7 +73,7 @@ describe("normalizeTheme", () => {
     })
   })
 
-  it("array values use last value for extra breakpoints", () => {
+  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)
@@ -81,7 +81,7 @@ describe("normalizeTheme", () => {
     expect((result.fontSize as Record<string, unknown>).md).toBe(14)
   })
 
-  it("expands object values with carry-forward", () => {
+  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>
@@ -91,30 +91,30 @@ describe("normalizeTheme", () => {
     expect(fs.lg).toBe(16) // carried from md
   })
 
-  it("skips null values", () => {
+  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"]
+describe('transformTheme', () => {
+  const bpKeys = ['xs', 'sm', 'md']
 
-  it("pivots scalar values to first breakpoint", () => {
-    const theme = { color: "red" }
+  it('pivots scalar values to first breakpoint', () => {
+    const theme = { color: 'red' }
     const result = transformTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ color: "red" })
+    expect(result.xs).toEqual({ color: 'red' })
   })
 
-  it("pivots object values to breakpoints", () => {
-    const theme = { color: { xs: "red", md: "blue" } }
+  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" })
+    expect(result.xs).toEqual({ color: 'red' })
+    expect(result.md).toEqual({ color: 'blue' })
   })
 
-  it("pivots array values by index", () => {
+  it('pivots array values by index', () => {
     const theme = { fontSize: [12, 14, 16] }
     const result = transformTheme({ theme, breakpoints: bpKeys })
     expect(result.xs).toEqual({ fontSize: 12 })
@@ -122,56 +122,56 @@ describe("transformTheme", () => {
     expect(result.md).toEqual({ fontSize: 16 })
   })
 
-  it("returns empty object for empty theme", () => {
+  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('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" } }
+  it('filters out unexpected breakpoint keys', () => {
+    const theme = { color: { xs: 'red', unknown: 'green' } }
     const result = transformTheme({ theme, breakpoints: bpKeys })
-    expect(result).not.toHaveProperty("unknown")
+    expect(result).not.toHaveProperty('unknown')
   })
 })
 
-describe("optimizeTheme", () => {
-  const bpKeys = ["xs", "sm", "md", "lg"]
+describe('optimizeTheme', () => {
+  const bpKeys = ['xs', 'sm', 'md', 'lg']
 
-  it("keeps first breakpoint", () => {
+  it('keeps first breakpoint', () => {
     const theme = {
-      xs: { color: "red" },
-      sm: { color: "blue" },
+      xs: { color: 'red' },
+      sm: { color: 'blue' },
     }
     const result = optimizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ color: "red" })
+    expect(result.xs).toEqual({ color: 'red' })
   })
 
-  it("removes duplicate breakpoints", () => {
+  it('removes duplicate breakpoints', () => {
     const theme = {
-      xs: { color: "red" },
-      sm: { color: "red" },
-      md: { color: "blue" },
+      xs: { color: 'red' },
+      sm: { color: 'red' },
+      md: { color: 'blue' },
     }
     const result = optimizeTheme({ theme, breakpoints: bpKeys })
-    expect(result.xs).toEqual({ color: "red" })
+    expect(result.xs).toEqual({ color: 'red' })
     expect(result.sm).toBeUndefined()
-    expect(result.md).toEqual({ color: "blue" })
+    expect(result.md).toEqual({ color: 'blue' })
   })
 
-  it("keeps breakpoints with different values", () => {
+  it('keeps breakpoints with different values', () => {
     const theme = {
-      xs: { color: "red", fontSize: 12 },
-      sm: { color: "red", fontSize: 14 },
+      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", () => {
+  it('handles empty theme', () => {
     expect(optimizeTheme({ theme: {}, breakpoints: bpKeys })).toEqual({})
   })
 })