@furystack/shades 11.0.34 → 11.1.0

package/src/style-manager.spec.ts

@@ -0,0 +1,229 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { Shade } from './shade.js'
+import { StyleManager } from './style-manager.js'
+
+describe('StyleManager', () => {
+  beforeEach(() => {
+    StyleManager.clear()
+  })
+
+  afterEach(() => {
+    StyleManager.clear()
+  })
+
+  describe('registerComponentStyles', () => {
+    it('should register styles for a component', () => {
+      const result = StyleManager.registerComponentStyles('test-component', {
+        color: 'red',
+        padding: '10px',
+      })
+
+      expect(result).toBe(true)
+      expect(StyleManager.isRegistered('test-component')).toBe(true)
+    })
+
+    it('should inject CSS into a style element', () => {
+      StyleManager.registerComponentStyles('test-component', {
+        color: 'red',
+      })
+
+      const styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement).not.toBeNull()
+      expect(styleElement?.textContent).toContain('test-component')
+      expect(styleElement?.textContent).toContain('color: red')
+    })
+
+    it('should not register the same component twice', () => {
+      const result1 = StyleManager.registerComponentStyles('test-component', {
+        color: 'red',
+      })
+      const result2 = StyleManager.registerComponentStyles('test-component', {
+        color: 'blue',
+      })
+
+      expect(result1).toBe(true)
+      expect(result2).toBe(false)
+
+      // Should only have the first style
+      const styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement?.textContent).toContain('color: red')
+      expect(styleElement?.textContent).not.toContain('color: blue')
+    })
+
+    it('should handle pseudo-selectors', () => {
+      StyleManager.registerComponentStyles('test-button', {
+        backgroundColor: 'blue',
+        '&:hover': { backgroundColor: 'darkblue' },
+      })
+
+      const styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement?.textContent).toContain('test-button:hover')
+      expect(styleElement?.textContent).toContain('background-color: darkblue')
+    })
+
+    it('should return false for empty CSS object', () => {
+      const result = StyleManager.registerComponentStyles('empty-component', {})
+
+      expect(result).toBe(false)
+      expect(StyleManager.isRegistered('empty-component')).toBe(false)
+    })
+
+    it('should add comments with component name', () => {
+      StyleManager.registerComponentStyles('my-component', {
+        color: 'red',
+      })
+
+      const styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement?.textContent).toContain('/* my-component */')
+    })
+
+    it('should generate attribute selector for customized built-in elements', () => {
+      StyleManager.registerComponentStyles(
+        'my-link',
+        {
+          color: 'blue',
+          textDecoration: 'none',
+        },
+        'a',
+      )
+
+      const styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement?.textContent).toContain('a[is="my-link"]')
+      expect(styleElement?.textContent).toContain('color: blue')
+      expect(styleElement?.textContent).toContain('text-decoration: none')
+    })
+
+    it('should handle pseudo-selectors for customized built-in elements', () => {
+      StyleManager.registerComponentStyles(
+        'my-button',
+        {
+          backgroundColor: 'gray',
+          '&:hover': { backgroundColor: 'darkgray' },
+          '&:active': { transform: 'scale(0.98)' },
+        },
+        'button',
+      )
+
+      const styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement?.textContent).toContain('button[is="my-button"]')
+      expect(styleElement?.textContent).toContain('button[is="my-button"]:hover')
+      expect(styleElement?.textContent).toContain('button[is="my-button"]:active')
+    })
+  })
+
+  describe('isRegistered', () => {
+    it('should return true for registered components', () => {
+      StyleManager.registerComponentStyles('test-component', { color: 'red' })
+
+      expect(StyleManager.isRegistered('test-component')).toBe(true)
+    })
+
+    it('should return false for unregistered components', () => {
+      expect(StyleManager.isRegistered('unknown-component')).toBe(false)
+    })
+  })
+
+  describe('getRegisteredComponents', () => {
+    it('should return all registered component names', () => {
+      StyleManager.registerComponentStyles('component-a', { color: 'red' })
+      StyleManager.registerComponentStyles('component-b', { color: 'blue' })
+
+      const registered = StyleManager.getRegisteredComponents()
+
+      expect(registered.has('component-a')).toBe(true)
+      expect(registered.has('component-b')).toBe(true)
+      expect(registered.size).toBe(2)
+    })
+
+    it('should return empty set when no components registered', () => {
+      const registered = StyleManager.getRegisteredComponents()
+      expect(registered.size).toBe(0)
+    })
+  })
+
+  describe('clear', () => {
+    it('should clear all registered components', () => {
+      StyleManager.registerComponentStyles('test-component', { color: 'red' })
+      expect(StyleManager.isRegistered('test-component')).toBe(true)
+
+      StyleManager.clear()
+
+      expect(StyleManager.isRegistered('test-component')).toBe(false)
+      expect(StyleManager.getRegisteredComponents().size).toBe(0)
+    })
+
+    it('should remove style element on clear', () => {
+      StyleManager.registerComponentStyles('test-component', { color: 'red' })
+      let styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement).not.toBeNull()
+
+      StyleManager.clear()
+
+      styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement).toBeNull()
+    })
+  })
+
+  describe('reusing style element', () => {
+    it('should use the same style element for multiple components', () => {
+      StyleManager.registerComponentStyles('component-a', { color: 'red' })
+      StyleManager.registerComponentStyles('component-b', { color: 'blue' })
+
+      const styleElements = document.querySelectorAll('[data-shades-styles]')
+      expect(styleElements.length).toBe(1)
+
+      const styleElement = styleElements[0]
+      expect(styleElement?.textContent).toContain('component-a')
+      expect(styleElement?.textContent).toContain('component-b')
+    })
+  })
+
+  describe('Shade integration', () => {
+    it('should register CSS styles when Shade component is created with css property', () => {
+      Shade({
+        shadowDomName: 'shade-css-test-component',
+        css: {
+          color: 'red',
+          padding: '10px',
+          '&:hover': { color: 'blue' },
+        },
+        render: () => null,
+      })
+
+      expect(StyleManager.isRegistered('shade-css-test-component')).toBe(true)
+
+      const styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement?.textContent).toContain('shade-css-test-component')
+      expect(styleElement?.textContent).toContain('color: red')
+      expect(styleElement?.textContent).toContain('shade-css-test-component:hover')
+    })
+
+    it('should register CSS with attribute selector for customized built-in elements', () => {
+      Shade({
+        shadowDomName: 'shade-css-test-button',
+        elementBase: HTMLButtonElement,
+        elementBaseName: 'button',
+        css: {
+          backgroundColor: 'blue',
+          '&:hover': { backgroundColor: 'darkblue' },
+        },
+        render: () => null,
+      })
+
+      expect(StyleManager.isRegistered('shade-css-test-button')).toBe(true)
+
+      const styleElement = document.querySelector('[data-shades-styles]')
+      expect(styleElement?.textContent).toContain('button[is="shade-css-test-button"]')
+      expect(styleElement?.textContent).toContain('button[is="shade-css-test-button"]:hover')
+    })
+
+    it('should not register styles when Shade component has no css property', () => {
+      Shade({
+        shadowDomName: 'shade-no-css-component',
+        render: () => null,
+      })
+
+      expect(StyleManager.isRegistered('shade-no-css-component')).toBe(false)
+    })
+  })
+})

