fix: Refactor styles.mjs to account for style generation order.

.gitignore

@@ -68,3 +68,4 @@ resolved-tailwind-config.ts
 safelist.txt
 *.lit.ts
 *.generated.css
+*.scoped.css

package.json

@@ -103,6 +103,7 @@
     "eslint-plugin-react": "^7.23.0",
     "eslint-plugin-storybook": "^0.6.12",
     "gaze": "^1.1.3",
+    "glob": "^10.2.7",
     "husky": "^8.0.3",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",

scripts/styles.mjs

@@ -1,20 +1,14 @@
 /* eslint-disable global-require */
 /* eslint-disable no-console */
-import yargs from 'yargs';
-import gaze from 'gaze';
 import postcss from 'postcss';
 import fs from 'fs';
 import path from 'path';
-import glob from 'glob';
+import { glob } from 'glob';
+import { writeFile, readFile } from 'node:fs/promises';
 import outline from '../outline.config.js';
 import config from '@phase2/outline-config/postcss.config';
 import { addScopeToStyles } from '@phase2/outline-core/src/internal/light-dom.mjs';
 
-const options = yargs.option('watch', {
-  type: 'boolean',
-  describe: 'Watch the file system for changes and render automatically',
-}).argv;
-
 /**
  * Function declared via watcher to handle looping in any globally focus style generation.
  */
@@ -119,88 +113,66 @@ ${result.css}\`;`,
 };
 
 /**
- * Function to wrap all generic .css files with CSS template literals suitable for consumption via Lit.
+ * Write light dom styles files.
  *
  * @param {string} filepath
+ * @param {string} fileExtension
+ * @param {string} cssPrefix
  */
-const createLightDomStyles = filepath => {
-  fs.readFile(filepath, 'utf8', (err, css) => {
-    const nFilePath = `${filepath.replace(
-      '.global.',
-      '.global.scoped.'
-    )}.lit.ts`;
-    const componentName = path.basename(filepath, '.global.css');
-    postcss([...config.plugins])
-      .process(css, { from: filepath, to: nFilePath })
-      .then(result => {
-        const newCss = addScopeToStyles(result.css, componentName);
-        fs.writeFile(
-          nFilePath,
-          `
-import { css } from 'lit';
-export default css\`
-/* Scoped CSS. */
-${newCss}\`;`,
-          () => true
-        );
-      });
-  });
-  fs.readFile(filepath, 'utf8', (err, css) => {
-    const nFilePath = filepath.replace('.global.', '.global.scoped.');
-    const componentName = path.basename(filepath, '.global.css');
-    postcss([...config.plugins])
-      .process(css, { from: filepath, to: nFilePath })
-      .then(result => {
-        const newCss = addScopeToStyles(result.css, componentName);
-        fs.writeFile(nFilePath, newCss, () => true);
-      });
+const writeLightDomStyles = async (
+  filepath,
+  fileExtension = '',
+  cssPrefix = ''
+) => {
+  const css = await readFile(filepath, 'utf8');
+  const nFilePath = `${filepath.replace(
+    '.global.',
+    '.global.scoped.'
+  )}${fileExtension}`;
+  const componentName = path.basename(filepath, '.global.css');
+  const result = await postcss([...config.plugins]).process(css, {
+    from: filepath,
+    to: nFilePath,
   });
+  const newCss = addScopeToStyles(result.css, componentName);
+  const data =
+    cssPrefix === ''
+      ? newCss
+      : `${cssPrefix}
+    ${newCss}\`;`;
+  await writeFile(nFilePath, data);
 };
 
-// Run the global style generation.
-createCssGlobals();
+/**
+ * Function to wrap all generic .css files with CSS template literals suitable for consumption via Lit.
+ *
+ * @param {string} filepath
+ */
+const createLightDomStyles = async filepath => {
+  const cssPrefix = `import { css } from 'lit';
+  export default css\`
+  /* Scoped CSS. */`;
+  await writeLightDomStyles(filepath, '.lit.ts', cssPrefix);
+
+  await writeLightDomStyles(filepath);
+};
 
 // Add scoping to any *.global.css files.
 // Allow dot files to allow class-based scoping.
-glob('packages/**/*.global.css', { dot: true }, (err, files) => {
-  files.forEach(createLightDomStyles);
+const globalCssFiles = await glob('packages/**/*.global.css', {
+  dot: true,
 });
 
-// Run the component style generation.
-glob(
-  'packages/**/*.css',
-  { ignore: ['packages/outline-storybook/**/*.css', '.storybook/**/*.css'] },
-  (err, files) => {
-    files.forEach(createCssLiterals);
-  }
-);
-
-// Watch mode with --watch in cli.
-// if (options.watch) {
-//   // Watch globals.
-//   gaze('*.css', (err, watcher) => {
-//     watcher.on('added', createCssGlobals);
-//     watcher.on('changed', createCssGlobals);
-//   });
+// Await for light dom styles since we may include the generated files further down the chain.
+for await (const globalCssFile of globalCssFiles) {
+  await createLightDomStyles(globalCssFile);
+}
 
-//   // Watch components global scoping.
-//   gaze(
-//     'packages/**/*.global.css',
-//     { dot: true },
-//     (err, watcher) => {
-//       watcher.on('added', createLightDomStyles);
-//       watcher.on('changed', createLightDomStyles);
-//     }
-//   );
-// }
+// Run the component style generation.
+const componentCss = await glob('packages/**/*.css', {
+  ignore: ['packages/outline-storybook/**/*.css', '.storybook/**/*.css'],
+});
+componentCss.forEach(createCssLiterals);
 
-//   // Watch components.
-//   gaze(
-//     'packages/**/*.css',
-//     { ignore: ['**/dist/**/*.css', '**/packages/outline-storybook/**/*.css'] },
-//     (err, watcher) => {
-//       watcher.on('added', createCssLiterals);
-//       watcher.on('changed', createCssLiterals);
-//     }
-//   );
-// }
+// Run the global style generation.
+createCssGlobals();