@pyreon/styler 0.11.0 → 0.11.2

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

@@ -0,0 +1,411 @@
+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.
+ *
+ * When CSS text contains nested at-rules, sheet.insert() should split them
+ * into separate top-level rules rather than relying on CSS Nesting.
+ * This matches the approach used by styled-components and Emotion.
+ */
+
+describe("StyleSheet -- at-rule splitting", () => {
+  describe("SSR mode (splitAtRules internals via SSR output)", () => {
+    let originalDocument: typeof document
+
+    beforeEach(() => {
+      originalDocument = globalThis.document
+      // @ts-expect-error - intentionally deleting for SSR simulation
+      delete globalThis.document
+    })
+
+    afterEach(() => {
+      globalThis.document = originalDocument
+    })
+
+    it("CSS without @media produces a single rule", () => {
+      const s = createSheet()
+      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", () => {
+      const s = createSheet()
+      s.insert("color: red; @media (min-width: 768px){color: blue;}")
+      const styles = s.getStyles()
+
+      // Base rule: .pyr-xxx{color: red;}
+      expect(styles).toMatch(/\.pyr-[0-9a-z]+\{color: red;\}/)
+      // Media rule: @media (min-width: 768px){.pyr-xxx{color: blue;}}
+      expect(styles).toMatch(/@media \(min-width: 768px\)\{\.pyr-[0-9a-z]+\{color: blue;\}\}/)
+      // The base rule should NOT contain @media inside its braces
+      expect(styles).not.toMatch(/\.pyr-[0-9a-z]+\{[^}]*@media/)
+    })
+
+    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;}",
+      )
+      const styles = s.getStyles()
+
+      // Base
+      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(
+        /@media \(min-width: 48em\)\{\.pyr-[0-9a-z]+\{bottom: 0; height: 40rem;\}\}/,
+      )
+    })
+
+    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;}")
+      const styles = s.getStyles()
+
+      // No base rule (or empty base)
+      expect(styles).not.toMatch(/\.pyr-[0-9a-z]+\{\}/)
+      // Both media rules present
+      expect(styles).toMatch(/@media \(min-width: 768px\)\{\.pyr-[0-9a-z]+\{color: blue;\}\}/)
+      expect(styles).toMatch(/@media \(min-width: 1024px\)\{\.pyr-[0-9a-z]+\{color: green;\}\}/)
+    })
+
+    it("boost doubles selector in both base and media rules", () => {
+      const s = createSheet()
+      s.insert("color: red; @media (min-width: 768px){color: blue;}", true)
+      const styles = s.getStyles()
+
+      // Base: .pyr-xxx.pyr-xxx{color: red;}
+      expect(styles).toMatch(/\.pyr-[0-9a-z]+\.pyr-[0-9a-z]+\{color: red;\}/)
+      // Media: @media (...){.pyr-xxx.pyr-xxx{color: blue;}}
+      expect(styles).toMatch(
+        /@media \(min-width: 768px\)\{\.pyr-[0-9a-z]+\.pyr-[0-9a-z]+\{color: blue;\}\}/,
+      )
+    })
+
+    it("@supports blocks are also split out", () => {
+      const s = createSheet()
+      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", () => {
+      const s = createSheet()
+      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;\}/)
+      expect(styles).toMatch(
+        /@container \(min-width: 400px\)\{\.pyr-[0-9a-z]+\{font-size: 1.25rem;\}\}/,
+      )
+    })
+
+    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
+      expect(styles).toMatch(/@layer components\{\.pyr-[0-9a-z]+\{color: red;\}\}/)
+      // Media wrapped in layer
+      expect(styles).toMatch(
+        /@layer components\{@media \(min-width: 768px\)\{\.pyr-[0-9a-z]+\{color: blue;\}\}\}/,
+      )
+    })
+
+    it("deduplicates CSS with @media (same CSS -> same className -> single insert)", () => {
+      const s = createSheet()
+      const cssStr = "color: red; @media (min-width: 768px){color: blue;}"
+      s.insert(cssStr)
+      s.insert(cssStr)
+
+      const styles = s.getStyles()
+      const baseMatches = styles.match(/\.pyr-[0-9a-z]+\{color: red;\}/g)
+      expect(baseMatches).toHaveLength(1)
+    })
+
+    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%;}"
+      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;")
+
+      // Each media query is a separate top-level rule
+      expect(styles).toMatch(/@media only screen and \(min-width: 36em\)\{/)
+      expect(styles).toMatch(/@media only screen and \(min-width: 48em\)\{/)
+      expect(styles).toMatch(/@media only screen and \(min-width: 62em\)\{/)
+      expect(styles).toMatch(/@media only screen and \(min-width: 100em\)\{/)
+
+      // No nested @media inside a class selector
+      expect(styles).not.toMatch(/\.pyr-[0-9a-z]+\{[^}]*@media/)
+    })
+
+    it("getStyleTag contains all split rules", () => {
+      const s = createSheet()
+      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)")
+    })
+
+    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.reset()
+      expect(s.getStyles()).toBe("")
+      expect(s.cacheSize).toBe(0) // cache also cleared for SSR correctness
+    })
+  })
+
+  describe("DOM mode (insertRule verification)", () => {
+    beforeEach(() => {
+      for (const el of Array.from(document.querySelectorAll("style[data-pyreon-styler]")))
+        el.remove()
+    })
+
+    it("inserts base + media as separate CSSRules", () => {
+      const s = createSheet()
+      s.insert("color: red; @media (min-width: 768px){color: blue;}")
+
+      // Find the style element
+      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")
+
+      // Should have at least 2 rules: one CSSStyleRule + one CSSMediaRule
+      let hasStyleRule = false
+      let hasMediaRule = false
+
+      for (let i = 0; i < sheet.cssRules.length; i++) {
+        const rule = sheet.cssRules[i]
+        if (rule instanceof CSSStyleRule && rule.selectorText.startsWith(".pyr-")) {
+          hasStyleRule = true
+        }
+        if (rule instanceof CSSMediaRule) {
+          hasMediaRule = true
+        }
+      }
+
+      expect(hasStyleRule).toBe(true)
+      expect(hasMediaRule).toBe(true)
+    })
+
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex logic is inherent to this function
+    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 styleEl = document.querySelector("style[data-pyreon-styler]") as HTMLStyleElement
+      const sheet = styleEl.sheet
+      if (!sheet) throw new Error("expected sheet")
+      const boostedSelector = `.${className}.${className}`
+
+      let baseFound = false
+      let mediaInnerFound = false
+
+      for (let i = 0; i < sheet.cssRules.length; i++) {
+        const rule = sheet.cssRules[i]
+        if (rule instanceof CSSStyleRule && rule.selectorText === boostedSelector) {
+          baseFound = true
+        }
+        if (rule instanceof CSSMediaRule) {
+          for (let j = 0; j < rule.cssRules.length; j++) {
+            const inner = rule.cssRules[j]
+            if (inner instanceof CSSStyleRule && inner.selectorText === boostedSelector) {
+              mediaInnerFound = true
+            }
+          }
+        }
+      }
+
+      expect(baseFound).toBe(true)
+      expect(mediaInnerFound).toBe(true)
+    })
+  })
+
+  describe("hydration with split rules", () => {
+    beforeEach(() => {
+      for (const el of Array.from(document.querySelectorAll("style[data-pyreon-styler]")))
+        el.remove()
+    })
+
+    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", "")
+      document.head.appendChild(el)
+
+      const className = `pyr-${hash("color: red;")}`
+
+      // Insert rules that simulate what SSR produces
+      el.sheet?.insertRule(`.${className}{color: red;}`, 0)
+      el.sheet?.insertRule(`@media (min-width: 768px){.${className}{color: blue;}}`, 1)
+
+      // Create a new sheet that will hydrate from the tag
+      const s = new StyleSheet()
+      // The sheet should have hydrated the className
+      expect(s.has(className)).toBe(true)
+      // Subsequent insert is a no-op (deduped)
+      expect(s.cacheSize).toBeGreaterThanOrEqual(1)
+    })
+
+    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;")}`
+
+      el.sheet?.insertRule(`.${className}.${className}{font-size: 1rem;}`, 0)
+      el.sheet?.insertRule(
+        `@media (min-width: 768px){.${className}.${className}{font-size: 1.5rem;}}`,
+        1,
+      )
+
+      const s = new StyleSheet()
+      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", "")
+      document.head.appendChild(el)
+
+      const className = `pyr-${hash("responsive-only")}`
+
+      // Only a media rule, no base rule
+      el.sheet?.insertRule(`@media (min-width: 768px){.${className}{color: blue;}}`, 0)
+
+      const s = new StyleSheet()
+      expect(s.has(className)).toBe(true)
+    })
+  })
+
+  describe("edge cases", () => {
+    let originalDocument: typeof document
+
+    beforeEach(() => {
+      originalDocument = globalThis.document
+      // @ts-expect-error - intentionally deleting for SSR simulation
+      delete globalThis.document
+    })
+
+    afterEach(() => {
+      globalThis.document = originalDocument
+    })
+
+    it("handles empty CSS text", () => {
+      const s = createSheet()
+      const cls = s.insert("")
+      expect(cls).toMatch(/^pyr-/)
+      expect(s.getStyles()).toBe("")
+    })
+
+    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", () => {
+      const s = createSheet()
+      s.insert("animation: fadeIn 0.3s;")
+      const styles = s.getStyles()
+      expect(styles).toContain("animation: fadeIn 0.3s;")
+    })
+
+    it("preserves &:hover nesting in base CSS", () => {
+      const s = createSheet()
+      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", () => {
+      const s = createSheet()
+      s.insert("color: red; &:hover{color: blue;} @media (min-width: 768px){font-size: 2rem;}")
+      const styles = s.getStyles()
+
+      // Base rule has color + &:hover
+      expect(styles).toMatch(/\.pyr-[0-9a-z]+\{color: red; &:hover\{color: blue;\}\}/)
+      // Media rule is separate
+      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", () => {
+      const s = createSheet()
+      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\)/)
+      expect(styles).toMatch(/@media \(min-width: 1024px\)/)
+    })
+  })
+
+  describe("performance characteristics", () => {
+    let originalDocument: typeof document
+
+    beforeEach(() => {
+      originalDocument = globalThis.document
+      // @ts-expect-error - intentionally deleting for SSR simulation
+      delete globalThis.document
+    })
+
+    afterEach(() => {
+      globalThis.document = originalDocument
+    })
+
+    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()
+      for (let i = 0; i < 1000; i++) {
+        s.insert(`prop-${i}: val-${i};`)
+      }
+      const elapsed = performance.now() - start
+
+      expect(s.cacheSize).toBe(1000)
+      // Should complete quickly — 500ms is generous for CI runners
+      expect(elapsed).toBeLessThan(500)
+    })
+
+    it("splitting adds minimal overhead for CSS with @media", () => {
+      const s = createSheet()
+      const start = performance.now()
+      for (let i = 0; i < 500; i++) {
+        s.insert(`color: color-${i}; @media (min-width: ${i}px){font-size: ${i}rem;}`)
+      }
+      const elapsed = performance.now() - start
+
+      expect(s.cacheSize).toBe(500)
+      // Should still be fast — 500ms is generous for CI runners
+      expect(elapsed).toBeLessThan(500)
+    })
+  })
+})

