feat: create a single postcss entry point

.eslintrc

@@ -1,5 +1,6 @@
 {
 	"env": {
+		"browser": true,
 		"node": true,
 		"es2020": true
 	},
@@ -10,10 +11,10 @@
 	"rules": {
 		"brace-style": ["warn", "stroustrup", { "allowSingleLine": true }],
 		"func-call-spacing": ["warn", "never"],
-		"indent": ["warn", 2],
+		"indent": ["warn", "tab", { "ignoredNodes": ["TemplateLiteral *"] }],
 		"linebreak-style": ["warn", "unix"],
 		"no-console": 0,
-		"quotes": ["warn", "single"],
+		"quotes": ["warn", "double"],
 		"semi": ["warn", "always"],
 		"space-before-blocks": ["warn", "always"]
 	},

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

@@ -52,7 +52,7 @@ async function run() {
 		 * and not just reporting on the overall size of the compiled assets
 		 * @type boolean
 		 */
-		const hasDiff = baseOutput.size > 0;
+		const hasBase = baseOutput.size > 0;
 		// --------------- End evaluation  ---------------
 
 		/** Split the data by component package */
@@ -66,7 +66,7 @@ async function run() {
 		);
 
 		/** Calculate the overall size of the base branch's assets */
-		const overallBaseSize = hasDiff
+		const overallBaseSize = hasBase
 			? [...baseOutput.values()].reduce((acc, size) => acc + size, 0)
 			: undefined;
 
@@ -95,29 +95,35 @@ async function run() {
 			 * PR - base / base = change
 			 */
 			let changeSummary = "";
-			if (baseOutput.size > 0 && hasDiff && hasChange) {
+			if (baseOutput.size > 0 && hasBase && hasChange) {
 				changeSummary = `**Total change (Δ)**: ${printChange(overallHeadSize, overallBaseSize)} (${printPercentChange(overallHeadSize, overallBaseSize)})`;
-			} else if (baseOutput.size > 0 && hasDiff && !hasChange) {
+			} else if (baseOutput.size > 0 && hasBase && !hasChange) {
 				changeSummary = `No change in file sizes`;
 			}
 
 			if (changeSummary !== "") {
-				summary.push(...[
+				summary.push(
 					changeSummary,
-					"<small><em>Table reports on changes to a package's main file. Other changes can be found in the collapsed \"Details\" below.</em></small>",
+					"",
+					"<small><em>Table reports on changes to a package's main file. Other changes can be found in the collapsed <a href=\"#details\">Details</a> section below.</em></small>",
 					""
-				]);
+				);
 			}
 
-			markdown.push(`<details>`, `<summary><b>Details</b></summary>`, "");
+			markdown.push(
+				"<a name=\"details\"></a>",
+				`<details>`,
+				`<summary><b>Details</b></summary>`,
+				""
+			);
 
 			sections.map(({ name, filePath, headMainSize, baseMainSize, hasChange, mainFile, fileMap }) => {
 				if (!hasChange) return;
 
 				const data = [];
 
 				/** We only evaluate changes if there is a diff branch being used and this is the main file for the package */
-				if (hasDiff) {
+				if (hasBase) {
 					/**
 					 * If: the component folder exists in the original branch but not the PR
 					 * Or: the pull request file size is 0 or empty but the original branch has a size
@@ -155,8 +161,8 @@ async function run() {
 				const md = ["", `#### ${name}`, ""];
 				md.push(
 					...[
-						["File", "Head", ...(hasDiff ? ["Base", "Δ"] : [])],
-						[" - ", " - ", ...(hasDiff ? [" - ", " - "] : [])],
+						["File", "Head", ...(hasBase ? ["Base", "Δ"] : [])],
+						[" - ", " - ", ...(hasBase ? [" - ", " - "] : [])],
 					].map((row) => `| ${row.join(" | ")} |`),
 					...[...fileMap.entries()]
 						.reduce(
@@ -170,10 +176,11 @@ async function run() {
 									...table,
 									[
 										readableFilename === mainFile ? `**${readableFilename}**` : readableFilename,
-										isRemoved(headByteSize, baseByteSize) ? "**removed**" : isNew(headByteSize, baseByteSize) ? "**new**" : bytesToSize(headByteSize),
-										...(hasDiff ? [
+										// If the file was removed, note it's absense with a dash; otherwise, note it's size
+										isRemoved(headByteSize, baseByteSize) ? " - " : bytesToSize(headByteSize),
+										...(hasBase ? [
 											bytesToSize(baseByteSize),
-											`${printChange(headByteSize, baseByteSize)}${difference(headByteSize, baseByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`,
+											isRemoved(headByteSize, baseByteSize) ? "🚨 deleted, moved, or renamed" : isNew(headByteSize, baseByteSize) ? "🎉 **new**" : `${printChange(headByteSize, baseByteSize)}${difference(headByteSize, baseByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`,
 										] : []),
 									]
 								];
@@ -192,8 +199,8 @@ async function run() {
 		if (summaryTable.length > 0) {
 			// Add the headings to the summary table if it contains data
 			summaryTable = [
-				["Package", "Size", ...(hasDiff ? ["Δ"] : [])],
-				["-", "-", ...(hasDiff ? ["-"] : [])],
+				["Package", "Size", ...(hasBase ? ["Δ"] : [])],
+				["-", "-", ...(hasBase ? ["-"] : [])],
 				...summaryTable,
 			];
 
@@ -237,15 +244,15 @@ async function run() {
 			);
 			core.setOutput("total-size", headMainSize);
 
-			if (hasDiff) {
+			if (hasBase) {
 				const baseMainSize = [...baseOutput.entries()].reduce(
 					(acc, [_, size]) => acc + size,
 					0
 				);
 
 				core.setOutput(
 					"has-changed",
-					hasDiff && headMainSize !== baseMainSize ? "true" : "false"
+					hasBase && headMainSize !== baseMainSize ? "true" : "false"
 				);
 			}
 		} else {
@@ -379,11 +386,37 @@ const splitDataByPackage = function (dataMap, path, baseMap = new Map()) {
 
 		if (!fileMap.has(readableFilename)) {
 			fileMap.set(readableFilename, {
-				headByteSize: headByteSize,
+				headByteSize,
 				baseByteSize: baseMap.get(file),
 			});
-		} else {
-			throw new Error(`The file ${file} was found twice in the dataset`);
+		}
+
+		/** Update the component's table data */
+		PACKAGES.set(packageName, fileMap);
+	});
+
+	// Look for any base files not present in the head
+	[...baseMap.entries()].forEach(([file, baseByteSize]) => {
+		// Determine the name of the component
+		const parts = file.split(sep);
+		const componentIdx = parts.findIndex((part) => part === "dist") - 1;
+		const packageName = parts[componentIdx];
+
+		if (!filePath) {
+			filePath = `${file.replace(path, "")}/${parts.slice(componentIdx + 1, -1).join(sep)}`;
+		}
+
+		const readableFilename = file.replace(/^.*\/dist\//, "");
+
+		const fileMap = PACKAGES.has(packageName)
+			? PACKAGES.get(packageName)
+			: new Map();
+
+		if (!fileMap.has(readableFilename)) {
+			fileMap.set(readableFilename, {
+				headByteSize: dataMap.get(file),
+				baseByteSize,
+			});
 		}
 
 		/** Update the component's table data */

.github/workflows/build.yml

@@ -118,9 +118,9 @@ jobs:
               run: yarn nx reset
 
             ## --- BUILD --- ##
-            - name: Build components
+            - name: Build components & ui-icons
               shell: bash
-              run: yarn build
+              run: yarn ci
 
             ## --- UPLOAD (only ubuntu-latest at the moment) --- ##
             - name: Upload compiled assets & NX performance profile

.github/workflows/compare-results.yml

@@ -98,6 +98,31 @@ jobs:
                     ui-icons/dist/**
                   token: ${{ secrets.GITHUB_TOKEN }}
 
+            - name: Generate rich diff if changes detected
+              id: rich-diff
+              if: ${{ steps.compare.outputs.has-changed }}
+              shell: bash
+              run: yarn compare
+
+            - name: Upload changes
+              if: ${{ steps.compare.outputs.has-changed }}
+              uses: actions/upload-artifact@v4
+              with:
+                name: rich-diff
+                path: |
+                  .diff-output/index.html
+                  .diff-output/diffs/*/*.html
+                  components/typography/dist/index.css
+                  components/table/dist/index.css
+                  components/badge/dist/index.css
+                  components/button/dist/index.css
+                  components/card/dist/index.css
+                  components/icon/dist/index.css
+                  components/sidenav/dist/index.css
+                  tokens/dist/index.css
+                  node_modules/diff2html/bundles/css/diff2html.min.css
+                  node_modules/diff2html/bundles/js/diff2html.min.js
+
     fetch-build-artifacts:
         name: Fetch & validate build artifacts
         strategy:
@@ -172,7 +197,7 @@ jobs:
             - name: Build
               if: ${{ steps.download.outcome != 'success' }}
               shell: bash
-              run: yarn build
+              run: yarn ci
 
             - name: Upload compiled assets
               if: ${{ steps.download.outcome != 'success' }}

.github/workflows/development.yml

@@ -86,8 +86,8 @@ jobs:
         outputs:
             styles_added_files: ${{ steps.changed-files.outputs.styles_added_files }}
             styles_modified_files: ${{ steps.changed-files.outputs.styles_modified_files }}
-            # eslint_added_files: ${{ steps.changed-files.outputs.eslint_added_files }}
-            # eslint_modified_files: ${{ steps.changed-files.outputs.eslint_modified_files }}
+            eslint_added_files: ${{ steps.changed-files.outputs.eslint_added_files }}
+            eslint_modified_files: ${{ steps.changed-files.outputs.eslint_modified_files }}
         permissions:
             pull-requests: read
 
@@ -101,23 +101,22 @@ jobs:
                         - components/*/index.css
                         - components/*/themes/spectrum.css
                         - components/*/themes/express.css
-                    #   eslint:
-                    #     - components/*/package.json
-                    #     - components/*/project.json
-                    #     - components/*/stories/*.js
+                      eslint:
+                        - components/*/stories/*.js
 
     # -------------------------------------------------------------
     # Lint pre-compiled assets for consistency
     # -------------------------------------------------------------
     lint:
         name: Lint
+        if: ${{ contains(github.event.pull_request.labels.*.name, 'skip_lint') == false }}
         needs: [changed_files]
         uses: ./.github/workflows/lint.yml
         with:
             styles_added_files: ${{ needs.changed_files.outputs.styles_added_files }}
             styles_modified_files: ${{ needs.changed_files.outputs.styles_modified_files }}
-            # eslint_added_files: ${{ needs.changed_files.outputs.eslint_added_files }}
-            # eslint_modified_files: ${{ needs.changed_files.outputs.eslint_modified_files }}
+            eslint_added_files: ${{ needs.changed_files.outputs.eslint_added_files }}
+            eslint_modified_files: ${{ needs.changed_files.outputs.eslint_modified_files }}
         secrets: inherit
 
     # -------------------------------------------------------------

.github/workflows/lint.yml

@@ -12,12 +12,12 @@ on:
             styles_modified_files:
                 type: string
                 required: false
-            # eslint_added_files:
-            #     type: string
-            #     required: false
-            # eslint_modified_files:
-            #     type: string
-            #     required: false
+            eslint_added_files:
+                type: string
+                required: false
+            eslint_modified_files:
+                type: string
+                required: false
     workflow_call:
         inputs:
             styles_added_files:
@@ -26,12 +26,12 @@ on:
             styles_modified_files:
                 type: string
                 required: false
-            # eslint_added_files:
-            #     type: string
-            #     required: false
-            # eslint_modified_files:
-            #     type: string
-            #     required: false
+            eslint_added_files:
+                type: string
+                required: false
+            eslint_modified_files:
+                type: string
+                required: false
 
 permissions:
     contents: read
@@ -80,18 +80,18 @@ jobs:
                   fail_on_error: true
                   level: error
                   reporter: github-pr-check
-                  filter_mode: file
+                  filter_mode: diff_context
                 #   stylelint_input: "components/*/index.css components/*/themes/*.css"
                   stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
                   stylelint_config: stylelint.config.js
 
-            # - name: Run eslint on packages and stories
-            #   uses: reviewdog/action-eslint@v1.20.0
-            #   if: ${{ inputs.eslint_added_files != '' || inputs.eslint_modified_files != '' }}
-            #   with:
-            #       fail_on_error: true
-            #       level: error
-            #       reporter: github-pr-check
-            #       filter_mode: file
-            #     #   eslint_flags: "components/*/stories/*.js"
-            #       eslint_flags: "${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}"
+            - name: Run eslint on packages and stories
+              uses: reviewdog/action-eslint@v1.20.0
+              if: ${{ inputs.eslint_added_files != '' || inputs.eslint_modified_files != '' }}
+              with:
+                  fail_on_error: true
+                  level: error
+                  reporter: github-pr-check
+                  filter_mode: diff_context
+                #   eslint_flags: "components/*/stories/*.js"
+                  eslint_flags: "${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}"

.npmignore

@@ -1,11 +1,8 @@
 /src
-/docs
+/dist
 /node_modules
 /tasks
 /temp
-/gulpfile.js
 npm-debug.log
 /.github
-/dist/docs/
 /components
-/tools