@acusti/styling 0.6.0 → 0.7.1

package/dist/Style.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 type Props = {
     children: string;
 };
-declare const Style: ({ children }: Props) => JSX.Element | null;
+declare const Style: ({ children }: Props) => React.JSX.Element | null;
 export default Style;

package/dist/Style.js

@@ -1,10 +1,15 @@
 import * as React from 'react';
-import { unregisterStyles, updateStyles } from './style-registry.js';
+import { getRegisteredStyles, registerStyles, unregisterStyles, updateStyles, } from './style-registry.js';
 const { useCallback, useEffect, useMemo, useRef, useState } = React;
 const Style = ({ children }) => {
     // Minify CSS styles by replacing consecutive whitespace (including \n) with ' '
     const styles = useMemo(() => children.replace(/\s+/gm, ' '), [children]);
     const [ownerDocument, setOwnerDocument] = useState(null);
+    const isMountedRef = useRef(false);
+    useEffect(() => {
+        isMountedRef.current = true;
+        unregisterStyles({ ownerDocument: 'global', styles });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => () => {
         if (!ownerDocument)
             return;
@@ -28,9 +33,13 @@ const Style = ({ children }) => {
     }, []);
     if (ownerDocument)
         return null;
-    return (React.createElement("style", { dangerouslySetInnerHTML: {
-            __html: styles,
-        }, ref: handleRef }));
+    // Avoid duplicate style rendering during SSR via style registry
+    if (!isMountedRef.current) {
+        if (getRegisteredStyles({ ownerDocument: 'global', styles }))
+            return null;
+        registerStyles({ ownerDocument: 'global', styles });
+    }
+    return React.createElement("style", { dangerouslySetInnerHTML: { __html: styles }, ref: handleRef });
 };
 export default Style;
 //# sourceMappingURL=Style.js.map

package/dist/Style.js.flow

@@ -5,8 +5,9 @@
  * @flow
  */
 
+import * as React from "react";
 declare type Props = {|
   children: string,
 |};
-declare var Style: (x: Props) => React$Node | null;
+declare var Style: (x: Props) => React.JSX.Element | null;
 declare export default typeof Style;

package/dist/Style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Style.js","sourceRoot":"","sources":["../src/Style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAMpE,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAClC,gFAAgF;IAChF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACzE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAC;IAE1E,SAAS,CACL,GAAG,EAAE,CAAC,GAAG,EAAE;QACP,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,gBAAgB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,iBAAiB,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,YAAY,CAAC;YACT,aAAa;YACb,cAAc,EAAE,iBAAiB,CAAC,OAAO;YACzC,MAAM;SACT,CAAC,CAAC;QAEH,iBAAiB,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,EAAE;QAC1D,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAE/B,OAAO,CACH,+BACI,uBAAuB,EAAE;YACrB,MAAM,EAAE,MAAM;SACjB,EACD,GAAG,EAAE,SAAS,GAChB,CACL,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Style.js","sourceRoot":"","sources":["../src/Style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACH,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,YAAY,GACf,MAAM,qBAAqB,CAAC;AAE7B,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAMpE,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAClC,gFAAgF;IAChF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACzE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAC;IAC1E,MAAM,YAAY,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,gBAAgB,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;IAE1D,SAAS,CACL,GAAG,EAAE,CAAC,GAAG,EAAE;QACP,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,gBAAgB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,iBAAiB,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,YAAY,CAAC;YACT,aAAa;YACb,cAAc,EAAE,iBAAiB,CAAC,OAAO;YACzC,MAAM;SACT,CAAC,CAAC;QAEH,iBAAiB,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,EAAE;QAC1D,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAE/B,gEAAgE;IAChE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;QACxB,IAAI,mBAAmB,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;YAAE,OAAO,IAAI,CAAC;QAC1E,cAAc,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;IACxD,CAAC;IAED,OAAO,+BAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,GAAI,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/style-registry.d.ts

@@ -1,7 +1,11 @@
 type Payload = {
-    ownerDocument: Document;
+    ownerDocument: Document | 'global';
     styles: string;
 };
+export declare const getRegisteredStyles: ({ ownerDocument, styles }: Payload) => {
+    element: HTMLStyleElement | null;
+    referenceCount: number;
+} | null;
 export declare const registerStyles: ({ ownerDocument, styles }: Payload) => void;
 export declare const unregisterStyles: ({ ownerDocument, styles }: Payload) => void;
 type UpdatePayload = {
@@ -10,4 +14,6 @@ type UpdatePayload = {
     styles: string;
 };
 export declare const updateStyles: ({ ownerDocument, previousStyles, styles, }: UpdatePayload) => void;
+export declare const getStyleRegistryKeys: () => IterableIterator<string>;
+export declare const clearRegistry: () => void;
 export {};

package/dist/style-registry.js

@@ -1,18 +1,41 @@
 const styleRegistry = new Map();
+export const getRegisteredStyles = ({ ownerDocument, styles }) => {
+    var _a;
+    if (!styles)
+        return null;
+    const stylesMap = styleRegistry.get(styles);
+    if (!stylesMap)
+        return null;
+    return (_a = stylesMap.get(ownerDocument)) !== null && _a !== void 0 ? _a : null;
+};
+// NOTE a more idiomatic API than (register|unregister)Styles would be
+// to make registerStyles a thunk that returns a cleanup function
 export const registerStyles = ({ ownerDocument, styles }) => {
     if (!styles)
         return;
-    const stylesMap = styleRegistry.get(styles);
-    const existingStylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
+    const existingStylesItem = getRegisteredStyles({ ownerDocument, styles });
     if (existingStylesItem) {
         existingStylesItem.referenceCount++;
         return;
     }
+    if (ownerDocument === 'global') {
+        const stylesItem = { element: null, referenceCount: 1 };
+        let stylesMap = styleRegistry.get(styles);
+        if (stylesMap) {
+            stylesMap.set(ownerDocument, stylesItem);
+        }
+        else {
+            stylesMap = new Map([[ownerDocument, stylesItem]]);
+        }
+        styleRegistry.set(styles, stylesMap);
+        return;
+    }
     const element = ownerDocument.createElement('style');
     element.setAttribute('data-ukt-styling', '');
     element.innerHTML = styles;
     ownerDocument.head.appendChild(element);
     const stylesItem = { element, referenceCount: 1 };
+    const stylesMap = styleRegistry.get(styles);
     if (stylesMap) {
         stylesMap.set(ownerDocument, stylesItem);
         return;
@@ -22,19 +45,21 @@ export const registerStyles = ({ ownerDocument, styles }) => {
 export const unregisterStyles = ({ ownerDocument, styles }) => {
     if (!styles)
         return;
-    const stylesMap = styleRegistry.get(styles);
-    const stylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
-    if (!stylesMap || !stylesItem)
+    const stylesItem = getRegisteredStyles({ ownerDocument, styles });
+    if (!stylesItem)
         return;
     stylesItem.referenceCount--;
     if (stylesItem.referenceCount)
         return;
     // If no more references to these styles in this document, remove <style> element from the DOM
-    const { parentElement } = stylesItem.element;
-    if (parentElement) {
-        parentElement.removeChild(stylesItem.element);
+    if (stylesItem.element) {
+        const { parentElement } = stylesItem.element;
+        if (parentElement) {
+            parentElement.removeChild(stylesItem.element);
+        }
     }
     // Then remove the document Map
+    const stylesMap = styleRegistry.get(styles);
     stylesMap.delete(ownerDocument);
     if (stylesMap.size)
         return;
@@ -44,9 +69,26 @@ export const unregisterStyles = ({ ownerDocument, styles }) => {
 export const updateStyles = ({ ownerDocument, previousStyles, styles, }) => {
     if (previousStyles === styles)
         return;
+    const stylesMap = styleRegistry.get(previousStyles);
+    const stylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
+    if (stylesMap && (stylesItem === null || stylesItem === void 0 ? void 0 : stylesItem.element) && (stylesItem === null || stylesItem === void 0 ? void 0 : stylesItem.referenceCount) === 1) {
+        // Mutate existing <style> element with updated styles
+        stylesItem.element.innerHTML = styles;
+        styleRegistry.set(styles, new Map([[ownerDocument, stylesItem]]));
+        // Cleanup previous stylesMap
+        stylesMap.delete(ownerDocument);
+        if (!stylesMap.size) {
+            styleRegistry.delete(previousStyles);
+        }
+        return;
+    }
     if (previousStyles) {
         unregisterStyles({ ownerDocument, styles: previousStyles });
     }
     registerStyles({ ownerDocument, styles });
 };
+export const getStyleRegistryKeys = () => styleRegistry.keys();
+export const clearRegistry = () => {
+    styleRegistry.clear();
+};
 //# sourceMappingURL=style-registry.js.map

package/dist/style-registry.js.flow

@@ -6,9 +6,13 @@
  */
 
 declare type Payload = {|
-  ownerDocument: Document,
+  ownerDocument: Document | "global",
   styles: string,
 |};
+declare export var getRegisteredStyles: (x: Payload) => {|
+  element: HTMLStyleElement | null,
+  referenceCount: number,
+|} | null;
 declare export var registerStyles: (x: Payload) => void;
 declare export var unregisterStyles: (x: Payload) => void;
 declare type UpdatePayload = {|
@@ -17,3 +21,5 @@ declare type UpdatePayload = {|
   styles: string,
 |};
 declare export var updateStyles: (x: UpdatePayload) => void;
+declare export var getStyleRegistryKeys: () => IterableIterator<string>;
+declare export var clearRegistry: () => void;

package/dist/style-registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-registry.js","sourceRoot":"","sources":["../src/style-registry.ts"],"names":[],"mappings":"AAKA,MAAM,aAAa,GAAkB,IAAI,GAAG,EAAE,CAAC;AAI/C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAW,EAAE,EAAE;IACjE,IAAI,CAAC,MAAM;QAAE,OAAO;IAEpB,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5C,MAAM,kBAAkB,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAEzD,IAAI,kBAAkB,EAAE;QACpB,kBAAkB,CAAC,cAAc,EAAE,CAAC;QACpC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC;IAC3B,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC;IAElD,IAAI,SAAS,EAAE;QACX,SAAS,CAAC,GAAG,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QACzC,OAAO;KACV;IAED,aAAa,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAW,EAAE,EAAE;IACnE,IAAI,CAAC,MAAM;QAAE,OAAO;IAEpB,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IACjD,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU;QAAE,OAAO;IAEtC,UAAU,CAAC,cAAc,EAAE,CAAC;IAC5B,IAAI,UAAU,CAAC,cAAc;QAAE,OAAO;IAEtC,8FAA8F;IAC9F,MAAM,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;IAC7C,IAAI,aAAa,EAAE;QACf,aAAa,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;KACjD;IACD,+BAA+B;IAC/B,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAEhC,IAAI,SAAS,CAAC,IAAI;QAAE,OAAO;IAC3B,4EAA4E;IAC5E,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACjC,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,aAAa,EACb,cAAc,EACd,MAAM,GACM,EAAE,EAAE;IAChB,IAAI,cAAc,KAAK,MAAM;QAAE,OAAO;IAEtC,IAAI,cAAc,EAAE;QAChB,gBAAgB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC,CAAC;KAC/D;IAED,cAAc,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;AAC9C,CAAC,CAAC"}
+{"version":3,"file":"style-registry.js","sourceRoot":"","sources":["../src/style-registry.ts"],"names":[],"mappings":"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"}

package/dist/style-registry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/style-registry.test.js

@@ -0,0 +1,114 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from 'vitest';
+import { clearRegistry, getRegisteredStyles, getStyleRegistryKeys, registerStyles, unregisterStyles, updateStyles, } from './style-registry.js';
+describe('@acusti/styling', () => {
+    describe('style-registry.ts', () => {
+        const mockStyles = '.test { color: red; }';
+        // reset styleRegistry before each test
+        beforeEach(clearRegistry);
+        describe('registerStyles', () => {
+            it('should add styles to the registry keyed by the style string', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                registerStyles(payload);
+                const styleRegistryKeys = getStyleRegistryKeys();
+                const keysArray = [...styleRegistryKeys];
+                expect(keysArray.length).toBe(1);
+                expect(keysArray[0]).toBe(mockStyles);
+                const result = getRegisteredStyles(payload);
+                expect(result.element).toBeDefined();
+                expect(result.referenceCount).toBe(1);
+            });
+            it('should allow registering styles without a DOM via ownerDocument: "global"', () => {
+                const payload = Object.freeze({
+                    ownerDocument: 'global',
+                    styles: mockStyles,
+                });
+                registerStyles(payload);
+                const registryKeys = [...getStyleRegistryKeys()];
+                expect(registryKeys.length).toBe(1);
+                expect(registryKeys[0]).toBe(mockStyles);
+                const result = getRegisteredStyles(payload);
+                expect(result.element).toBeNull();
+                expect(result.referenceCount).toBe(1);
+            });
+        });
+        describe('getRegisteredStyles', () => {
+            it('should retrieve registered styles', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                registerStyles(payload);
+                const result = getRegisteredStyles(payload);
+                expect(result.element.tagName).toBe('STYLE');
+                expect(result.referenceCount).toBe(1);
+            });
+        });
+        describe('unregisterStyles', () => {
+            it('should remove styles from the registry if no other references to same styles exist', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                const otherPayload = Object.freeze({
+                    ownerDocument: 'global',
+                    styles: mockStyles,
+                });
+                registerStyles(payload);
+                registerStyles(otherPayload);
+                expect(getStyleRegistryKeys().next().value).toBe(mockStyles);
+                expect(getRegisteredStyles(payload).referenceCount).toBe(1);
+                expect(getRegisteredStyles(otherPayload).referenceCount).toBe(1);
+                unregisterStyles(payload);
+                // style registry for this style should still exist
+                expect(getStyleRegistryKeys().next().value).toBe(mockStyles);
+                // but this document’s styles item should be cleared
+                expect(getRegisteredStyles(payload)).toBeNull();
+                unregisterStyles(otherPayload);
+                // now the style registry should be empty
+                expect([...getStyleRegistryKeys()].length).toBe(0);
+            });
+        });
+        describe('updateStyles', () => {
+            it('should update styles in the registry, reusing the existing DOM element if no other reference', () => {
+                const previousStyles = '.previous { color: blue; }';
+                const payload = {
+                    ownerDocument: document,
+                    styles: previousStyles,
+                };
+                registerStyles(payload);
+                const previousStylesItem = getRegisteredStyles(payload);
+                expect(previousStylesItem.element.innerText).toBe(previousStyles);
+                updateStyles({
+                    ownerDocument: document,
+                    previousStyles,
+                    styles: mockStyles,
+                });
+                const stylesItem = getRegisteredStyles({
+                    ownerDocument: document,
+                    styles: mockStyles,
+                });
+                expect(previousStylesItem.element).toBe(stylesItem.element);
+                expect(stylesItem.element.innerText).toBe(mockStyles);
+                expect(getRegisteredStyles(payload)).toBeNull();
+            });
+            it('should update styles in the registry, creating a new DOM element if there are other references', () => {
+                const previousStyles = '.previous { color: blue; }';
+                const payload = { ownerDocument: document, styles: previousStyles };
+                registerStyles(payload);
+                // create multiple references to the same styles and document
+                registerStyles(payload);
+                const previousStylesItem = getRegisteredStyles(payload);
+                expect(previousStylesItem.referenceCount).toBe(2);
+                expect(previousStylesItem.element.innerText).toBe(previousStyles);
+                updateStyles({
+                    ownerDocument: document,
+                    previousStyles,
+                    styles: mockStyles,
+                });
+                const stylesItem = getRegisteredStyles({
+                    ownerDocument: document,
+                    styles: mockStyles,
+                });
+                expect(previousStylesItem.element).not.toBe(stylesItem.element);
+                expect(stylesItem.element.innerText).toBe(mockStyles);
+                expect(getRegisteredStyles(payload).referenceCount).toBe(1);
+            });
+        });
+    });
+});
+//# sourceMappingURL=style-registry.test.js.map

package/dist/style-registry.test.js.flow

@@ -0,0 +1,6 @@
+/**
+ * Flowtype definitions for style-registry.test
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.20.1
+ * @flow
+ */

package/dist/style-registry.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-registry.test.js","sourceRoot":"","sources":["../src/style-registry.test.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE1D,OAAO,EACH,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACd,gBAAgB,EAChB,YAAY,GACf,MAAM,qBAAqB,CAAC;AAE7B,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC7B,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC/B,MAAM,UAAU,GAAG,uBAAuB,CAAC;QAE3C,uCAAuC;QACvC,UAAU,CAAC,aAAa,CAAC,CAAC;QAE1B,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;YAC5B,EAAE,CAAC,6DAA6D,EAAE,GAAG,EAAE;gBACnE,MAAM,OAAO,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;gBAChE,cAAc,CAAC,OAAO,CAAC,CAAC;gBACxB,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;gBACjD,MAAM,SAAS,GAAG,CAAC,GAAG,iBAAiB,CAAC,CAAC;gBACzC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACjC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBACtC,MAAM,MAAM,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC;gBAC5C,MAAM,CAAC,MAAO,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;gBACtC,MAAM,CAAC,MAAO,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;YAEH,EAAE,CAAC,2EAA2E,EAAE,GAAG,EAAE;gBACjF,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC;oBAC1B,aAAa,EAAE,QAAQ;oBACvB,MAAM,EAAE,UAAU;iBACrB,CAAC,CAAC;gBACH,cAAc,CAAC,OAAO,CAAC,CAAC;gBACxB,MAAM,YAAY,GAAG,CAAC,GAAG,oBAAoB,EAAE,CAAC,CAAC;gBACjD,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACpC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBACzC,MAAM,MAAM,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC;gBAC5C,MAAM,CAAC,MAAO,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACnC,MAAM,CAAC,MAAO,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;YACjC,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;gBACzC,MAAM,OAAO,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;gBAChE,cAAc,CAAC,OAAO,CAAC,CAAC;gBACxB,MAAM,MAAM,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC;gBAC5C,MAAM,CAAC,MAAO,CAAC,OAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAC/C,MAAM,CAAC,MAAO,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;YAC9B,EAAE,CAAC,oFAAoF,EAAE,GAAG,EAAE;gBAC1F,MAAM,OAAO,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;gBAChE,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC;oBAC/B,aAAa,EAAE,QAAQ;oBACvB,MAAM,EAAE,UAAU;iBACrB,CAAC,CAAC;gBACH,cAAc,CAAC,OAAO,CAAC,CAAC;gBACxB,cAAc,CAAC,YAAY,CAAC,CAAC;gBAC7B,MAAM,CAAC,oBAAoB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC7D,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAE,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAC7D,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAE,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAClE,gBAAgB,CAAC,OAAO,CAAC,CAAC;gBAC1B,mDAAmD;gBACnD,MAAM,CAAC,oBAAoB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC7D,oDAAoD;gBACpD,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;gBAChD,gBAAgB,CAAC,YAAY,CAAC,CAAC;gBAC/B,yCAAyC;gBACzC,MAAM,CAAC,CAAC,GAAG,oBAAoB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACvD,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;YAC1B,EAAE,CAAC,8FAA8F,EAAE,GAAG,EAAE;gBACpG,MAAM,cAAc,GAAG,4BAA4B,CAAC;gBACpD,MAAM,OAAO,GAAG;oBACZ,aAAa,EAAE,QAAQ;oBACvB,MAAM,EAAE,cAAc;iBACzB,CAAC;gBACF,cAAc,CAAC,OAAO,CAAC,CAAC;gBACxB,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,OAAO,CAAE,CAAC;gBACzD,MAAM,CAAC,kBAAkB,CAAC,OAAQ,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBACnE,YAAY,CAAC;oBACT,aAAa,EAAE,QAAQ;oBACvB,cAAc;oBACd,MAAM,EAAE,UAAU;iBACrB,CAAC,CAAC;gBACH,MAAM,UAAU,GAAG,mBAAmB,CAAC;oBACnC,aAAa,EAAE,QAAQ;oBACvB,MAAM,EAAE,UAAU;iBACrB,CAAE,CAAC;gBACJ,MAAM,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;gBAC5D,MAAM,CAAC,UAAU,CAAC,OAAQ,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBACvD,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACpD,CAAC,CAAC,CAAC;YAEH,EAAE,CAAC,gGAAgG,EAAE,GAAG,EAAE;gBACtG,MAAM,cAAc,GAAG,4BAA4B,CAAC;gBACpD,MAAM,OAAO,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;gBACpE,cAAc,CAAC,OAAO,CAAC,CAAC;gBACxB,6DAA6D;gBAC7D,cAAc,CAAC,OAAO,CAAC,CAAC;gBACxB,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,OAAO,CAAE,CAAC;gBACzD,MAAM,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAClD,MAAM,CAAC,kBAAkB,CAAC,OAAQ,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBACnE,YAAY,CAAC;oBACT,aAAa,EAAE,QAAQ;oBACvB,cAAc;oBACd,MAAM,EAAE,UAAU;iBACrB,CAAC,CAAC;gBACH,MAAM,UAAU,GAAG,mBAAmB,CAAC;oBACnC,aAAa,EAAE,QAAQ;oBACvB,MAAM,EAAE,UAAU;iBACrB,CAAE,CAAC;gBACJ,MAAM,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;gBAChE,MAAM,CAAC,UAAU,CAAC,OAAQ,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBACvD,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAE,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACjE,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,15 @@
 {
     "name": "@acusti/styling",
-    "version": "0.6.0",
+    "version": "0.7.1",
+    "type": "module",
+    "sideEffects": false,
+    "exports": "./dist/index.js",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
     "description": "React component that renders a CSS style string as a <style> element in the <head> of the document (with global style de-duplication)",
     "keywords": [
         "react",
@@ -13,15 +22,9 @@
         "ts",
         "flow"
     ],
-    "type": "module",
-    "sideEffects": false,
-    "exports": "./dist/index.js",
-    "main": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "files": [
-        "dist",
-        "src"
-    ],
+    "scripts": {
+        "test": "vitest"
+    },
     "repository": {
         "type": "git",
         "url": "https://github.com/acusti/uikit.git",
@@ -34,8 +37,15 @@
     },
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
     "devDependencies": {
-        "@types/react": "^18.0.25",
-        "typescript": "^4.9.3"
+        "@testing-library/dom": "^9.3.1",
+        "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.4.3",
+        "@types/react": "^18.2.45",
+        "happy-dom": "^12.10.3",
+        "react": "^18",
+        "react-dom": "^18",
+        "typescript": "^5.3.3",
+        "vitest": "^1.1.0"
     },
     "peerDependencies": {
         "react": "^16.8 || ^17 || ^18",

package/src/Style.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 
-import { unregisterStyles, updateStyles } from './style-registry.js';
+import {
+    getRegisteredStyles,
+    registerStyles,
+    unregisterStyles,
+    updateStyles,
+} from './style-registry.js';
 
 const { useCallback, useEffect, useMemo, useRef, useState } = React;
 
@@ -12,6 +17,12 @@ const Style = ({ children }: Props) => {
     // Minify CSS styles by replacing consecutive whitespace (including \n) with ' '
     const styles = useMemo(() => children.replace(/\s+/gm, ' '), [children]);
     const [ownerDocument, setOwnerDocument] = useState<Document | null>(null);
+    const isMountedRef = useRef<boolean>(false);
+
+    useEffect(() => {
+        isMountedRef.current = true;
+        unregisterStyles({ ownerDocument: 'global', styles });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(
         () => () => {
@@ -42,14 +53,13 @@ const Style = ({ children }: Props) => {
 
     if (ownerDocument) return null;
 
-    return (
-        <style
-            dangerouslySetInnerHTML={{
-                __html: styles,
-            }}
-            ref={handleRef}
-        />
-    );
+    // Avoid duplicate style rendering during SSR via style registry
+    if (!isMountedRef.current) {
+        if (getRegisteredStyles({ ownerDocument: 'global', styles })) return null;
+        registerStyles({ ownerDocument: 'global', styles });
+    }
+
+    return <style dangerouslySetInnerHTML={{ __html: styles }} ref={handleRef} />;
 };
 
 export default Style;

package/src/style-registry.test.ts

@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import {
+    clearRegistry,
+    getRegisteredStyles,
+    getStyleRegistryKeys,
+    registerStyles,
+    unregisterStyles,
+    updateStyles,
+} from './style-registry.js';
+
+describe('@acusti/styling', () => {
+    describe('style-registry.ts', () => {
+        const mockStyles = '.test { color: red; }';
+
+        // reset styleRegistry before each test
+        beforeEach(clearRegistry);
+
+        describe('registerStyles', () => {
+            it('should add styles to the registry keyed by the style string', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                registerStyles(payload);
+                const styleRegistryKeys = getStyleRegistryKeys();
+                const keysArray = [...styleRegistryKeys];
+                expect(keysArray.length).toBe(1);
+                expect(keysArray[0]).toBe(mockStyles);
+                const result = getRegisteredStyles(payload);
+                expect(result!.element).toBeDefined();
+                expect(result!.referenceCount).toBe(1);
+            });
+
+            it('should allow registering styles without a DOM via ownerDocument: "global"', () => {
+                const payload = Object.freeze({
+                    ownerDocument: 'global',
+                    styles: mockStyles,
+                });
+                registerStyles(payload);
+                const registryKeys = [...getStyleRegistryKeys()];
+                expect(registryKeys.length).toBe(1);
+                expect(registryKeys[0]).toBe(mockStyles);
+                const result = getRegisteredStyles(payload);
+                expect(result!.element).toBeNull();
+                expect(result!.referenceCount).toBe(1);
+            });
+        });
+
+        describe('getRegisteredStyles', () => {
+            it('should retrieve registered styles', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                registerStyles(payload);
+                const result = getRegisteredStyles(payload);
+                expect(result!.element!.tagName).toBe('STYLE');
+                expect(result!.referenceCount).toBe(1);
+            });
+        });
+
+        describe('unregisterStyles', () => {
+            it('should remove styles from the registry if no other references to same styles exist', () => {
+                const payload = { ownerDocument: document, styles: mockStyles };
+                const otherPayload = Object.freeze({
+                    ownerDocument: 'global',
+                    styles: mockStyles,
+                });
+                registerStyles(payload);
+                registerStyles(otherPayload);
+                expect(getStyleRegistryKeys().next().value).toBe(mockStyles);
+                expect(getRegisteredStyles(payload)!.referenceCount).toBe(1);
+                expect(getRegisteredStyles(otherPayload)!.referenceCount).toBe(1);
+                unregisterStyles(payload);
+                // style registry for this style should still exist
+                expect(getStyleRegistryKeys().next().value).toBe(mockStyles);
+                // but this document’s styles item should be cleared
+                expect(getRegisteredStyles(payload)).toBeNull();
+                unregisterStyles(otherPayload);
+                // now the style registry should be empty
+                expect([...getStyleRegistryKeys()].length).toBe(0);
+            });
+        });
+
+        describe('updateStyles', () => {
+            it('should update styles in the registry, reusing the existing DOM element if no other reference', () => {
+                const previousStyles = '.previous { color: blue; }';
+                const payload = {
+                    ownerDocument: document,
+                    styles: previousStyles,
+                };
+                registerStyles(payload);
+                const previousStylesItem = getRegisteredStyles(payload)!;
+                expect(previousStylesItem.element!.innerText).toBe(previousStyles);
+                updateStyles({
+                    ownerDocument: document,
+                    previousStyles,
+                    styles: mockStyles,
+                });
+                const stylesItem = getRegisteredStyles({
+                    ownerDocument: document,
+                    styles: mockStyles,
+                })!;
+                expect(previousStylesItem.element).toBe(stylesItem.element);
+                expect(stylesItem.element!.innerText).toBe(mockStyles);
+                expect(getRegisteredStyles(payload)).toBeNull();
+            });
+
+            it('should update styles in the registry, creating a new DOM element if there are other references', () => {
+                const previousStyles = '.previous { color: blue; }';
+                const payload = { ownerDocument: document, styles: previousStyles };
+                registerStyles(payload);
+                // create multiple references to the same styles and document
+                registerStyles(payload);
+                const previousStylesItem = getRegisteredStyles(payload)!;
+                expect(previousStylesItem.referenceCount).toBe(2);
+                expect(previousStylesItem.element!.innerText).toBe(previousStyles);
+                updateStyles({
+                    ownerDocument: document,
+                    previousStyles,
+                    styles: mockStyles,
+                });
+                const stylesItem = getRegisteredStyles({
+                    ownerDocument: document,
+                    styles: mockStyles,
+                })!;
+                expect(previousStylesItem.element).not.toBe(stylesItem.element);
+                expect(stylesItem.element!.innerText).toBe(mockStyles);
+                expect(getRegisteredStyles(payload)!.referenceCount).toBe(1);
+            });
+        });
+    });
+});

package/src/style-registry.ts

@@ -1,29 +1,49 @@
 type StyleRegistry = Map<
     string,
-    Map<Document, { element: HTMLStyleElement; referenceCount: number }>
+    Map<Document | 'global', { element: HTMLStyleElement | null; referenceCount: number }>
 >;
 
 const styleRegistry: StyleRegistry = new Map();
 
-type Payload = { ownerDocument: Document; styles: string };
+type Payload = { ownerDocument: Document | 'global'; styles: string };
 
+export const getRegisteredStyles = ({ ownerDocument, styles }: Payload) => {
+    if (!styles) return null;
+    const stylesMap = styleRegistry.get(styles);
+    if (!stylesMap) return null;
+    return stylesMap.get(ownerDocument) ?? null;
+};
+
+// NOTE a more idiomatic API than (register|unregister)Styles would be
+// to make registerStyles a thunk that returns a cleanup function
 export const registerStyles = ({ ownerDocument, styles }: Payload) => {
     if (!styles) return;
 
-    const stylesMap = styleRegistry.get(styles);
-    const existingStylesItem = stylesMap?.get(ownerDocument);
-
+    const existingStylesItem = getRegisteredStyles({ ownerDocument, styles });
     if (existingStylesItem) {
         existingStylesItem.referenceCount++;
         return;
     }
 
+    if (ownerDocument === 'global') {
+        const stylesItem = { element: null, referenceCount: 1 };
+        let stylesMap = styleRegistry.get(styles);
+        if (stylesMap) {
+            stylesMap.set(ownerDocument, stylesItem);
+        } else {
+            stylesMap = new Map([[ownerDocument, stylesItem]]);
+        }
+        styleRegistry.set(styles, stylesMap);
+        return;
+    }
+
     const element = ownerDocument.createElement('style');
     element.setAttribute('data-ukt-styling', '');
     element.innerHTML = styles;
     ownerDocument.head.appendChild(element);
     const stylesItem = { element, referenceCount: 1 };
 
+    const stylesMap = styleRegistry.get(styles);
     if (stylesMap) {
         stylesMap.set(ownerDocument, stylesItem);
         return;
@@ -35,19 +55,22 @@ export const registerStyles = ({ ownerDocument, styles }: Payload) => {
 export const unregisterStyles = ({ ownerDocument, styles }: Payload) => {
     if (!styles) return;
 
-    const stylesMap = styleRegistry.get(styles);
-    const stylesItem = stylesMap?.get(ownerDocument);
-    if (!stylesMap || !stylesItem) return;
+    const stylesItem = getRegisteredStyles({ ownerDocument, styles });
+    if (!stylesItem) return;
 
     stylesItem.referenceCount--;
     if (stylesItem.referenceCount) return;
 
     // If no more references to these styles in this document, remove <style> element from the DOM
-    const { parentElement } = stylesItem.element;
-    if (parentElement) {
-        parentElement.removeChild(stylesItem.element);
+    if (stylesItem.element) {
+        const { parentElement } = stylesItem.element;
+        if (parentElement) {
+            parentElement.removeChild(stylesItem.element);
+        }
     }
+
     // Then remove the document Map
+    const stylesMap = styleRegistry.get(styles)!;
     stylesMap.delete(ownerDocument);
 
     if (stylesMap.size) return;
@@ -64,9 +87,29 @@ export const updateStyles = ({
 }: UpdatePayload) => {
     if (previousStyles === styles) return;
 
+    const stylesMap = styleRegistry.get(previousStyles);
+    const stylesItem = stylesMap?.get(ownerDocument);
+    if (stylesMap && stylesItem?.element && stylesItem?.referenceCount === 1) {
+        // Mutate existing <style> element with updated styles
+        stylesItem.element.innerHTML = styles;
+        styleRegistry.set(styles, new Map([[ownerDocument, stylesItem]]));
+        // Cleanup previous stylesMap
+        stylesMap.delete(ownerDocument);
+        if (!stylesMap.size) {
+            styleRegistry.delete(previousStyles);
+        }
+        return;
+    }
+
     if (previousStyles) {
         unregisterStyles({ ownerDocument, styles: previousStyles });
     }
 
     registerStyles({ ownerDocument, styles });
 };
+
+export const getStyleRegistryKeys = () => styleRegistry.keys();
+
+export const clearRegistry = () => {
+    styleRegistry.clear();
+};