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

.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,9 @@ jobs:
                     echo "Changes detected"
                     git status
                     git add .
-                    git diff > changes.diff
+                    git diff --staged > changes.diff
                     exit 1
                 fi
-
             - name: Upload changes
               if: ${{ failure() }}
               uses: actions/upload-artifact@v4

.github/workflows/development.yml

@@ -42,6 +42,7 @@ jobs:
     # -------------------------------------------------------------
     # Validate build for various environments
     # -------------------------------------------------------------
+    # todo: should we limit this to run before merging?
     verify_builds:
         name: Verify
         # Check that the PR is not in draft mode (or if it is, that it has the run_ci label to force a build)
@@ -52,9 +53,13 @@ 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
         uses: ./.github/workflows/build.yml
         with:
             system: ${{ matrix.system }}
@@ -177,7 +182,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') }}

nx.json

@@ -47,7 +47,7 @@
 			],
 			"options": {
 				"commands": [
-					"node --no-warnings -e 'require(\"./tasks/component-builder.js\").default()'"
+					"node --no-warnings ./tasks/component-builder.js {projectName}"
 				]
 			},
 			"outputs": [
@@ -102,7 +102,7 @@
 			],
 			"options": {
 				"commands": [
-					"node --no-warnings ./tasks/compare-compiled-output.js $NX_TASK_TARGET_PROJECT"
+					"node --no-warnings ./tasks/compare-compiled-output.js {projectName}"
 				]
 			},
 			"outputs": ["{workspaceRoot}/.diff-output"]
@@ -155,7 +155,7 @@
 			],
 			"options": {
 				"commands": [
-					"cross-env NODE_OPTIONS=\"--no-warnings\" node -e 'require(\"./tasks/component-reporter.js\").default()'"
+					"node --no-warnings ./tasks/component-reporter.js {projectName}"
 				]
 			},
 			"outputs": [

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 postcss = require("postcss");
 const postcssrc = require("postcss-load-config");
 const prettier = require("prettier");
@@ -322,3 +325,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 })));

tasks/component-reporter.js

@@ -15,6 +15,9 @@
 const fs = require("fs");
 const path = require("path");
 
+const { hideBin } = require("yargs/helpers");
+const yargs = require("yargs");
+
 const postcss = require("postcss");
 const prettier = require("prettier");
 
@@ -266,3 +269,9 @@ async function main({
 
 exports.extractModifiers = extractModifiers;
 exports.default = main;
+
+let {
+	_: components,
+} = yargs(hideBin(process.argv)).argv;
+
+Promise.all(components.map((componentName) => main({ componentName })));

tasks/utilities.js

@@ -200,27 +200,20 @@ async function fetchContent(
 		})),
 	);
 
-	// Combine the content into 1 file; @todo do this in future using CSS imports
-	if (shouldCombine) {
-		let content = "";
-		fileData.forEach((dataset) => {
-			if (dataset.content) content += "\n\n" + dataset.content;
-		});
+	if (!shouldCombine) return Promise.resolve(fileData);
 
-		return Promise.resolve([
-			{
-				content,
-				input: fileData[0].input,
-			},
-		]);
-	}
+	// Combine the content into 1 file; @todo do this in future using CSS imports
+	let content = "";
+	fileData.forEach((dataset) => {
+		if (dataset.content) content += "\n\n" + dataset.content;
+	});
 