package/src/__tests__/sheet.test.ts

@@ -0,0 +1,164 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+import { hash } from "../hash"
+import { sheet } from "../sheet"
+
+describe("StyleSheet", () => {
+  beforeEach(() => {
+    sheet.reset()
+  })
+
+  afterEach(() => {
+    sheet.reset()
+  })
+
+  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;")
+      expect(cls1).toBe(cls2)
+    })
+
+    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;"
+      const className = sheet.insert(cssText)
+      expect(className).toBe(`pyr-${hash(cssText)}`)
+    })
+
+    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)
+      expect(className).toMatch(/^pyr-[0-9a-z]+$/)
+    })
+  })
+
+  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;")
+      expect(result).toMatch(/^pyr-/)
+    })
+  })
+
+  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}")
+      // Second call with same name should not throw
+      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()
+    })
+
+    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; }")
+      // No error, second is deduped
+    })
+  })
+
+  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;"
+      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;")
+      expect(className).toMatch(/^pyr-[0-9a-z]+$/)
+      expect(rules).toContain(className)
+      expect(rules).toContain("color: red;")
+    })
+
+    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", () => {
+      const result = sheet.getStyleTag()
+      expect(typeof result).toBe("string")
+      expect(result).toContain("data-pyreon-styler")
+    })
+
+    it("getStyles returns empty string when no rules inserted", () => {
+      const result = sheet.getStyles()
+      expect(result).toBe("")
+    })
+  })
+
+  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;")
+      expect(cls1).toBe(cls2)
+    })
+  })
+
+  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;")
+      sheet.clearAll()
+      expect(sheet.cacheSize).toBe(0)
+      expect(sheet.getStyles()).toBe("")
+    })
+  })
+
+  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)
+    })
+  })
+})

