feat(tokens): support latest style-dictionary build

[castastrophe]

Description

When adding an experimental windows-latest run, I found that the style-dictionary compilation was failing pretty terrifically. This PR aims to fix that by wrapping pathing in path.join so that it can be rendered in a windows-friendly format.

Update: Our windows compatibility issues are much more complex than anticipated. Those updates, while excellent for hardening the tooling here, did not solve the problem(s). The scope of this pull request is no longer to support Windows builds for CI, but instead of handle the breaking change migration for style-dictionary.

Hardening steps

• Update the .gitattributes to force windows to use lf instead of crlf so that the generated mods files don't show a diff after the build.

• Switch the style-dictionary build to use the vanilla command instead of the nx executor.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

• yarn builder tokens. Expect the token build to create the following assets:
  • tokens/dist/css/index.css 202.00 KB
  • tokens/dist/css/dark-vars.css 48.04 KB
  • tokens/dist/css/global-vars.css 44.24 KB
  • tokens/dist/css/large-vars.css 32.08 KB
  • tokens/dist/css/light-vars.css 48.00 KB
  • tokens/dist/css/medium-vars.css 32.24 KB

Validation steps

This can be validated via CI which will try to run the tokens build in windows. If the task fails, this PR did not work.

To-do list

• I have read the contribution guidelines.
• ✨ This pull request is ready to merge. ✨

[github-actions]

File metrics

Summary