package/src/style-manager.ts

@@ -0,0 +1,104 @@
+import { generateCSS } from './css-generator.js'
+import type { CSSObject } from './models/css-object.js'
+
+/**
+ * Singleton that manages component CSS injection.
+ * Creates and maintains a shared `<style>` element in the document head,
+ * and tracks registered component styles to avoid duplicates.
+ */
+class StyleManagerClass {
+  private styleElement: HTMLStyleElement | null = null
+  private registeredComponents = new Set<string>()
+
+  /**
+   * Gets or creates the shared style element
+   * @returns The style element for CSS injection
+   */
+  private getStyleElement(): HTMLStyleElement {
+    if (!this.styleElement) {
+      this.styleElement = document.createElement('style')
+      this.styleElement.setAttribute('data-shades-styles', '')
+      document.head.appendChild(this.styleElement)
+    }
+    return this.styleElement
+  }
+
+  /**
+   * Registers CSS styles for a component.
+   * Styles are only injected once per component (based on shadowDomName).
+   *
+   * @param shadowDomName - The unique component identifier (used as CSS selector)
+   * @param cssObject - The CSSObject containing styles and nested selectors
+   * @param elementBaseName - Optional base element name for customized built-in elements (e.g., 'a', 'button').
+   *                          When provided, generates selector like `a[is="component-name"]` instead of `component-name`
+   * @returns True if styles were injected, false if already registered
+   *
+   * @example
+   * ```typescript
+   * // Regular custom element
+   * StyleManager.registerComponentStyles('my-button', {
+   *   padding: '12px',
+   *   '&:hover': { backgroundColor: 'blue' }
+   * })
+   *
+   * // Customized built-in element (extends anchor)
+   * StyleManager.registerComponentStyles('my-link', {
+   *   color: 'blue',
+   *   '&:hover': { textDecoration: 'underline' }
+   * }, 'a')
+   * // Generates: a[is="my-link"] { color: blue; }
+   * ```
+   */
+  public registerComponentStyles(shadowDomName: string, cssObject: CSSObject, elementBaseName?: string): boolean {
+    if (this.registeredComponents.has(shadowDomName)) {
+      return false
+    }
+
+    const selector = elementBaseName ? `${elementBaseName}[is="${shadowDomName}"]` : shadowDomName
+    const css = generateCSS(selector, cssObject)
+    if (css) {
+      const styleElement = this.getStyleElement()
+      styleElement.textContent += `\n/* ${shadowDomName} */\n${css}\n`
+      this.registeredComponents.add(shadowDomName)
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Checks if a component's styles have already been registered
+   * @param shadowDomName - The component identifier to check
+   * @returns True if styles are already registered
+   */
+  public isRegistered(shadowDomName: string): boolean {
+    return this.registeredComponents.has(shadowDomName)
+  }
+
+  /**
+   * Gets all registered component names (for debugging/testing)
+   * @returns Set of registered component names
+   */
+  public getRegisteredComponents(): ReadonlySet<string> {
+    return this.registeredComponents
+  }
+
+  /**
+   * Clears all registered styles (useful for testing)
+   */
+  public clear(): void {
+    this.registeredComponents.clear()
+    if (this.styleElement) {
+      this.styleElement.textContent = ''
+      this.styleElement.remove()
+      this.styleElement = null
+    }
+  }
+}
+
+/**
+ * Singleton instance for managing component CSS styles.
+ * Use this to register component-level styles that support
+ * pseudo-selectors and nested selectors.
+ */
+export const StyleManager = new StyleManagerClass()

package/src/styled-element.spec.tsx

@@ -0,0 +1,117 @@
+import { describe, expect, it } from 'vitest'
+import { styledElement } from './styled-element.js'
+
+describe('styled-element', () => {
+  describe('styledElement', () => {
+    it('should apply additional styles to an intrinsic element', () => {
+      const additionalStyles = { color: 'red', padding: '10px' }
+      const StyledDiv = styledElement('div', additionalStyles)
+
+      const result = StyledDiv({}, [])
+
+      expect(result.style.color).toBe('red')
+      expect(result.style.padding).toBe('10px')
+    })
+
+    it('should merge styles when element already has styles', () => {
+      const additionalStyles = { color: 'red' }
+      const existingStyles = { backgroundColor: 'blue' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({ style: existingStyles }, [])
+
+      expect(result.style.backgroundColor).toBe('blue')
+      expect(result.style.color).toBe('red')
+    })
+
+    it('should override existing styles with additional styles', () => {
+      const additionalStyles = { color: 'red' }
+      const existingStyles = { color: 'blue' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({ style: existingStyles }, [])
+
+      expect(result.style.color).toBe('red')
+    })
+
+    it('should preserve original props', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({ className: 'my-class', id: 'my-id' }, [])
+
+      expect(result.className).toBe('my-class')
+      expect(result.id).toBe('my-id')
+      expect(result.style.color).toBe('red')
+    })
+
+    it('should pass children correctly', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const child1 = document.createElement('span')
+      child1.textContent = 'child1'
+      const child2 = document.createElement('span')
+      child2.textContent = 'child2'
+
+      const result = StyledDiv({}, [child1, child2])
+
+      expect(result.children.length).toBe(2)
+      expect(result.children[0]).toBe(child1)
+      expect(result.children[1]).toBe(child2)
+    })
+
+    it('should handle text children', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({}, ['Hello', ' ', 'World'])
+
+      expect(result.textContent).toBe('Hello World')
+    })
+
+    it('should return an HTMLElement', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({}, [])
+
+      expect(result).toBeInstanceOf(HTMLElement)
+      expect(result.tagName.toLowerCase()).toBe('div')
+    })
+
+    it('should work with different element types', () => {
+      const spanStyles = { fontWeight: 'bold' }
+      const buttonStyles = { cursor: 'pointer' }
+
+      const StyledSpan = styledElement('span', spanStyles)
+      const StyledButton = styledElement('button', buttonStyles)
+
+      const spanResult = StyledSpan({}, [])
+      const buttonResult = StyledButton({}, [])
+
+      expect(spanResult.tagName.toLowerCase()).toBe('span')
+      expect(spanResult.style.fontWeight).toBe('bold')
+      expect(buttonResult.tagName.toLowerCase()).toBe('button')
+      expect(buttonResult.style.cursor).toBe('pointer')
+    })
+
+    it('should handle props being undefined', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv(undefined as unknown as Record<string, unknown>, [])
+
+      expect(result.style.color).toBe('red')
+    })
+
+    it('should handle empty children list', () => {
+      const additionalStyles = { color: 'red' }
+
+      const StyledDiv = styledElement('div', additionalStyles)
+      const result = StyledDiv({}, [])
+
+      expect(result.children.length).toBe(0)
+    })
+  })
+})

