feat(tokens): support latest style-dictionary build

.gitattributes

@@ -1,3 +1,4 @@
+* text=auto eol=lf
 README.md merge=ours
 
 # Treat yarn assets as binaries for diffing

.github/workflows/build.yml

@@ -150,10 +150,15 @@ jobs:
                     echo "Changes detected"
                     git status
                     git add .
-                    git diff > changes.diff
                     exit 1
                 fi
 
+            # If there are changes, capture the changes and upload them as an artifact
+            - name: Capture changes
+              if: ${{ failure() }}
+              id: capture-changes
+              run: git diff --staged > changes.diff
+
             - name: Upload changes
               if: ${{ failure() }}
               uses: actions/upload-artifact@v4

.github/workflows/development.yml

@@ -52,9 +52,15 @@ jobs:
                 system:
                     - macos-latest
                     - ubuntu-latest
-                    # - windows-latest # todo: debug token style-dictionary failures on windows
                 node-version:
                     - 20
+                # experimental:
+                #     - false
+                # include:
+                #     - system: windows-latest
+                #       experimental: true
+                #     - system: windows-latest
+                #       experimental: true
         uses: ./.github/workflows/build.yml
         with:
             system: ${{ matrix.system }}
@@ -190,7 +196,7 @@ jobs:
     # -------------------------------------------------------------
     vrt:
         name: Testing
