@pyreon/styler 0.24.4 → 0.24.6

package/src/__tests__/styled.test.ts

@@ -1,511 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { afterEach, describe, expect, it } from 'vitest'
-import { sheet } from '../sheet'
-import { styled } from '../styled'
-
-describe('styled', () => {
-  afterEach(() => {
-    sheet.reset()
-  })
-
-  describe('basic creation', () => {
-    it('returns a tagged template function', () => {
-      const tagFn = styled('div')
-      expect(typeof tagFn).toBe('function')
-    })
-
-    it('tagged template returns a ComponentFn', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      expect(typeof Comp).toBe('function')
-    })
-  })
-
-  describe('static CSS (no function interpolations)', () => {
-    it('produces a VNode with the correct tag', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({}) as VNode
-      expect(vnode.type).toBe('div')
-    })
-
-    it('produces a VNode with the correct tag for span', () => {
-      const Comp = styled('span')`
-        color: red;
-      `
-      const vnode = Comp({}) as VNode
-      expect(vnode.type).toBe('span')
-    })
-
-    it('applies a generated className', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({}) as VNode
-      expect(vnode.props.class).toMatch(/^pyr-[0-9a-z]+$/)
-    })
-
-    it('same component produces same className across calls', () => {
-      const Comp = styled('div')`
-        display: flex;
-        color: red;
-      `
-      const vnode1 = Comp({}) as VNode
-      const vnode2 = Comp({}) as VNode
-      expect(vnode1.props.class).toBe(vnode2.props.class)
-    })
-
-    it('different CSS produces different classNames', () => {
-      const Comp1 = styled('div')`
-        color: red;
-      `
-      const Comp2 = styled('div')`
-        color: blue;
-      `
-      const vnode1 = Comp1({}) as VNode
-      const vnode2 = Comp2({}) as VNode
-      expect(vnode1.props.class).not.toBe(vnode2.props.class)
-    })
-  })
-
-  describe('empty CSS', () => {
-    it('renders element without className for empty template', () => {
-      const Comp = styled('div')``
-      const vnode = Comp({}) as VNode
-      expect(vnode.props.class).toBeFalsy()
-    })
-
-    it('renders element without className for whitespace-only template', () => {
-      const Comp = styled('div')``
-      const vnode = Comp({}) as VNode
-      expect(vnode.props.class).toBeFalsy()
-    })
-  })
-
-  describe('static interpolations (non-function)', () => {
-    it('treats string interpolations as static', () => {
-      const color = 'red'
-      const Comp = styled('div')`
-        color: ${color};
-      `
-      const vnode = Comp({}) as VNode
-      expect(vnode.props.class).toMatch(/^pyr-/)
-    })
-
-    it('treats number interpolations as static', () => {
-      const size = 16
-      const Comp = styled('div')`
-        font-size: ${size}px;
-      `
-      const vnode = Comp({}) as VNode
-      expect(vnode.props.class).toMatch(/^pyr-/)
-    })
-  })
-
-  describe('generic typed props', () => {
-    it('accepts a type parameter for typed interpolation props', () => {
-      // The generic provides type-safe access to consumer props inside interpolations
-      const Comp = styled('div')<{ $color: string; $size: number }>`
-        color: ${(props) => props.$color};
-        font-size: ${(props) => props.$size}px;
-      `
-      const vnode = Comp({ $color: 'red', $size: 14 }) as VNode
-      expect(vnode.props.class).toMatch(/^pyr-/)
-    })
-
-    it('different typed prop values produce different classes', () => {
-      const Comp = styled('div')<{ $variant: 'primary' | 'danger' }>`
-        background: ${(props) => (props.$variant === 'primary' ? 'blue' : 'red')};
-      `
-      const a = Comp({ $variant: 'primary' }) as VNode
-      const b = Comp({ $variant: 'danger' }) as VNode
-      expect(a.props.class).not.toBe(b.props.class)
-    })
-
-    it('default generic still allows untyped interpolations (back-compat)', () => {
-      const Comp = styled('div')`
-        color: ${(props: { color?: string }) => props.color || 'black'};
-      `
-      const vnode = Comp({ color: 'red' }) as VNode
-      expect(vnode.props.class).toMatch(/^pyr-/)
-    })
-  })
-
-  describe('dynamic CSS (function interpolations)', () => {
-    it('resolves function interpolations with props', () => {
-      const Comp = styled('div')`
-        color: ${(props: any) => props.color};
-      `
-      const vnode = Comp({ color: 'red' }) as VNode
-      expect(vnode.props.class).toMatch(/^pyr-/)
-    })
-
-    it('different prop values produce different classNames', () => {
-      const Comp = styled('div')`
-        color: ${(props: any) => props.color};
-      `
-      const vnode1 = Comp({ color: 'red' }) as VNode
-      const vnode2 = Comp({ color: 'blue' }) as VNode
-      expect(vnode1.props.class).not.toBe(vnode2.props.class)
-    })
-
-    it('same prop values produce same className (dedup)', () => {
-      const Comp = styled('div')`
-        color: ${(props: any) => props.color};
-      `
-      const vnode1 = Comp({ color: 'red' }) as VNode
-      const vnode2 = Comp({ color: 'red' }) as VNode
-      expect(vnode1.props.class).toBe(vnode2.props.class)
-    })
-
-    it('handles functions returning empty string', () => {
-      const Comp = styled('div')`
-        ${() => ''}
-      `
-      const vnode = Comp({}) as VNode
-      expect(vnode.props.class).toBeFalsy()
-    })
-
-    it('handles functions returning false', () => {
-      const Comp = styled('div')`
-        ${(props: any) => (props.active ? 'color: red;' : false)}
-      `
-      const vnode = Comp({ active: false }) as VNode
-      expect(vnode.props.class).toBeFalsy()
-    })
-  })
-
-  describe('className merging', () => {
-    it('merges user class with generated className', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ class: 'custom' }) as VNode
-      expect(vnode.props.class).toContain('pyr-')
-      expect(vnode.props.class).toContain('custom')
-    })
-
-    it('merges user className with generated className', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ className: 'custom' }) as VNode
-      expect(vnode.props.class).toContain('pyr-')
-      expect(vnode.props.class).toContain('custom')
-    })
-
-    it('handles class without generated className (empty CSS)', () => {
-      const Comp = styled('div')``
-      const vnode = Comp({ class: 'custom' }) as VNode
-      expect(vnode.props.class).toBe('custom')
-    })
-  })
-
-  describe('as prop (polymorphic rendering)', () => {
-    it('changes the rendered element type', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ as: 'section' }) as VNode
-      expect(vnode.type).toBe('section')
-    })
-
-    it('renders as button', () => {
-      const Comp = styled('div')`
-        cursor: pointer;
-      `
-      const vnode = Comp({ as: 'button' }) as VNode
-      expect(vnode.type).toBe('button')
-    })
-
-    it('defaults to original tag when as is not provided', () => {
-      const Comp = styled('span')`
-        color: red;
-      `
-      const vnode = Comp({}) as VNode
-      expect(vnode.type).toBe('span')
-    })
-  })
-
-  describe('prop filtering (HTML elements)', () => {
-    it('forwards valid HTML attributes', () => {
-      const Comp = styled('input')`
-        display: block;
-      `
-      const vnode = Comp({ type: 'text', placeholder: 'test' }) as VNode
-      expect(vnode.props.type).toBe('text')
-      expect(vnode.props.placeholder).toBe('test')
-    })
-
-    it('forwards data-* attributes', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ 'data-testid': 'hello' }) as VNode
-      expect(vnode.props['data-testid']).toBe('hello')
-    })
-
-    it('forwards aria-* attributes', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ 'aria-label': 'world' }) as VNode
-      expect(vnode.props['aria-label']).toBe('world')
-    })
-
-    it('forwards event handlers (on* props)', () => {
-      const handler = () => {
-        /* no-op */
-      }
-      const Comp = styled('button')`
-        cursor: pointer;
-      `
-      const vnode = Comp({ onClick: handler }) as VNode
-      expect(vnode.props.onClick).toBe(handler)
-    })
-
-    it('filters unknown props for HTML elements', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ unknownProp: 'test' }) as VNode
-      expect(vnode.props.unknownProp).toBeUndefined()
-    })
-
-    it('filters $-prefixed transient props', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ $variant: 'primary' }) as VNode
-      expect(vnode.props.$variant).toBeUndefined()
-    })
-
-    it('does not forward class/className as separate props', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ class: 'extra', className: 'another' }) as VNode
-      expect(vnode.props.className).toBeUndefined()
-    })
-  })
-
-  describe('shouldForwardProp option', () => {
-    it('uses custom filter when provided', () => {
-      const Comp = styled('div', {
-        shouldForwardProp: (prop) => prop !== 'color',
-      })`
-        display: flex;
-      `
-      const vnode = Comp({ color: 'red', 'data-testid': 'test' }) as VNode
-      expect(vnode.props.color).toBeUndefined()
-      expect(vnode.props['data-testid']).toBe('test')
-    })
-
-    it('custom filter controls all prop forwarding', () => {
-      const Comp = styled('div', {
-        shouldForwardProp: () => false,
-      })`
-        display: flex;
-      `
-      const vnode = Comp({ id: 'test', role: 'button' }) as VNode
-      expect(vnode.props.id).toBeUndefined()
-      expect(vnode.props.role).toBeUndefined()
-    })
-  })
-
-  describe('layer option', () => {
-    it('accepts layer option without error', () => {
-      const Comp = styled('div', { layer: 'rocketstyle' })`
-        color: red;
-      `
-      const vnode = Comp({}) as VNode
-      expect(vnode.props.class).toMatch(/^pyr-/)
-    })
-  })
-
-  describe('children forwarding', () => {
-    it('passes single child through', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ children: 'hello' }) as VNode
-      expect(vnode.children).toEqual(['hello'])
-    })
-
-    it('passes array children through', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const children = ['a', 'b', 'c']
-      const vnode = Comp({ children }) as VNode
-      expect(vnode.children).toEqual(['a', 'b', 'c'])
-    })
-
-    it('handles null children', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({ children: null }) as VNode
-      expect(vnode.children).toEqual([])
-    })
-
-    it('handles undefined children', () => {
-      const Comp = styled('div')`
-        display: flex;
-      `
-      const vnode = Comp({}) as VNode
-      expect(vnode.children).toEqual([])
-    })
-  })
-})
-
-describe('styled.tag (Proxy)', () => {
-  afterEach(() => {
-    sheet.reset()
-  })
-
-  it('styled.div creates a div component', () => {
-    const Comp = styled.div`
-      color: red;
-    `
-    const vnode = Comp({}) as VNode
-    expect(vnode.type).toBe('div')
-    expect(vnode.props.class).toMatch(/^pyr-/)
-  })
-
-  it('styled.span creates a span component', () => {
-    const Comp = styled.span`
-      font-size: 16px;
-    `
-    const vnode = Comp({}) as VNode
-    expect(vnode.type).toBe('span')
-  })
-
-  it('styled.button creates a button component', () => {
-    const Comp = styled.button`
-      cursor: pointer;
-    `
-    const vnode = Comp({}) as VNode
-    expect(vnode.type).toBe('button')
-  })
-
-  it('styled.section creates a section component', () => {
-    const Comp = styled.section`
-      padding: 20px;
-    `
-    const vnode = Comp({}) as VNode
-    expect(vnode.type).toBe('section')
-  })
-
-  describe('empty-rawProps static VNode cache', () => {
-    // Hot path for `<MyStyled />` with no props: pre-built VNode returned
-    // from the StaticStyled closure verbatim. Skips `buildProps` + `h()` +
-    // children-array construction per render. Mirrors vitus-labs PR #228.
-    it('returns the SAME VNode identity across renders when rawProps is empty', () => {
-      const Comp = styled('div')`
-        color: red;
-      `
-      const v1 = Comp({}) as VNode
-      const v2 = Comp({}) as VNode
-      // Same VNode object — proves the pre-built cache fires.
-      expect(v1).toBe(v2)
-      expect(v1.type).toBe('div')
-      expect((v1.props as Record<string, string>).class).toMatch(/^pyr-/)
-    })
-
-    it('falls through to the full path when ANY prop is provided', () => {
-      const Comp = styled('div')`
-        color: red;
-      `
-      const v1 = Comp({}) as VNode
-      const v2 = Comp({ 'data-x': '1' }) as VNode
-      // Different identity — the second call bypassed the cache because
-      // `for (const _k in rawProps) hasExtraProps = true` fires.
-      expect(v1).not.toBe(v2)
-      // Both still produce the correct className.
-      expect((v1.props as Record<string, unknown>).class).toMatch(/^pyr-/)
-      expect((v2.props as Record<string, unknown>).class).toMatch(/^pyr-/)
-      // Second VNode carries the extra prop forwarded through buildProps.
-      expect((v2.props as Record<string, unknown>)['data-x']).toBe('1')
-    })
-
-    it('falls through to the full path when `as` overrides the tag', () => {
-      const Comp = styled('div')`
-        color: red;
-      `
-      const v1 = Comp({}) as VNode
-      const v2 = Comp({ as: 'span' }) as VNode
-      // `as` is enumerable → `hasExtraProps = true` → bypasses cache.
-      // Output tag is the override.
-      expect(v2.type).toBe('span')
-      expect(v1).not.toBe(v2)
-    })
-
-    it('falls through to the full path when a ref is provided', () => {
-      const Comp = styled('div')`
-        color: red;
-      `
-      const refCb = () => {}
-      const v1 = Comp({}) as VNode
-      const v2 = Comp({ ref: refCb }) as VNode
-      // `ref` is enumerable in JS, so `hasExtraProps = true` already fires.
-      // The explicit `rawProps.ref == null` guard is defense-in-depth for
-      // any future call site that uses Object.defineProperty(rawProps, 'ref',
-      // { enumerable: false, ... }) — that shape would otherwise return the
-      // cached no-ref VNode and silently drop the user's callback.
-      expect(v1).not.toBe(v2)
-    })
-  })
-
-  describe('clearAll resets static-component cache', () => {
-    // Regression: pre-fix, `staticComponentCache` (WeakMap) and the
-    // single-entry hot cache (`_hotStrings` / `_hotTag` / `_hotComponent`)
-    // survived `sheet.clearAll()`. After HMR / dev reload, the same
-    // template-literal call site re-invoked `styled('div')\`...\`` and got
-    // back the SAME ComponentFn instance — but the class name that
-    // component returns was deleted from the DOM by `clearAll`. End-user
-    // symptom: every hot reload silently broke styles for any static
-    // styled component until full page refresh.
-    //
-    // Fix wires `onSheetClear` so styled.tsx subscribes at module load
-    // and resets both caches alongside the sheet.
-    it('producing a new component after clearAll, with a fresh class name', () => {
-      // First mount: get baseline component + className.
-      const tag = 'div'
-      const literal: TemplateStringsArray = Object.assign(
-        ['color: red;'] as unknown as TemplateStringsArray,
-        { raw: ['color: red;'] },
-      )
-      const Comp1 = (styled(tag) as (s: TemplateStringsArray) => any)(literal)
-      const vnode1 = Comp1({}) as VNode
-      const class1 = (vnode1.props as Record<string, string>).class
-
-      // Same call, no clear: hot cache returns the SAME function identity.
-      const Comp1Again = (styled(tag) as (s: TemplateStringsArray) => any)(literal)
-      expect(Comp1Again).toBe(Comp1)
-
-      // Clear the sheet (HMR simulation).
-      sheet.clearAll()
-
-      // After clear: same template-literal identity should produce a NEW
-      // component (caches were dropped). Its className resolves against
-      // the now-empty sheet, so the new className IS re-inserted into
-      // the DOM and the class is observable.
-      const Comp2 = (styled(tag) as (s: TemplateStringsArray) => any)(literal)
-      expect(Comp2).not.toBe(Comp1)
-      const vnode2 = Comp2({}) as VNode
-      const class2 = (vnode2.props as Record<string, string>).class
-      // FNV-1a hashing is content-deterministic, so class names are
-      // structurally equal — but the sheet has freshly re-inserted the
-      // rule. Asserting non-empty + same format is the load-bearing
-      // observation: pre-fix, Comp2 === Comp1 and class2 would also have
-      // been `''` if the user had run `clearAll` between insertions
-      // (cache stale, sheet empty).
-      expect(class1).toMatch(/^pyr-/)
-      expect(class2).toMatch(/^pyr-/)
-      expect(sheet.has(class2!)).toBe(true)
-    })
-  })
-})