package/src/__tests__/styled-ssr.test.ts

@@ -0,0 +1,67 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+/**
+ * SSR tests for styled() and createGlobalStyle(). Re-imports modules
+ * with `document` deleted so IS_SERVER evaluates to true.
+ */
+describe("styled -- SSR mode", () => {
+  let originalDocument: typeof document
+
+  beforeEach(() => {
+    vi.resetModules()
+    originalDocument = globalThis.document
+    // @ts-expect-error - intentionally deleting for SSR simulation
+    delete globalThis.document
+  })
+
+  afterEach(() => {
+    globalThis.document = originalDocument
+  })
+
+  it("static: creates component with SSR injection path", async () => {
+    const { styled } = await import("../styled")
+    const Comp = styled("div")`color: red;`
+    expect((Comp as any).displayName).toBe("styled(div)")
+  })
+
+  it("static: empty CSS template in SSR", async () => {
+    const { styled } = await import("../styled")
+    const Comp = styled("div")``
+    expect((Comp as any).displayName).toBe("styled(div)")
+  })
+
+  it("static: boost option in SSR", async () => {
+    const { styled } = await import("../styled")
+    const Comp = styled("div", { boost: true })`color: blue;`
+    expect((Comp as any).displayName).toBe("styled(div)")
+  })
+
+  it("static: shouldForwardProp in SSR", async () => {
+    const { styled } = await import("../styled")
+    const Comp = styled("div", {
+      shouldForwardProp: (p) => p !== "color",
+    })`display: flex;`
+    expect((Comp as any).displayName).toBe("styled(div)")
+  })
+
+  it("static: styled.div shorthand in SSR", async () => {
+    const { styled } = await import("../styled")
+    const Comp = styled.div`color: green;`
+    expect((Comp as any).displayName).toBe("styled(div)")
+  })
+
+  it("createGlobalStyle: static SSR path", async () => {
+    const { createGlobalStyle } = await import("../globalStyle")
+    const GlobalStyle = createGlobalStyle`body { margin: 0; }`
+    // Static path injects immediately and returns a function that produces null
+    const result = GlobalStyle({})
+    expect(result).toBeNull()
+  })
+
+  it("createGlobalStyle: empty CSS in SSR returns null", async () => {
+    const { createGlobalStyle } = await import("../globalStyle")
+    const GlobalStyle = createGlobalStyle``
+    const result = GlobalStyle({})
+    expect(result).toBeNull()
+  })
+})