feat(build-in-helper): desync

Author: refirst11

compiler/src/index.ts

@@ -35,11 +35,19 @@ async function getAppRoot(): Promise<string> {
   const files = await fg([path.join(appRoot, '**/*.{ts,tsx}')]);
   const styleFiles = files.filter(isCSSX);
   console.log('\n💬 The following CSS caches were accepted:\n');
+  const importPromises = styleFiles.map(styleFile => import(path.resolve(styleFile)));
+  await Promise.all(importPromises);
+
+  for (let i = 0; i < styleFiles.length; i++) {
+    await createBuildIn();
+  }
+  for (let i = 0; i < styleFiles.length; i++) {
+    await setBuildIn();
+  }
+  for (let i = 0; i < styleFiles.length; i++) {
+    await globalBuildIn();
+  }
   for (let i = 0; i < styleFiles.length; i++) {
-    await import(path.resolve(styleFiles[i]));
-    createBuildIn();
-    setBuildIn();
-    globalBuildIn();
-    rootBuildIn();
+    await rootBuildIn();
   }
 })();

src/core/method/create-build-in-helper.ts

@@ -26,7 +26,7 @@ async function processStyleSheets() {
   isProcessing = false;
 }
 
-export function createBuildIn(): void {
+export async function createBuildIn(): Promise<void> {
   if (typeof globalStyleSheetPromise === 'undefined') createGlobalStyleSheetPromise();
   if (!isProcessing && styleSheetQueue.length > 0) {
     isProcessing = true;

src/core/method/global-build-in-helper.ts

@@ -26,7 +26,7 @@ async function processStyleSheets() {
   isProcessing = false;
 }
 
-export function globalBuildIn(): void {
+export async function globalBuildIn(): Promise<void> {
   if (typeof globalStyleSheetPromise === 'undefined') createGlobalStyleSheetPromise();
   if (!isProcessing && styleSheetQueue.length > 0) {
     isProcessing = true;

src/core/method/root-build-in-helper.ts

@@ -2,18 +2,36 @@ import { buildIn, isDevelopment } from '../../_internal';
 
 let resolveGlobalStyleSheet: (value: [string, string?]) => void;
 let globalStyleSheetPromise: Promise<[string, string?]>;
+const styleSheetQueue: [string, string?][] = [];
+let isProcessing = false;
 
 function createGlobalStyleSheetPromise() {
   globalStyleSheetPromise = new Promise<[string, string?]>(resolve => {
-    resolveGlobalStyleSheet = resolve;
+    resolveGlobalStyleSheet = (value: [string, string?]) => {
+      styleSheetQueue.push(value);
+      resolve(value);
+    };
   });
 }
 
+async function executeBuildIn(styleSheet: string, option?: string): Promise<void> {
+  if (!isDevelopment && styleSheet) buildIn(styleSheet, option);
+}
+
+async function processStyleSheets() {
+  while (styleSheetQueue.length > 0) {
+    const [styleSheet, option] = styleSheetQueue.shift() as [string, string?];
+    await executeBuildIn(styleSheet, option);
+  }
+  isProcessing = false;
+}
+
 export async function rootBuildIn(): Promise<void> {
   if (typeof globalStyleSheetPromise === 'undefined') createGlobalStyleSheetPromise();
-  const [styleSheet, option] = await globalStyleSheetPromise;
-  if (!isDevelopment && styleSheet) buildIn(styleSheet, option);
-  createGlobalStyleSheetPromise();
+  if (!isProcessing && styleSheetQueue.length > 0) {
+    isProcessing = true;
+    processStyleSheets();
+  }
 }
 
 export { resolveGlobalStyleSheet, globalStyleSheetPromise, createGlobalStyleSheetPromise };

src/core/method/set-build-in-helper.ts

@@ -26,7 +26,7 @@ async function processStyleSheets() {
   isProcessing = false;
 }
 
-export function setBuildIn(): void {
+export async function setBuildIn(): Promise<void> {
   if (typeof globalStyleSheetPromise === 'undefined') createGlobalStyleSheetPromise();
   if (!isProcessing && styleSheetQueue.length > 0) {
     isProcessing = true;