@cssfn/cssfn - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/cssfn.d.ts

@@ -34,4 +34,4 @@ import { JssStyle, JssValue, Classes, Styles, StyleSheet } from 'jss';
 export declare type PropList = Dictionary<JssValue>;
-export declare const createJssSheet: <TClassName extends string = string>(styles: ProductOrFactory<Styles<TClassName, unknown, undefined>>) => StyleSheet<TClassName>;
-export declare const createSheet: <TClassName extends string = string>(classes: ProductOrFactory<ClassList<TClassName>>) => StyleSheet<TClassName>;
+export declare const createJssSheet: <TClassName extends string = string>(styles: ProductOrFactory<Styles<TClassName, unknown, undefined>>, sheetId?: string | undefined) => StyleSheet<TClassName>;
+export declare const createSheet: <TClassName extends string = string>(classes: ProductOrFactory<ClassList<TClassName>>, sheetId?: string | undefined) => StyleSheet<TClassName>;
 export declare const usesCssfn: <TClassName extends string = string>(classes: ProductOrFactory<ClassList<TClassName>>) => Styles<TClassName, unknown, undefined>;
@@ -38,0 +38,0 @@ /**

dist/cssfn.js

@@ -14,12 +14,43 @@ // jss:
 import warning from 'tiny-warning';
+// utilities:
+const fastHash = (input) => {
+    let hash = 0, i, chr;
+    for (i = 0; i < input.length; i++) {
+        chr = input.charCodeAt(i);
+        hash = ((hash << 5) - hash) + chr;
+        hash |= 0; // Convert to 32bit integer
+    } // for
+    hash = Math.abs(hash);
+    return hash.toString(36).slice(-4); // get the last 4 characters
+};
 // jss:
 const createGenerateId = (options = {}) => {
-    let idCounter = 0;
-    const maxCounter = 1e10;
+    const takenIds = new Set();
     return (rule, sheet) => {
-        idCounter++;
-        if (idCounter > maxCounter)
-            warning(false, `[JSS] You might have a memory leak. ID counter is at ${idCounter}.`);
-        const prefix = sheet?.options?.classNamePrefix || 'c';
-        return `${prefix}${idCounter}`;
+        const globalID = (() => {
+            let sheetId = sheet?.options?.sheetId ?? sheet?.options?.index ?? '';
+            if (typeof (sheetId) !== 'string') {
+                sheetId = (sheetId ? fastHash(JSON.stringify(sheetId)) : '');
+                if (sheet) {
+                    if (!sheet.options)
+                        sheet.options = {};
+                    sheet.options.sheetId = sheetId;
+                } // if
+            } // if
+            const classId = rule?.key || '@global';
+            let compoundId = `${sheetId}-${classId}`; // try to generate an unique Id _without_ a counter
+            const maxCounter = 1e10;
+            let counter = 2;
+            for (; counter <= maxCounter; counter++) {
+                if (!takenIds.has(compoundId)) {
+                    takenIds.add(compoundId);
+                    return compoundId;
+                } // if
+                compoundId = `${sheetId}-${classId}-${counter}`; // try to generate an unique Id _with_ a counter
+            } // for
+            warning(false, `[JSS] You might have a memory leak. ID counter is at ${counter}.`);
+            return compoundId;
+        })();
+        const prefix = sheet?.options?.classNamePrefix ?? 'c';
+        return `${prefix}${globalID}`;
     };
@@ -36,7 +67,14 @@ };
 // styles:
-export const createJssSheet = (styles) => {
-    return customJss.createStyleSheet(((typeof (styles) === 'function') ? styles() : styles));
+let sheetCounter = 0;
+export const createJssSheet = (styles, sheetId) => {
+    sheetCounter++;
+    const stylesObj = ((typeof (styles) === 'function') ? styles() : styles);
+    return customJss.createStyleSheet(stylesObj, 
+    /*options:*/ {
+        index: sheetCounter,
+        sheetId: sheetId ?? stylesObj, // custom prop - for identifier purpose
+    });
 };
