@acusti/styling 1.0.0-rc.0 → 1.0.0-rc.1

package/dist/Style.js

@@ -7,10 +7,9 @@ const Style = ({ children, href: _href, precedence = 'medium' }) => {
     // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/canary.d.ts
     // https://react.dev/reference/react-dom/components/style#props
     return (
-        // @ts-expect-error @types/react is missing new <style> props
-        // eslint-disable-next-line react/no-unknown-property
-        React.createElement('style', { href: href, precedence: precedence }, styles)
-    );
+    // @ts-expect-error @types/react is missing new <style> props
+    // eslint-disable-next-line react/no-unknown-property
+    React.createElement("style", { href: href, precedence: precedence }, styles));
 };
 export default Style;
-//# sourceMappingURL=Style.js.map
+//# sourceMappingURL=Style.js.map

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export { default as Style } from './Style.js';
-export declare const SYSTEM_UI_FONT =
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
+export declare const SYSTEM_UI_FONT = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif";

package/dist/index.js

@@ -1,5 +1,4 @@
 /// <reference types="react/canary" />
 export { default as Style } from './Style.js';
-export const SYSTEM_UI_FONT =
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
-//# sourceMappingURL=index.js.map
+export const SYSTEM_UI_FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
+//# sourceMappingURL=index.js.map

package/dist/minifyStyles.js

@@ -26,12 +26,7 @@ export function minifyStyles(css) {
     const preservedTokens = [];
     const comments = [];
     const totalLength = css.length;
-    let startIndex = 0,
-        endIndex = 0,
-        i = 0,
-        max = 0,
-        token = '',
-        placeholder = '';
+    let startIndex = 0, endIndex = 0, i = 0, max = 0, token = '', placeholder = '';
     // collect all comment blocks...
     while ((startIndex = css.indexOf('/*', startIndex)) >= 0) {
         endIndex = css.indexOf('*/', startIndex + 2);
@@ -42,10 +37,10 @@ export function minifyStyles(css) {
         comments.push(token);
         css =
             css.slice(0, startIndex + 2) +
-            '___PRESERVE_CANDIDATE_COMMENT_' +
-            (comments.length - 1) +
-            '___' +
-            css.slice(endIndex);
+                '___PRESERVE_CANDIDATE_COMMENT_' +
+                (comments.length - 1) +
+                '___' +
+                css.slice(endIndex);
         startIndex += 2;
     }
     // preserve strings so their content doesn't get accidentally minified
@@ -57,16 +52,11 @@ export function minifyStyles(css) {
         // one, maybe more? put'em back then
         if (match.indexOf('___PRESERVE_CANDIDATE_COMMENT_') >= 0) {
             for (i = 0, max = comments.length; i < max; i = i + 1) {
-                match = match.replace(
-                    '___PRESERVE_CANDIDATE_COMMENT_' + i + '___',
-                    comments[i],
-                );
+                match = match.replace('___PRESERVE_CANDIDATE_COMMENT_' + i + '___', comments[i]);
             }
         }
         preservedTokens.push(match);
-        return (
-            quote + '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___' + quote
-        );
+        return (quote + '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___' + quote);
     });
     // strings are safe, now wrestle the comments
     for (i = 0, max = comments.length; i < max; i = i + 1) {
@@ -76,10 +66,7 @@ export function minifyStyles(css) {
         // so push to the preserved tokens keeping the !
         if (token.charAt(0) === '!') {
             preservedTokens.push(token);
-            css = css.replace(
-                placeholder,
-                '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___',
-            );
+            css = css.replace(placeholder, '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___');
             continue;
         }
         // otherwise, kill the comment
@@ -121,21 +108,15 @@ export function minifyStyles(css) {
     css = css.replace(/:0 0(;|\})/g, ':0$1');
     // Replace background-position:0; with background-position:0 0;
     // same for transform-origin
-    css = css.replace(
-        /(background-position|transform-origin):0(;|\})/gi,
-        function (_all, prop, tail) {
-            return prop.toLowerCase() + ':0 0' + tail;
-        },
-    );
+    css = css.replace(/(background-position|transform-origin):0(;|\})/gi, function (_all, prop, tail) {
+        return prop.toLowerCase() + ':0 0' + tail;
+    });
     // Replace 0.6 to .6, but only when preceded by : or a white-space
     css = css.replace(/(:|\s)0+\.(\d+)/g, '$1.$2');
     // border: none -> border:0
-    css = css.replace(
-        /(border|border-top|border-right|border-bottom|border-right|outline|background):none(;|\})/gi,
-        function (_all, prop, tail) {
-            return prop.toLowerCase() + ':0' + tail;
-        },
-    );
+    css = css.replace(/(border|border-top|border-right|border-bottom|border-right|outline|background):none(;|\})/gi, function (_all, prop, tail) {
+        return prop.toLowerCase() + ':0' + tail;
+    });
     // Remove empty rules.
     css = css.replace(/[^};{/]+\{\}/g, '');
     // Replace multiple semi-colons in a row by a single one