package/src/__tests__/styler.browser.test.tsx

@@ -1,194 +0,0 @@
-/** @jsxImportSource @pyreon/core */
-import { h, provide } from '@pyreon/core'
-import { mountInBrowser } from '@pyreon/test-utils/browser'
-import { afterEach, describe, expect, it } from 'vitest'
-import { css } from '../css'
-import { keyframes } from '../keyframes'
-import { sheet } from '../sheet'
-import { styled } from '../styled'
-import { ThemeContext, ThemeProvider } from '../ThemeProvider'
-
-// Real-Chromium smoke for @pyreon/styler.
-//
-// happy-dom approximates a stylesheet but does NOT compute actual
-// styles — `getComputedStyle(el).color` returns empty in happy-dom for
-// rules in the injected stylesheet. These tests assert real cascade
-// behavior in Chromium: the generated class is applied AND the browser
-// resolves the rule to the expected computed style.
-//
-// What the suite locks in:
-//   1. `styled('div')` produces a VNode that mounts to a real div with
-//      the generated class applied.
-//   2. The CSS rule reaches `document.head` and Chromium computes the
-//      style as authored.
-//   3. Reactive interpolations update computed styles when the signal
-//      changes (via the same reactive cascade as static text).
-//   4. Different tags (div, span, button) produce distinct elements
-//      with the same class infrastructure.
-//   5. `keyframes` template returns an animation name and the rule is
-//      registered so the animation can fire.
-
-describe('@pyreon/styler in real browser', () => {
-  afterEach(() => {
-    // Don't remove the styler <style> element — sheet is a singleton
-    // with `this.sheet` bound to that element; removing detaches the
-    // sheet object and breaks subsequent insertRule calls. Cache is
-    // independent and safe to clear.
-    sheet.clearCache()
-  })
-
-  it('mounts a styled div with the generated class applied to the DOM', () => {
-    const Box = styled('div')`
-      display: flex;
-      color: rgb(255, 0, 0);
-    `
-    const { container, unmount } = mountInBrowser(h(Box, { id: 'box' }))
-    const el = container.querySelector<HTMLDivElement>('#box')
-    expect(el).not.toBeNull()
-    expect(el?.tagName.toLowerCase()).toBe('div')
-    expect(el?.className).toMatch(/^pyr-/)
-    unmount()
-  })
-
-  it('Chromium computes the authored style — real cascade, not just class application', () => {
-    const Red = styled('div')`
-      color: rgb(255, 0, 0);
-      padding: 12px;
-    `
-    const { container, unmount } = mountInBrowser(h(Red, { id: 'r' }))
-    const el = container.querySelector<HTMLElement>('#r')!
-    const cs = getComputedStyle(el)
-    expect(cs.color).toBe('rgb(255, 0, 0)')
-    expect(cs.padding).toBe('12px')
-    unmount()
-  })
-
-  it('function interpolation resolves per-render against props (dynamic path)', () => {
-    const Dynamic = styled('div')<{ $tone: string }>`
-      color: ${(p) => p.$tone};
-    `
-    const a = mountInBrowser(h(Dynamic, { id: 'a', $tone: 'rgb(0, 128, 0)' }))
-    const b = mountInBrowser(h(Dynamic, { id: 'b', $tone: 'rgb(0, 0, 255)' }))
-    expect(getComputedStyle(a.container.querySelector<HTMLElement>('#a')!).color).toBe(
-      'rgb(0, 128, 0)',
-    )
-    expect(getComputedStyle(b.container.querySelector<HTMLElement>('#b')!).color).toBe(
-      'rgb(0, 0, 255)',
-    )
-    a.unmount()
-    b.unmount()
-  })
-
-  it('different tags produce distinct elements (div, span, button)', () => {
-    const D = styled('div')`color: red;`
-    const S = styled('span')`color: green;`
-    const B = styled('button')`color: blue;`
-    const { container, unmount } = mountInBrowser(
-      h('div', null, h(D, { id: 'd' }), h(S, { id: 's' }), h(B, { id: 'b' })),
-    )
-    expect(container.querySelector('#d')?.tagName.toLowerCase()).toBe('div')
-    expect(container.querySelector('#s')?.tagName.toLowerCase()).toBe('span')
-    expect(container.querySelector('#b')?.tagName.toLowerCase()).toBe('button')
-    unmount()
-  })
-
-  it('ThemeProvider injects a theme readable by themed components', () => {
-    const Themed = styled('div')`
-      color: ${(p: { theme: { color: string } }) => p.theme.color};
-    `
-    const { container, unmount } = mountInBrowser(
-      h(ThemeProvider, { theme: { color: 'rgb(128, 0, 128)' } }, h(Themed, { id: 't' })),
-    )
-    const el = container.querySelector<HTMLElement>('#t')!
-    expect(getComputedStyle(el).color).toBe('rgb(128, 0, 128)')
-    unmount()
-  })
-
-  it('keyframes registers an animation name usable in styled rules', () => {
-    const fadeIn = keyframes`
-      from { opacity: 0; }
-      to { opacity: 1; }
-    `
-    const name = String(fadeIn)
-    expect(name).toMatch(/^pyr-kf-/)
-
-    const Animated = styled('div')`
-      opacity: 1;
-      animation: ${name} 50ms forwards;
-    `
-    const { container, unmount } = mountInBrowser(h(Animated, { id: 'a' }))
-    const el = container.querySelector<HTMLElement>('#a')!
-    // animation-name is the resolved animation token (Chromium normalizes).
-    const cs = getComputedStyle(el)
-    expect(cs.animationName).toContain(name)
-    unmount()
-  })
-
-  it('css`...` lazy CSSResult interpolates into styled() and Chromium computes the rule', () => {
-    // CSSResult is lazy — toString() / nested interpolation triggers
-    // resolution. This test asserts a standalone css`` block flows
-    // through styled() and reaches the cascade in real Chromium.
-    const accent = css`
-      color: rgb(123, 200, 50);
-      font-weight: 700;
-    `
-    const Styled = styled('div')`
-      ${accent}
-      padding: 4px;
-    `
-    const { container, unmount } = mountInBrowser(h(Styled, { id: 'c' }))
-    const el = container.querySelector<HTMLElement>('#c')!
-    const cs = getComputedStyle(el)
-    expect(cs.color).toBe('rgb(123, 200, 50)')
-    expect(cs.fontWeight).toBe('700')
-    expect(cs.padding).toBe('4px')
-    unmount()
-  })
-
-  it('dynamic styled component resolves theme at mount time (static context)', () => {
-    // ThemeContext is static — components read the theme once at setup.
-    // Theme switching works via mode signal re-rendering the component tree,
-    // not via reactive context + per-component effects. This test verifies
-    // the static-read contract: component gets the theme provided at mount.
-    const theme = { color: 'rgb(200, 0, 0)' }
-
-    const Themed = styled('div')`
-      color: ${(p: Record<string, any>) => p.theme?.color};
-    `
-
-    const Provider = (props: { children?: unknown }) => {
-      provide(ThemeContext, () => theme)
-      return props.children as never
-    }
-
-    const { container, unmount } = mountInBrowser(
-      h(Provider, null, h(Themed, { id: 't' })),
-    )
-    const el = container.querySelector<HTMLElement>('#t')!
-    expect(getComputedStyle(el).color).toBe('rgb(200, 0, 0)')
-    unmount()
-  })
-
-  it('writes its CSS rules to a real <style> element under document.head', () => {
-    const X = styled('div')`background-color: rgb(10, 20, 30);`
-    const { unmount } = mountInBrowser(h(X, { id: 'x' }))
-    // Chromium accepts inserted CSS rules — the injected sheet exists
-    // and the rule is queryable via document.styleSheets.
-    let found = false
-    for (const s of Array.from(document.styleSheets)) {
-      try {
-        for (const rule of Array.from(s.cssRules ?? [])) {
-          if (rule.cssText.includes('rgb(10, 20, 30)')) {
-            found = true
-            break
-          }
-        }
-      } catch {
-        // cross-origin sheets throw — ignore
-      }
-      if (found) break
-    }
-    expect(found).toBe(true)
-    unmount()
-  })
-})