chore: update minor versions in dependent packages (#2726)

* chore: update minor versions in dependent packages * fix: missing require functionality for template tool * chore: add changeset
adobe · May 2, 2024 · add5ac2 · add5ac2
1 parent d2ec8e1
commit add5ac2
Show file tree

Hide file tree

Showing 16 changed files with 574 additions and 384 deletions.
diff --git a/.changeset/fresh-foxes-flow.md b/.changeset/fresh-foxes-flow.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/generator": patch
+---
+
+The plopfile entry point leveraged a require.resolve in an ES module format without setting up the require functionality first
diff --git a/.github/actions/file-diff/package.json b/.github/actions/file-diff/package.json
@@ -11,7 +11,7 @@
     "@actions/core": "^1.10.1",
     "@actions/github": "^6.0.0",
     "@actions/glob": "^0.4.0",
-    "diff": "^5.1.0",
+    "diff": "^5.2.0",
     "diff2html": "^3.4.48"
   },
   "keywords": [

diff --git a/.storybook/package.json b/.storybook/package.json
@@ -15,13 +15,13 @@
 		"@spectrum-css/ui-icons": "^1.1.2"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.24.4",
+		"@babel/core": "^7.24.5",
 		"@chromaui/addon-visual-tests": "^1.0.0",
 		"@etchteam/storybook-addon-status": "^4.2.4",
 		"@storybook/addon-a11y": "^8.0.9",
 		"@storybook/addon-actions": "^8.0.9",
 		"@storybook/addon-console": "^3.0.0",
-		"@storybook/addon-designs": "^8.0.0",
+		"@storybook/addon-designs": "^8.0.1",
 		"@storybook/addon-docs": "^8.0.9",
 		"@storybook/addon-essentials": "^8.0.9",
 		"@storybook/addon-interactions": "^8.0.9",
@@ -34,17 +34,17 @@
 		"@storybook/testing-library": "^0.2.2",
 		"@storybook/theming": "^8.0.9",
 		"@storybook/web-components-webpack5": "^8.0.9",
-		"@whitespace/storybook-addon-html": "^6.0.4",
+		"@whitespace/storybook-addon-html": "^6.0.5",
 		"chromatic": "^11.3.0",
 		"file-loader": "^6.2.0",
 		"lit": "^3.1.3",
 		"lodash-es": "^4.17.21",
-		"postcss": "^8.4.35",
+		"postcss": "^8.4.38",
 		"postcss-loader": "^8.1.1",
 		"postcss-pseudo-classes": "^0.4.0",
 		"prettier": "^3.2.5",
 		"react": "^18.3.1",
-		"react-dom": "^18.2.0",
+		"react-dom": "^18.3.1",
 		"react-syntax-highlighter": "^15.5.0",
 		"source-map-loader": "^5.0.0",
 		"storybook": "^8.0.9",

diff --git a/generator/package.json b/generator/package.json
@@ -21,8 +21,8 @@
 	},
 	"devDependencies": {
 		"fuzzy": "^0.1.3",
-		"inquirer": "^9.2.19",
-		"inquirer-autocomplete-prompt": "^3.0.0",
-		"plop": "^3.1.1"
+		"inquirer": "^9.2.20",
+		"inquirer-autocomplete-prompt": "^3.0.1",
+		"plop": "^4.0.1"
 	}
 }
diff --git a/generator/plopfile.js b/generator/plopfile.js
@@ -1,25 +1,28 @@
-import { spawn } from 'child_process';
-import { readdirSync } from 'fs';
-import { readFile } from 'fs/promises';
-import { dirname, resolve } from 'path';
+import { spawn } from "child_process";
+import { readdirSync } from "fs";
+import { readFile } from "fs/promises";
+import { createRequire } from "node:module";
+import { dirname, resolve } from "path";
 
-import fuzzy from 'fuzzy';
-import autocompletePrompt from 'inquirer-autocomplete-prompt';
+import fuzzy from "fuzzy";
+import autocompletePrompt from "inquirer-autocomplete-prompt";
+
+const require = createRequire(import.meta.url);
 
 const fetchPackage = async (path) =>
