build(component-builder): legacy builder clean-up unused plugins

Author: castastrophe

.github/workflows/publish-site.yml

@@ -93,8 +93,7 @@ jobs:
             - name: Deploy
               uses: nwtgck/actions-netlify@v2
               with:
-                #   publish-dir: site/dist
-                  publish-dir: dist
+                  publish-dir: site/dist
                   production-branch: main
                   production-deploy: false
                   netlify-config-path: ./netlify.toml

.npmignore

@@ -3,7 +3,6 @@
 /node_modules
 /tasks
 /temp
-/gulpfile.js
 npm-debug.log
 /.github
 /dist/docs/

.storybook/main.js

@@ -42,65 +42,54 @@ module.exports = {
 	},
 	env: {
 		MIGRATED_PACKAGES: componentPkgs.filter((dir) => {
-			const pkg = require(resolve(componentsPath, dir, "package.json"));
-			if (
-				pkg.devDependencies &&
-				pkg.devDependencies["@spectrum-css/component-builder-simple"]
-			) {
-				return true;
-			}
-			return false;
+			const {
+				peerDependencies = {}
+			} = require(
+				resolve(componentsPath, dir, "package.json")
+			) ?? {};
+			return Boolean(peerDependencies["@spectrum-css/tokens"]);
 		}),
 	},
-	webpackFinal: function (config) {
-		// Removing the global alias as it conflicts with the global npm pkg
-		const { global, ...alias } = config.resolve.alias;
-		config.resolve.alias = alias;
-		let storybookRules =
-			config && config.module && config.module.rules
-				? config.module.rules.filter(
-						(rule) => !(rule.test && rule.test.toString().includes("css"))
-				  )
-				: [];
+	webpackFinal: async (config = {}) => {
+		if (!config.module) config.module = {};
+		if (!config.module.rules) config.module.rules = [];
+
+		config.module.rules = config.module.rules.map((f) => {
+			if (f && f.test && f.test.toString() === '/\\.css$/') {
+				f.test = /(node_modules|dist(\/|\\))(.*)\.css$/;
+			}
+			return f;
+		});
+
 		return {
 			...config,
-			stats: {
-				/* Suppress autoprefixer warnings from storybook build */
-				warningsFilter: [/autoprefixer: /],
-			},
-			/* Add support for root node_modules imports */
+			ignoreWarnings: [
+				...config.ignoreWarnings ?? [],
+				/autoprefixer: /
+			],
 			resolve: {
-				...(config.resolve ? config.resolve : {}),
+				...config.resolve ?? {},
 				modules: [
-					...(config.resolve ? config.resolve.modules : []),
+					...config.resolve.modules ?? [],
+					/* Add support for root node_modules imports */
 					resolve(__dirname, "../node_modules"),
 				],
 				alias: {
-					...(config.resolve ? config.resolve.alias : {}),
+					...config.resolve.alias ?? {},
 					...componentPkgs.reduce((pkgs, dir) => {
 						const pkg = require(resolve(componentsPath, dir, "package.json"));
 						pkgs[pkg.name] = resolve(componentsPath, dir);
 						return pkgs;
 					}, {}),
-				},
+				}
 			},
 			module: {
-				...(config.module ?? []),
+				...config.module ?? {},
 				rules: [
-					...storybookRules,
+					...config.module.rules ?? [],
 					{
-						test: /^\w+\.{ico,jpg,jpeg,png,gif,webp}$/i,
-						use: [
-							{
-								loader: "file-loader",
-								options: {
-									outputPath: (url) => `assets/images/${url.replace(/_\//g, "")}`,
-								},
-							},
-						],
-					},
-					{
-						test: /\.css$/i,
+						test: /\.css$/,
+						exclude: [/node_modules/, /dist/],
 						sideEffects: true,
 						use: [
 							{
@@ -113,61 +102,44 @@ module.exports = {
 								},
 							},
 							{
-								loader: "file-loader",
+								loader: 'file-loader',
 								options: {
-									name: "[path][name].[ext][query]",
+									name: '[path][name].[ext][query]',
 									outputPath: (url) => {
-										const cleanURL = url.replace(/_\//g, "");
-										if (/node_modules\/@spectrum-css/.test(url)) {
-											return `assets/css/${cleanURL.replace(/node_modules\/@spectrum-css\//g, "")}`;
+										const cleanUrl = url.replace(/_\//g, '');
+										if (/node_modules\/@spectrum-css/.test(cleanUrl)) {
+											return `assets/css/${cleanUrl.replace(/node_modules\/@spectrum-css\//g, "")}`;
 										}
-
-										return `assets/css/${cleanURL}`;
+										return `assets/css/${cleanUrl}`;
 									},
 									esModule: false,
 								},
 							},
 							{
-								loader: "postcss-loader",
+								// Gets options from `postcss.config.js` in your project root
+								loader: 'postcss-loader',
 								options: {
-									implementation: require("postcss"),
-									postcssOptions: {
-										config: resolve(__dirname, "postcss.config.js"),
-									},
-								},
-							},
+									implementation: require('postcss'),
+									sourceMap: true,
+								}
+							}
 						],
 					},
-					{
-						test: /\.js$/,
-						enforce: "pre",
-						use: ["source-map-loader"],
-					} /* Raw SVG loader */,
-					{
-						test: /\.svg$/i,
-						loader: "raw-loader",
-					},
-				],
-			},
+				]
+			}
 		};
 	},
 	framework: {
 		name: "@storybook/web-components-webpack5",
-		options: {},
 	},
 	features: {
 		/* Code splitting flag; load stories on-demand */
 		storyStoreV7: true,
 		/* Builds stories.json to help with on-demand loading */
 		buildStoriesJson: true,
+		lazyCompilation: true,
+		fsCache: true,
 	},