-        if: contains(github.event.pull_request.labels.*.name, 'run_vrt') || ((github.event.pull_request.draft != true || contains(github.event.pull_request.labels.*.name, 'run_ci')) && github.event.pull_request.mergeable == true)
+        if: ${{ contains(github.event.pull_request.labels.*.name, 'run_vrt') || ((github.event.pull_request.draft != true || contains(github.event.pull_request.labels.*.name, 'run_ci')) && github.event.pull_request.mergeable == true) }}
         uses: ./.github/workflows/vrt.yml
         with:
             skip: ${{ github.base_ref == 'spectrum-two' || contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}

.storybook/blocks/utilities.js

@@ -93,7 +93,7 @@ export function fetchToken(key, fallback = undefined, presets = {}) {
 	// Check if the spectrum data is available
 	if (!tokens || typeof tokens !== "object") return fallback;
 
-	return parseData(tokens[key], { color, platform }) ?? fallback;
+	return parseData(tokens?.[key], { color, platform }) ?? fallback;
 }
 
 /**
@@ -110,7 +110,7 @@ export function fetchTokenSet(key, presets = {}) {
 	}
 
 	// Fetch the theme if it exists; this data exists if wrapped in a ThemeProvider
-	const { color, platform, tokens } = fetchTheme(presets);
+	const { color, platform, tokens = {} } = fetchTheme(presets);
 
 	// Check the token data for a set of tokens matching the provided regex
 	const tokenSet = Object.keys(tokens)

.storybook/package.json

@@ -49,21 +49,21 @@
 		"@babel/core": "^7.26.0",
 		"@chromatic-com/storybook": "^3.2.3",
 		"@etchteam/storybook-addon-status": "^5.0.0",
-		"@storybook/addon-a11y": "^8.4.7",
-		"@storybook/addon-actions": "^8.4.7",
-		"@storybook/addon-designs": "^8.0.4",
-		"@storybook/addon-docs": "^8.4.7",
-		"@storybook/addon-essentials": "^8.4.7",
-		"@storybook/addon-interactions": "^8.4.7",
-		"@storybook/blocks": "^8.4.7",
-		"@storybook/builder-vite": "^8.4.7",
-		"@storybook/components": "^8.4.7",
-		"@storybook/core-events": "^8.4.7",
-		"@storybook/manager-api": "^8.4.7",
-		"@storybook/preview-api": "^8.4.7",
-		"@storybook/test-runner": "^0.21.0",
-		"@storybook/theming": "^8.4.7",
-		"@storybook/web-components-vite": "^8.4.7",
+		"@storybook/addon-a11y": "8.4.7",
+		"@storybook/addon-actions": "8.4.7",
+		"@storybook/addon-designs": "^8.2.1",
+		"@storybook/addon-docs": "8.4.7",
+		"@storybook/addon-essentials": "8.4.7",
+		"@storybook/addon-interactions": "8.4.7",
+		"@storybook/blocks": "8.4.7",
+		"@storybook/builder-vite": "8.4.7",
+		"@storybook/components": "8.4.7",
+		"@storybook/core-events": "8.4.7",
+		"@storybook/manager-api": "8.4.7",
+		"@storybook/preview-api": "8.4.7",
+		"@storybook/test-runner": "^0.22.0",
+		"@storybook/theming": "8.4.7",
+		"@storybook/web-components-vite": "8.4.7",
 		"@whitespace/storybook-addon-html": "^6.1.1",
 		"chromatic": "^11.22.2",
 		"lit": "^3.2.1",
@@ -76,7 +76,7 @@
 		"react-syntax-highlighter": "^15.6.1",
 		"remark-gfm": "^4.0.0",
 		"rollup-plugin-postcss-lit": "^2.1.0",
-		"storybook": "^8.4.7",
+		"storybook": "8.4.7",
 		"vite": "^5.4.11"
 	},
 	"keywords": [

nx.json

@@ -89,20 +89,20 @@
 					"cross-env NODE_OPTIONS=\"--no-warnings\" node -e 'require(\"./tasks/component-builder.js\").default()'"
 				]
 			},
-			"outputs": ["{projectRoot}/dist/*.css", "{projectRoot}/dist/*.map"]
+			"outputs": ["{projectRoot}/dist/*.css*", "{projectRoot}/dist/**/*.css*"]
 		},
 		"clean": {
 			"cache": true,
 			"executor": "nx:run-commands",
-			"inputs": ["{projectRoot}/dist/*.css", "{projectRoot}/dist/*.map", { "externalDependencies": ["rimraf"] }],
+			"inputs": ["{projectRoot}/dist/*.css*", "{projectRoot}/dist/**/*.css*", { "externalDependencies": ["rimraf"] }],
 			"options": {
-				"commands": ["rimraf {projectRoot}/dist/*.css {projectRoot}/dist/*.map"]
+				"commands": ["rimraf {projectRoot}/dist/*.css* {projectRoot}/dist/**/"]
 			},
 			"outputs": ["{projectRoot}/dist"]
 		},
 		"compare": {
 			"cache": true,
-			"dependsOn": [{ "projects": "bundle", "target": "build" }],
+			"dependsOn": ["build", { "projects": ["bundle"], "target": "build" }],
 			"executor": "nx:run-commands",
 			"inputs": [
 				"{workspaceRoot}/tasks/compare-compiled-output.js",
@@ -217,6 +217,7 @@
 			}
 		},
 		"validate": {
+			"cache": true,
 			"executor": "nx:run-commands",
 			"inputs": [
 				"{workspaceRoot}/schemas/metadata.schema.json",

package.json

@@ -27,7 +27,7 @@
 		"clean:env": "rm -rf .env .storybook/chromatic.config.json",
 		"clean:preview": "nx clean storybook --skip-nx-cache",
 		"cleaner": "nx run-many --target clean --projects",
-		"compare": "cross-env NODE_ENV=production node --no-warnings ./tasks/compare-compiled-output.js",
+		"compare": "cross-env NODE_ENV=production yarn bundle && yarn component:compare",
 		"component:build": "node --no-warnings ./tasks/component-builder.js",
 		"component:compare": "node --no-warnings ./tasks/component-compare.js",
 		"component:report": "node --no-warnings ./tasks/component-reporter.js",
@@ -70,7 +70,6 @@
 		"@changesets/cli": "^2.27.11",
 		"@commitlint/cli": "^19.6.1",
 		"@commitlint/config-conventional": "^19.6.0",
-		"@csstools/postcss-bundler": "^2.0.6",
 		"@nx/devkit": "^19.8.2",
 		"@spectrum-tools/postcss-add-theming-layer": "1.0.2",
 		"@spectrum-tools/postcss-property-rollup": "0.0.1",
@@ -117,9 +116,9 @@
 		"prettier": "^3.5.3",
 		"rimraf": "^6.0.1",
 		"semver": "^7.7.1",
-		"stylelint": "^16.15.0",
-		"stylelint-config-standard": "^36.0.1",
-		"stylelint-header": "^2.1.0",
+		"stylelint": "^16.18.0",
+		"stylelint-config-standard": "^38.0.0",
+		"stylelint-header": "^3.0.0",
 		"stylelint-high-performance-animation": "^1.11.0",
 		"stylelint-order": "^6.0.4",
 		"stylelint-selector-bem-pattern": "^4.0.1",

plugins/postcss-add-theming-layer/index.js

@@ -17,7 +17,7 @@ const {
 	extractFallbackValue,
 	getVariableName,
 	checkForReplacement
-} = require("./utilities");
+} = require("./utilities.js");
 
 /**
  * @typedef Options

plugins/stylelint-no-missing-var/package.json

@@ -35,7 +35,7 @@
   "devDependencies": {
     "ava": "^6.2.0",
     "c8": "^10.1.3",
-    "stylelint": "^16.15.0"
+    "stylelint": "^16.18.0"
   },
   "keywords": [
     "css",

plugins/stylelint-no-unknown-custom-properties/package.json

@@ -38,7 +38,7 @@
   "devDependencies": {
     "ava": "^6.2.0",
     "c8": "^10.1.3",
-    "stylelint": "^16.15.0"
+    "stylelint": "^16.18.0"
   },
   "keywords": [
     "css",

plugins/stylelint-no-unused-custom-properties/package.json

@@ -37,7 +37,7 @@
   "devDependencies": {
     "ava": "^6.2.0",
     "c8": "^10.1.3",
-    "stylelint": "^16.15.0"
+    "stylelint": "^16.18.0"
   },
   "keywords": [
     "css",

plugins/stylelint-theme-alignment/package.json

@@ -32,7 +32,7 @@
     "stylelint": ">=16"
   },
   "devDependencies": {
-    "stylelint": "^16.15.0"
+    "stylelint": "^16.18.0"
   },
   "keywords": [
     "css",

postcss.config.js

@@ -51,7 +51,7 @@ module.exports = ({
 						const filePath = packageParts.length > 2 ? packageParts.slice(2).join("/") : "index.css";
 
 						if (packageParts[1] === "tokens") {
-							return join(__dirname, packageParts[1], "dist", "css", filePath);
+							return join(__dirname, packageParts[1], filePath);
 						}
 
 						return join(__dirname, "components", packageParts[1], filePath);

tasks/component-builder.js

@@ -17,6 +17,9 @@ const fs = require("fs");
 const fsp = fs.promises;
 const path = require("path");
 
+const { hideBin } = require("yargs/helpers");
+const yargs = require("yargs");
+
 const { deflate } = require("zlib");
 const { promisify } = require("util");
 
@@ -37,6 +40,12 @@ const {
 	writeAndReport,
 } = require("./utilities.js");
 
+const report = {
+	failure: (message) => `${"✗".red}  ${message}`,
+	warning: (message) => `${"⚠".yellow}  ${message}`,
+	success: (message) => `${"✓".green}  ${message}`,
+};
+
 /**
  * Process the provided CSS input and write out to a file
  * @param {string} content
@@ -108,7 +117,7 @@ async function processCSS(
 	if (result.warnings().length > 0) {
 		/** @todo, do we want to support a verbose mode that prints out the warnings during the build? */
 		result.warnings().forEach((warning) => {
-			logs.push(`${"⚠".yellow}  ${warning.text}`);
+			logs.push(report.warning(warning.text));
 		});
 	}
 