-	readFile(resolve(path, 'package.json'), {
-		encoding: 'utf8'
+	readFile(resolve(path, "package.json"), {
+		encoding: "utf8"
 	})
-	.then(JSON.parse);
+		.then(JSON.parse);
 
 export default async (plop) => {
 	/* Allow customization from the environment variables */
-	const rootFolder = process.env.ROOT_DIR ?? resolve(process.cwd(), '../');
-	const srcPath = process.env.COMPONENT_DIR ?? resolve(rootFolder, 'components');
-	const projectName = process.env.PROJECT_NAME ?? 'Spectrum CSS';
+	const rootFolder = process.env.ROOT_DIR ?? resolve(process.cwd(), "../");
+	const srcPath = process.env.COMPONENT_DIR ?? resolve(rootFolder, "components");
+	const projectName = process.env.PROJECT_NAME ?? "Spectrum CSS";
 	const pkg = await fetchPackage(rootFolder);
 
-	const tokens = await fetchPackage(dirname(require.resolve('@spectrum-css/tokens/package.json')));
+	const tokens = await fetchPackage(dirname(require.resolve("@spectrum-css/tokens/package.json")));
 
 	/* Fetch the project name */
 	plop.setWelcomeMessage(`Welcome to the ${projectName} component generator!\n  To get started, answer a few short questions about your component.`);
@@ -30,106 +33,107 @@ export default async (plop) => {
 		return pkgs;
 	}, []);
 
-	plop.setHelper('parse', (str, sep = '/', start = 0, end = undefined) => {
+	plop.setHelper("parse", (str, sep = "/", start = 0, end = undefined) => {
 		if (!str) return;
 		const array = str.split(sep);
 		return array.slice(start, end).join(sep);
 	});
 
-	plop.setActionType('install', (_, config) => new Promise((resolve, reject) => {
-		const install = spawn('yarn', ['install'], {
+	plop.setActionType("install", (_, config) => new Promise((resolve, reject) => {
+		const install = spawn("yarn", ["install"], {
 			cwd: config.root,
 			shell: true,
-			stdio: 'inherit',
+			stdio: "inherit",
 		});
-		install.on('close', (code) => {
-			if (`${code}` === '0') {
-				resolve(`Successfully installed dependencies.`);
-			} else {
+		install.on("close", (code) => {
+			if (`${code}` === "0") {
+				resolve("Successfully installed dependencies.");
+			}
+			else {
 				reject(`Failed to install dependencies; exit code ${code}.`);
 			}
 		});
 	}));
 
-	plop.setGenerator('component', {
-		description: 'Component generator',
+	plop.setGenerator("component", {
+		description: "Component generator",
 		prompts: [
 			{
-				type: 'input',
-				name: 'name',
-				message: 'Component name (i.e. Help text)',
+				type: "input",
+				name: "name",
+				message: "Component name (i.e. Help text)",
 				validate: (answer) => {
 					if (!answer || answer.length < 1) {
 						return "Naming is hard; but it must have a name. You can always change it later.";
 					}
 
-					const name = plop.renderString('{{ lowerCase (camelCase name) }}', { name: answer });
+					const name = plop.renderString("{{ lowerCase (camelCase name) }}", { name: answer });
 					if (name && existingComponents && existingComponents.includes(name)) {
 						return "A component with that name already exists. You can always change it later.";
 					}
 
 					return true;
 				},
-				transformer: (answer) => plop.renderString('{{ sentenceCase name }}', { name: answer }),
+				transformer: (answer) => plop.renderString("{{ sentenceCase name }}", { name: answer }),
 			},
 		],
 		actions: (data) => {
 			data.description = `The ${data.name} component is...`;
-			data.folderName = plop.renderString('{{ lowerCase (camelCase name) }}', data);
+			data.folderName = plop.renderString("{{ lowerCase (camelCase name) }}", data);
 			data.pkg = pkg;
 			data.tokens = { name: tokens.name, version: tokens.version };
 
 			return [
 				{
-					type: 'addMany',
+					type: "addMany",
 					destination: `${srcPath}/{{ folderName }}`,
-					base: 'templates',
-					templateFiles: 'templates/**/*.hbs',
+					base: "templates",
+					templateFiles: "templates/**/*.hbs",
 					skipIfExists: true,
 				},
 				{
-					type: 'install',
+					type: "install",
 					root: rootFolder,
 				},
-				(data, config, plop) => plop.renderString(`Successfully created component {{ folderName }}. To preview your component, run \`yarn dev\` and navigate to the {{ folderName }} story.`),
+				(data, config, plop) => plop.renderString("Successfully created component {{ folderName }}. To preview your component, run `yarn dev` and navigate to the {{ folderName }} story."),
 			];
 		},
 	});
 
-    plop.setPrompt('autocomplete', autocompletePrompt);
-	plop.setGenerator('story', {
-		description: 'Storybook generator for existing components',
+	plop.setPrompt("autocomplete", autocompletePrompt);
+	plop.setGenerator("story", {
+		description: "Storybook generator for existing components",
 		prompts: [
 			{
-				type: 'autocomplete',
-				name: 'folderName',
-				message: 'Select the component you wish to update',
-				source: (_, input = '') => new Promise((resolve, reject) => {
-					if (existingComponents.length === 0) reject('No components found.');
+				type: "autocomplete",
+				name: "folderName",
+				message: "Select the component you wish to update",
+				source: (_, input = "") => new Promise((resolve, reject) => {
+					if (existingComponents.length === 0) reject("No components found.");
 					setTimeout(() => {
 						const results = fuzzy.filter(input, existingComponents);
 						if (results && results.length > 0) resolve(results.map((r) => r.string));
 					}, Math.random() * 470 + 30);
 				}),
-				emptyText: 'No components match the search.',
+				emptyText: "No components match the search.",
 			},
 		],
 		actions: (data) => {
-			data.name = plop.renderString('{{ sentenceCase folderName }}', data);
+			data.name = plop.renderString("{{ sentenceCase folderName }}", data);
 
 			return [
 				{
-					type: 'addMany',
+					type: "addMany",
 					destination: `${srcPath}/{{ folderName }}/stories`,
-					base: 'templates/stories',
-					templateFiles: 'templates/stories/*.hbs',
+					base: "templates/stories",
+					templateFiles: "templates/stories/*.hbs",
 					skipIfExists: true,
 				},
 				{
-					type: 'install',
+					type: "install",
 					root: rootFolder,
 				},
-				(data, _, plop) => plop.renderString(`Successfully updated {{ folderName }}. To preview your component, run \`yarn dev\` and navigate to the {{ folderName }} story.`, data),
+				(data, _, plop) => plop.renderString("Successfully updated {{ folderName }}. To preview your component, run `yarn dev` and navigate to the {{ folderName }} story.", data),
 			];
 		},
 	});

diff --git a/package.json b/package.json
@@ -69,10 +69,10 @@
 		"@spectrum-css/searchwithin": "^5.1.3",
 		"@spectrum-css/splitbutton": "^8.1.2",
 		"at-rule-packer": "^0.4.2",
-		"autoprefixer": "^10.4.17",
+		"autoprefixer": "^10.4.19",
 		"colors": "^1.4.0",
 		"cross-env": "^7.0.3",
-		"diff": "^5.1.0",
+		"diff": "^5.2.0",
 		"diff2html": "^3.4.48",
 		"eslint": "^8.57.0",
 		"eslint-plugin-jsonc": "^2.15.1",
@@ -84,27 +84,27 @@
 		"lint-staged": "^15.2.2",
 		"lodash": "^4.17.21",
 		"node-gyp": "^10.1.0",
-		"npm-registry-fetch": "^16.1.0",
+		"npm-registry-fetch": "^16.2.1",
 		"npm-run-all": "^4.1.5",
 		"nunjucks": "^3.2.4",
 		"nx": "^18.3.4",
-		"open": "^10.0.3",
+		"open": "^10.1.0",
 		"pajv": "^1.2.0",
-		"postcss": "^8.4.35",
+		"postcss": "^8.4.38",
 		"postcss-combininator": "^2.0.0",
 		"postcss-discard-comments": "^6.0.2",
 		"postcss-discard-empty": "^6.0.3",
 		"postcss-extend": "^1.0.5",
 		"postcss-hover-media-feature": "^1.0.2",
-		"postcss-import": "^16.0.1",
-		"postcss-load-config": "^5.0.3",
-		"postcss-preset-env": "^9.5.2",
+		"postcss-import": "^16.1.0",
+		"postcss-load-config": "^5.1.0",
+		"postcss-preset-env": "^9.5.9",
 		"postcss-reporter": "^7.1.0",
 		"postcss-splitinator": "^2.0.0",
 		"prettier": "^2.8.8",
 		"rimraf": "^5.0.5",
 		"stylelint": "^15.11.0",
-		"stylelint-config-clean-order": "^5.4.1",
+		"stylelint-config-clean-order": "^5.4.2",
 		"stylelint-config-standard": "^34.0.0",
 		"stylelint-header": "^1.0.0",
 		"stylelint-high-performance-animation": "^1.10.0",

diff --git a/plugins/postcss-combininator/package.json b/plugins/postcss-combininator/package.json
@@ -10,10 +10,10 @@
     "test": "ava"
   },
   "dependencies": {
-    "postcss": "^8.4.35"
+    "postcss": "^8.4.38"
   },
   "devDependencies": {
-    "ava": "^6.1.0"
+    "ava": "^6.1.2"
   },
   "publishConfig": {
     "access": "public"

diff --git a/plugins/postcss-custom-properties-mapping/package.json b/plugins/postcss-custom-properties-mapping/package.json
@@ -8,7 +8,7 @@
   "main": "index.js",
   "dependencies": {
     "fast-glob": "^3.3.2",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-value-parser": "^4.2.0"
   },
   "peerDependencies": {

diff --git a/plugins/postcss-splitinator/package.json b/plugins/postcss-splitinator/package.json
@@ -10,7 +10,7 @@
     "test": "ava"
   },
   "dependencies": {
-    "postcss": "^8.4.35"
+    "postcss": "^8.4.38"
   },
   "publishConfig": {
     "access": "public"

diff --git a/plugins/stylelint-no-missing-var/package.json b/plugins/stylelint-no-missing-var/package.json
@@ -13,7 +13,7 @@
     "stylelint": "^14.0.0 || ^15.0.0"
   },
   "devDependencies": {
-    "ava": "^6.1.0",
+    "ava": "^6.1.2",
     "c8": "^9.1.0",
     "stylelint": "^15.11.0"
   },

diff --git a/plugins/stylelint-no-unknown-custom-properties/package.json b/plugins/stylelint-no-unknown-custom-properties/package.json
@@ -9,14 +9,14 @@
   "dependencies": {
     "colors": "^1.4.0",
     "fast-glob": "^3.3.2",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-value-parser": "^4.2.0"
   },
   "peerDependencies": {
     "stylelint": "^14.0.0 || ^15.0.0"
   },
   "devDependencies": {
-    "ava": "^6.1.0",
+    "ava": "^6.1.2",
     "c8": "^9.1.0",
     "stylelint": "^15.11.0"
   },

diff --git a/plugins/stylelint-no-unused-custom-properties/package.json b/plugins/stylelint-no-unused-custom-properties/package.json
@@ -14,7 +14,7 @@
     "stylelint": "^14.0.0 || ^15.0.0"
   },
   "devDependencies": {
-    "ava": "^6.1.0",
+    "ava": "^6.1.2",
     "c8": "^9.1.0",
     "stylelint": "^15.11.0"
   },

diff --git a/site/package.json b/site/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "@adobe/focus-ring-polyfill": "^0.1.5",
     "@adobe/spectrum-css-workflow-icons": "^1.5.4",
-    "@spectrum-css/tokens": "^13.0.8",
+    "@spectrum-css/tokens": "^14.0.0",
     "@spectrum-css/ui-icons": "^1.1.1",
     "browser-sync": "^3.0.2",
     "colors": "^1.4.0",
@@ -32,7 +32,7 @@
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-attrs": "^4.1.6",
     "markdown-it-prism": "^2.3.0",
-    "npm-registry-fetch": "^16.1.0",
+    "npm-registry-fetch": "^16.2.1",
     "prismjs": "^1.29.0",
     "pug": "^3.0.2",
     "rimraf": "^5.0.5",

diff --git a/tokens/package.json b/tokens/package.json
@@ -30,7 +30,7 @@
 	"devDependencies": {
 		"@adobe/spectrum-tokens": "12.24.0",
 		"@nxkit/style-dictionary": "^5.0.0",
-		"postcss": "^8.4.35",
+		"postcss": "^8.4.38",
 		"postcss-cli": "^11.0.0",
 		"postcss-combine-duplicated-selectors": "^10.0.3",
 		"postcss-discard-comments": "^6.0.2",
@@ -40,7 +40,7 @@
 		"postcss-rgb-mapping": "^1.1.0",
 		"postcss-sorting": "^8.0.2",
 		"prettier": "^2.8.8",
-		"style-dictionary": "^3.9.1",
+		"style-dictionary": "^3.9.2",
 		"style-dictionary-sets": "^2.3.0"
 	},
 	"publishConfig": {