chore: Cleaned up build scripts

scripts/build.mjs

@@ -26,21 +26,35 @@ const RELEASE_FILES = [
 ];
 
 async function runTask(tag, cmd) {
-  report.stdout.info(`[${tag}] Working...`);
+  const frames = ['   ', '.  ', '.. ', '...'];
+  let frame = 0;
+
+  const writeProgress = (dots) =>
+    report.stdout.info(`\r[${tag}] Processing${dots}`);
+
+  writeProgress(frames[0]);
+  const timer = setInterval(() => {
+    frame = (frame + 1) % frames.length;
+    writeProgress(frames[frame]);
+  }, 300);
 
   try {
     await cmd();
+    clearInterval(timer);
     report.stdout.clearLine();
-    report.stdout.success(`[${tag}] Done\n`);
+    report.success(`[${tag}] Done!`);
   } catch (e) {
-    report.error(`[${tag}] Failed with: ${e.message}`);
+    clearInterval(timer);
+    report.error(`[${tag}] Failed with: ${e.stderr || e.message}`);
+    process.exit(1);
   }
 }
 
 (async () => {
   await runTask('Clean up', () => exec('npm run clean'));
-  await runTask('Component styles', () => buildComponents(true));
-  await runTask('Themes', () => buildThemes(true));
+  await runTask('Styles', () =>
+    Promise.all([buildComponents(true), buildThemes(true)])
+  );
 
   // https://github.com/microsoft/TypeScript/issues/14619
   await runTask('Components', () =>
@@ -50,46 +64,48 @@ async function runTask(tag, cmd) {
   );
 
   await runTask('Copying release files', async () => {
-    Promise.all([
+    await Promise.all([
       copyFile('scripts/_package.json', DEST_DIR('package.json')),
       ...RELEASE_FILES.map((file) => copyFile(file, DEST_DIR(file))),
     ]);
   });
 
-  await runTask('VSCode custom data + Web types', () =>
-    Promise.all([
-      writeFile(
-        DEST_DIR('igniteui-webcomponents.css-data.json'),
-        getVsCodeCssCustomData(customElements, {
-          hideCssPartsDocs: false,
-          hideCssPropertiesDocs: false,
-          hideLogs: true,
-        }),
-        'utf8'
-      ),
-      writeFile(
-        DEST_DIR('igniteui-webcomponents.html-data.json'),
-        getVsCodeHtmlCustomData(customElements, {
-          hideMethodDocs: true,
-          hideLogs: true,
-        }),
-        'utf8'
-      ),
-      writeFile(
-        DEST_DIR('web-types.json'),
-        getWebTypesData(customElements, {
-          hideMethodDocs: true,
-          hideCssPartsDocs: false,
-          hideLogs: true,
-        }),
-        'utf8'
-      ),
-    ])
+  await runTask(
+    'VSCode custom data + Web types',
+    async () =>
+      await Promise.all([
+        writeFile(
+          DEST_DIR('igniteui-webcomponents.css-data.json'),
+          getVsCodeCssCustomData(customElements, {
+            hideCssPartsDocs: false,
+            hideCssPropertiesDocs: false,
+            hideLogs: true,
+          }),
+          'utf8'
+        ),
+        writeFile(
+          DEST_DIR('igniteui-webcomponents.html-data.json'),
+          getVsCodeHtmlCustomData(customElements, {
+            hideMethodDocs: true,
+            hideLogs: true,
+          }),
+          'utf8'
+        ),
+        writeFile(
+          DEST_DIR('web-types.json'),
+          getWebTypesData(customElements, {
+            hideMethodDocs: true,
+            hideCssPartsDocs: false,
+            hideLogs: true,
+          }),
+          'utf8'
+        ),
+      ])
   );
 
-  await runTask('Copy skills directory', () => {
-    cp('skills', DEST_DIR('skills'), { recursive: true });
+  await runTask('Copying skills directory', async () => {
+    await cp('skills', DEST_DIR('skills'), { recursive: true });
   });
 
-  report.success('Done! 🎉');
+  report.success('\n🎉 Done! 🎉');
 })();

scripts/report.mjs

@@ -1,19 +1,21 @@
 import { stdout } from 'node:process';
-import { format, styleText } from 'node:util';
+import { styleText } from 'node:util';
 
 export default {
   error: (s) => console.error(styleText('red', s)),
-  success: (s) => console.info(styleText('green', s)),
+  success: (s) => console.log(styleText('green', s)),
   warn: (s) => console.warn(styleText('yellow', s)),
-  info: (s) => console.info(styleText('cyan', s)),
+  info: (s) => console.log(styleText('cyan', s)),
 
   stdout: {
     clearLine: () => {
-      stdout.clearLine(0);
-      stdout.cursorTo(0);
+      if (stdout.isTTY) {
+        stdout.clearLine(0);
+        stdout.cursorTo(0);
+      }
     },
-    success: (s) => stdout.write(format(styleText('green', s))),
-    warn: (s) => stdout.write(format(styleText('yellow', s))),
-    info: (s) => stdout.write(format(styleText('cyan', s))),
+    success: (s) => stdout.write(styleText('green', s)),
+    warn: (s) => stdout.write(styleText('yellow', s)),
+    info: (s) => stdout.write(styleText('cyan', s)),
   },
 };

scripts/sass.mjs

@@ -1,6 +1,5 @@
-import { mkdir, readFile, writeFile, glob } from 'node:fs/promises';
+import { mkdir, writeFile, glob } from 'node:fs/promises';
 import path from 'node:path';
-import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import autoprefixer from 'autoprefixer';
 import postcss from 'postcss';
@@ -22,14 +21,13 @@ const stripComments = () => {
 };
 stripComments.postcss = true;
 
-const _template = await readFile(
-  resolve(process.argv[1], '../styles.tmpl'),
-  'utf8'
-);
 const _postProcessor = postcss([autoprefixer, stripComments]);
 
 export function fromTemplate(content) {
-  return _template.replace(/<%\s*content\s*%>/, content);
+  return `
+  import { css } from 'lit';
+  export const styles = css\`${content}\`;
+  `;
 }
 
 export async function compileSass(src, compiler) {
@@ -61,9 +59,13 @@ export async function buildThemes(isProduction = false) {
 
         if (isProduction) {
           await mkdir(path.dirname(outputFile), { recursive: true });
-          writeFile(outputFile, await compileSass(sassFile, compiler), 'utf-8');
+          await writeFile(
+            outputFile,
+            await compileSass(sassFile, compiler),
+            'utf-8'
+          );
         } else {
-          writeFile(
+          await writeFile(
             outputFile,
             fromTemplate(await compileSass(sassFile, compiler)),
             'utf-8'
@@ -99,10 +101,10 @@ export async function buildComponents(isProduction = false) {
 
   try {
     await Promise.all(
-      paths.map(async (path) =>
+      paths.map(async (filePath) =>
         writeFile(
-          path.replace(/\.scss$/, '.css.ts'),
-          fromTemplate(await compileSass(path, compiler)),
+          filePath.replace(/\.scss$/, '.css.ts'),
+          fromTemplate(await compileSass(filePath, compiler)),
           'utf-8'
         )
       )