feat(tokens): remove components from token build (#3488)

Author: castastrophe

.changeset/clean-doors-fail.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-tools/gh-action-file-diff": minor
+---
+
+Update file table to specify if the file is deleted/moved and indicate the file size has decreased without showing percentages. This update also hardens the way in which the main file is highlighted in the table by checking for exact equals for looking for files "ending with" the file name.

.changeset/olive-poets-love.md

@@ -0,0 +1,19 @@
+---
+"@spectrum-css/tokens": major
+---
+
+### Breaking change
+
+This update removes the compiled `components` directory from the token output. Instead, customers are asked to source the theming data from the component's `theme/(express,spectrum,spectrum-two).css` and `index-theme.css`. For example:
+
+```
+import "@spectrum-css/actionbutton/dist/index-base.css";
+import "@spectrum-css/actionbutton/dist/index-theme.css";
+import "@spectrum-css/actionbutton/dist/themes/express.css";
+```
+
+In addition, the `custom-*-vars.css` files previously shipped in the `spectrum` and `express` folders will no longer be shipped separately. This data already exists in the `*-vars.css` file with a matching name. For example, `spectrum/custom-large-vars.css` already exists within `spectrum/large-vars.css`, concatenated with the token-generated output.
+
+### Minor
+
+Whitespace has been cleaned up in the exported content for readability.

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

@@ -175,8 +175,10 @@ async function run() {
 								const removedOnBranch = isRemoved(headByteSize, baseByteSize);
 								// @todo should there be any normalization before comparing the file names?
 								const isMainFile = readableFilename === mainFile;
-								const size = removedOnBranch ? " - " : bytesToSize(headByteSize);
-								const delta = `${printChange(headByteSize, baseByteSize)}${difference(baseByteSize, headByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`;
+								const size = removedOnBranch ? "🚨 deleted/moved" : bytesToSize(headByteSize);
+								const change = !removedOnBranch ? printChange(headByteSize, baseByteSize) : `⬇ ${bytesToSize(baseByteSize)}`;
+								const diff = difference(baseByteSize, headByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : "";
+								const delta = `${change}${removedOnBranch ? "" : diff}`;
 
 								return [
 									...table,
@@ -323,7 +325,13 @@ const makeTable = function (PACKAGES, filePath, path) {
 			if (main) mainFile = main.replace(/^.*\/dist\//, "");
 		}
 
-		const mainFileOnly = [...fileMap.keys()].filter((file) => file.endsWith(mainFile));
+		let mainFileOnly = [...fileMap.keys()].filter((file) => file === mainFile);
+
+		// If no main file is found, look for the first file matching the filename only
+		if (mainFileOnly.length === 0) {
+			mainFileOnly = [...fileMap.keys()].filter((file) => file.endsWith(mainFile));
+		}
+
 		const headMainSize = mainFileOnly.reduce(
 			(acc, filename) => {
 				const { headByteSize = 0 } = fileMap.get(filename);

tasks/component-builder.js

@@ -26,10 +26,10 @@ require("colors");
 const {
 	dirs,
 	relativePrint,
-	bytesToSize,
 	getPackageFromPath,
 	cleanFolder,
 	validateComponentName,
+	writeAndReport,
 	fetchContent,
 	copy,
 } = require("./utilities.js");
@@ -55,10 +55,20 @@ async function processCSS(
 		...postCSSOptions
 	} = {},
 ) {
-	if (!content)
-		return Promise.reject(
-			new Error("This function requires content be provided"),
-		);
+	if (!content) {
+		if (!fs.existsSync(input)) {
+			return Promise.reject(
+				new Error("This function requires that either content or an input path be provided")
+			);
+		}
+		else {
+			content = await fsp.readFile(input, "utf-8");
+
+			if (!content) {
+				return Promise.reject(new Error(`No content found for ${relativePrint(input, { cwd })}`));
+			}
+		}
+	}
 
 	const ctx = {
 		cwd,
@@ -107,36 +117,12 @@ async function processCSS(
 	}
 
 	const promises = [
-		fsp
-			.writeFile(output, formatted)
-			.then(() => {
-				const stats = fs.statSync(output);
-				return `${"✓".green}  ${relativePrint(output, { cwd }).padEnd(20, " ").yellow}  ${bytesToSize(stats.size).gray}`;
-			})
-			.catch((err) => {
-				if (!err) return;
-				console.log(
-					`${"✗".red}  ${relativePrint(output, { cwd }).yellow} not written`,
-				);
-				return Promise.reject(err);
-			}),
+		writeAndReport(formatted, output, { cwd }),
 	];
 
 	if (result.map) {
 		promises.push(
-			fsp
-				.writeFile(`${output}.map`, result.map.toString().trimStart())
-				.then(() => {
-					const stats = fs.statSync(output);
-					return `${"✓".green}  ${relativePrint(`${output}.map`, { cwd }).padEnd(20, " ").yellow}  ${bytesToSize(stats.size).gray}`;
-				})
-				.catch((err) => {
-					if (!err) return;
-					console.log(
-						`${"✗".red}  ${relativePrint(`${output}.map`, { cwd }).yellow} not written`,
-					);
-					return Promise.reject(err);
-				}),
+			writeAndReport(result.map.toString().trimStart(), `${output}.map`, { cwd }),
 		);
 	}
 
@@ -151,12 +137,10 @@ async function processCSS(
  * @returns Promise<void>
  */
 async function build({ cwd = process.cwd(), clean = false, componentName } = {}) {
-	const indexSourceCSS = path.join(cwd, "index.css");
-
 	// Nothing to do if there's no input file
-	if (!fs.existsSync(indexSourceCSS)) return;
+	if (!fs.existsSync(path.join(cwd, "index.css"))) return;
 
-	const content = await fsp.readFile(indexSourceCSS, "utf8");
+	const content = await fsp.readFile(path.join(cwd, "index.css"), "utf8");
 
 	if (!componentName || validateComponentName(componentName) !== true) {
 		componentName = getPackageFromPath(cwd);
@@ -170,7 +154,7 @@ async function build({ cwd = process.cwd(), clean = false, componentName } = {})
 	const indexOutputPath = path.join(cwd, "dist", "index.css");
 
 	return Promise.all([
-		processCSS(content, indexSourceCSS, indexOutputPath, {
+		processCSS(content, path.join(cwd, "index.css"), indexOutputPath, {
 			cwd,
 			clean,
 			skipMapping: true,
@@ -184,7 +168,7 @@ async function build({ cwd = process.cwd(), clean = false, componentName } = {})
 		}),
 		processCSS(
 			content,
-			indexSourceCSS,
+			path.join(cwd, "index.css"),
 			path.join(cwd, "dist", "index-base.css"),
 			{
 				cwd,

tasks/component-reporter.js

@@ -13,7 +13,6 @@
 
 /* eslint-disable no-console */
 const fs = require("fs");
-const fsp = fs.promises;
 const path = require("path");
 
 const postcss = require("postcss");
@@ -169,8 +168,7 @@ async function main({
 		return Promise.reject(new Error(`No source CSS file found at ${sourceCSS}`));
 	}
 
-	const content = await fsp.readFile(sourceCSS, "utf-8");
-	const processed = await processCSS(content, sourceCSS, undefined, {
+	const processed = await processCSS(undefined, sourceCSS, undefined, {
 		cwd,
 		skipMapping: true,
 		referencesOnly: false,