@acusti/styling 1.1.1 → 2.0.0

package/src/minifyStyles.ts

@@ -1,178 +0,0 @@
-/**
- * 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 endIndex = 0,
-        placeholder = '',
-        startIndex = 0,
-        token = '';
-
-    // 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);
-
-        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 (let i = 0, max = comments.length; i < max; i++) {
-                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 (let 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 (let 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

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

@@ -1,76 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { minifyStyles } from './minifyStyles.js';
-
-type StyleCache = Map<string, { href: string; referenceCount: number; styles: string }>;
-
-const styleCache: StyleCache = new Map();
-
-const EMPTY_STYLES_ITEM = { href: '', referenceCount: 0, styles: '' };
-
-export function useStyles(styles: string, initialHref?: string) {
-    const [stylesItem, setStylesItem] = useState(() => {
-        if (!styles) return EMPTY_STYLES_ITEM;
-
-        const key = initialHref ?? styles;
-        let item = styleCache.get(key);
-
-        if (item) {
-            item.referenceCount++;
-        } else {
-            const minified = minifyStyles(styles);
-            item = {
-                href: sanitizeHref(initialHref ?? minified),
-                referenceCount: 1,
-                styles: minified,
-            };
-            styleCache.set(key, item);
-        }
-
-        return item;
-    });
-
-    useEffect(() => {
-        if (!styles) return;
-
-        const key = initialHref ?? styles;
-
-        if (!styleCache.get(key)) {
-            const minified = minifyStyles(styles);
-            const item = {
-                href: sanitizeHref(initialHref ?? minified),
-                referenceCount: 1,
-                styles: minified,
-            };
-            styleCache.set(key, item);
-            setStylesItem(item);
-        }
-
-        return () => {
-            const existingItem = styleCache.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
-                    styleCache.delete(styles);
-                }
-            }
-        };
-    }, [initialHref, styles]);
-
-    return stylesItem;
-}
-
-export default useStyles;
-
-// 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;