-export const createSheet = (classes) => {
-    return createJssSheet(() => usesCssfn(classes));
+export const createSheet = (classes, sheetId) => {
+    return createJssSheet(() => usesCssfn(classes), sheetId);
 };
@@ -43,0 +81,0 @@ // cssfn hooks:

package.json

 {
   "name": "@cssfn/cssfn",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Writes CSS in javascript function.",
@@ -5,0 +5,0 @@ "type": "module",

src/cssfn.ts

@@ -97,17 +97,60 @@ // jss:
 
+// utilities:
+
+const fastHash = (input: string) => {
+    let hash = 0, i, chr;
+    for (i = 0; i < input.length; i++) {
+        chr = input.charCodeAt(i);
+        hash = ((hash << 5) - hash) + chr;
+        hash |= 0; // Convert to 32bit integer
+    } // for
+    
+    hash = Math.abs(hash);
+    return hash.toString(36).slice(-4); // get the last 4 characters
+};
+
+
+
 // jss:
 const createGenerateId : CreateGenerateId = (options = {}) => {
-    let idCounter    = 0;
-    const maxCounter = 1e10;
+    const takenIds = new Set<string>();
     
-    
-    
     return (rule, sheet): string => {
-        idCounter++;
-        if (idCounter > maxCounter) warning(false, `[JSS] You might have a memory leak. ID counter is at ${idCounter}.`)
+        const globalID = ((): string => {
+            let   sheetId : string|object|null|undefined = (sheet?.options as any)?.sheetId ?? sheet?.options?.index ?? '';
+            if (typeof(sheetId) !== 'string') {
+                sheetId = (sheetId ? fastHash(JSON.stringify(sheetId)) : '');
+                
+                if (sheet) {
+                    if (!sheet.options) sheet.options = ({} as any);
+                    (sheet.options as any).sheetId = sheetId;
+                } // if
+            } // if
+            
+            const classId = rule?.key || '@global';
+            let   compoundId = `${sheetId}-${classId}`; // try to generate an unique Id _without_ a counter
+            
+            
+            
+            const maxCounter = 1e10;
+            let   counter    = 2;
+            for (; counter <= maxCounter; counter++) {
+                if (!takenIds.has(compoundId)) {
+                    takenIds.add(compoundId);
+                    return compoundId;
+                } // if
+                
+                compoundId = `${sheetId}-${classId}-${counter}`; // try to generate an unique Id _with_ a counter
+            } // for
+            
+            
+            
+            warning(false, `[JSS] You might have a memory leak. ID counter is at ${counter}.`);
+            return compoundId;
+        })();
         
         
         
-        const prefix = sheet?.options?.classNamePrefix || 'c';
-        return `${prefix}${idCounter}`;
+        const prefix = sheet?.options?.classNamePrefix ?? 'c';
+        return `${prefix}${globalID}`;
     };
@@ -127,10 +170,19 @@ };
 // styles:
-export const createJssSheet = <TClassName extends ClassName = ClassName>(styles: ProductOrFactory<Styles<TClassName>>): StyleSheet<TClassName> => {
+let sheetCounter = 0;
+export const createJssSheet = <TClassName extends ClassName = ClassName>(styles: ProductOrFactory<Styles<TClassName>>, sheetId?: string): StyleSheet<TClassName> => {
+    sheetCounter++;
+    
+    const stylesObj = ((typeof(styles) === 'function') ? styles() : styles);
     return customJss.createStyleSheet(
-        ((typeof(styles) === 'function') ? styles() : styles)
+        stylesObj,
+        /*options:*/ ({
+            index   : sheetCounter,         // 0 by default - determines DOM rendering order, higher number = higher specificity (inserted after).
+            sheetId : sheetId ?? stylesObj, // custom prop - for identifier purpose
+        } as {})
     );
 }
-export const createSheet    = <TClassName extends ClassName = ClassName>(classes: ProductOrFactory<ClassList<TClassName>>): StyleSheet<TClassName> => {
+export const createSheet    = <TClassName extends ClassName = ClassName>(classes: ProductOrFactory<ClassList<TClassName>>, sheetId?: string): StyleSheet<TClassName> => {
     return createJssSheet(
-        () => usesCssfn(classes)
+        () => usesCssfn(classes),
+        sheetId
     );
@@ -137,0 +189,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

82430

increased by4.66%

Lines of code

1331

increased by6.14%

No dependency changes