package/src/styled-shade.spec.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from 'vitest'
+import { styledShade } from './styled-shade.js'
+
+describe('styled-shade', () => {
+  describe('styledShade', () => {
+    it('should apply additional styles to a component', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red', padding: '10px' }
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      StyledComponent({})
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [props] = mockElement.mock.calls[0] as [{ style: Record<string, string> }]
+      expect(props.style.color).toBe('red')
+      expect(props.style.padding).toBe('10px')
+    })
+
+    it('should merge styles when component already has styles', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red' }
+      const existingStyles = { backgroundColor: 'blue' }
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      StyledComponent({ style: existingStyles })
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [props] = mockElement.mock.calls[0] as [{ style: Record<string, string> }]
+      expect(props.style.backgroundColor).toBe('blue')
+      expect(props.style.color).toBe('red')
+    })
+
+    it('should override existing styles with additional styles', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red' }
+      const existingStyles = { color: 'blue' }
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      StyledComponent({ style: existingStyles })
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [props] = mockElement.mock.calls[0] as [{ style: Record<string, string> }]
+      expect(props.style.color).toBe('red')
+    })
+
+    it('should preserve original props', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red' }
+
+      const StyledComponent = styledShade<{ className?: string; style?: Partial<CSSStyleDeclaration> }>(
+        mockElement,
+        additionalStyles,
+      )
+      StyledComponent({ className: 'my-class' })
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [props] = mockElement.mock.calls[0] as [{ className: string; style: Record<string, string> }]
+      expect(props.className).toBe('my-class')
+      expect(props.style.color).toBe('red')
+    })
+
+    it('should pass children correctly', () => {
+      const mockElement = vi.fn().mockReturnValue({} as JSX.Element)
+      const additionalStyles = { color: 'red' }
+      const children = ['child1', 'child2'] as unknown as JSX.Element[]
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      StyledComponent({}, children)
+
+      expect(mockElement).toHaveBeenCalledTimes(1)
+      const [, passedChildren] = mockElement.mock.calls[0] as [unknown, JSX.Element[]]
+      expect(passedChildren).toBe(children)
+    })
+
+    it('should return a function that returns JSX.Element', () => {
+      const expectedElement = { tagName: 'div' } as unknown as JSX.Element
+      const mockElement = vi.fn().mockReturnValue(expectedElement)
+      const additionalStyles = { color: 'red' }
+
+      const StyledComponent = styledShade(mockElement, additionalStyles)
+      const result = StyledComponent({})
+
+      expect(result).toBe(expectedElement)
+    })
+  })
+})