fix(tokens): support style-dictionary build in windows env (#2500)

Author: castastrophe

.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",