@@ -148,4 +129,4 @@ export function minifyStyles(css) {
     return css.trim();
 }
 export default minifyStyles;
-//# sourceMappingURL=minifyStyles.js.map
+//# sourceMappingURL=minifyStyles.js.map

package/dist/minifyStyles.test.js

@@ -3,30 +3,24 @@ import { minifyStyles } from './minifyStyles.js';
 describe('@acusti/styling', () => {
     describe('minifyStyles.ts', () => {
         it('minifies basic CSS declarations', () => {
-            expect(
-                minifyStyles(`
+            expect(minifyStyles(`
 .foo {
     padding: 10px;
     color: red;
-}`),
-            ).toBe('.foo{padding:10px;color:red}');
+}`)).toBe('.foo{padding:10px;color:red}');
         });
         it('preserves whitespace where needed in selectors', () => {
-            expect(
-                minifyStyles(`
+            expect(minifyStyles(`
 .foo > .bar :hover {
     background-color: cyan;
-}`),
-            ).toBe('.foo>.bar :hover{background-color:cyan}');
+}`)).toBe('.foo>.bar :hover{background-color:cyan}');
         });
         it('minifies 0.6 to .6, but only when preceded by : or a whitespace', () => {
-            expect(
-                minifyStyles(`
+            expect(minifyStyles(`
 .foo {
     opacity: 0.6;
-}`),
-            ).toBe('.foo{opacity:.6}');
+}`)).toBe('.foo{opacity:.6}');
         });
     });
 });
-//# sourceMappingURL=minifyStyles.test.js.map
+//# sourceMappingURL=minifyStyles.test.js.map

package/dist/useStyles.d.ts

