meno-core 1.0.53 → 1.1.0

package/lib/client/styles/StyleInjector.test.ts

@@ -1,16 +1,17 @@
-import { test, expect, describe, beforeEach, afterEach, mock } from "bun:test";
-import { StyleInjector } from "./StyleInjector";
-import { ComponentRegistry } from "../componentRegistry";
-import { ElementRegistry } from "../elementRegistry";
-import type { ComponentDefinition } from "../../shared/types";
+import { test, expect, describe, beforeEach, afterEach, mock } from 'bun:test';
+import { StyleInjector } from './StyleInjector';
+import { ComponentRegistry } from '../componentRegistry';
+import { ElementRegistry } from '../elementRegistry';
+import { InteractiveStylesRegistry } from '../InteractiveStylesRegistry';
+import type { ComponentDefinition } from '../../shared/types';
 import {
   createTypedMockHTMLElement,
   createTypedMockDocument,
   type TypedMockDocument,
   type TypedMockHTMLElement,
-} from "../../test-utils/factories/DomMockFactory";
+} from '../../test-utils/factories/DomMockFactory';
 
-describe("StyleInjector", () => {
+describe('StyleInjector', () => {
   let componentRegistry: ComponentRegistry;
   let elementRegistry: ElementRegistry;
   let styleInjector: StyleInjector;
@@ -22,18 +23,23 @@ describe("StyleInjector", () => {
     // Save original document
     originalDocument = global.document;
 
+    // InteractiveStylesRegistry is a process-global singleton; earlier test
+    // files in the same run may have left entries in it, which inject() would
+    // pick up and write into our mocked style tag. Clear it for isolation.
+    InteractiveStylesRegistry.clear();
+
     componentRegistry = new ComponentRegistry();
     elementRegistry = new ElementRegistry();
     styleInjector = new StyleInjector({
       componentRegistry,
       elementRegistry,
-      styleId: "component-css",
+      styleId: 'component-css',
     });
 
     // Create typed mock style tag
     mockStyleTag = createTypedMockHTMLElement({
-      tagName: "STYLE",
-      id: "component-css",
+      tagName: 'STYLE',
+      id: 'component-css',
     });
 
     // Create typed mock document
@@ -41,7 +47,7 @@ describe("StyleInjector", () => {
 
     // Configure createElement to return our mock style tag
     mockDocument.createElement.mockImplementation((tag: string) => {
-      if (tag === "style") {
+      if (tag === 'style') {
         return mockStyleTag;
       }
       return createTypedMockHTMLElement({ tagName: tag });
@@ -54,12 +60,14 @@ describe("StyleInjector", () => {
   afterEach(() => {
     // Clean up any style tags
     styleInjector.clear();
+    // Don't leak our own registry state to later test files
+    InteractiveStylesRegistry.clear();
     // Restore original document
     global.document = originalDocument;
   });
 
-  describe("constructor", () => {
-    test("should create instance with default styleId", () => {
+  describe('constructor', () => {
+    test('should create instance with default styleId', () => {
       const injector = new StyleInjector({
         componentRegistry,
         elementRegistry,
@@ -67,146 +75,146 @@ describe("StyleInjector", () => {
       expect(injector).toBeInstanceOf(StyleInjector);
     });
 
-    test("should create instance with custom styleId", () => {
+    test('should create instance with custom styleId', () => {
       const injector = new StyleInjector({
         componentRegistry,
         elementRegistry,
-        styleId: "custom-style-id",
+        styleId: 'custom-style-id',
       });
       expect(injector).toBeInstanceOf(StyleInjector);
     });
   });
 
-  describe("inject", () => {
+  describe('inject', () => {
     // Note: This test passes in isolation but may fail in full suite due to
     // DOM state pollution from other tests (generateUtilityCSS scans document.body)
-    test.skip("should inject CSS without templates (test isolation issue in full suite)", () => {
+    test.skip('should inject CSS without templates (test isolation issue in full suite)', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
-          css: ".test { color: red; }",
+          structure: { type: 'node', tag: 'div' },
+          css: '.test { color: red; }',
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       styleInjector.inject();
 
-      expect(mockDocument.createElement).toHaveBeenCalledWith("style");
+      expect(mockDocument.createElement).toHaveBeenCalledWith('style');
       expect(mockDocument.head.appendChild).toHaveBeenCalled();
-      expect(mockStyleTag.textContent).toContain(".test { color: red; }");
-      expect(mockStyleTag.textContent).toContain("Component: TestComponent");
+      expect(mockStyleTag.textContent).toContain('.test { color: red; }');
+      expect(mockStyleTag.textContent).toContain('Component: TestComponent');
     });
 
     // Template-based tests require full ElementRegistry from @meno/studio
     // These are integration tests that should be run in the studio package
-    test.skip("should inject CSS with templates per instance (requires @meno/studio ElementRegistry)", () => {
+    test.skip('should inject CSS with templates per instance (requires @meno/studio ElementRegistry)', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
-          css: ".test { color: {{color}}; }",
+          structure: { type: 'node', tag: 'div' },
+          css: '.test { color: {{color}}; }',
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       // Register component instances with props using typed mocks
-      const mockElement1 = createTypedMockHTMLElement({ tagName: "DIV" });
-      const mockElement2 = createTypedMockHTMLElement({ tagName: "DIV" });
-      elementRegistry.register([0], mockElement1 as unknown as HTMLElement, "TestComponent", true, {
-        color: "red",
+      const mockElement1 = createTypedMockHTMLElement({ tagName: 'DIV' });
+      const mockElement2 = createTypedMockHTMLElement({ tagName: 'DIV' });
+      elementRegistry.register([0], mockElement1 as unknown as HTMLElement, 'TestComponent', true, {
+        color: 'red',
       });
-      elementRegistry.register([1], mockElement2 as unknown as HTMLElement, "TestComponent", true, {
-        color: "blue",
+      elementRegistry.register([1], mockElement2 as unknown as HTMLElement, 'TestComponent', true, {
+        color: 'blue',
       });
 
       styleInjector.inject();
 
-      expect(mockDocument.createElement).toHaveBeenCalledWith("style");
+      expect(mockDocument.createElement).toHaveBeenCalledWith('style');
       expect(mockDocument.head.appendChild).toHaveBeenCalled();
-      expect(mockStyleTag.textContent).toContain("color: red");
-      expect(mockStyleTag.textContent).toContain("color: blue");
-      expect(mockStyleTag.textContent).toContain("(instance)");
+      expect(mockStyleTag.textContent).toContain('color: red');
+      expect(mockStyleTag.textContent).toContain('color: blue');
+      expect(mockStyleTag.textContent).toContain('(instance)');
     });
 
-    test.skip("should handle multiple components with mixed template/non-template CSS (requires @meno/studio ElementRegistry)", () => {
+    test.skip('should handle multiple components with mixed template/non-template CSS (requires @meno/studio ElementRegistry)', () => {
       const componentDef1: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
-          css: ".test1 { color: red; }",
+          structure: { type: 'node', tag: 'div' },
+          css: '.test1 { color: red; }',
         },
       };
 
       const componentDef2: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
-          css: ".test2 { color: {{color}}; }",
+          structure: { type: 'node', tag: 'div' },
+          css: '.test2 { color: {{color}}; }',
         },
       };
 
-      componentRegistry.register("Component1", componentDef1);
-      componentRegistry.register("Component2", componentDef2);
+      componentRegistry.register('Component1', componentDef1);
+      componentRegistry.register('Component2', componentDef2);
 
-      const mockElement = createTypedMockHTMLElement({ tagName: "DIV" });
-      elementRegistry.register([0], mockElement as unknown as HTMLElement, "Component2", true, {
-        color: "blue",
+      const mockElement = createTypedMockHTMLElement({ tagName: 'DIV' });
+      elementRegistry.register([0], mockElement as unknown as HTMLElement, 'Component2', true, {
+        color: 'blue',
       });
 
       styleInjector.inject();
 
-      expect(mockStyleTag.textContent).toContain("Component: Component1");
-      expect(mockStyleTag.textContent).toContain("Component: Component2");
-      expect(mockStyleTag.textContent).toContain(".test1 { color: red; }");
-      expect(mockStyleTag.textContent).toContain("color: blue");
+      expect(mockStyleTag.textContent).toContain('Component: Component1');
+      expect(mockStyleTag.textContent).toContain('Component: Component2');
+      expect(mockStyleTag.textContent).toContain('.test1 { color: red; }');
+      expect(mockStyleTag.textContent).toContain('color: blue');
     });
 
-    test("should reuse existing style tag (in-place update)", () => {
+    test('should reuse existing style tag (in-place update)', () => {
       const existingStyle = createTypedMockHTMLElement({
-        tagName: "STYLE",
-        id: "component-css",
+        tagName: 'STYLE',
+        id: 'component-css',
       });
 
       mockDocument.getElementById.mockReturnValue(existingStyle);
 
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
-          css: ".test { color: red; }",
+          structure: { type: 'node', tag: 'div' },
+          css: '.test { color: red; }',
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       styleInjector.inject();
 
       // Should look up existing tag and update textContent in-place (no createElement)
-      expect(mockDocument.getElementById).toHaveBeenCalledWith("component-css");
-      expect(existingStyle.textContent).toContain(".test { color: red; }");
+      expect(mockDocument.getElementById).toHaveBeenCalledWith('component-css');
+      expect(existingStyle.textContent).toContain('.test { color: red; }');
       expect(mockDocument.createElement).not.toHaveBeenCalled();
     });
 
     // Note: This test passes in isolation but may fail in full suite due to
     // DOM state pollution from other tests (generateUtilityCSS scans document.body)
-    test.skip("should not inject CSS if no components have CSS (test isolation issue in full suite)", () => {
+    test.skip('should not inject CSS if no components have CSS (test isolation issue in full suite)', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
+          structure: { type: 'node', tag: 'div' },
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       styleInjector.inject();
 
@@ -214,53 +222,53 @@ describe("StyleInjector", () => {
       expect(mockDocument.head.appendChild).not.toHaveBeenCalled();
     });
 
-    test.skip("should handle template processing errors gracefully (requires @meno/studio ElementRegistry)", () => {
+    test.skip('should handle template processing errors gracefully (requires @meno/studio ElementRegistry)', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
-          css: ".test { color: {{invalid.prop}}; }",
+          structure: { type: 'node', tag: 'div' },
+          css: '.test { color: {{invalid.prop}}; }',
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
-      const mockElement = createTypedMockHTMLElement({ tagName: "DIV" });
-      elementRegistry.register([0], mockElement as unknown as HTMLElement, "TestComponent", true, {
-        color: "red",
+      const mockElement = createTypedMockHTMLElement({ tagName: 'DIV' });
+      elementRegistry.register([0], mockElement as unknown as HTMLElement, 'TestComponent', true, {
+        color: 'red',
       });
 
       // Should not throw, should fallback to original CSS
       expect(() => styleInjector.inject()).not.toThrow();
-      expect(mockStyleTag.textContent).toContain("Component: TestComponent");
+      expect(mockStyleTag.textContent).toContain('Component: TestComponent');
     });
 
-    test("should handle missing component props gracefully", () => {
+    test('should handle missing component props gracefully', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
-          css: ".test { color: {{color}}; }",
+          structure: { type: 'node', tag: 'div' },
+          css: '.test { color: {{color}}; }',
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
       // Register element without props
-      const mockElement = createTypedMockHTMLElement({ tagName: "DIV" });
-      elementRegistry.register([0], mockElement as unknown as HTMLElement, "TestComponent", true);
+      const mockElement = createTypedMockHTMLElement({ tagName: 'DIV' });
+      elementRegistry.register([0], mockElement as unknown as HTMLElement, 'TestComponent', true);
 
       // Should not throw
       expect(() => styleInjector.inject()).not.toThrow();
     });
 
-    test("should handle errors during injection gracefully", () => {
+    test('should handle errors during injection gracefully', () => {
       // Force an error by making getAll throw
       const originalGetAll = componentRegistry.getAll.bind(componentRegistry);
       componentRegistry.getAll = mock(() => {
-        throw new Error("Test error");
+        throw new Error('Test error');
       });
 
       // Should not throw - should handle error gracefully
@@ -271,15 +279,15 @@ describe("StyleInjector", () => {
     });
   });
 
-  describe("clear", () => {
-    test("should remove all style tags if they exist", () => {
+  describe('clear', () => {
+    test('should remove all style tags if they exist', () => {
       const existingComponentStyle = createTypedMockHTMLElement({
-        tagName: "STYLE",
-        id: "component-css",
+        tagName: 'STYLE',
+        id: 'component-css',
       });
       const existingInteractiveStyle = createTypedMockHTMLElement({
-        tagName: "STYLE",
-        id: "interactive-styles",
+        tagName: 'STYLE',
+        id: 'interactive-styles',
       });
 
       mockDocument.getElementById
@@ -289,63 +297,63 @@ describe("StyleInjector", () => {
       styleInjector.clear();
 
       // component-css and interactive-styles are removed directly
-      expect(mockDocument.getElementById).toHaveBeenCalledWith("component-css");
-      expect(mockDocument.getElementById).toHaveBeenCalledWith("interactive-styles");
+      expect(mockDocument.getElementById).toHaveBeenCalledWith('component-css');
+      expect(mockDocument.getElementById).toHaveBeenCalledWith('interactive-styles');
       expect(existingComponentStyle.remove).toHaveBeenCalled();
       expect(existingInteractiveStyle.remove).toHaveBeenCalled();
       // utility-css removal is delegated to UtilityClassCollector.destroy()
     });
 
-    test("should not throw if style tags do not exist", () => {
+    test('should not throw if style tags do not exist', () => {
       mockDocument.getElementById.mockReturnValue(null);
 
       expect(() => styleInjector.clear()).not.toThrow();
     });
   });
 
-  describe("exists", () => {
-    test("should return true if style tag exists", () => {
+  describe('exists', () => {
+    test('should return true if style tag exists', () => {
       const existingStyle = createTypedMockHTMLElement({
-        tagName: "STYLE",
-        id: "component-css",
+        tagName: 'STYLE',
+        id: 'component-css',
       });
 
       mockDocument.getElementById.mockReturnValueOnce(existingStyle);
 
       expect(styleInjector.exists()).toBe(true);
-      expect(mockDocument.getElementById).toHaveBeenCalledWith("component-css");
+      expect(mockDocument.getElementById).toHaveBeenCalledWith('component-css');
     });
 
-    test("should return false if style tag does not exist", () => {
+    test('should return false if style tag does not exist', () => {
       mockDocument.getElementById.mockReturnValueOnce(null);
 
       expect(styleInjector.exists()).toBe(false);
-      expect(mockDocument.getElementById).toHaveBeenCalledWith("component-css");
+      expect(mockDocument.getElementById).toHaveBeenCalledWith('component-css');
     });
   });
 
-  describe("integration", () => {
-    test.skip("should handle full injection cycle (requires @meno/studio ElementRegistry)", () => {
+  describe('integration', () => {
+    test.skip('should handle full injection cycle (requires @meno/studio ElementRegistry)', () => {
       const componentDef: ComponentDefinition = {
-        type: "component",
+        type: 'component',
         component: {
           interface: {},
-          structure: { type: "node", tag: "div" },
-          css: ".test { color: {{color}}; }",
+          structure: { type: 'node', tag: 'div' },
+          css: '.test { color: {{color}}; }',
         },
       };
 
-      componentRegistry.register("TestComponent", componentDef);
+      componentRegistry.register('TestComponent', componentDef);
 
-      const mockElement = createTypedMockHTMLElement({ tagName: "DIV" });
-      elementRegistry.register([0], mockElement as unknown as HTMLElement, "TestComponent", true, {
-        color: "green",
+      const mockElement = createTypedMockHTMLElement({ tagName: 'DIV' });
+      elementRegistry.register([0], mockElement as unknown as HTMLElement, 'TestComponent', true, {
+        color: 'green',
       });
 
       // Inject - should create style tag
       mockDocument.getElementById.mockReturnValueOnce(null); // No existing tag
       styleInjector.inject();
-      expect(mockDocument.createElement).toHaveBeenCalledWith("style");
+      expect(mockDocument.createElement).toHaveBeenCalledWith('style');
       expect(mockDocument.head.appendChild).toHaveBeenCalled();
 
       // Verify exists() works after injection
@@ -354,8 +362,8 @@ describe("StyleInjector", () => {
 
       // Clear - should remove style tag
       const styleTagWithRemove = createTypedMockHTMLElement({
-        tagName: "STYLE",
-        id: "component-css",
+        tagName: 'STYLE',
+        id: 'component-css',
       });
       mockDocument.getElementById.mockReturnValueOnce(styleTagWithRemove);
       styleInjector.clear();
@@ -367,4 +375,3 @@ describe("StyleInjector", () => {
     });
   });
 });
-

package/lib/client/styles/StyleInjector.ts

@@ -13,7 +13,11 @@ import type { ElementRegistry } from '../elementRegistry';
 import { hasTemplates, processCodeTemplates } from '../templateEngine';
 import { generateAllInteractiveCSS } from '../../shared/cssGeneration';
 import { rewriteViewportUnits } from '../../shared/viewportUnits';
-import { getCachedBreakpointConfig, getCachedRemConversionConfig, getCachedResponsiveScalesConfig } from '../responsiveStyleResolver';
+import {
+  getCachedBreakpointConfig,
+  getCachedRemConversionConfig,
+  getCachedResponsiveScalesConfig,
+} from '../responsiveStyleResolver';
 import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
 import { InteractiveStylesRegistry } from '../InteractiveStylesRegistry';
 import { UtilityClassCollector } from './UtilityClassCollector';
@@ -36,7 +40,7 @@ function simpleHash(str: string): number {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     const char = str.charCodeAt(i);
-    hash = ((hash << 5) - hash) + char;
+    hash = (hash << 5) - hash + char;
     hash |= 0; // Convert to 32-bit integer
   }
   return hash;
@@ -111,7 +115,7 @@ export class StyleInjector {
                 const processedCSS = processCodeTemplates(originalCSS, props);
                 processedCSSBlocks.push(`/* Component: ${name} (instance) */\n${processedCSS}`);
               }
-            } catch (error) {
+            } catch (_error) {
               processedCSSBlocks.push(`/* Component: ${name} */\n${originalCSS}`);
             }
           }
@@ -133,9 +137,8 @@ export class StyleInjector {
     // If something removed the tag externally (e.g. a hot-reload pass that
     // wiped <head>), the hash short-circuit would otherwise leave the page
     // unstyled until the CSS itself changed.
-    const existing = typeof document !== 'undefined'
-      ? document.getElementById(this.styleId) as HTMLStyleElement | null
-      : null;
+    const existing =
+      typeof document !== 'undefined' ? (document.getElementById(this.styleId) as HTMLStyleElement | null) : null;
     if (hash === this.previousComponentCSSHash && existing) return;
     this.previousComponentCSSHash = hash;
 
@@ -167,7 +170,7 @@ export class StyleInjector {
       const remConversionConfig = getCachedRemConversionConfig() || undefined;
       const responsiveScalesConfig = getCachedResponsiveScalesConfig() || undefined;
       const interactiveCSS = rewriteViewportUnits(
-        generateAllInteractiveCSS(interactiveStylesMap, breakpointConfig, remConversionConfig, responsiveScalesConfig)
+        generateAllInteractiveCSS(interactiveStylesMap, breakpointConfig, remConversionConfig, responsiveScalesConfig),
       );
       if (!interactiveCSS) return;