@@ -131,13 +140,12 @@ async function processCSS(
 	if (!output) return Promise.resolve(formatted);
 
 	/* Ensure the directory exists */
-	if (!fs.existsSync(path.dirname(output))) {
-		await fsp.mkdir(path.dirname(output), { recursive: true }).catch((err) => {
+	const outputDir = path.dirname(output);
+	if (!fs.existsSync(outputDir)) {
+		await fsp.mkdir(outputDir, { recursive: true }).catch((err) => {
 			if (!err) return;
 
-			logs.push(
-				`${"✗".red}  problem making the ${relativePrint(path.dirname(output), { cwd }).yellow} directory`,
-			);
+			logs.push(report.failure(`problem making the ${relativePrint(outputDir, { cwd })} directory`));
 			return Promise.reject([...logs, err]);
 		});
 	}
@@ -287,6 +295,12 @@ async function main({
 		cwd = path.join(dirs.components, componentName);
 	}
 
+	if (!fs.existsSync(cwd)) {
+		return Promise.resolve(
+			report.failure(`Component directory not found at ${relativePrint(cwd)}`)
+		);
+	}
+
 	if (!componentName) {
 		componentName = cwd
 			? getPackageFromPath(cwd)
@@ -345,3 +359,9 @@ async function main({
 exports.processCSS = processCSS;
 exports.fetchContent = fetchContent;
 exports.default = main;
+
+let {
+	_: components,
+} = yargs(hideBin(process.argv)).argv;
+
+Promise.all(components.map((componentName) => main({ componentName })));