chore(tokens): move tasks to nx workflow (#2362)

Author: castastrophe

.github/actions/file-diff/index.js

@@ -56,8 +56,8 @@ async function run() {
 		// --------------- End evaluation  ---------------
 
 		/** Split the data by component package */
-		const COMPONENTS = splitDataByComponent(pathOutput, diffOutput);
-		const sections = makeTable(COMPONENTS);
+		const { filePath, PACKAGES } = splitDataByPackage(pathOutput, path, diffOutput);
+		const sections = makeTable(PACKAGES, filePath, path);
 
 		const overallSize = [...pathOutput.values()].reduce(
 			(acc, size) => acc + size,
@@ -106,17 +106,17 @@ async function run() {
 
 			markdown.push(`<details>`, `<summary><b>Details</b></summary>`, "");
 
-			sections.map(({ name, totalSize, totalDiffSize, fileMap }) => {
+			sections.map(({ name, filePath, totalSize, totalDiffSize, hasChange, fileMap }) => {
 				const md = ["", `#### ${name}`, ""];
 				const data = [name, bytesToSize(totalDiffSize)];
 
-				if (totalDiffSize - totalSize === 0) return;
+				if (!hasChange) return;
 
 				if (hasDiff) {
 					// If a diff path was provided and the component folder doesn't exist,
 					// report that the compiled assets were removed
 					if (
-						!existsSync(join(diffPath, "components", name)) ||
+						!existsSync(join(diffPath, filePath, name)) ||
 						(totalSize === 0 && totalDiffSize > 0)
 					) {
 						data.push("🚨 deleted, moved, or renamed");
@@ -183,7 +183,7 @@ async function run() {
 		markdown.push(
 			"",
 			"<small>",
-			"* <em>Size determined by adding together the size of the main file (index.css) for all packages in the library.</em><br/>",
+			"* <em>Size determined by adding together the size of the main file for all packages in the library.</em><br/>",
 			"* <em>Results are not gzipped or minified.</em><br/>",
 			"* <em>An ASCII character in UTF-8 is 8 bits or 1 byte.</em>",
 			"</small>"
@@ -265,15 +265,25 @@ const printPercentChange = function (delta) {
 
 /**
  *
- * @param {Map<string, Map<string, { byteSize: number, diffByteSize: number }>>} COMPONENTS
- * @returns {Array<{ name: string, totalSize: number, totalDiffSize: number, hasChange: boolean, fileMap: Map<string, { byteSize: number, diffByteSize: number }>}>}
+ * @param {Map<string, Map<string, { byteSize: number, diffByteSize: number }>>} PACKAGES
+ * @param {string} filePath - The path to the component's dist folder from the root of the repo
+ * @param {string} path - The path from the github workspace to the root of the repo
+ * @returns {Array<{ name: string, filePath: string, totalSize: number, totalDiffSize: number, hasChange: boolean, fileMap: Map<string, { byteSize: number, diffByteSize: number }>}>}
  */
-const makeTable = function (COMPONENTS) {
+const makeTable = function (PACKAGES, filePath, path) {
 	const sections = [];
 
-	/** Next convert that component data into a comment */
-	COMPONENTS.forEach((fileMap, componentName) => {
-		const mainFileOnly = [...fileMap.keys()].filter((file) => file.endsWith("index.css"));
+	/** Next convert that component data into a detailed object for reporting */
+	PACKAGES.forEach((fileMap, packageName) => {
+		// Read in the main asset file from the package.json
+		const packagePath = join(path, filePath, packageName, "package.json");
+
+		let mainFile = "index.css";
+		if (existsSync(packagePath)) {
+			mainFile = require(join(path, filePath, packageName, "package.json"))?.main;
+		}
+
+		const mainFileOnly = [...fileMap.keys()].filter((file) => file.endsWith(mainFile));
 		const totalSize = mainFileOnly.reduce(
 			(acc, filename) => {
 				const { byteSize = 0 } = fileMap.get(filename);
@@ -296,7 +306,14 @@ const makeTable = function (COMPONENTS) {
 		 */
 		if (totalSize === totalDiffSize) return;
 
-		sections.push({ name: componentName, totalSize, totalDiffSize, hasChange, fileMap });
+		sections.push({
+			name: packageName,
+			filePath,
+			totalSize,
+			totalDiffSize,
+			hasChange,
+			fileMap
+		});
 	});
 
 	return sections;
@@ -305,20 +322,28 @@ const makeTable = function (COMPONENTS) {
 /**
  * Split out the data indexed by filename into groups by component
  * @param {Map<string, number>} dataMap
+ * @param {string} path
  * @param {Map<string, number>} diffMap
- * @returns {Map<string, Map<string, { byteSize: number, diffByteSize: number }>>}
+ * @returns {{ filePath: string, PACKAGES: Map<string, Map<string, { byteSize: number, diffByteSize: number }>>}}
  */
-const splitDataByComponent = function (dataMap, diffMap = new Map()) {
-	const COMPONENTS = new Map();
+const splitDataByPackage = function (dataMap, path, diffMap = new Map()) {
+	const PACKAGES = new Map();
+
+	let filePath;
 	[...dataMap.entries()].forEach(([file, byteSize]) => {
 		// Determine the name of the component
 		const parts = file.split(sep);
 		const componentIdx = parts.findIndex((part) => part === "dist") - 1;
-		const componentName = parts[componentIdx];
+		const packageName = parts[componentIdx];
+
+		if (!filePath) {
+			filePath = `${file.replace(path, "")}/${parts.slice(componentIdx + 1, -1).join(sep)}`;
+		}
+
 		const readableFilename = file.replace(/^.*\/dist\//, "");
 
-		const fileMap = COMPONENTS.has(componentName)
-			? COMPONENTS.get(componentName)
+		const fileMap = PACKAGES.has(packageName)
+			? PACKAGES.get(packageName)
 			: new Map();
 
 		if (!fileMap.has(readableFilename)) {
@@ -331,7 +356,8 @@ const splitDataByComponent = function (dataMap, diffMap = new Map()) {
 		}
 
 		/** Update the component's table data */
-		COMPONENTS.set(componentName, fileMap);
+		PACKAGES.set(packageName, fileMap);
 	});
-	return COMPONENTS;
+
+	return { filePath, PACKAGES };
 };

.github/workflows/build.yml

@@ -112,6 +112,8 @@ jobs:
               with:
                   path: |
                       components/*/dist/**
+                      tokens/dist/**
+                      ui-icons/dist/**
                   key: ${{ matrix.system }}-node${{ matrix.node-version }}-compiled-assets-${{ steps.set-SHAs.outputs.head }}
 
             - name: Build components
@@ -127,6 +129,8 @@ jobs:
               with:
                   path: |
                       ${{ github.workspace }}/components/*/dist/**
+                      ${{ github.workspace }}/tokens/dist/**
+                      ${{ github.workspace }}/ui-icons/dist/**
                       ${{ github.workspace }}/profile.json
                   name: ${{ matrix.system }}-node${{ matrix.node-version }}-compiled-assets-${{ steps.set-SHAs.outputs.head }}
                   # this is important, it lets us catch if the build failed silently

.github/workflows/publish-site.yml

@@ -85,10 +85,12 @@ jobs:
               with:
                   path: |
                       components/*/dist/**
+                      tokens/dist/**
+                      ui-icons/dist/**
                   key: ubuntu-latest-node18-compiled-assets-${{ steps.set-SHAs.outputs.head }}
 
             - name: Build storybook site
-              if: ${{ github.event.inputs.storybook-url == '' }}
+              if: ${{ inputs.storybook-url == '' }}
               shell: bash
               run: yarn ci:storybook --output-dir ../dist/preview
 

package.json

@@ -31,7 +31,7 @@
     "clean:preview": "nx clean storybook",
     "precompare": "yarn build",
     "compare": "node ./tasks/compare-compiled-output.js",
-    "predev": "nx run-many --projects @spectrum-css/ui-icons,@spectrum-css/tokens --target build",
+    "predev": "nx run-many --projects @spectrum-css/ui-icons,tokens --target build",
     "dev": "NODE_ENV=development BROWSERSYNC_OPEN=true gulp dev",
     "docs:mod": "node tasks/mod-extractor.js",
     "postdocs:mod": "prettier --cache --write components/*/metadata/*.md > /dev/null",

tasks/compare-compiled-output.js

@@ -20,9 +20,6 @@ const Diff2Html = require("diff2html");
 
 require("colors");
 
-const util = require("util");
-const exec = util.promisify(require("child_process").exec);
-
 const pathing = {
 	root: join(__dirname, "../"),
 	components: join(__dirname, "../components"),
@@ -44,10 +41,12 @@ env.addFilter("print", (data) => JSON.stringify(data, null, 2));
 const log = {
 	error: (err) => process.stderr.write(`${err}\n\n`),
 	write: (msg) => process.stdout.write(msg),
-	writeTable: (data, padding = 30) => {
+	writeTable: (data, { min = 20, max = 30 } = {}) => {
 		// This utility function is used to print a table of data to the console
-		const table = (data = [], size = padding) =>
-			data.map((row) => `${row ?? " "}`.padEnd(size)).join("");
+		const table = (data = []) => {
+			return data.map((row, idx) => `${row ?? " "}`.padEnd(idx === 0 ? max : min)).join("");
+		};
+
 		process.stdout.write(`${table(data)}\n`);
 	},
 };
@@ -129,7 +128,7 @@ async function generateDiff(
 async function processComponent(
 	component,
 	{
-		cwd = process.cwd(),
+		cwd,
 		output = pathing.output,
 		cacheLocation = pathing.cache,
 	}
@@ -139,11 +138,15 @@ async function processComponent(
 	cleanAndMkdir(join(output, "diffs", component));
 	cleanAndMkdir(join(output, "latest"));
 
-	const pkgPath = join(cwd, component, "package.json");
-	const pkg = existsSync(pkgPath)
+	const pkgPath = require.resolve(`@spectrum-css/${component}/package.json`) ?? join(cwd, component, "package.json");
+	const pkg = pkgPath && existsSync(pkgPath)
 		? require(pkgPath)
 		: { name: `@spectrum-css/${component}` };
 
+	if (!cwd && pkgPath) {
+		cwd = dirname(pkgPath).split("/").slice(0, -1).join("/");
+	}
+
 	let tag;
 	let found = 0;
 
@@ -312,9 +315,7 @@ async function main(
 	output,
 	{ skipCache = false } = {}
 ) {
-	let buildAllComponents = false;
 	if (!components || components.length === 0) {
-		buildAllComponents = true;
 		components = allComponents;
 	}
 
@@ -339,7 +340,6 @@ async function main(
 	const results = await Promise.all(
 		components.map(async (component) => {
 			return processComponent(component, {
-				cwd: pathing.components,
 				output: pathing.output,
 				cacheLocation: pathing.cache,
 			}).catch((err) =>
@@ -399,14 +399,19 @@ async function main(
 		});
 
 		// This is our report header to indicate the start of a new component's data
-		log.writeTable([`\n${_.pad(` ${component} `, 20, "-").cyan}\n`]);
+		log.write(`\n${_.pad(` ${component} `, 20, "-").cyan}\n`);
 
 		if (warnings.length > 0) {
 			warnings.forEach((warning) => log.write(`${warning}\n`));
 		}
 
+		const maxColumnWidth = files.reduce((max, file) => {
+			if (file.length > max) max = file.length;
+			return max;
+		}, 30);
+
 		// Write a table of the file sizes to the console for easy comparison
-		log.writeTable(["Filename", "Size", "Size (release)"], 20);
+		log.writeTable(["Filename", "Size", "Size (release)"], { min: 15, max: maxColumnWidth + 5});
 
 		files.forEach(async (file) => {
 			let hasFileChange = false;
@@ -416,7 +421,7 @@ async function main(
 				`${file}`.green,
 				local?.size ? `${bytesToSize(local.size)}`.gray : `** removed **`.red,
 				npm?.size ? `${bytesToSize(npm.size)}`.gray : `** new **`.yellow,
-			]);
+			], { min: 25, max: maxColumnWidth + 15});
 
 			if (local?.size && npm?.size && local.size !== npm.size) {
 				hasFileChange = true;

tokens/package.json

@@ -14,22 +14,9 @@
     "url": "https://github.com/adobe/spectrum-css/issues"
   },
   "main": "dist/index.css",
-  "scripts": {
-    "build": "run-s convert:tokens css:prepare format:results clean:empty",
-    "build:tokens": "style-dictionary build --config style-dictionary.config.js && postcss --replace dist/css/*.css",
-    "clean": "rimraf dist",
-    "clean:empty": "find dist -type f -empty -delete",
-    "concat:dist": "concat-cli -f dist/css/*.css dist/css/**/*.css -o dist/index.css",
-    "convert:tokens": "run-p build:tokens copy:*",
-    "copy:express": "postcss --dir dist/css/express/ custom-express/*.css",
-    "copy:spectrum": "postcss --dir dist/css/spectrum/ custom-spectrum/*.css",
-    "css:prepare": "yarn concat:dist && postcss --replace dist/index.css",
-    "format:results": "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write dist/"
-  },
   "devDependencies": {
     "@adobe/spectrum-tokens": "12.23.1",
-    "concat-cli": "^4.0.0",
-    "npm-run-all": "^4.1.5",
+    "@nxkit/style-dictionary": "^3.0.2",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -40,27 +27,10 @@
     "postcss-rgb-mapping": "^1.0.1",
     "postcss-sorting": "^8.0.2",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.1",
     "style-dictionary": "^3.8.0",
     "style-dictionary-sets": "^2.3.0"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "nx": {
-    "targets": {
-      "build": {
-        "inputs": [
-          "{workspaceRoot}/postcss.config.js",
-          "{workspaceRoot}/style-dictionary.config.js",
-          "{workspaceRoot}/utilities/style-dictionary.utils.js",
-          "{workspaceRoot}/custom-express/*.css",
-          "{workspaceRoot}/custom-spectrum/*.css"
-        ]
-      }
-    },
-    "includedScripts": [
-      "build"
-    ]
   }
 }