chore: update compare script to fix an issue when runs are parallelized (#2405)

Author: castastrophe

README.md

@@ -337,7 +337,12 @@ This project is leveraging caching from [Nx](https://nx.dev/) to speed up the bu
 
 This project includes several small scripts to help with common tasks.
 
-- `yarn compare`: This compares the current version of components with the previous versions published to NPM and output a list of all the changes that have been made. This is useful for reviewing changes before a release. The information is provided in the command-line output as well as in a simple web page that is opened in your default browser upon completion.  The web page includes links to the visual diffs for each component when the file sizes have changed. Components with no changes are not included in the output.
+- `yarn compare`: This compares the current version of components with the previous versions published to NPM and output a list of all the changes that have been made. This is useful for reviewing changes before a release. The information is provided in the command-line output as well as in a simple web page that is opened in your default browser upon completion. The web page includes links to the visual diffs for each component when the file sizes have changed.
+  - Components with no changes are not included in the output.
+  - To run comparisons on one or multiple components, `yarn compare` accepts a list of components as arguments. For example, `yarn compare button` will compare the current version of the button component with the previous version published to NPM. `yarn compare button checkbox` will compare the current version of the button and checkbox components with the previous versions published to NPM.
+  - Named components should be space-separated.
+  - Running `yarn compare` with no inputs will automatically run against all packages.
+  - **Note** that you must run `yarn build` before running `yarn compare` to ensure that the latest build is being compared.
 - `yarn refresh:env`: This copies values for the project's `.env` file (an asset never committed to the repo as it contains login secrets) by using the `.env.example` file as a template. This script is useful when you need to update the `.env` file with new values from the `.env.example` file or when you checkout or clean the repo and need to restore the `.env` file.
 - `yarn refresh:directory`: This will remove any deprecated package folders that are no longer in use. The goal is to make migrating to a new project architecture easier for the most number of users.
 - `yarn lint:components`: Provides helpful updates and warnings for a component's package.json file. This helps keep all components in alignment.

package.json

@@ -27,7 +27,7 @@
     "clean:docs": "rimraf dist",
     "clean:preview": "nx clean storybook",
     "cleaner": "nx run-many --target clean --projects",
-    "compare": "nx run-many --verbose --target compare --projects",
+    "compare": "node ./tasks/compare-compiled-output.js",
     "predev": "nx run-many --projects ui-icons,tokens --target build",
     "dev": "NODE_ENV=development BROWSERSYNC_OPEN=true gulp dev",
     "preinstall": "command -v nvm >/dev/null 2>&1 && nvm use || exit 0",

tasks/compare-compiled-output.js

@@ -136,7 +136,7 @@ async function processComponent(
 	if (!component) return Promise.reject("No component specified.");
 
 	cleanAndMkdir(join(output, "diffs", component));
-	cleanAndMkdir(join(output, "latest"));
+	cleanAndMkdir(join(pathing.latest, component));
 
 	const pkgPath = require.resolve(`@spectrum-css/${component}/package.json`) ?? join(cwd, component, "package.json");
 	const pkg = pkgPath && existsSync(pkgPath)
@@ -213,18 +213,18 @@ async function processComponent(
 				await tar
 					.extract({
 						file: tarballPath,
-						cwd: join(output, "latest"),
+						cwd: join(pathing.latest, component),
 						// Only unpack the dist folder
 						filter: (path) => path.startsWith("package/dist"),
 						strip: 2,
 					})
 					.catch((err) => warnings.push(err));
 			}
 
-			if (existsSync(join(output, "latest"))) {
+			if (existsSync(join(pathing.latest, component))) {
 				const files =
 					(await fg("**/*.css", {
-						cwd: join(output, "latest"),
+						cwd: join(pathing.latest, component),
 					})) ?? [];
 
 				if (files.length > 0) found++;
@@ -251,7 +251,7 @@ async function processComponent(
 			processFile(
 				filename,
 				join(cwd, component, "dist"),
-				join(output, "latest")
+				join(pathing.latest, component)
 			)
 		)
 	).then((results) => {