@acusti/styling 0.7.2 → 1.0.0-rc.0

package/dist/useStyles.test.js

@@ -0,0 +1,88 @@
+// @vitest-environment happy-dom
+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';
+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
+        beforeEach(() => {
+            getStyleRegistry().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);
+            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);
+            rerender(React.createElement(Style, null, mockStylesB));
+            stylesItemA = styleRegistry.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);
+        });
+    });
+    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

package/dist/useStyles.test.js.flow

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

package/dist/useStyles.test.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/styling",
-    "version": "0.7.2",
+    "version": "1.0.0-rc.0",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/index.js",
@@ -37,18 +37,18 @@
     },
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
     "devDependencies": {
-        "@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",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/react": "^16.0.1",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/react": "^18.3.3",
+        "happy-dom": "^15.7.3",
+        "react": "^19.0.0-0",
+        "react-dom": "^19.0.0-0",
+        "typescript": "5.3.3",
         "vitest": "^1.1.0"
     },
     "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18",
-        "react-dom": "^16.8 || ^17 || ^18"
+        "react": "^19.0.0-0",
+        "react-dom": "^19.0.0-0"
     }
 }

package/src/Style.tsx

@@ -1,65 +1,26 @@
-import * as React from 'react';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 
-import {
-    getRegisteredStyles,
-    registerStyles,
-    unregisterStyles,
-    updateStyles,
-} from './style-registry.js';
-
-const { useCallback, useEffect, useMemo, useRef, useState } = React;
+import { useStyles } from './useStyles.js';
 
 type Props = {
     children: string;
+    href?: string;
+    precedence?: string;
 };
 