-	// refs: {
-	//   'swc': {
-	//     title: 'Spectrum Web Components',
-	//     url: 'https://opensource.adobe.com/spectrum-web-components/storybook/',
-	//     expanded: false,
-	//   },
-	// },
 	docs: {
 		autodocs: true, // see below for alternatives
 		defaultName: "Docs", // set to change the name of generated docs entries

.storybook/package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.5.4",
     "@spectrum-css/expressvars": "^3.0.9",
-    "@spectrum-css/site": "^4.0.4",
     "@spectrum-css/tokens": "^13.0.8",
     "@spectrum-css/ui-icons": "^1.1.1",
     "@spectrum-css/vars": "^9.0.8"
@@ -21,7 +20,6 @@
     "@babel/core": "^7.22.1",
     "@chromaui/addon-visual-tests": "^0.0.124",
     "@etchteam/storybook-addon-status": "^4.2.4",
-    "@spectrum-css/component-builder": "^4.0.21",
     "@storybook/addon-a11y": "^7.6.8",
     "@storybook/addon-actions": "~7.5",
     "@storybook/addon-console": "^1.2.3",
@@ -44,12 +42,8 @@
     "file-loader": "6.2.0",
     "lit": "^3.1.1",
     "lodash-es": "^4.17.21",
-    "postcss": "^7.0.36",
-    "postcss-class-prefix": "^0.3.0",
-    "postcss-loader": "^4.0.0",
-    "postcss-prefix-selector": "^1.16.0",
-    "postcss-selector-replace": "^1.0.2",
-    "postcss-warn-cleaner": "^0.1.9",
+    "postcss": "^8.4.33",
+    "postcss-loader": "^7.3.4",
     "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
     "react": "^18.0.0",

.storybook/postcss.config.js

@@ -7,13 +7,6 @@
 			"{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,
@@ -64,7 +57,6 @@
 				"{projectRoot}/decorators",
 				"{projectRoot}/*.js",
 				"{projectRoot}/*.html",
-				"{workspaceRoot}/components/*/dist",
 				{ "externalDependencies": ["storybook"] },
 				{ "env": "WATCH_MODE" }
 			],

.storybook/project.json

@@ -47,7 +47,6 @@
 | `--mod-actionbutton-icon-size`                                    |
 | `--mod-actionbutton-label-color`                                  |
 | `--mod-actionbutton-min-width`                                    |
-| `--mod-actionbutton-static-content-color`                         |
 | `--mod-actionbutton-text-to-visual`                               |
 | `--mod-animation-duration-100`                                    |
 | `--mod-button-animation-duration`                                 |