@@ -1,19 +1,12 @@
-type StyleRegistry = Map<
-    string,
-    {
-        href: string;
-        referenceCount: number;
-        styles: string;
-    }
->;
-export declare const getStyleRegistry: () => StyleRegistry;
-export declare function useStyles(
-    styles: string,
-    initialHref?: string,
-): {
+type StyleCache = Map<string, {
+    href: string;
+    referenceCount: number;
+    styles: string;
+}>;
+export declare function useStyles(styles: string, initialHref?: string): {
     href: string;
     referenceCount: number;
     styles: string;
 };
 export default useStyles;
-export declare const clearRegistry: () => void;
+export declare const getStyleCache: () => StyleCache;

package/dist/useStyles.js

@@ -1,48 +1,43 @@
 import { useEffect, useState } from 'react';
 import { minifyStyles } from './minifyStyles.js';
-const styleRegistry = new Map();
-export const getStyleRegistry = () => styleRegistry;
+const styleCache = new Map();
+const EMPTY_STYLES_ITEM = { href: '', referenceCount: 0, styles: '' };
 export function useStyles(styles, initialHref) {
     const [stylesItem, setStylesItem] = useState(() => {
-        if (!styles) return { href: '', referenceCount: 0, styles: '' };
+        if (!styles)
+            return EMPTY_STYLES_ITEM;
         const key = initialHref !== null && initialHref !== void 0 ? initialHref : styles;
-        let item = styleRegistry.get(key);
+        let item = styleCache.get(key);
         if (item) {
             item.referenceCount++;
-        } else {
+        }
+        else {
             const minified = minifyStyles(styles);
             item = {
-                href: sanitizeHref(
-                    initialHref !== null && initialHref !== void 0
-                        ? initialHref
-                        : minified,
-                ),
+                href: sanitizeHref(initialHref !== null && initialHref !== void 0 ? initialHref : minified),
                 referenceCount: 1,
                 styles: minified,
             };
-            styleRegistry.set(key, item);
+            styleCache.set(key, item);
         }
         return item;
     });
     useEffect(() => {
-        if (!styles) return;
+        if (!styles)
+            return;
         const key = initialHref !== null && initialHref !== void 0 ? initialHref : styles;
-        if (!styleRegistry.get(key)) {
+        if (!styleCache.get(key)) {
             const minified = minifyStyles(styles);
             const item = {
-                href: sanitizeHref(
-                    initialHref !== null && initialHref !== void 0
-                        ? initialHref
-                        : minified,
-                ),
+                href: sanitizeHref(initialHref !== null && initialHref !== void 0 ? initialHref : minified),
                 referenceCount: 1,
                 styles: minified,
             };
-            styleRegistry.set(key, item);
+            styleCache.set(key, item);
             setStylesItem(item);
         }
         return () => {
-            const existingItem = styleRegistry.get(styles);
+            const existingItem = styleCache.get(styles);
             if (existingItem) {
                 existingItem.referenceCount--;
                 if (!existingItem.referenceCount) {
@@ -50,7 +45,7 @@ export function useStyles(styles, initialHref) {
                     // and add another referenceCount check
                     // to deal with instance where existing <Style>
                     // component is moved in the tree or re-keyed
-                    styleRegistry.delete(styles);
+                    styleCache.delete(styles);
                 }
             }
         };
@@ -58,12 +53,11 @@ export function useStyles(styles, initialHref) {
     return stylesItem;
 }
 export default useStyles;
-export const clearRegistry = () => {
-    styleRegistry.clear();
-};
 // Dashes in selectors in href prop create happy-dom / jsdom test errors:
 // Invalid regular expression (“Range out of order in character class”)
 function sanitizeHref(text) {
     return text.replace(/-/g, '');
 }
-//# sourceMappingURL=useStyles.js.map
+// The following export is for test usage only
+export const getStyleCache = () => styleCache;
+//# sourceMappingURL=useStyles.js.map

package/dist/useStyles.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 
-declare type StyleRegistry = Map<
+declare type StyleCache = Map<
   string,
   {|
     href: string,
@@ -13,7 +13,6 @@ declare type StyleRegistry = Map<
     styles: string,
   |}
 >;
-declare export var getStyleRegistry: () => StyleRegistry;
 declare export function useStyles(
   styles: string,
   initialHref?: string
@@ -23,4 +22,4 @@ declare export function useStyles(
   styles: string,
 |};
 declare export default typeof useStyles;
-declare export var clearRegistry: () => void;
+declare export var getStyleCache: () => StyleCache;

package/dist/useStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyles.js","sourceRoot":"","sources":["../src/useStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,aAAa,GAAkB,IAAI,GAAG,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC;AAEpD,MAAM,UAAU,SAAS,CAAC,MAAc,EAAE,WAAoB;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9C,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QAEhE,MAAM,GAAG,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,MAAM,CAAC;QAClC,IAAI,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAElC,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACJ,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;YACtC,IAAI,GAAG;gBACH,IAAI,EAAE,YAAY,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,QAAQ,CAAC;gBAC3C,cAAc,EAAE,CAAC;gBACjB,MAAM,EAAE,QAAQ;aACnB,CAAC;YACF,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,GAAG,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,MAAM,CAAC;QAElC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1B,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;YACtC,MAAM,IAAI,GAAG;gBACT,IAAI,EAAE,YAAY,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,QAAQ,CAAC;gBAC3C,cAAc,EAAE,CAAC;gBACjB,MAAM,EAAE,QAAQ;aACnB,CAAC;YACF,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YAC7B,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;QAED,OAAO,GAAG,EAAE;YACR,MAAM,YAAY,GAAG,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC/C,IAAI,YAAY,EAAE,CAAC;gBACf,YAAY,CAAC,cAAc,EAAE,CAAC;gBAC9B,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;oBAC/B,0CAA0C;oBAC1C,uCAAuC;oBACvC,+CAA+C;oBAC/C,6CAA6C;oBAC7C,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBACjC,CAAC;YACL,CAAC;QACL,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAE1B,OAAO,UAAU,CAAC;AACtB,CAAC;AAED,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,aAAa,CAAC,KAAK,EAAE,CAAC;AAC1B,CAAC,CAAC;AAEF,yEAAyE;AACzE,uEAAuE;AACvE,SAAS,YAAY,CAAC,IAAY;IAC9B,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAClC,CAAC"}
+{"version":3,"file":"useStyles.js","sourceRoot":"","sources":["../src/useStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,MAAM,UAAU,GAAe,IAAI,GAAG,EAAE,CAAC;AAEzC,MAAM,iBAAiB,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;AAEtE,MAAM,UAAU,SAAS,CAAC,MAAc,EAAE,WAAoB;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9C,IAAI,CAAC,MAAM;YAAE,OAAO,iBAAiB,CAAC;QAEtC,MAAM,GAAG,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,MAAM,CAAC;QAClC,IAAI,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAE/B,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACJ,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;YACtC,IAAI,GAAG;gBACH,IAAI,EAAE,YAAY,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,QAAQ,CAAC;gBAC3C,cAAc,EAAE,CAAC;gBACjB,MAAM,EAAE,QAAQ;aACnB,CAAC;YACF,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,GAAG,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,MAAM,CAAC;QAElC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACvB,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;YACtC,MAAM,IAAI,GAAG;gBACT,IAAI,EAAE,YAAY,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,QAAQ,CAAC;gBAC3C,cAAc,EAAE,CAAC;gBACjB,MAAM,EAAE,QAAQ;aACnB,CAAC;YACF,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YAC1B,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;QAED,OAAO,GAAG,EAAE;YACR,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC5C,IAAI,YAAY,EAAE,CAAC;gBACf,YAAY,CAAC,cAAc,EAAE,CAAC;gBAC9B,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;oBAC/B,0CAA0C;oBAC1C,uCAAuC;oBACvC,+CAA+C;oBAC/C,6CAA6C;oBAC7C,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBAC9B,CAAC;YACL,CAAC;QACL,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAE1B,OAAO,UAAU,CAAC;AACtB,CAAC;AAED,eAAe,SAAS,CAAC;AAEzB,yEAAyE;AACzE,uEAAuE;AACvE,SAAS,YAAY,CAAC,IAAY;IAC9B,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAClC,CAAC;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC"}

package/dist/useStyles.test.js

@@ -3,86 +3,77 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 import Style from './Style.js';
-import { getStyleRegistry } from './useStyles.js';
+import { getStyleCache } from './useStyles.js';
 describe('@acusti/styling', () => {
     describe('useStyles.ts', () => {
         const mockStylesA = '.test-a {\n  color: cyan;\n}';
         const mockStylesB = '.test-b {\n  padding: 10px;\n}';
-        // reset styleRegistry before each test
+        // reset styleCache before each test
         beforeEach(() => {
-            getStyleRegistry().clear();
+            getStyleCache().clear();
         });
         it('should cache minified styles in the registry keyed by the style string', () => {
-            const styleRegistry = getStyleRegistry();
-            const { rerender } = render(
-                React.createElement(
-                    React.Fragment,
-                    null,
-                    React.createElement(Style, null, mockStylesA),
-                    React.createElement(Style, null, mockStylesA),
-                ),
-            );
-            let stylesItemA = styleRegistry.get(mockStylesA);
-            expect(
-                stylesItemA === null || stylesItemA === void 0
-                    ? void 0
-                    : stylesItemA.referenceCount,
-            ).toBe(2);
-            expect(
-                stylesItemA === null || stylesItemA === void 0
-                    ? void 0
-                    : stylesItemA.styles,
-            ).toBe('.test-a{color:cyan}');
-            expect(styleRegistry.size).toBe(1);
+            const styleCache = getStyleCache();
+            const { rerender } = render(React.createElement(React.Fragment, null,
+                React.createElement(Style, null, mockStylesA),
+                React.createElement(Style, null, mockStylesA)));
+            let stylesItemA = styleCache.get(mockStylesA);
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(2);
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.styles).toBe('.test-a{color:cyan}');
+            expect(styleCache.size).toBe(1);
             rerender(React.createElement(Style, null, mockStylesA));
-            expect(
-                stylesItemA === null || stylesItemA === void 0
-                    ? void 0
-                    : stylesItemA.referenceCount,
-            ).toBe(1);
-            expect(stylesItemA).toBe(styleRegistry.get(mockStylesA));
-            expect(styleRegistry.size).toBe(1);
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+            expect(styleCache.size).toBe(1);
             rerender(React.createElement(Style, null, mockStylesB));
-            stylesItemA = styleRegistry.get(mockStylesA);
+            stylesItemA = styleCache.get(mockStylesA);
             expect(stylesItemA).toBe(undefined);
-            let stylesItemB = styleRegistry.get(mockStylesB);
-            expect(
-                stylesItemB === null || stylesItemB === void 0
-                    ? void 0
-                    : stylesItemB.referenceCount,
-            ).toBe(1);
-            expect(styleRegistry.size).toBe(1);
-            rerender(
-                React.createElement(
-                    React.Fragment,
-                    null,
-                    React.createElement(Style, null, mockStylesA),
-                    React.createElement(Style, null, mockStylesB),
-                ),
-            );
-            stylesItemA = styleRegistry.get(mockStylesA);
-            expect(
-                stylesItemA === null || stylesItemA === void 0
-                    ? void 0
-                    : stylesItemA.referenceCount,
-            ).toBe(1);
-            expect(stylesItemA).toBe(styleRegistry.get(mockStylesA));
-            stylesItemB = styleRegistry.get(mockStylesB);
-            expect(
-                stylesItemB === null || stylesItemB === void 0
-                    ? void 0
-                    : stylesItemB.referenceCount,
-            ).toBe(1);
-            expect(styleRegistry.size).toBe(2);
-            rerender(React.createElement('div', null));
-            expect(styleRegistry.size).toBe(0);
+            let stylesItemB = styleCache.get(mockStylesB);
+            expect(stylesItemB === null || stylesItemB === void 0 ? void 0 : stylesItemB.referenceCount).toBe(1);
+            expect(styleCache.size).toBe(1);
+            rerender(React.createElement(React.Fragment, null,
+                React.createElement(Style, null, mockStylesA),
+                React.createElement(Style, null, mockStylesB)));
+            stylesItemA = styleCache.get(mockStylesA);
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+            stylesItemB = styleCache.get(mockStylesB);
+            expect(stylesItemB === null || stylesItemB === void 0 ? void 0 : stylesItemB.referenceCount).toBe(1);
+            expect(styleCache.size).toBe(2);
+            rerender(React.createElement("div", null));
+            expect(styleCache.size).toBe(0);
+        });
+        it('should preserve style cache across component position changes and re-keying', () => {
+            const styleCache = getStyleCache();
+            const { rerender } = render(React.createElement(React.Fragment, null,
+                React.createElement(Style, null, mockStylesA)));
+            const stylesItemA = styleCache.get(mockStylesA);
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.styles).toBe('.test-a{color:cyan}');
+            expect(styleCache.size).toBe(1);
+            rerender(React.createElement(React.Fragment, null,
+                React.createElement(Style, null, mockStylesB),
+                React.createElement(Style, null, mockStylesA)));
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+            rerender(React.createElement(Style, { key: "new-a" }, mockStylesA));
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(1);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+            rerender(React.createElement(React.Fragment, null,
+                React.createElement(Style, null, mockStylesA),
+                React.createElement(Style, { key: "new-a" }, mockStylesA)));
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(2);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+            rerender(React.createElement("div", null));
+            expect(stylesItemA === null || stylesItemA === void 0 ? void 0 : stylesItemA.referenceCount).toBe(0);
+            expect(styleCache.size).toBe(0);
+        });
+        it('should sanitize styles used as href prop if no href prop provided', () => {
+            render(React.createElement(Style, null, `div[data-foo-bar] { color: cyan; }`));
+            // the two-dash attribute selector results in “Range out of order in character class”
+            // and render() fails with SyntaxError: Invalid regular expression if not sanitized
+            expect(true).toBeTruthy();
         });
-    });
-    it('should sanitize styles used as href prop if no href prop provided', () => {
-        render(React.createElement(Style, null, `div[data-foo-bar] { color: cyan; }`));
-        // the two-dash attribute selector results in “Range out of order in character class”
-        // and render() fails with SyntaxError: Invalid regular expression if not sanitized
-        expect(true).toBeTruthy();
     });
 });
-//# sourceMappingURL=useStyles.test.js.map
+//# sourceMappingURL=useStyles.test.js.map

package/dist/useStyles.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyles.test.js","sourceRoot":"","sources":["../src/useStyles.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useStyles.test.js","sourceRoot":"","sources":["../src/useStyles.test.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE1D,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC7B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;QAC1B,MAAM,WAAW,GAAG,8BAA8B,CAAC;QACnD,MAAM,WAAW,GAAG,gCAAgC,CAAC;QAErD,oCAAoC;QACpC,UAAU,CAAC,GAAG,EAAE;YACZ,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,wEAAwE,EAAE,GAAG,EAAE;YAC9E,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;YAEnC,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CACvB,oBAAC,KAAK,CAAC,QAAQ;gBACX,oBAAC,KAAK,QAAE,WAAW,CAAS;gBAC5B,oBAAC,KAAK,QAAE,WAAW,CAAS,CACf,CACpB,CAAC;YAEF,IAAI,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAC9C,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YACxD,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEhC,QAAQ,CAAC,oBAAC,KAAK,QAAE,WAAW,CAAS,CAAC,CAAC;YACvC,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC;YACtD,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEhC,QAAQ,CAAC,oBAAC,KAAK,QAAE,WAAW,CAAS,CAAC,CAAC;YACvC,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAC1C,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACpC,IAAI,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAC9C,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEhC,QAAQ,CACJ,oBAAC,KAAK,CAAC,QAAQ;gBACX,oBAAC,KAAK,QAAE,WAAW,CAAS;gBAC5B,oBAAC,KAAK,QAAE,WAAW,CAAS,CACf,CACpB,CAAC;YACF,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAC1C,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC;YACtD,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAC1C,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEhC,QAAQ,CAAC,gCAAO,CAAC,CAAC;YAClB,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,6EAA6E,EAAE,GAAG,EAAE;YACnF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;YAEnC,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CACvB,oBAAC,KAAK,CAAC,QAAQ;gBACX,oBAAC,KAAK,QAAE,WAAW,CAAS,CACf,CACpB,CAAC;YAEF,MAAM,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAChD,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YACxD,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEhC,QAAQ,CACJ,oBAAC,KAAK,CAAC,QAAQ;gBACX,oBAAC,KAAK,QAAE,WAAW,CAAS;gBAC5B,oBAAC,KAAK,QAAE,WAAW,CAAS,CACf,CACpB,CAAC;YACF,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC;YAEtD,QAAQ,CAAC,oBAAC,KAAK,IAAC,GAAG,EAAC,OAAO,IAAE,WAAW,CAAS,CAAC,CAAC;YACnD,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC;YAEtD,QAAQ,CACJ,oBAAC,KAAK,CAAC,QAAQ;gBACX,oBAAC,KAAK,QAAE,WAAW,CAAS;gBAC5B,oBAAC,KAAK,IAAC,GAAG,EAAC,OAAO,IAAE,WAAW,CAAS,CAC3B,CACpB,CAAC;YACF,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC;YAEtD,QAAQ,CAAC,gCAAO,CAAC,CAAC;YAClB,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,mEAAmE,EAAE,GAAG,EAAE;YACzE,MAAM,CAAC,oBAAC,KAAK,QAAE,oCAAoC,CAAS,CAAC,CAAC;YAC9D,qFAAqF;YACrF,mFAAmF;YACnF,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/styling",
-    "version": "1.0.0-rc.0",
+    "version": "1.0.0-rc.1",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/index.js",

package/src/useStyles.test.tsx

@@ -4,20 +4,20 @@ import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import Style from './Style.js';
-import { getStyleRegistry } from './useStyles.js';
+import { getStyleCache } from './useStyles.js';
 
 describe('@acusti/styling', () => {
     describe('useStyles.ts', () => {
         const mockStylesA = '.test-a {\n  color: cyan;\n}';
         const mockStylesB = '.test-b {\n  padding: 10px;\n}';
 
-        // reset styleRegistry before each test
+        // reset styleCache before each test
         beforeEach(() => {
-            getStyleRegistry().clear();
+            getStyleCache().clear();
         });
 
         it('should cache minified styles in the registry keyed by the style string', () => {
-            const styleRegistry = getStyleRegistry();
+            const styleCache = getStyleCache();
 
             const { rerender } = render(
                 <React.Fragment>
@@ -26,22 +26,22 @@ describe('@acusti/styling', () => {
                 </React.Fragment>,
             );
 
-            let stylesItemA = styleRegistry.get(mockStylesA);
+            let stylesItemA = styleCache.get(mockStylesA);
             expect(stylesItemA?.referenceCount).toBe(2);
             expect(stylesItemA?.styles).toBe('.test-a{color:cyan}');
-            expect(styleRegistry.size).toBe(1);
+            expect(styleCache.size).toBe(1);
 
             rerender(<Style>{mockStylesA}</Style>);
             expect(stylesItemA?.referenceCount).toBe(1);
-            expect(stylesItemA).toBe(styleRegistry.get(mockStylesA));
-            expect(styleRegistry.size).toBe(1);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+            expect(styleCache.size).toBe(1);
 
             rerender(<Style>{mockStylesB}</Style>);
-            stylesItemA = styleRegistry.get(mockStylesA);
+            stylesItemA = styleCache.get(mockStylesA);
             expect(stylesItemA).toBe(undefined);
-            let stylesItemB = styleRegistry.get(mockStylesB);
+            let stylesItemB = styleCache.get(mockStylesB);
             expect(stylesItemB?.referenceCount).toBe(1);
-            expect(styleRegistry.size).toBe(1);
+            expect(styleCache.size).toBe(1);
 
             rerender(
                 <React.Fragment>
@@ -49,22 +49,63 @@ describe('@acusti/styling', () => {
                     <Style>{mockStylesB}</Style>
                 </React.Fragment>,
             );
-            stylesItemA = styleRegistry.get(mockStylesA);
+            stylesItemA = styleCache.get(mockStylesA);
             expect(stylesItemA?.referenceCount).toBe(1);
-            expect(stylesItemA).toBe(styleRegistry.get(mockStylesA));
-            stylesItemB = styleRegistry.get(mockStylesB);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+            stylesItemB = styleCache.get(mockStylesB);
             expect(stylesItemB?.referenceCount).toBe(1);
-            expect(styleRegistry.size).toBe(2);
+            expect(styleCache.size).toBe(2);
 
             rerender(<div />);
-            expect(styleRegistry.size).toBe(0);
+            expect(styleCache.size).toBe(0);
         });
-    });
 
-    it('should sanitize styles used as href prop if no href prop provided', () => {
-        render(<Style>{`div[data-foo-bar] { color: cyan; }`}</Style>);
-        // the two-dash attribute selector results in “Range out of order in character class”
-        // and render() fails with SyntaxError: Invalid regular expression if not sanitized
-        expect(true).toBeTruthy();
+        it('should preserve style cache across component position changes and re-keying', () => {
+            const styleCache = getStyleCache();
+
+            const { rerender } = render(
+                <React.Fragment>
+                    <Style>{mockStylesA}</Style>
+                </React.Fragment>,
+            );
+
+            const stylesItemA = styleCache.get(mockStylesA);
+            expect(stylesItemA?.referenceCount).toBe(1);
+            expect(stylesItemA?.styles).toBe('.test-a{color:cyan}');
+            expect(styleCache.size).toBe(1);
+
+            rerender(
+                <React.Fragment>
+                    <Style>{mockStylesB}</Style>
+                    <Style>{mockStylesA}</Style>
+                </React.Fragment>,
+            );
+            expect(stylesItemA?.referenceCount).toBe(1);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+
+            rerender(<Style key="new-a">{mockStylesA}</Style>);
+            expect(stylesItemA?.referenceCount).toBe(1);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+
+            rerender(
+                <React.Fragment>
+                    <Style>{mockStylesA}</Style>
+                    <Style key="new-a">{mockStylesA}</Style>
+                </React.Fragment>,
+            );
+            expect(stylesItemA?.referenceCount).toBe(2);
+            expect(stylesItemA).toBe(styleCache.get(mockStylesA));
+
+            rerender(<div />);
+            expect(stylesItemA?.referenceCount).toBe(0);
+            expect(styleCache.size).toBe(0);
+        });
+
+        it('should sanitize styles used as href prop if no href prop provided', () => {
+            render(<Style>{`div[data-foo-bar] { color: cyan; }`}</Style>);
+            // the two-dash attribute selector results in “Range out of order in character class”
+            // and render() fails with SyntaxError: Invalid regular expression if not sanitized
+            expect(true).toBeTruthy();
+        });
     });
 });

package/src/useStyles.ts

@@ -2,21 +2,18 @@ import { useEffect, useState } from 'react';
 
 import { minifyStyles } from './minifyStyles.js';
 
-type StyleRegistry = Map<
-    string,
-    { href: string; referenceCount: number; styles: string }
->;
+type StyleCache = Map<string, { href: string; referenceCount: number; styles: string }>;
 
-const styleRegistry: StyleRegistry = new Map();
+const styleCache: StyleCache = new Map();
 
-export const getStyleRegistry = () => styleRegistry;
+const EMPTY_STYLES_ITEM = { href: '', referenceCount: 0, styles: '' };
 
 export function useStyles(styles: string, initialHref?: string) {
     const [stylesItem, setStylesItem] = useState(() => {
-        if (!styles) return { href: '', referenceCount: 0, styles: '' };
+        if (!styles) return EMPTY_STYLES_ITEM;
 
         const key = initialHref ?? styles;
-        let item = styleRegistry.get(key);
+        let item = styleCache.get(key);
 
         if (item) {
             item.referenceCount++;
@@ -27,7 +24,7 @@ export function useStyles(styles: string, initialHref?: string) {
                 referenceCount: 1,
                 styles: minified,
             };
-            styleRegistry.set(key, item);
+            styleCache.set(key, item);
         }
 
         return item;
@@ -38,19 +35,19 @@ export function useStyles(styles: string, initialHref?: string) {
 
         const key = initialHref ?? styles;
 
-        if (!styleRegistry.get(key)) {
+        if (!styleCache.get(key)) {
             const minified = minifyStyles(styles);
             const item = {
                 href: sanitizeHref(initialHref ?? minified),
                 referenceCount: 1,
                 styles: minified,
             };
-            styleRegistry.set(key, item);
+            styleCache.set(key, item);
             setStylesItem(item);
         }
 
         return () => {
-            const existingItem = styleRegistry.get(styles);
+            const existingItem = styleCache.get(styles);
             if (existingItem) {
                 existingItem.referenceCount--;
                 if (!existingItem.referenceCount) {
@@ -58,7 +55,7 @@ export function useStyles(styles: string, initialHref?: string) {
                     // and add another referenceCount check
                     // to deal with instance where existing <Style>
                     // component is moved in the tree or re-keyed
-                    styleRegistry.delete(styles);
+                    styleCache.delete(styles);
                 }
             }
         };
@@ -69,12 +66,11 @@ export function useStyles(styles: string, initialHref?: string) {
 
 export default useStyles;
 
-export const clearRegistry = () => {
-    styleRegistry.clear();
-};
-
 // Dashes in selectors in href prop create happy-dom / jsdom test errors:
 // Invalid regular expression (“Range out of order in character class”)
 function sanitizeHref(text: string) {
     return text.replace(/-/g, '');
 }
+
+// The following export is for test usage only
+export const getStyleCache = () => styleCache;