-const Style = ({ children }: Props) => {
+const Style = ({ children, href: _href, precedence = 'medium' }: 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(
-        () => () => {
-            if (!ownerDocument) return;
-            unregisterStyles({ ownerDocument, styles });
-        },
-        [ownerDocument], // eslint-disable-line react-hooks/exhaustive-deps
+    const { href, styles } = useStyles(children, _href);
+    // 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
+        <style href={href} precedence={precedence}>
+            {styles}
+        </style>
     );
-
-    const previousStylesRef = useRef<string>('');
-
-    useEffect(() => {
-        if (!ownerDocument) return;
-
-        updateStyles({
-            ownerDocument,
-            previousStyles: previousStylesRef.current,
-            styles,
-        });
-
-        previousStylesRef.current = styles;
-    }, [ownerDocument, styles]);
-
-    const handleRef = useCallback((element: HTMLElement | null) => {
-        if (!element) return;
-        setOwnerDocument(element.ownerDocument);
-    }, []);
-
-    if (ownerDocument) return null;
-
-    // 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/index.ts

@@ -1,3 +1,4 @@
+/// <reference types="react/canary" />
 export { default as Style } from './Style.js';
 
 export const SYSTEM_UI_FONT =

package/src/minifyStyles.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+
+import { minifyStyles } from './minifyStyles.js';
+
+describe('@acusti/styling', () => {
+    describe('minifyStyles.ts', () => {
+        it('minifies basic CSS declarations', () => {
+            expect(
+                minifyStyles(`
+.foo {
+    padding: 10px;
+    color: red;
+}`),
+            ).toBe('.foo{padding:10px;color:red}');
+        });
+
+        it('preserves whitespace where needed in selectors', () => {
+            expect(
+                minifyStyles(`
+.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(`
+.foo {
+    opacity: 0.6;
+}`),
+            ).toBe('.foo{opacity:.6}');
+        });
+    });
+});

package/src/minifyStyles.ts

@@ -0,0 +1,181 @@
+/**
+ * Adapted from:
+ * https://github.com/jbleuzen/node-cssmin/blob/master/cssmin.js
+ * node-cssmin
+ * A simple module for Node.js that minify CSS
+ * Author : Johan Bleuzen
+ */
+
+/**
+ * cssmin.js
+ * Author: Stoyan Stefanov - http://phpied.com/
+ * This is a JavaScript port of the CSS minification tool
+ * distributed with YUICompressor, itself a port
+ * of the cssmin utility by Isaac Schlueter - http://foohack.com/
+ * Permission is hereby granted to use the JavaScript version under the same
+ * conditions as the YUICompressor (original YUICompressor note below).
+ */
+
+/*
+ * YUI Compressor
+ * http://developer.yahoo.com/yui/compressor/
+ * Author: Julien Lecomte - http://www.julienlecomte.net/
+ * Copyright (c) 2011 Yahoo! Inc. All rights reserved.
+ * The copyrights embodied in the content of this file are licensed
+ * by Yahoo! Inc. under the BSD (revised) open source license.
+ */
+
+export function minifyStyles(css: string) {
+    const preservedTokens: Array<string> = [];
+    const comments: Array<string> = [];
+    const totalLength = css.length;
+    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);
+        if (endIndex < 0) {
+            endIndex = totalLength;
+        }
+        token = css.slice(startIndex + 2, endIndex);
+        comments.push(token);
+        css =
+            css.slice(0, startIndex + 2) +
+            '___PRESERVE_CANDIDATE_COMMENT_' +
+            (comments.length - 1) +
+            '___' +
+            css.slice(endIndex);
+        startIndex += 2;
+    }
+
+    // preserve strings so their content doesn't get accidentally minified
+    css = css.replace(/("([^\\"]|\\.|\\)*")|('([^\\']|\\.|\\)*')/g, function (match) {
+        const quote = match.substring(0, 1);
+        let i, max;
+
+        match = match.slice(1, -1);
+
+        // maybe the string contains a comment-like substring?
+        // 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],
+                );
+            }
+        }
+
+        preservedTokens.push(match);
+        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) {
+        token = comments[i];
+        placeholder = '___PRESERVE_CANDIDATE_COMMENT_' + i + '___';
+
+        // ! in the first position of the comment means preserve
+        // so push to the preserved tokens keeping the !
+        if (token.charAt(0) === '!') {
+            preservedTokens.push(token);
+            css = css.replace(
+                placeholder,
+                '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___',
+            );
+            continue;
+        }
+
+        // otherwise, kill the comment
+        css = css.replace('/*' + placeholder + '*/', '');
+    }
+
+    // Normalize all whitespace strings to single spaces. Easier to work with that way.
+    css = css.replace(/\s+/g, ' ');
+
+    // Remove the spaces before the things that should not have spaces before them.
+    // But, be careful not to turn "p :link {...}" into "p:link{...}"
+    // Swap out any pseudo-class colons with the token, and then swap back.
+    css = css.replace(/(^|\})(([^{:])+:)+([^{]*\{)/g, function (m) {
+        return m.replace(/:/g, '___PSEUDOCLASSCOLON___');
+    });
+
+    // Preserve spaces in calc expressions
+    css = css.replace(/calc\s*\(\s*(.*?)\s*\)/g, function (m, c: string) {
+        return m.replace(c, c.replace(/\s+/g, '___SPACE_IN_CALC___'));
+    });
+
+    css = css.replace(/\s+([!{};:>+()\],])/g, '$1');
+    css = css.replace(/___PSEUDOCLASSCOLON___/g, ':');
+
+    // no space after the end of a preserved comment
+    css = css.replace(/\*\/ /g, '*/');
+
+    // If there is a @charset, then only allow one, and push to the top of the file.
+    css = css.replace(/^(.*)(@charset "[^"]*";)/gi, '$2$1');
+    css = css.replace(/^(\s*@charset [^;]+;\s*)+/gi, '$1');
+
+    // Put the space back in some cases, to support stuff like
+    // @media screen and (-webkit-min-device-pixel-ratio:0){
+    css = css.replace(/\band\(/gi, 'and (');
+
+    // Remove the spaces after the things that should not have spaces after them.
+    css = css.replace(/([!{}:;>+([,])\s+/g, '$1');
+
+    // Restore preserved spaces in calc expressions
+    css = css.replace(/___SPACE_IN_CALC___/g, ' ');
+
+    // remove unnecessary semicolons
+    css = css.replace(/;+\}/g, '}');
+
+    // Replace 0(px,em,%) with 0.
+    css = css.replace(/([\s:])(0)(px|em|%|in|cm|mm|pc|pt|ex)/gi, '$1$2');
+
+    // Replace 0 0 0 0; with 0.
+    css = css.replace(/:0 0 0 0(;|\})/g, ':0$1');
+    css = css.replace(/:0 0 0(;|\})/g, ':0$1');
+    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: string, tail: string) {
+            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: string, tail: string) {
+            return prop.toLowerCase() + ':0' + tail;
+        },
+    );
+
+    // Remove empty rules.
+    css = css.replace(/[^};{/]+\{\}/g, '');
+
+    // Replace multiple semi-colons in a row by a single one
+    // See SF bug #1980989
+    css = css.replace(/;;+/g, ';');
+
+    // restore preserved comments and strings
+    for (i = 0, max = preservedTokens.length; i < max; i = i + 1) {
+        css = css.replace('___PRESERVED_TOKEN_' + i + '___', preservedTokens[i]);
+    }
+
+    return css.trim();
+}
+
+export default minifyStyles;

package/src/useStyles.test.tsx

@@ -0,0 +1,70 @@
+// @vitest-environment happy-dom
+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';
+
+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
+        beforeEach(() => {
+            getStyleRegistry().clear();
+        });
+
+        it('should cache minified styles in the registry keyed by the style string', () => {
+            const styleRegistry = getStyleRegistry();
+
+            const { rerender } = render(
+                <React.Fragment>
+                    <Style>{mockStylesA}</Style>
+                    <Style>{mockStylesA}</Style>
+                </React.Fragment>,
+            );
+
+            let stylesItemA = styleRegistry.get(mockStylesA);
+            expect(stylesItemA?.referenceCount).toBe(2);
+            expect(stylesItemA?.styles).toBe('.test-a{color:cyan}');
+            expect(styleRegistry.size).toBe(1);
+
+            rerender(<Style>{mockStylesA}</Style>);
+            expect(stylesItemA?.referenceCount).toBe(1);
+            expect(stylesItemA).toBe(styleRegistry.get(mockStylesA));
+            expect(styleRegistry.size).toBe(1);
+
+            rerender(<Style>{mockStylesB}</Style>);
+            stylesItemA = styleRegistry.get(mockStylesA);
+            expect(stylesItemA).toBe(undefined);
+            let stylesItemB = styleRegistry.get(mockStylesB);
+            expect(stylesItemB?.referenceCount).toBe(1);
+            expect(styleRegistry.size).toBe(1);
+
+            rerender(
+                <React.Fragment>
+                    <Style>{mockStylesA}</Style>
+                    <Style>{mockStylesB}</Style>
+                </React.Fragment>,
+            );
+            stylesItemA = styleRegistry.get(mockStylesA);
+            expect(stylesItemA?.referenceCount).toBe(1);
+            expect(stylesItemA).toBe(styleRegistry.get(mockStylesA));
+            stylesItemB = styleRegistry.get(mockStylesB);
+            expect(stylesItemB?.referenceCount).toBe(1);
+            expect(styleRegistry.size).toBe(2);
+
+            rerender(<div />);
+            expect(styleRegistry.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

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+
+import { minifyStyles } from './minifyStyles.js';
+
+type StyleRegistry = Map<
+    string,
+    { href: string; referenceCount: number; styles: string }
+>;
+
+const styleRegistry: StyleRegistry = new Map();
+
+export const getStyleRegistry = () => styleRegistry;
+
+export function useStyles(styles: string, initialHref?: string) {
+    const [stylesItem, setStylesItem] = useState(() => {
+        if (!styles) return { href: '', referenceCount: 0, styles: '' };
+
+        const key = initialHref ?? styles;
+        let item = styleRegistry.get(key);
+
+        if (item) {
+            item.referenceCount++;
+        } else {
+            const minified = minifyStyles(styles);
+            item = {
+                href: sanitizeHref(initialHref ?? minified),
+                referenceCount: 1,
+                styles: minified,
+            };
+            styleRegistry.set(key, item);
+        }
+
+        return item;
+    });
+
+    useEffect(() => {
+        if (!styles) return;
+
+        const key = initialHref ?? styles;
+
+        if (!styleRegistry.get(key)) {
+            const minified = minifyStyles(styles);
+            const item = {
+                href: sanitizeHref(initialHref ?? minified),
+                referenceCount: 1,
+                styles: minified,
+            };
+            styleRegistry.set(key, item);
+            setStylesItem(item);
+        }
+
+        return () => {
+            const existingItem = styleRegistry.get(styles);
+            if (existingItem) {
+                existingItem.referenceCount--;
+                if (!existingItem.referenceCount) {
+                    // TODO try scheduling this via setTimeout
+                    // and add another referenceCount check
+                    // to deal with instance where existing <Style>
+                    // component is moved in the tree or re-keyed
+                    styleRegistry.delete(styles);
+                }
+            }
+        };
+    }, [initialHref, styles]);
+
+    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: string) {
+    return text.replace(/-/g, '');
+}