@furystack/shades 11.0.35 → 11.1.0

package/esm/style-manager.spec.js

@@ -0,0 +1,179 @@
+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);
+        });
+    });
+});
+//# sourceMappingURL=style-manager.spec.js.map

package/esm/style-manager.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-manager.spec.js","sourceRoot":"","sources":["../src/style-manager.spec.ts"],"names":[],"mappings":"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"}

package/esm/styled-element.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styled-element.spec.d.ts.map

package/esm/styled-element.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-element.spec.d.ts","sourceRoot":"","sources":["../src/styled-element.spec.tsx"],"names":[],"mappings":""}

package/esm/styled-element.spec.js

@@ -0,0 +1,86 @@
+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, []);
+            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);
+        });
+    });
+});
+//# sourceMappingURL=styled-element.spec.js.map

package/esm/styled-element.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-element.spec.js","sourceRoot":"","sources":["../src/styled-element.spec.tsx"],"names":[],"mappings":"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"}

package/esm/styled-shade.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styled-shade.spec.d.ts.map

package/esm/styled-shade.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-shade.spec.d.ts","sourceRoot":"","sources":["../src/styled-shade.spec.ts"],"names":[],"mappings":""}

package/esm/styled-shade.spec.js

@@ -0,0 +1,66 @@
+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({});
+            const additionalStyles = { color: 'red', padding: '10px' };
+            const StyledComponent = styledShade(mockElement, additionalStyles);
+            StyledComponent({});
+            expect(mockElement).toHaveBeenCalledTimes(1);
+            const [props] = mockElement.mock.calls[0];
+            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({});
+            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];
+            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({});
+            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];
+            expect(props.style.color).toBe('red');
+        });
+        it('should preserve original props', () => {
+            const mockElement = vi.fn().mockReturnValue({});
+            const additionalStyles = { color: 'red' };
+            const StyledComponent = styledShade(mockElement, additionalStyles);
+            StyledComponent({ className: 'my-class' });
+            expect(mockElement).toHaveBeenCalledTimes(1);
+            const [props] = mockElement.mock.calls[0];
+            expect(props.className).toBe('my-class');
+            expect(props.style.color).toBe('red');
+        });
+        it('should pass children correctly', () => {
+            const mockElement = vi.fn().mockReturnValue({});
+            const additionalStyles = { color: 'red' };
+            const children = ['child1', 'child2'];
+            const StyledComponent = styledShade(mockElement, additionalStyles);
+            StyledComponent({}, children);
+            expect(mockElement).toHaveBeenCalledTimes(1);
+            const [, passedChildren] = mockElement.mock.calls[0];
+            expect(passedChildren).toBe(children);
+        });
+        it('should return a function that returns JSX.Element', () => {
+            const expectedElement = { tagName: 'div' };
+            const mockElement = vi.fn().mockReturnValue(expectedElement);
+            const additionalStyles = { color: 'red' };
+            const StyledComponent = styledShade(mockElement, additionalStyles);
+            const result = StyledComponent({});
+            expect(result).toBe(expectedElement);
+        });
+    });
+});
+//# sourceMappingURL=styled-shade.spec.js.map

