feat!: migrate processors to standard postcss config; add postcss-reporter

Author: castastrophe

.storybook/package.json

@@ -47,6 +47,7 @@
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.33",
     "postcss-class-prefix": "^0.3.0",
+    "postcss-load-config": "^5.0.2",
     "postcss-loader": "^4.0.0",
     "postcss-prefix-selector": "^1.16.0",
     "postcss-selector-replace": "^1.0.2",

.storybook/postcss.config.js

@@ -1,39 +1,77 @@
-const { resolve, basename } = require("path");
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+const { resolve, basename, dirname } = require("path");
 const { existsSync } = require("fs");
+
 const warnCleaner = require("postcss-warn-cleaner");
 
-const simpleBuilder = require("@spectrum-css/component-builder-simple/css/processors.js");
-const legacyBuilder = require("@spectrum-css/component-builder/css/processors.js");
+const simpleBuilder = dirname(
+	require.resolve("@spectrum-css/component-builder-simple", {
+		paths: [__dirname, resolve(__dirname, "../")],
+	})
+) ?? resolve(__dirname, "../tools/component-builder-simple");
 
-/**
- * Determines the package name from a file path
- * @param {string} filePath
- * @returns {string}
- */
-function getPackageFromPath(filePath) {
-	return filePath.match(`(components|@spectrum-css)\/(.*?)\/`)?.[2];
-}
+const legacyBuilder = dirname(
+	require.resolve("@spectrum-css/component-builder", {
+		paths: [__dirname, resolve(__dirname, "../")],
+	})
+) ?? resolve(__dirname, "../tools/component-builder");
+
+const postcssrc = require("postcss-load-config");
+
+module.exports = async (ctx) => {
+	const file = ctx && Object.keys(ctx) ? ctx.file ?? ctx.to ?? ctx.from : undefined;
+
+	/**
+	 * Determines the package name from a file path
+	 * @param {string} filePath
+	 * @returns {string}
+	 */
+	function getPackageFromPath(filePath) {
+		if (!filePath) return;
+
+		// Capture component name from a local or node_modules syntax
+		const componentCheck = filePath.match(/(?:components|@spectrum-css)\/(\w+)/);
+		if (componentCheck && componentCheck?.[1]) return componentCheck[1];
+
+		// Check local root-level packages such as ui-icons & tokens
+		const pkgCheck = filePath.match(/\/(ui-icons|tokens)\//);
+		if (pkgCheck && pkgCheck?.[1]) return pkgCheck[1];
+
+		return;
+	}
+
+	const plugins = [];
 
-module.exports = (ctx) => {
-	let plugins = [];
-	const componentPath = resolve(__dirname, "../components");
     /** @todo put together a more robust fallback determination */
-	const folderName = getPackageFromPath(ctx.file) ?? "tokens";
-	const pkgPath = resolve(componentPath, folderName, "package.json");
+	const folderName = file && getPackageFromPath(file);
+
+	const componentPath = resolve(__dirname, "../components");
+	const pkgPath = folderName && resolve(componentPath, folderName, "package.json");
 
 	/**
 	 * For our token libraries, include a little extra parsing to allow duplicate
 	 * token values to exist in parallel and be toggled using args in storybook.
 	 */
-	if (["expressvars", "vars", "tokens"].includes(folderName)) {
+	if (folderName && ["expressvars", "vars"].includes(folderName)) {
 		const isExpress = folderName === "expressvars";
-		const modifier = basename(ctx.file, ".css").startsWith("spectrum")
-			? basename(ctx.file, ".css")
+		const modifier = basename(file, ".css").startsWith("spectrum")
+			? basename(file, ".css")
 					.replace("spectrum-", "")
 					.replace("global", "")
 			: "";
 
-		plugins = [
+		plugins.push(
 			require("postcss-import")(),
 			require("postcss-selector-replace")({
 				before: [":root"],
@@ -55,8 +93,18 @@ module.exports = (ctx) => {
 						}),
 				  ]
 				: []),
-		];
-	} else if (existsSync(pkgPath)) {
+		);
+	} else if (folderName && folderName === "tokens") {
+		await postcssrc({
+			cwd: resolve(componentPath, folderName),
+			env: process.env.NODE_ENV ?? "development",
+			from: ctx.from ?? file,
+			to: ctx.to ?? file,
+		}).then((result) => {
+			if (!result?.plugins) return;
+			plugins.push(...result.plugins);
+		});
+	} else if (pkgPath && existsSync(pkgPath)) {
 		/**
 		 * If a path has a package.json, we can assume it's a component and
 		 * we want to leverage the correct plugins for it.
@@ -76,13 +124,38 @@ module.exports = (ctx) => {
 		if (
 			deps.includes("@spectrum-css/vars")
 		) {
-			plugins.push(...legacyBuilder.processors);
+			await postcssrc({
+				cwd: resolve(componentPath, folderName),
+				env: process.env.NODE_ENV ?? "development",
+				from: ctx.from ?? file,
+				to: ctx.to ?? file,
+			}, legacyBuilder).then((result) => {
+				if (!result?.plugins) return;
+				plugins.push(...result.plugins);
+			});
+		} else if (ctx.file.split("/").includes("themes")) {
+			await postcssrc({
+				cwd: resolve(componentPath, folderName),
+				env: process.env.NODE_ENV ?? "development",
+				from: ctx.from ?? file,
+				to: ctx.to ?? file,
+				splitinatorOptions: {
+					noSelectors: false,
+				},
+			}, simpleBuilder).then((result) => {
+				if (!result?.plugins) return;
+				plugins.push(...result.plugins);
+			});
 		} else {
-			if (ctx.file.split("/").includes("themes")) {
-				plugins.push(...simpleBuilder.getProcessors({ noSelectors: false }));
-			} else {
-				plugins.push(...simpleBuilder.getProcessors());
-			}
+			await postcssrc({
+				cwd: resolve(componentPath, folderName),
+				env: process.env.NODE_ENV ?? "development",
+				from: ctx.from ?? file,
+				to: ctx.to ?? file,
+			}, simpleBuilder).then((result) => {
+				if (!result?.plugins) return;
+				plugins.push(...result.plugins);
+			});
 		}
 	}
 

.storybook/project.json

@@ -7,16 +7,8 @@
 			"{projectRoot}/*.{js,html}"
 		]
 	},
-	"implicitDependencies": [
-		"@spectrum-css/*",
-		"!@spectrum-css/generator",
-		"!@spectrum-css/bundle-builder",
-		"!@spectrum-css/component-builder",
-		"!@spectrum-css/component-builder-simple"
-	],
 	"targets": {
 		"clean": {
-			"cache": true,
 			"inputs": [
 				"{projectRoot}/storybook-static",
 				{ "externalDependencies": ["rimraf"] }
@@ -31,8 +23,13 @@
 			}
 		},
 		"build": {
-			"cache": true,
-			"dependsOn": ["^build"],
+			"dependsOn": [
+				"^build",
+				{
+					"target": "build",
+					"projects": "ui-icons"
+				}
+			],
 			"inputs": [
 				"{projectRoot}/assets",
 				"{projectRoot}/decorators",
@@ -58,7 +55,13 @@
 		},
 		"start": {
 			"cache": true,
-			"dependsOn": ["^build"],
+			"dependsOn": [
+				"^build",
+				{
+					"target": "build",
+					"projects": "ui-icons"
+				}
+			],
 			"inputs": [
 				"{projectRoot}/assets",
 				"{projectRoot}/decorators",

components/README.md

@@ -13,8 +13,6 @@ Each component has the following files:
 - `themes/*.css` - The theme-specific styles for the component.
 - `stories/*.stories.js` and `stories/template.js` - The storybook assets for rendering components in the Storybook tool and eventually to be used for visual regression testing.
 
-See [documentation generation](/tools/bundle-builder/docs/README.md) documentation for more information on the properties available within the `.yml` files.
-
 ## Editing an existing component
 
 1. Run `gulp dev` in the root of the project to begin developing.

components/accordion/gulpfile.js

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });

components/accordion/index.js

@@ -18,6 +18,9 @@
     "@spectrum-css/icon": ">=4",
     "@spectrum-css/tokens": ">=13"
   },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

components/accordion/package.json

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });

components/actionbar/gulpfile.js

@@ -21,6 +21,9 @@
     "@spectrum-css/popover": ">=6",
     "@spectrum-css/tokens": ">=13"
   },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

components/actionbar/index.js

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });

components/actionbar/package.json

@@ -24,7 +24,8 @@
     }
   },
   "devDependencies": {
-    "@spectrum-css/commons": "^9.1.0"
+    "@spectrum-css/commons": "^9.1.0",
+    "@spectrum-css/component-builder-simple": "^5.0.0"
   },
   "publishConfig": {
     "access": "public"

components/actionbutton/gulpfile.js

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });

components/actionbutton/index.js

@@ -23,6 +23,9 @@
       "optional": true
     }
   },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

components/actionbutton/package.json

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });

components/actiongroup/gulpfile.js

@@ -21,6 +21,9 @@
     "@spectrum-css/popover": ">=6",
     "@spectrum-css/tokens": ">=13"
   },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

components/actiongroup/index.js

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });

components/actiongroup/package.json

@@ -26,6 +26,9 @@
       "optional": true
     }
   },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

components/actionmenu/gulpfile.js

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });

components/actionmenu/index.js

@@ -30,6 +30,9 @@
       "optional": true
     }
   },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

components/actionmenu/package.json

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder");
+
+builder.default({ cwd: __dirname });

components/alertbanner/gulpfile.js

@@ -17,6 +17,9 @@
   "peerDependencies": {
     "@spectrum-css/vars": ">=9"
   },
+  "devDependencies": {
+    "@spectrum-css/component-builder": "^6.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

components/alertbanner/index.js

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });

components/alertbanner/package.json

@@ -23,6 +23,9 @@
       "optional": true
     }
   },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

components/alertdialog/gulpfile.js

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });

components/alertdialog/index.js

@@ -27,6 +27,9 @@
       "optional": true
     }
   },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^5.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

components/alertdialog/package.json

@@ -0,0 +1,3 @@
+const builder = require("@spectrum-css/component-builder-simple");
+
+builder.default({ cwd: __dirname });