feat: pull out dev task from bundle-builder

.storybook/postcss.config.js

@@ -10,49 +10,68 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-const { resolve, basename } = require("path");
+const { resolve, basename, dirname } = require("path");
 const { existsSync } = require("fs");
 
 const warnCleaner = require("postcss-warn-cleaner");
 
-const simpleBuilder = path.dirname(
-	require.resolve("@spectrum-css/component-builder-simple")
-);
-const legacyBuilder = path.dirname(
-	require.resolve("@spectrum-css/component-builder")
-);
+const simpleBuilder = dirname(
+	require.resolve("@spectrum-css/component-builder-simple", {
+		paths: [__dirname, resolve(__dirname, "../")],
+	})
+) ?? resolve(__dirname, "../tools/component-builder-simple");
+
+const legacyBuilder = dirname(
+	require.resolve("@spectrum-css/component-builder", {
+		paths: [__dirname, resolve(__dirname, "../")],
+	})
+) ?? resolve(__dirname, "../tools/component-builder");
 
 const postcssrc = require("postcss-load-config");
 
-/**
- * Determines the package name from a file path
- * @param {string} filePath
- * @returns {string}
- */
-function getPackageFromPath(filePath) {
-	return filePath.match(`(components|@spectrum-css)\/(.*?)\/`)?.[2];
-}
-
-module.exports = (ctx) => {
-	let plugins = [];
-	const componentPath = resolve(__dirname, "../components");
+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 = [];
+
     /** @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"],
@@ -74,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.
@@ -92,36 +121,42 @@ module.exports = (ctx) => {
 			...Object.keys(devDependencies),
 		])];
 
-		let processors = [];
 		if (
 			deps.includes("@spectrum-css/vars")
 		) {
-			processors = postcssrc({
+			await postcssrc({
 				cwd: resolve(componentPath, folderName),
-				env: process.env.NODE_ENV || "development",
-				from: ctx.file,
-				to: ctx.file,
-			}, legacyBuilder).then((result) => result.plugins);
+				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")) {
-			processors = postcssrc({
+			await postcssrc({
 				cwd: resolve(componentPath, folderName),
-				env: process.env.NODE_ENV || "development",
-				from: ctx.file,
-				to: ctx.file,
+				env: process.env.NODE_ENV ?? "development",
+				from: ctx.from ?? file,
+				to: ctx.to ?? file,
 				splitinatorOptions: {
 					noSelectors: false,
 				},
-			}, simpleBuilder).then((result) => result.plugins);
+			}, simpleBuilder).then((result) => {
+				if (!result?.plugins) return;
+				plugins.push(...result.plugins);
+			});
 		} else {
-			processors = postcssrc({
+			await postcssrc({
 				cwd: resolve(componentPath, folderName),
-				env: process.env.NODE_ENV || "development",
-				from: ctx.file,
-				to: ctx.file,
-			}, simpleBuilder).then((result) => result.plugins);
+				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);
+			});
 		}
-
-		plugins.push(...processors);
 	}
 
 	/**

.storybook/project.json

@@ -10,7 +10,6 @@
 	"implicitDependencies": [
 		"@spectrum-css/*",
 		"!@spectrum-css/generator",
-		"!@spectrum-css/bundle-builder",
 		"!@spectrum-css/component-builder",
 		"!@spectrum-css/component-builder-simple"
 	],

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.

nx.json

@@ -54,7 +54,7 @@
 			"executor": "nx:run-commands",
 			"options": {
 				"commands": [
-					"gulp --gulpfile {projectRoot}/gulpfile.js",
+					"node {projectRoot}/index.js",
 					"node ./tasks/mod-extractor.js {projectRoot}"
 				],
 				"forwardAllArgs": true,

package.json

@@ -18,7 +18,7 @@
     "postbuild:all": "test -d .storybook/storybook-static && rimraf dist/preview && mv .storybook/storybook-static dist/preview || exit 0",
     "build:preview": "nx build storybook",
     "prebuild:site": "yarn builder tag:component,ui-icons",
-    "build:site": "gulp buildDocs -LLL",
+    "build:site": "node ./site/tasks/builder.js",
     "builder": "nx run-many --target build --projects",
     "cache:clean": "nx reset",
     "ci": "yarn build:all",
@@ -28,8 +28,8 @@
     "clean:preview": "nx clean storybook",
     "cleaner": "nx run-many --target clean --projects",
     "compare": "node ./tasks/compare-compiled-output.js",
-    "predev": "nx run-many --projects ui-icons,tokens --target build",
-    "dev": "NODE_ENV=development BROWSERSYNC_OPEN=true gulp devHeavy",
+    "predev": "nx run-many --projects ui-icons,tag:component --target build",
+    "dev": "node ./site/tasks/server.js",
     "preinstall": "command -v nvm >/dev/null 2>&1 && nvm use || exit 0",
     "lint": "yarn linter tag:component --verbose",
     "linter": "nx run-many --target lint --verbose --projects",
@@ -66,16 +66,16 @@
     "@nx/devkit": "^17.2.8",
     "@spectrum-css/expressvars": "^3.0.9",
     "@spectrum-css/vars": "^9.0.8",
+    "browser-sync": "^3.0.2",
     "colors": "^1.4.0",
     "conventional-changelog-spectrum": "^1.0.2",
+    "dependency-solver": "^1.0.6",
     "diff": "^5.1.0",
     "diff2html": "^3.4.45",
     "fast-glob": "^3.3.2",
     "gh-pages": "^6.1.1",
-    "gulp": "^4.0.0",
-    "gulp-replace": "^1.0.0",
-    "gulplog": "^1.0.0",
     "husky": "^8.0.3",
+    "js-yaml": "^4.1.0",
     "lerna": "^6.6.2",
     "lint-staged": "^14.0.0",
     "loadicons": "^1.0.0",
@@ -89,6 +89,7 @@
     "prettier": "^2.8.8",
     "prettier-package-json": "^2.8.0",
     "prismjs": "^1.23.0",
+    "pug": "^3.0.2",
     "rimraf": "^5.0.5",
     "semver": "^7.5.1",
     "stylelint": "^15.11.0",

plugins/postcss-dropdupedvars/index.js

@@ -25,7 +25,10 @@ module.exports = () => {
 				if (seen[decl.prop]) {
 					decl.warn(
 						result,
-						`Dropping duplicate variable ${decl.prop}`
+						`Dropping duplicate variable ${decl.prop}`, {
+							word: decl.prop,
+							index: decl.source.index
+						}
 					);
 					seen[decl.prop].remove();
 				}