package/esm/styled-shade.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-shade.spec.js","sourceRoot":"","sources":["../src/styled-shade.spec.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades",
-  "version": "11.0.35",
+  "version": "11.1.0",
   "description": "A lightweight UI framework for FuryStack with JSX support",
   "type": "module",
   "scripts": {

package/src/compile-route.spec.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { compileRoute } from './compile-route.js'
+
+describe('compile-route', () => {
+  describe('compileRoute', () => {
+    it('should compile route with string params', () => {
+      const result = compileRoute('/users/:id', { id: 'abc123' })
+      expect(result).toBe('/users/abc123')
+    })
+
+    it('should compile route with numeric params (stringified)', () => {
+      const result = compileRoute('/users/:id', { id: 42 })
+      expect(result).toBe('/users/42')
+    })
+
+    it('should compile route with multiple params', () => {
+      const result = compileRoute('/users/:userId/posts/:postId', {
+        userId: 'user1',
+        postId: 'post2',
+      })
+      expect(result).toBe('/users/user1/posts/post2')
+    })
+
+    it('should handle empty params object for static routes', () => {
+      const result = compileRoute('/home', {})
+      expect(result).toBe('/home')
+    })
+
+    it('should handle params with special characters', () => {
+      const result = compileRoute('/search/:query', { query: 'hello-world' })
+      expect(result).toBe('/search/hello-world')
+    })
+
+    it('should handle boolean params (stringified)', () => {
+      const result = compileRoute('/feature/:enabled', { enabled: true })
+      expect(result).toBe('/feature/true')
+    })
+  })
+})

package/src/components/route-link.spec.tsx

@@ -31,7 +31,7 @@ describe('RouteLink', () => {
       ),
     })
     expect(document.body.innerHTML).toMatchInlineSnapshot(
-      `"<div id="root"><a is="route-link" id="route" href="/subroute" style="color: inherit; text-decoration: inherit;">Link</a></div>"`,
+      `"<div id="root"><a is="route-link" id="route" href="/subroute">Link</a></div>"`,
     )
     expect(onRouteChange).not.toBeCalled()
     document.getElementById('route')?.click()

package/src/components/route-link.tsx