-	return Promise.all(
-		files.map(async (file) => ({
-			content: await fsp.readFile(path.join(cwd, file), "utf8"),
-			input: file,
-		})),
-	);
+	return Promise.resolve([
+		{
+			content,
+			input: fileData[0].input,
+		},
+	]);
 }
 
 /**
@@ -286,8 +279,7 @@ async function writeAndReport(content, output, { cwd = process.cwd(), encoding =
 		})
 		.catch((err) => {
 			if (!err) return;
-			const relativePath = path.relative(cwd, output);
-			console.log(`${"✗".red}  ${relativePath.yellow} not written`);
+			console.log(`${"✗".red}  ${relativePrint(cwd, output).yellow} not written`);
 			return Promise.reject(err);
 		});
 }

tokens/dist/css/global-vars.css

@@ -359,7 +359,7 @@
 	--spectrum-extra-bold-font-weight: 800;
 	--spectrum-black-font-weight: 900;
 	--spectrum-italic-font-style: italic;
-	--spectrum-default-font-style: normal;
+	--spectrum-default-font-style: 400;
 	--spectrum-line-height-100: 1.3;
 	--spectrum-line-height-200: 1.5;
 	--spectrum-cjk-line-height-100: 1.5;

tokens/dist/index.css

@@ -1279,7 +1279,7 @@
 	--spectrum-extra-bold-font-weight: 800;
 	--spectrum-black-font-weight: 900;
 	--spectrum-italic-font-style: italic;
-	--spectrum-default-font-style: normal;
+	--spectrum-default-font-style: 400;
 	--spectrum-line-height-100: 1.3;
 	--spectrum-line-height-200: 1.5;
 	--spectrum-cjk-line-height-100: 1.5;

tokens/package.json

@@ -13,7 +13,9 @@
 	"bugs": {
 		"url": "https://github.com/adobe/spectrum-css/issues"
 	},
+	"type": "module",
 	"main": "dist/index.css",
+	"module": "style-dictionary.config.js",
 	"files": [
 		"dist",
 		"CHANGELOG.md",
@@ -22,7 +24,6 @@
 	],
 	"devDependencies": {
 		"@adobe/spectrum-tokens": "12.25.0",
-		"@nxkit/style-dictionary": "^6.0.0",
 		"cssnano": "^7.0.3",
 		"cssnano-preset-advanced": "^7.0.6",
 		"postcss": "^8.4.49",
@@ -32,8 +33,7 @@
 		"postcss-rgb-mapping": "workspace:^",
 		"postcss-sorting": "^9.1.0",
 		"prettier": "^3.4.2",
-		"style-dictionary": "^3.9.2",
-		"style-dictionary-sets": "^2.3.0"
+		"style-dictionary": "^4.2.0"
 	},
 	"keywords": [
 		"spectrum",

tokens/postcss.config.js

@@ -11,7 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
-module.exports = () => ({
+import { fileURLToPath } from "url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+export default () => ({
 	plugins: {
 		"postcss-import": {},
 		"postcss-rgb-mapping": {

tokens/project.json

@@ -17,7 +17,7 @@
 			"inputs": ["core", "tools", { "externalDependencies": ["postcss"] }],
 			"options": {
 				"commands": [
-					"cross-env NODE_OPTIONS=\"--no-warnings\" node -e 'require(\"./tasks/token-rollup.js\").default()'"
+					"node --no-warnings ./tasks/token-rollup.js",
 				],
 				"cwd": "{projectRoot}",
 				"parallel": false
@@ -46,14 +46,17 @@
 		"lint": {},
 		"style-dictionary": {
 			"dependsOn": ["clean"],
-			"executor": "@nxkit/style-dictionary:build",
-			"inputs": ["scripts"],
+			"executor": "nx:run-commands",
+			"inputs": [
+				"{projectRoot}/postcss.config.js",
+				"{projectRoot}/style-dictionary.config.js",
+				"{projectRoot}/utilities/style-dictionary.utils.js"
+			],
 			"options": {
-				"deleteOutputPath": false,
-				"outputPath": "./tokens",
-				"platform": "CSS",
-				"styleDictionaryConfig": "./tokens/style-dictionary.config.js",
-				"tsConfig": "./tsconfig.json"
+				"commands": [
+					"style-dictionary build --config style-dictionary.config.js"
+				],
+				"cwd": "{projectRoot}"
 			},
 			"outputs": [
 				"{projectRoot}/dist/css/global-vars.css",

tokens/style-dictionary.config.js

@@ -11,17 +11,17 @@
  * governing permissions and limitations under the License.
  */
 
-const path = require("path");
+import { createRequire } from "node:module";
+import { dirname, join, sep } from "node:path";
 
-const generateFileConfig = require("./utilities/style-dictionary.utils.js");
+import generateFileConfig from "./utilities/style-dictionary.utils.js";
 
-const StyleDictionary = require("style-dictionary");
-const CSSSetsFormatter = require("style-dictionary-sets").CSSSetsFormatter;
-const NameKebabTransfom = require("style-dictionary-sets").NameKebabTransfom;
-const AttributeSetsTransform =
-	require("style-dictionary-sets").AttributeSetsTransform;
-const CSSOpenTypeTransform =
-	require("style-dictionary-sets").CSSOpenTypeTransform;
+import StyleDictionary from "style-dictionary";
+
+import AttributeSetsTransform from "./utilities/attribute-sets-transform.js";
+import CSSOpenTypeTransform from "./utilities/css-font-open-type-transform.js";
+import CSSSetsFormatter from "./utilities/css-sets-formatter.js";
+import NameKebabTransfom from "./utilities/name-kebab-transform.js";
 
 StyleDictionary.registerTransform(CSSOpenTypeTransform);
 StyleDictionary.registerTransform(NameKebabTransfom);
@@ -33,15 +33,16 @@ StyleDictionary.registerFormat(CSSSetsFormatter);
  * not a nested folder which might be returned if the `main` property
  * in the package.json is present.
  */
-const tokensPath = require.resolve("@adobe/spectrum-tokens/package.json");
-const tokensDir = path.dirname(tokensPath);
+const require = createRequire(import.meta.url);
+const tokensPath = require.resolve(join("@adobe", "spectrum-tokens", "package.json"));
+const tokensDir = dirname(tokensPath);
 const setNames = ["desktop", "mobile", "light", "dark", "darkest"];
 
-module.exports = {
-	source: [`${tokensDir}/src/*.json`],
+export default {
+	source: [join(tokensDir, "src", "*.json")],
 	platforms: {
-		CSS: {
-			buildPath: "dist/css/",
+		css: {
+			buildPath: join("dist", "css") + sep,
 			transforms: [
 				AttributeSetsTransform.name,
 				NameKebabTransfom.name,
@@ -50,22 +51,16 @@ module.exports = {
 			prefix: "spectrum",
 			files: [
 				generateFileConfig(),
-				...["spectrum", "express"].map((subSystemName) =>
-					generateFileConfig({ subSystemName })
-				),
+				...["spectrum", "express"].map((subSystemName) => generateFileConfig({ subSystemName })),
 				...setNames.map((context) => generateFileConfig({ setName: context })),
-				...setNames.map((context) =>
-					generateFileConfig({
-						setName: context,
-						subSystemName: "spectrum",
-					})
-				),
-				...setNames.map((context) =>
-					generateFileConfig({
-						setName: context,
-						subSystemName: "express",
-					})
-				),
+				...setNames.map((context) => generateFileConfig({
+					setName: context,
+					subSystemName: "spectrum",
+				})),
+				...setNames.map((context) => generateFileConfig({
+					setName: context,
+					subSystemName: "express",
+				})),
 			],
 		},
 	},