perf(inject-css.ts*): Memory efficiency up

Author: refirst11

src/_internal/utils/inject-css.ts

@@ -16,12 +16,14 @@ function createStyleElement(hash: string): HTMLStyleElement | null {
   return styleSheets[hash];
 }
 
-export function injectCSS(hash: string, sheet: string, string: string) {
-  if (isInDevelopment) console.log('💫 ' + string + ' executing ...' + sheet);
+export function injectCSS(hash: string, sheet: string, context: string) {
+  if (isInDevelopment) console.log('💫 ' + context + ' executing ...' + sheet);
   if (isServer) return;
-
-  styleCleanUp();
+  queueMicrotask(() => {
+    styleCleanUp();
+  });
   hashCache[hash] = hash;
+
   const styleElement = createStyleElement(hash);
   if (styleElement == null) return;
 
@@ -31,7 +33,7 @@ export function injectCSS(hash: string, sheet: string, string: string) {
 function styleCleanUp() {
   requestAnimationFrame(() => {
     for (const hash in hashCache) {
-      const classElements = document.getElementsByClassName(hash);
+      const classElements = document.querySelectorAll(`[class*="${hash}"]`);
       if (classElements.length === 0) {
         removeStyleElement(hashCache[hash]);
       }

src/core/method/create.ts

@@ -13,16 +13,7 @@ export function create<T extends ClassesObjectType>(object: ExactClassesObjectTy
     get: function (target, prop: string) {
       if (typeof prop === 'string' && prop in target) {
         const className = prop + '_' + base62Hash;
-        const classRuleRegex = new RegExp(`\\n\\.${className}[^{]*\\{[^}]*\\}`, 'g');
-        const mediaBlockRegex = new RegExp(
-          `\\n@media[^{]+\\{(?:[^{}]*\\{[^{}]*\\})*[^{}]*\\.${className}[^{}]*\\{[^{}]*\\}(?:[^{}]*\\{[^{}]*\\})*[^{}]*\\}`,
-          'g'
-        );
-        const sheet = (Array.from(styleSheet.match(classRuleRegex) || []) as string[])
-          .concat(Array.from(styleSheet.match(mediaBlockRegex) || []) as string[])
-          .join('');
-        if (isInDevelopment) injectCSS(className, sheet, 'sheet');
-
+        if (isInDevelopment) injectCSS(base62Hash, styleSheet, 'create');
         return isInDevelopment ? className : styles[className];
       }
     },

src/core/method/set.ts

@@ -6,13 +6,13 @@ import { createGlobalStyleSheetPromise, globalStyleSheetPromise, resolveGlobalSt
 export function set(object: CustomCSSProperties): string {
   const base62Hash = genBase62Hash(object, 5);
   const { styleSheet } = styleCompiler(object, base62Hash);
-  const className = '_' + base62Hash;
+  const classHash = '_' + base62Hash;
   if (typeof globalStyleSheetPromise === 'undefined') createGlobalStyleSheetPromise();
   resolveGlobalStyleSheet(styleSheet);
 
   function returnFunction() {
-    if (isInDevelopment) injectCSS(className, styleSheet, 'style');
-    return isInDevelopment ? className : styles[className];
+    if (isInDevelopment) injectCSS(base62Hash, styleSheet, 'set');
+    return isInDevelopment ? classHash : styles[classHash];
   }
 
   return returnFunction() as unknown as string;