Total size: 2.25 MB^*
Total change (Δ): 🟢 ⬇ 0.69 KB (-0.03%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Minified	Gzipped	Δ
accordion	17.33 KB	16.56 KB	2.35 KB	🟢 ⬇ < 0.01 KB
assetcard	15.83 KB	15.10 KB	2.23 KB	🟢 ⬇ < 0.01 KB
calendar	19.39 KB	18.39 KB	2.71 KB	🟢 ⬇ < 0.01 KB
card	18.20 KB	17.14 KB	2.70 KB	🟢 ⬇ < 0.01 KB
colorhandle	4.03 KB	3.82 KB	1.05 KB	🟢 ⬇ < 0.01 KB
colorslider	3.90 KB	3.67 KB	1.05 KB	🟢 ⬇ < 0.01 KB
dropzone	7.22 KB	6.91 KB	1.44 KB	🟢 ⬇ < 0.01 KB
menu	41.39 KB	39.37 KB	4.47 KB	🟢 ⬇ < 0.01 KB
swatch	10.87 KB	10.25 KB	1.85 KB	🟢 ⬇ < 0.01 KB
table	47.09 KB	45.01 KB	4.89 KB	🟢 ⬇ 0.01 KB
thumbnail	7.73 KB	7.26 KB	1.43 KB	🟢 ⬇ < 0.01 KB
underlay	2.58 KB	2.49 KB	0.76 KB	🟢 ⬇ < 0.01 KB
well	1.58 KB	1.52 KB	0.65 KB	🟢 ⬇ < 0.01 KB

File change details

accordion

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	17.12 KB	16.36 KB	2.33 KB	-
index-theme.css	0.92 KB	0.90 KB	0.47 KB	-
index.css	17.33 KB	16.56 KB	2.35 KB	🟢 ⬇ < 0.01 KB
metadata.json	9.53 KB	-	-	-
themes/express.css	0.86 KB	0.85 KB	0.48 KB	-
themes/spectrum-two.css	0.86 KB	0.85 KB	0.48 KB	-
themes/spectrum.css	0.86 KB	0.85 KB	0.48 KB	-

assetcard

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	15.50 KB	14.78 KB	2.17 KB	-
index-theme.css	1.07 KB	1.05 KB	0.51 KB	-
index.css	15.83 KB	15.10 KB	2.23 KB	🟢 ⬇ < 0.01 KB
metadata.json	9.14 KB	-	-	-
themes/express.css	1.00 KB	0.98 KB	0.55 KB	-
themes/spectrum-two.css	0.98 KB	0.96 KB	0.54 KB	-
themes/spectrum.css	1.00 KB	0.98 KB	0.55 KB	-

calendar

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	19.29 KB	18.30 KB	2.69 KB	-
index-theme.css	0.77 KB	0.77 KB	0.46 KB	-
index.css	19.39 KB	18.39 KB	2.71 KB	🟢 ⬇ < 0.01 KB
metadata.json	9.13 KB	-	-	-
themes/express.css	0.76 KB	0.75 KB	0.48 KB	-
themes/spectrum-two.css	0.74 KB	0.73 KB	0.47 KB	-
themes/spectrum.css	0.76 KB	0.75 KB	0.48 KB	-

card

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	17.89 KB	16.84 KB	2.68 KB	-
index-theme.css	1.02 KB	1.02 KB	0.49 KB	-
index.css	18.20 KB	17.14 KB	2.70 KB	🟢 ⬇ < 0.01 KB
metadata.json	9.03 KB	-	-	-
themes/express.css	0.98 KB	0.96 KB	0.50 KB	-
themes/spectrum-two.css	0.95 KB	0.93 KB	0.49 KB	-
themes/spectrum.css	0.98 KB	0.96 KB	0.50 KB	-

colorhandle

Filename	Head	Minified	Gzipped	Compared to base
index.css	4.03 KB	3.82 KB	1.05 KB	🟢 ⬇ < 0.01 KB
metadata.json	1.89 KB	-	-	-

colorslider

Filename	Head	Minified	Gzipped	Compared to base
index.css	3.90 KB	3.67 KB	1.05 KB	🟢 ⬇ < 0.01 KB
metadata.json	2.04 KB	-	-	-

dropzone

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	7.17 KB	6.86 KB	1.43 KB	-
index-theme.css	0.72 KB	0.72 KB	0.45 KB	-
index.css	7.22 KB	6.91 KB	1.44 KB	🟢 ⬇ < 0.01 KB
metadata.json	5.10 KB	-	-	-
themes/express.css	0.72 KB	0.71 KB	0.45 KB	-
themes/spectrum-two.css	0.70 KB	0.69 KB	0.45 KB	-
themes/spectrum.css	0.72 KB	0.71 KB	0.45 KB	-

menu

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	40.69 KB	38.71 KB	4.37 KB	-
index-theme.css	1.36 KB	1.33 KB	0.55 KB	-
index.css	41.39 KB	39.37 KB	4.47 KB	🟢 ⬇ < 0.01 KB
metadata.json	20.29 KB	-	-	-
themes/express.css	1.25 KB	1.22 KB	0.57 KB	-
themes/spectrum-two.css	1.29 KB	1.26 KB	0.58 KB	-
themes/spectrum.css	1.25 KB	1.22 KB	0.57 KB	-

swatch

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	10.60 KB	10.00 KB	1.81 KB	-
index-theme.css	0.88 KB	0.87 KB	0.47 KB	-
index.css	10.87 KB	10.25 KB	1.85 KB	🟢 ⬇ < 0.01 KB
metadata.json	5.71 KB	-	-	-
themes/express.css	0.91 KB	0.90 KB	0.51 KB	-
themes/spectrum-two.css	0.89 KB	0.88 KB	0.50 KB	-
themes/spectrum.css	0.91 KB	0.89 KB	0.51 KB	-

table

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	46.40 KB	44.36 KB	4.84 KB	-
index-theme.css	1.49 KB	1.45 KB	0.55 KB	-
index.css	47.09 KB	45.01 KB	4.89 KB	🟢 ⬇ 0.01 KB
metadata.json	22.38 KB	-	-	-
themes/express.css	1.38 KB	1.34 KB	0.58 KB	-
themes/spectrum-two.css	1.36 KB	1.33 KB	0.57 KB	-
themes/spectrum.css	1.37 KB	1.34 KB	0.58 KB	-

thumbnail

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	7.66 KB	7.20 KB	1.42 KB	-
index-theme.css	0.73 KB	0.72 KB	0.45 KB	-
index.css	7.73 KB	7.26 KB	1.43 KB	🟢 ⬇ < 0.01 KB
metadata.json	3.65 KB	-	-	-
themes/express.css	0.73 KB	0.72 KB	0.46 KB	-
themes/spectrum-two.css	0.68 KB	0.67 KB	0.43 KB	-
themes/spectrum.css	0.73 KB	0.72 KB	0.46 KB	-

underlay

Filename	Head	Minified	Gzipped	Compared to base
index.css	2.58 KB	2.49 KB	0.76 KB	🟢 ⬇ < 0.01 KB
metadata.json	1.32 KB	-	-	-

well

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	1.50 KB	1.45 KB	0.65 KB	-
index-theme.css	0.71 KB	0.70 KB	0.44 KB	-
index.css	1.58 KB	1.52 KB	0.65 KB	🟢 ⬇ < 0.01 KB
metadata.json	0.88 KB	-	-	-
themes/express.css	0.73 KB	0.72 KB	0.46 KB	-
themes/spectrum-two.css	0.71 KB	0.70 KB	0.46 KB	-
themes/spectrum.css	0.73 KB	0.72 KB	0.46 KB	-

tokens

Filename	Head	Minified	Gzipped	Compared to base
css/dark-vars.css	48.31 KB	-	-	-
css/global-vars.css	44.20 KB	-	-	-
css/index.css	205.32 KB	-	-	🟢 ⬇ 0.69 KB
css/large-vars.css	32.08 KB	-	-	-
css/light-vars.css	48.27 KB	-	-	-
css/medium-vars.css	32.24 KB	-	-	-
json/tokens.json	290.06 KB	-	-	🔴 ⬆ 0.13 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[github-actions]

🚀 Deployed on https://pr-2500--spectrum-css.netlify.app

[changeset-bot]

⚠️ No Changeset found

Latest commit: 93cff43

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[castastrophe]

Something to evaluate: https://github.com/storybookjs/storybook/pull/29676/files

[castastrophe]

Doing this as a separate task helps us identify issues more easily in CI

[jawinn]

Is there a way to validate this? I see the moved command now has a --staged flag; could you explain why?

[castastrophe]

Yeah for sure, the --staged flags ensures we're only diffing the changes detected, meaning those we staged in the previous step. By separating it into its own step instead of including it above, the logs are now easier to read. The more command line steps you run together, the harder it is to distinguish the results in the log output.

[jawinn]

I didn't notice any specific issues here and mostly just had questions! Some additional validation instructions and PR description of the various changes would be helpful, as it was a little hard to review all the pieces in a single commit.

I wasn't able to check off the one validation instruction that is there now, as the size of the files have changed slightly, probably due to changes since it was originally written; they were only a few KB different.

[jawinn]

Is there a way to validate this? I see the moved command now has a --staged flag; could you explain why?

[marissahuysentruyt]

I think this looks good. As far as I can tell, things are working as they were before. When I checked the file sizes of the dist/css, mine didn't exactly line up to your validation notes- is that an issue? They were really close, but not exact - that's all.

My main question is just how else would you like me to validate this, or is there anything else you want me to check? Is there anything that's going to change once this is merged that we should be on the lookout for?

[castastrophe]

Made a few updates based on this feedback and added more context. Let me know if you want to sync soon and I can talk through any remaining questions as well.

[castastrophe]

My main question is just how else would you like me to validate this, or is there anything else you want me to check? Is there anything that's going to change once this is merged that we should be on the lookout for?

@marissahuysentruyt It's a tough one to validate yeah because the goal is that everything works the same but now instead of CJS, we're leveraging ESM syntax and the latest release of style-dictionary. It's maybe a subtle performance gain in how fast it runs but overall, hopefully, no significant change.

As for the numbers being off, we probably had a token change since I wrote up the test cases so the file sizes may have updated.

[marissahuysentruyt]

As you noted, this branch seems to be running the same as before. 👍 I don't think I see any glaring issues, so I'm good to approve. Thanks also for the extra context and the few extra commands to help us validate!