@@ -9,14 +9,13 @@ export const RouteLink = Shade<RouteLinkProps>({
   shadowDomName: 'route-link',
   elementBase: HTMLAnchorElement,
   elementBaseName: 'a',
+  css: {
+    color: 'inherit',
+    textDecoration: 'inherit',
+  },
   render: ({ children, props, injector, element }) => {
     attachProps(element, {
       ...props,
-      style: {
-        color: 'inherit',
-        textDecoration: 'inherit',
-        ...props.style,
-      },
       onclick: (ev: MouseEvent) => {
         ev.preventDefault()
         history.pushState('', props.title || '', props.href)

package/src/css-generator.spec.ts

@@ -0,0 +1,183 @@
+import { describe, expect, it } from 'vitest'
+import { camelToKebab, generateCSS, generateCSSRule, isSelectorKey, propertiesToCSSString } from './css-generator.js'
+import type { CSSProperties } from './models/css-object.js'
+
+describe('css-generator', () => {
+  describe('camelToKebab', () => {
+    it('should convert camelCase to kebab-case', () => {
+      expect(camelToKebab('backgroundColor')).toBe('background-color')
+      expect(camelToKebab('fontSize')).toBe('font-size')
+      expect(camelToKebab('borderTopLeftRadius')).toBe('border-top-left-radius')
+    })
+
+    it('should handle single word properties', () => {
+      expect(camelToKebab('color')).toBe('color')
+      expect(camelToKebab('margin')).toBe('margin')
+    })
+
+    it('should handle empty string', () => {
+      expect(camelToKebab('')).toBe('')
+    })
+  })
+
+  describe('isSelectorKey', () => {
+    it('should return true for selector keys starting with &', () => {
+      expect(isSelectorKey('&:hover')).toBe(true)
+      expect(isSelectorKey('&:active')).toBe(true)
+      expect(isSelectorKey('& .className')).toBe(true)
+      expect(isSelectorKey('& > div')).toBe(true)
+    })
+
+    it('should return false for regular CSS property keys', () => {
+      expect(isSelectorKey('color')).toBe(false)
+      expect(isSelectorKey('backgroundColor')).toBe(false)
+      expect(isSelectorKey('fontSize')).toBe(false)
+    })
+  })
+
+  describe('propertiesToCSSString', () => {
+    it('should convert CSS properties object to CSS string', () => {
+      const result = propertiesToCSSString({
+        color: 'red',
+        backgroundColor: 'blue',
+      })
+      expect(result).toBe('color: red; background-color: blue')
+    })
+
+    it('should skip undefined and null values', () => {
+      const result = propertiesToCSSString({
+        color: 'red',
+        backgroundColor: undefined,
+      })
+      expect(result).toBe('color: red')
+    })
+
+    it('should skip empty string values', () => {
+      const result = propertiesToCSSString({
+        color: 'red',
+        backgroundColor: '',
+      })
+      expect(result).toBe('color: red')
+    })
+
+    it('should return empty string for empty object', () => {
+      const result = propertiesToCSSString({})
+      expect(result).toBe('')
+    })
+
+    it('should ignore selector keys', () => {
+      // Type assertion needed to test mixed object with selectors
+      const mixedObject = {
+        color: 'red',
+        '&:hover': { color: 'blue' },
+      }
+      const result = propertiesToCSSString(mixedObject as unknown as CSSProperties)
+      expect(result).toBe('color: red')
+    })
+
+    it('should filter out non-string values', () => {
+      // Type assertion to test edge case with non-string values
+      const mixedObject = {
+        color: 'red',
+        opacity: 0.5, // number - should be filtered
+        display: 'flex',
+        hidden: true, // boolean - should be filtered
+      }
+      const result = propertiesToCSSString(mixedObject as unknown as CSSProperties)
+      expect(result).toBe('color: red; display: flex')
+    })
+  })
+
+  describe('generateCSSRule', () => {
+    it('should generate a complete CSS rule', () => {
+      const result = generateCSSRule('my-component', {
+        color: 'red',
+        padding: '10px',
+      })
+      expect(result).toBe('my-component { color: red; padding: 10px; }')
+    })
+
+    it('should return empty string for empty properties', () => {
+      const result = generateCSSRule('my-component', {})
+      expect(result).toBe('')
+    })
+  })
+
+  describe('generateCSS', () => {
+    it('should generate CSS for base properties only', () => {
+      const result = generateCSS('my-component', {
+        color: 'red',
+        padding: '10px',
+      })
+      expect(result).toBe('my-component { color: red; padding: 10px; }')
+    })
+
+    it('should generate CSS with pseudo-selectors', () => {
+      const result = generateCSS('my-component', {
+        color: 'red',
+        '&:hover': { color: 'blue' },
+      })
+      expect(result).toContain('my-component { color: red; }')
+      expect(result).toContain('my-component:hover { color: blue; }')
+    })
+
+    it('should generate CSS with nested class selectors', () => {
+      const result = generateCSS('my-component', {
+        padding: '10px',
+        '& .inner': { fontWeight: 'bold' },
+      })
+      expect(result).toContain('my-component { padding: 10px; }')
+      expect(result).toContain('my-component .inner { font-weight: bold; }')
+    })
+
+    it('should generate CSS with child selectors', () => {
+      const result = generateCSS('my-component', {
+        display: 'flex',
+        '& > div': { margin: '5px' },
+      })
+      expect(result).toContain('my-component { display: flex; }')
+      expect(result).toContain('my-component > div { margin: 5px; }')
+    })
+
+    it('should handle multiple pseudo-selectors', () => {
+      const result = generateCSS('my-button', {
+        backgroundColor: 'blue',
+        '&:hover': { backgroundColor: 'darkblue' },
+        '&:active': { backgroundColor: 'navy' },
+        '&:disabled': { opacity: '0.5' },
+      })
+      expect(result).toContain('my-button { background-color: blue; }')
+      expect(result).toContain('my-button:hover { background-color: darkblue; }')
+      expect(result).toContain('my-button:active { background-color: navy; }')
+      expect(result).toContain('my-button:disabled { opacity: 0.5; }')
+    })
+
+    it('should handle empty css object', () => {
+      const result = generateCSS('my-component', {})
+      expect(result).toBe('')
+    })
+
+    it('should handle css object with only selectors', () => {
+      const result = generateCSS('my-component', {
+        '&:hover': { color: 'blue' },
+      })
+      expect(result).toBe('my-component:hover { color: blue; }')
+    })
+
+    it('should skip selector keys with non-object values', () => {
+      // Type assertion to test edge case with invalid selector values
+      const cssObject = {
+        color: 'red',
+        '&:hover': 'invalid', // string instead of object - should be skipped
+        '&:active': null, // null - should be skipped
+        '&:focus': { backgroundColor: 'blue' }, // valid - should be included
+      }
+      const result = generateCSS('my-component', cssObject as unknown as Parameters<typeof generateCSS>[1])
+      expect(result).toContain('my-component { color: red; }')
+      expect(result).toContain('my-component:focus { background-color: blue; }')
+      expect(result).not.toContain('invalid')
+      expect(result).not.toContain(':hover')
+      expect(result).not.toContain(':active')
+    })
+  })
+})