@pyreon/styler 0.11.5 → 0.11.7

package/src/__tests__/sheet-split-atrules.test.ts

@@ -1,6 +1,6 @@
-import { afterEach, beforeEach, describe, expect, it } from "vitest"
-import { hash } from "../hash"
-import { createSheet, StyleSheet } from "../sheet"
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { hash } from '../hash'
+import { createSheet, StyleSheet } from '../sheet'
 
 /**
  * Tests for the @media/@supports/@container splitting behavior.
@@ -10,8 +10,8 @@ import { createSheet, StyleSheet } from "../sheet"
  * This matches the approach used by styled-components and Emotion.
  */
 
-describe("StyleSheet -- at-rule splitting", () => {
-  describe("SSR mode (splitAtRules internals via SSR output)", () => {
+describe('StyleSheet -- at-rule splitting', () => {
+  describe('SSR mode (splitAtRules internals via SSR output)', () => {
     let originalDocument: typeof document
 
     beforeEach(() => {
@@ -24,18 +24,18 @@ describe("StyleSheet -- at-rule splitting", () => {
       globalThis.document = originalDocument
     })
 
-    it("CSS without @media produces a single rule", () => {
+    it('CSS without @media produces a single rule', () => {
       const s = createSheet()
-      s.insert("color: red; font-size: 16px;")
+      s.insert('color: red; font-size: 16px;')
       const styles = s.getStyles()
 
       // Should have exactly one rule: .pyr-xxx{color: red; font-size: 16px;}
       expect(styles).toMatch(/^\.pyr-[0-9a-z]+\{color: red; font-size: 16px;\}$/)
     })
 
-    it("CSS with @media splits into base + media rules", () => {
+    it('CSS with @media splits into base + media rules', () => {
       const s = createSheet()
-      s.insert("color: red; @media (min-width: 768px){color: blue;}")
+      s.insert('color: red; @media (min-width: 768px){color: blue;}')
       const styles = s.getStyles()
 
       // Base rule: .pyr-xxx{color: red;}
@@ -46,15 +46,15 @@ describe("StyleSheet -- at-rule splitting", () => {
       expect(styles).not.toMatch(/\.pyr-[0-9a-z]+\{[^}]*@media/)
     })
 
-    it("CSS with multiple @media produces multiple separate rules", () => {
+    it('CSS with multiple @media produces multiple separate rules', () => {
       const s = createSheet()
       s.insert(
-        "position: absolute; bottom: -4.375rem; @media (min-width: 36em){right: -11.25rem;} @media (min-width: 48em){bottom: 0; height: 40rem;}",
+        'position: absolute; bottom: -4.375rem; @media (min-width: 36em){right: -11.25rem;} @media (min-width: 48em){bottom: 0; height: 40rem;}',
       )
       const styles = s.getStyles()
 
       // Base
-      expect(styles).toContain("position: absolute; bottom: -4.375rem;")
+      expect(styles).toContain('position: absolute; bottom: -4.375rem;')
       // Two separate media rules
       expect(styles).toMatch(/@media \(min-width: 36em\)\{\.pyr-[0-9a-z]+\{right: -11.25rem;\}\}/)
       expect(styles).toMatch(
@@ -62,9 +62,9 @@ describe("StyleSheet -- at-rule splitting", () => {
       )
     })
 
-    it("CSS with only @media (no base declarations) works correctly", () => {
+    it('CSS with only @media (no base declarations) works correctly', () => {
       const s = createSheet()
-      s.insert("@media (min-width: 768px){color: blue;} @media (min-width: 1024px){color: green;}")
+      s.insert('@media (min-width: 768px){color: blue;} @media (min-width: 1024px){color: green;}')
       const styles = s.getStyles()
 
       // No base rule (or empty base)
@@ -74,9 +74,9 @@ describe("StyleSheet -- at-rule splitting", () => {
       expect(styles).toMatch(/@media \(min-width: 1024px\)\{\.pyr-[0-9a-z]+\{color: green;\}\}/)
     })
 
-    it("boost doubles selector in both base and media rules", () => {
+    it('boost doubles selector in both base and media rules', () => {
       const s = createSheet()
-      s.insert("color: red; @media (min-width: 768px){color: blue;}", true)
+      s.insert('color: red; @media (min-width: 768px){color: blue;}', true)
       const styles = s.getStyles()
 
       // Base: .pyr-xxx.pyr-xxx{color: red;}
@@ -87,18 +87,18 @@ describe("StyleSheet -- at-rule splitting", () => {
       )
     })
 
-    it("@supports blocks are also split out", () => {
+    it('@supports blocks are also split out', () => {
       const s = createSheet()
-      s.insert("display: flex; @supports (display: grid){display: grid;}")
+      s.insert('display: flex; @supports (display: grid){display: grid;}')
       const styles = s.getStyles()
 
       expect(styles).toMatch(/\.pyr-[0-9a-z]+\{display: flex;\}/)
       expect(styles).toMatch(/@supports \(display: grid\)\{\.pyr-[0-9a-z]+\{display: grid;\}\}/)
     })
 
-    it("@container blocks are also split out", () => {
+    it('@container blocks are also split out', () => {
       const s = createSheet()
-      s.insert("font-size: 1rem; @container (min-width: 400px){font-size: 1.25rem;}")
+      s.insert('font-size: 1rem; @container (min-width: 400px){font-size: 1.25rem;}')
       const styles = s.getStyles()
 
       expect(styles).toMatch(/\.pyr-[0-9a-z]+\{font-size: 1rem;\}/)
@@ -107,9 +107,9 @@ describe("StyleSheet -- at-rule splitting", () => {
       )
     })
 
-    it("@layer wraps each split rule individually", () => {
-      const s = createSheet({ layer: "components" })
-      s.insert("color: red; @media (min-width: 768px){color: blue;}")
+    it('@layer wraps each split rule individually', () => {
+      const s = createSheet({ layer: 'components' })
+      s.insert('color: red; @media (min-width: 768px){color: blue;}')
       const styles = s.getStyles()
 
       // Base wrapped in layer
@@ -120,9 +120,9 @@ describe("StyleSheet -- at-rule splitting", () => {
       )
     })
 
-    it("deduplicates CSS with @media (same CSS -> same className -> single insert)", () => {
+    it('deduplicates CSS with @media (same CSS -> same className -> single insert)', () => {
       const s = createSheet()
-      const cssStr = "color: red; @media (min-width: 768px){color: blue;}"
+      const cssStr = 'color: red; @media (min-width: 768px){color: blue;}'
       s.insert(cssStr)
       s.insert(cssStr)
 
@@ -131,22 +131,22 @@ describe("StyleSheet -- at-rule splitting", () => {
       expect(baseMatches).toHaveLength(1)
     })
 
-    it("real-world example: position + responsive inset/height", () => {
+    it('real-world example: position + responsive inset/height', () => {
       const s = createSheet()
       const cssStr =
-        "position: absolute; bottom: -4.375rem; right: -12.5rem; height: 28.75rem; " +
-        "@media only screen and (min-width: 36em){right: -11.25rem;} " +
-        "@media only screen and (min-width: 48em){bottom: 0; height: 40rem;} " +
-        "@media only screen and (min-width: 62em){right: -6.25rem;} " +
-        "@media only screen and (min-width: 100em){right: initial; left: 55%;}"
+        'position: absolute; bottom: -4.375rem; right: -12.5rem; height: 28.75rem; ' +
+        '@media only screen and (min-width: 36em){right: -11.25rem;} ' +
+        '@media only screen and (min-width: 48em){bottom: 0; height: 40rem;} ' +
+        '@media only screen and (min-width: 62em){right: -6.25rem;} ' +
+        '@media only screen and (min-width: 100em){right: initial; left: 55%;}'
       s.insert(cssStr, true)
       const styles = s.getStyles()
 
       // Base rule has position, bottom, right, height
-      expect(styles).toContain("position: absolute;")
-      expect(styles).toContain("bottom: -4.375rem;")
-      expect(styles).toContain("right: -12.5rem;")
-      expect(styles).toContain("height: 28.75rem;")
+      expect(styles).toContain('position: absolute;')
+      expect(styles).toContain('bottom: -4.375rem;')
+      expect(styles).toContain('right: -12.5rem;')
+      expect(styles).toContain('height: 28.75rem;')
 
       // Each media query is a separate top-level rule
       expect(styles).toMatch(/@media only screen and \(min-width: 36em\)\{/)
@@ -158,42 +158,42 @@ describe("StyleSheet -- at-rule splitting", () => {
       expect(styles).not.toMatch(/\.pyr-[0-9a-z]+\{[^}]*@media/)
     })
 
-    it("getStyleTag contains all split rules", () => {
+    it('getStyleTag contains all split rules', () => {
       const s = createSheet()
-      s.insert("color: red; @media (min-width: 768px){color: blue;}")
+      s.insert('color: red; @media (min-width: 768px){color: blue;}')
       const tag = s.getStyleTag()
 
       expect(tag).toMatch(/^<style data-pyreon-styler="">.*<\/style>$/)
-      expect(tag).toContain("color: red;")
-      expect(tag).toContain("@media (min-width: 768px)")
+      expect(tag).toContain('color: red;')
+      expect(tag).toContain('@media (min-width: 768px)')
     })
 
-    it("reset clears all split rules from SSR buffer and cache", () => {
+    it('reset clears all split rules from SSR buffer and cache', () => {
       const s = createSheet()
-      s.insert("color: red; @media (min-width: 768px){color: blue;}")
-      expect(s.getStyles()).not.toBe("")
+      s.insert('color: red; @media (min-width: 768px){color: blue;}')
+      expect(s.getStyles()).not.toBe('')
 
       s.reset()
-      expect(s.getStyles()).toBe("")
+      expect(s.getStyles()).toBe('')
       expect(s.cacheSize).toBe(0) // cache also cleared for SSR correctness
     })
   })
 
-  describe("DOM mode (insertRule verification)", () => {
+  describe('DOM mode (insertRule verification)', () => {
     beforeEach(() => {
-      for (const el of Array.from(document.querySelectorAll("style[data-pyreon-styler]")))
+      for (const el of Array.from(document.querySelectorAll('style[data-pyreon-styler]')))
         el.remove()
     })
 
-    it("inserts base + media as separate CSSRules", () => {
+    it('inserts base + media as separate CSSRules', () => {
       const s = createSheet()
-      s.insert("color: red; @media (min-width: 768px){color: blue;}")
+      s.insert('color: red; @media (min-width: 768px){color: blue;}')
 
       // Find the style element
-      const styleEl = document.querySelector("style[data-pyreon-styler]") as HTMLStyleElement
+      const styleEl = document.querySelector('style[data-pyreon-styler]') as HTMLStyleElement
       expect(styleEl).not.toBeNull()
       const sheet = styleEl.sheet
-      if (!sheet) throw new Error("expected sheet")
+      if (!sheet) throw new Error('expected sheet')
 
       // Should have at least 2 rules: one CSSStyleRule + one CSSMediaRule
       let hasStyleRule = false
@@ -201,7 +201,7 @@ describe("StyleSheet -- at-rule splitting", () => {
 
       for (let i = 0; i < sheet.cssRules.length; i++) {
         const rule = sheet.cssRules[i]
-        if (rule instanceof CSSStyleRule && rule.selectorText.startsWith(".pyr-")) {
+        if (rule instanceof CSSStyleRule && rule.selectorText.startsWith('.pyr-')) {
           hasStyleRule = true
         }
         if (rule instanceof CSSMediaRule) {
@@ -214,13 +214,13 @@ describe("StyleSheet -- at-rule splitting", () => {
     })
 
     // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex logic is inherent to this function
-    it("boosted selector appears in both base and media rules", () => {
+    it('boosted selector appears in both base and media rules', () => {
       const s = createSheet()
-      const className = s.insert("color: red; @media (min-width: 768px){color: blue;}", true)
+      const className = s.insert('color: red; @media (min-width: 768px){color: blue;}', true)
 
-      const styleEl = document.querySelector("style[data-pyreon-styler]") as HTMLStyleElement
+      const styleEl = document.querySelector('style[data-pyreon-styler]') as HTMLStyleElement
       const sheet = styleEl.sheet
-      if (!sheet) throw new Error("expected sheet")
+      if (!sheet) throw new Error('expected sheet')
       const boostedSelector = `.${className}.${className}`
 
       let baseFound = false
@@ -246,19 +246,19 @@ describe("StyleSheet -- at-rule splitting", () => {
     })
   })
 
-  describe("hydration with split rules", () => {
+  describe('hydration with split rules', () => {
     beforeEach(() => {
-      for (const el of Array.from(document.querySelectorAll("style[data-pyreon-styler]")))
+      for (const el of Array.from(document.querySelectorAll('style[data-pyreon-styler]')))
         el.remove()
     })
 
-    it("hydrates className from CSSMediaRule inner selectors", () => {
+    it('hydrates className from CSSMediaRule inner selectors', () => {
       // Simulate SSR: create a style tag with split rules
-      const el = document.createElement("style")
-      el.setAttribute("data-pyreon-styler", "")
+      const el = document.createElement('style')
+      el.setAttribute('data-pyreon-styler', '')
       document.head.appendChild(el)
 
-      const className = `pyr-${hash("color: red;")}`
+      const className = `pyr-${hash('color: red;')}`
 
       // Insert rules that simulate what SSR produces
       el.sheet?.insertRule(`.${className}{color: red;}`, 0)
@@ -272,12 +272,12 @@ describe("StyleSheet -- at-rule splitting", () => {
       expect(s.cacheSize).toBeGreaterThanOrEqual(1)
     })
 
-    it("hydrates className from boosted selectors in media rules", () => {
-      const el = document.createElement("style")
-      el.setAttribute("data-pyreon-styler", "")
+    it('hydrates className from boosted selectors in media rules', () => {
+      const el = document.createElement('style')
+      el.setAttribute('data-pyreon-styler', '')
       document.head.appendChild(el)
 
-      const className = `pyr-${hash("font-size: 1rem;")}`
+      const className = `pyr-${hash('font-size: 1rem;')}`
 
       el.sheet?.insertRule(`.${className}.${className}{font-size: 1rem;}`, 0)
       el.sheet?.insertRule(
@@ -289,12 +289,12 @@ describe("StyleSheet -- at-rule splitting", () => {
       expect(s.has(className)).toBe(true)
     })
 
-    it("hydrates from media-only rules (no base style rule)", () => {
-      const el = document.createElement("style")
-      el.setAttribute("data-pyreon-styler", "")
+    it('hydrates from media-only rules (no base style rule)', () => {
+      const el = document.createElement('style')
+      el.setAttribute('data-pyreon-styler', '')
       document.head.appendChild(el)
 
-      const className = `pyr-${hash("responsive-only")}`
+      const className = `pyr-${hash('responsive-only')}`
 
       // Only a media rule, no base rule
       el.sheet?.insertRule(`@media (min-width: 768px){.${className}{color: blue;}}`, 0)
@@ -304,7 +304,7 @@ describe("StyleSheet -- at-rule splitting", () => {
     })
   })
 
-  describe("edge cases", () => {
+  describe('edge cases', () => {
     let originalDocument: typeof document
 
     beforeEach(() => {
@@ -317,39 +317,39 @@ describe("StyleSheet -- at-rule splitting", () => {
       globalThis.document = originalDocument
     })
 
-    it("handles empty CSS text", () => {
+    it('handles empty CSS text', () => {
       const s = createSheet()
-      const cls = s.insert("")
+      const cls = s.insert('')
       expect(cls).toMatch(/^pyr-/)
-      expect(s.getStyles()).toBe("")
+      expect(s.getStyles()).toBe('')
     })
 
-    it("handles CSS with @ in a value (not an at-rule)", () => {
+    it('handles CSS with @ in a value (not an at-rule)', () => {
       const s = createSheet()
       s.insert('content: "@media";')
       // Should not be confused by @ in a string value
       expect(s.getStyles()).toContain('content: "@media";')
     })
 
-    it("handles @keyframes reference in the CSS without splitting it", () => {
+    it('handles @keyframes reference in the CSS without splitting it', () => {
       const s = createSheet()
-      s.insert("animation: fadeIn 0.3s;")
+      s.insert('animation: fadeIn 0.3s;')
       const styles = s.getStyles()
-      expect(styles).toContain("animation: fadeIn 0.3s;")
+      expect(styles).toContain('animation: fadeIn 0.3s;')
     })
 
-    it("preserves &:hover nesting in base CSS", () => {
+    it('preserves &:hover nesting in base CSS', () => {
       const s = createSheet()
-      s.insert("color: red; &:hover{color: blue;}")
+      s.insert('color: red; &:hover{color: blue;}')
       const styles = s.getStyles()
 
       // The &:hover block should stay inside the base rule
       expect(styles).toMatch(/\.pyr-[0-9a-z]+\{color: red; &:hover\{color: blue;\}\}/)
     })
 
-    it("preserves &:hover nesting alongside @media splitting", () => {
+    it('preserves &:hover nesting alongside @media splitting', () => {
       const s = createSheet()
-      s.insert("color: red; &:hover{color: blue;} @media (min-width: 768px){font-size: 2rem;}")
+      s.insert('color: red; &:hover{color: blue;} @media (min-width: 768px){font-size: 2rem;}')
       const styles = s.getStyles()
 
       // Base rule has color + &:hover
@@ -358,9 +358,9 @@ describe("StyleSheet -- at-rule splitting", () => {
       expect(styles).toMatch(/@media \(min-width: 768px\)\{\.pyr-[0-9a-z]+\{font-size: 2rem;\}\}/)
     })
 
-    it("handles consecutive @media blocks with no base CSS between them", () => {
+    it('handles consecutive @media blocks with no base CSS between them', () => {
       const s = createSheet()
-      s.insert("@media (min-width: 768px){color: blue;} @media (min-width: 1024px){color: green;}")
+      s.insert('@media (min-width: 768px){color: blue;} @media (min-width: 1024px){color: green;}')
       const styles = s.getStyles()
 
       expect(styles).toMatch(/@media \(min-width: 768px\)/)
@@ -368,7 +368,7 @@ describe("StyleSheet -- at-rule splitting", () => {
     })
   })
 
-  describe("performance characteristics", () => {
+  describe('performance characteristics', () => {
     let originalDocument: typeof document
 
     beforeEach(() => {
@@ -381,7 +381,7 @@ describe("StyleSheet -- at-rule splitting", () => {
       globalThis.document = originalDocument
     })
 
-    it("fast path: no scanning when CSS has no @ character", () => {
+    it('fast path: no scanning when CSS has no @ character', () => {
       const s = createSheet()
       // Insert 1000 simple rules -- should not trigger any splitting logic
       const start = performance.now()
@@ -395,7 +395,7 @@ describe("StyleSheet -- at-rule splitting", () => {
       expect(elapsed).toBeLessThan(500)
     })
 
-    it("splitting adds minimal overhead for CSS with @media", () => {
+    it('splitting adds minimal overhead for CSS with @media', () => {
       const s = createSheet()
       const start = performance.now()
       for (let i = 0; i < 500; i++) {

package/src/__tests__/sheet.test.ts

@@ -1,8 +1,8 @@
-import { afterEach, beforeEach, describe, expect, it } from "vitest"
-import { hash } from "../hash"
-import { sheet } from "../sheet"
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { hash } from '../hash'
+import { sheet } from '../sheet'
 
-describe("StyleSheet", () => {
+describe('StyleSheet', () => {
   beforeEach(() => {
     sheet.reset()
   })
@@ -11,154 +11,154 @@ describe("StyleSheet", () => {
     sheet.reset()
   })
 
-  describe("insert", () => {
-    it("returns a class name with pyr- prefix", () => {
-      const className = sheet.insert("display: flex;")
+  describe('insert', () => {
+    it('returns a class name with pyr- prefix', () => {
+      const className = sheet.insert('display: flex;')
       expect(className).toMatch(/^pyr-[0-9a-z]+$/)
     })
 
-    it("same CSS text always returns same class name (dedup)", () => {
-      const cls1 = sheet.insert("color: red;")
-      const cls2 = sheet.insert("color: red;")
+    it('same CSS text always returns same class name (dedup)', () => {
+      const cls1 = sheet.insert('color: red;')
+      const cls2 = sheet.insert('color: red;')
       expect(cls1).toBe(cls2)
     })
 
-    it("different CSS text returns different class names", () => {
-      const cls1 = sheet.insert("color: red;")
-      const cls2 = sheet.insert("color: blue;")
+    it('different CSS text returns different class names', () => {
+      const cls1 = sheet.insert('color: red;')
+      const cls2 = sheet.insert('color: blue;')
       expect(cls1).not.toBe(cls2)
     })
 
-    it("class name matches hash of CSS text", () => {
-      const cssText = "display: flex;"
+    it('class name matches hash of CSS text', () => {
+      const cssText = 'display: flex;'
       const className = sheet.insert(cssText)
       expect(className).toBe(`pyr-${hash(cssText)}`)
     })
 
-    it("handles empty string CSS", () => {
-      const className = sheet.insert("")
+    it('handles empty string CSS', () => {
+      const className = sheet.insert('')
       expect(className).toMatch(/^pyr-[0-9a-z]+$/)
     })
 
-    it("supports boost mode (doubled selector)", () => {
-      const className = sheet.insert("color: red;", true)
+    it('supports boost mode (doubled selector)', () => {
+      const className = sheet.insert('color: red;', true)
       expect(className).toMatch(/^pyr-[0-9a-z]+$/)
     })
   })
 
-  describe("cache eviction", () => {
-    it("evicts oldest entries when cache exceeds MAX_CACHE", () => {
+  describe('cache eviction', () => {
+    it('evicts oldest entries when cache exceeds MAX_CACHE', () => {
       for (let i = 0; i < 100; i++) {
         sheet.insert(`unique-prop-${i}: value-${i};`)
       }
-      const result = sheet.insert("color: red;")
+      const result = sheet.insert('color: red;')
       expect(result).toMatch(/^pyr-/)
     })
   })
 
-  describe("insertKeyframes", () => {
-    it("does not throw", () => {
-      expect(() => sheet.insertKeyframes("test-anim", "from{opacity:0}to{opacity:1}")).not.toThrow()
+  describe('insertKeyframes', () => {
+    it('does not throw', () => {
+      expect(() => sheet.insertKeyframes('test-anim', 'from{opacity:0}to{opacity:1}')).not.toThrow()
     })
 
-    it("deduplicates by name", () => {
-      sheet.insertKeyframes("test-anim", "from{opacity:0}to{opacity:1}")
+    it('deduplicates by name', () => {
+      sheet.insertKeyframes('test-anim', 'from{opacity:0}to{opacity:1}')
       // Second call with same name should not throw
-      expect(() => sheet.insertKeyframes("test-anim", "from{opacity:0}to{opacity:1}")).not.toThrow()
+      expect(() => sheet.insertKeyframes('test-anim', 'from{opacity:0}to{opacity:1}')).not.toThrow()
     })
   })
 
-  describe("insertGlobal", () => {
-    it("does not throw for valid CSS", () => {
-      expect(() => sheet.insertGlobal("body { margin: 0; }")).not.toThrow()
+  describe('insertGlobal', () => {
+    it('does not throw for valid CSS', () => {
+      expect(() => sheet.insertGlobal('body { margin: 0; }')).not.toThrow()
     })
 
-    it("handles multiple calls without error", () => {
-      sheet.insertGlobal("body { margin: 0; }")
-      sheet.insertGlobal("html { box-sizing: border-box; }")
+    it('handles multiple calls without error', () => {
+      sheet.insertGlobal('body { margin: 0; }')
+      sheet.insertGlobal('html { box-sizing: border-box; }')
     })
 
-    it("deduplicates same CSS", () => {
-      sheet.insertGlobal("body { margin: 0; }")
-      sheet.insertGlobal("body { margin: 0; }")
+    it('deduplicates same CSS', () => {
+      sheet.insertGlobal('body { margin: 0; }')
+      sheet.insertGlobal('body { margin: 0; }')
       // No error, second is deduped
     })
   })
 
-  describe("getClassName", () => {
-    it("returns a className without injecting", () => {
-      const className = sheet.getClassName("color: red;")
+  describe('getClassName', () => {
+    it('returns a className without injecting', () => {
+      const className = sheet.getClassName('color: red;')
       expect(className).toMatch(/^pyr-[0-9a-z]+$/)
     })
 
-    it("returns same className as insert for same CSS", () => {
-      const cssText = "display: flex;"
+    it('returns same className as insert for same CSS', () => {
+      const cssText = 'display: flex;'
       const getResult = sheet.getClassName(cssText)
       const insertResult = sheet.insert(cssText)
       expect(getResult).toBe(insertResult)
     })
   })
 
-  describe("prepare", () => {
-    it("returns className and rules", () => {
-      const { className, rules } = sheet.prepare("color: red;")
+  describe('prepare', () => {
+    it('returns className and rules', () => {
+      const { className, rules } = sheet.prepare('color: red;')
       expect(className).toMatch(/^pyr-[0-9a-z]+$/)
       expect(rules).toContain(className)
-      expect(rules).toContain("color: red;")
+      expect(rules).toContain('color: red;')
     })
 
-    it("supports boost mode", () => {
-      const { className, rules } = sheet.prepare("color: red;", true)
+    it('supports boost mode', () => {
+      const { className, rules } = sheet.prepare('color: red;', true)
       // Boosted selector should have doubled class
       expect(rules).toContain(`.${className}.${className}`)
     })
   })
 
-  describe("SSR support", () => {
-    it("getStyleTag returns a string", () => {
+  describe('SSR support', () => {
+    it('getStyleTag returns a string', () => {
       const result = sheet.getStyleTag()
-      expect(typeof result).toBe("string")
-      expect(result).toContain("data-pyreon-styler")
+      expect(typeof result).toBe('string')
+      expect(result).toContain('data-pyreon-styler')
     })
 
-    it("getStyles returns empty string when no rules inserted", () => {
+    it('getStyles returns empty string when no rules inserted', () => {
       const result = sheet.getStyles()
-      expect(result).toBe("")
+      expect(result).toBe('')
     })
   })
 
-  describe("reset", () => {
-    it("clears cache so new inserts re-generate class names", () => {
-      const cls1 = sheet.insert("color: green;")
+  describe('reset', () => {
+    it('clears cache so new inserts re-generate class names', () => {
+      const cls1 = sheet.insert('color: green;')
       sheet.reset()
-      const cls2 = sheet.insert("color: green;")
+      const cls2 = sheet.insert('color: green;')
       expect(cls1).toBe(cls2)
     })
   })
 
-  describe("clearCache and clearAll", () => {
-    it("clearCache clears the cache", () => {
-      sheet.insert("color: red;")
+  describe('clearCache and clearAll', () => {
+    it('clearCache clears the cache', () => {
+      sheet.insert('color: red;')
       sheet.clearCache()
       expect(sheet.cacheSize).toBe(0)
     })
 
-    it("clearAll clears cache and SSR buffer", () => {
-      sheet.insert("color: red;")
+    it('clearAll clears cache and SSR buffer', () => {
+      sheet.insert('color: red;')
       sheet.clearAll()
       expect(sheet.cacheSize).toBe(0)
-      expect(sheet.getStyles()).toBe("")
+      expect(sheet.getStyles()).toBe('')
     })
   })
 
-  describe("has", () => {
-    it("returns true for cached classNames", () => {
-      const className = sheet.insert("color: red;")
+  describe('has', () => {
+    it('returns true for cached classNames', () => {
+      const className = sheet.insert('color: red;')
       expect(sheet.has(className)).toBe(true)
     })
 
-    it("returns false for unknown classNames", () => {
-      expect(sheet.has("pyr-unknown")).toBe(false)
+    it('returns false for unknown classNames', () => {
+      expect(sheet.has('pyr-unknown')).toBe(false)
     })
   })
 })