feat(tokens): support latest style-dictionary build #2500

castastrophe · 2024-02-07T17:41:51Z

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 · 2024-02-07T17:45:19Z

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	-

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 · 2024-02-07T17:45:20Z

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

changeset-bot · 2024-04-18T20:33:40Z

⚠️ 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 · 2024-12-03T21:18:38Z

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

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.

.gitattributes

package.json

tokens/dist/json/tokens.json

tokens/project.json

tokens/style-dictionary.config.js

tokens/utilities/index.js

castastrophe · 2025-04-14T17:22:09Z

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!

tokens/project.json

.storybook/package.json

Looks like the Storybook updates are still in the yarn.lock file, so the Docs descriptions are still missing on the PR build.

yarn.lock

* chore: adds support to parse "transparent" token references (#3452) * feat(tokens): add transparent token handling * adds transparent mapping into rgb-mapping plugin - custom properties that reference transparent tokens will now be mapped to their corresponding transparent rgb/opacity tokens - extends the work that the rgb-mapping plugin already does * test: add plugin test cases * chore(plugins/postcss-rgb-mapping): update README.md * chore: add changeset * chore: release (#3673) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(tokens): support style-dictionary build in windows env (#2500) --------- Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

castastrophe added the skip_vrt Add to a PR to skip running VRT (but still pass the action) label Feb 7, 2024

castastrophe force-pushed the fix-tokens-windows-build branch from 676fef5 to 2c41fa6 Compare February 7, 2024 18:44

castastrophe added the wip This is a work in progress, don't judge. label Feb 7, 2024

castastrophe force-pushed the fix-tokens-windows-build branch 7 times, most recently from 9548f0f to deeeac9 Compare February 12, 2024 20:13

castastrophe added the low priority Not a critical update or fix; can be deprioritized if necessary label Feb 12, 2024

castastrophe marked this pull request as draft February 12, 2024 22:14

castastrophe force-pushed the fix-tokens-windows-build branch 2 times, most recently from 16f409e to c0f9463 Compare April 18, 2024 20:33

castastrophe force-pushed the fix-tokens-windows-build branch 3 times, most recently from 098738b to dc002cf Compare April 29, 2024 14:50

castastrophe force-pushed the fix-tokens-windows-build branch from dc002cf to ae16d2a Compare May 7, 2024 19:50

castastrophe force-pushed the fix-tokens-windows-build branch from ae16d2a to 6cd570b Compare July 31, 2024 14:43

castastrophe force-pushed the fix-tokens-windows-build branch 2 times, most recently from dd0694c to b565823 Compare August 13, 2024 14:19

castastrophe force-pushed the fix-tokens-windows-build branch from b565823 to 20705b6 Compare August 22, 2024 01:17

castastrophe force-pushed the fix-tokens-windows-build branch from 20705b6 to 9164f9f Compare August 29, 2024 18:39

castastrophe force-pushed the fix-tokens-windows-build branch from 9164f9f to 9880b3a Compare September 18, 2024 12:26

castastrophe added the icebox Temporary archive; things in long-term consideration label Sep 19, 2024

castastrophe force-pushed the fix-tokens-windows-build branch from cbbffd8 to e1a3792 Compare November 21, 2024 16:02

castastrophe commented Apr 10, 2025

View reviewed changes

castastrophe force-pushed the fix-tokens-windows-build branch from 5c0aa6a to 47de29e Compare April 15, 2025 17:49

marissahuysentruyt approved these changes Apr 16, 2025

View reviewed changes

tokens/project.json Show resolved Hide resolved

castastrophe force-pushed the fix-tokens-windows-build branch 2 times, most recently from 70f1c73 to 982d764 Compare April 16, 2025 19:20

jawinn suggested changes Apr 17, 2025

View reviewed changes

.storybook/package.json Outdated Show resolved Hide resolved

castastrophe force-pushed the fix-tokens-windows-build branch from 982d764 to a3063fa Compare April 18, 2025 14:21

jawinn previously approved these changes Apr 18, 2025

View reviewed changes

jawinn suggested changes Apr 18, 2025

View reviewed changes

yarn.lock Outdated Show resolved Hide resolved

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

93cff43

castastrophe force-pushed the fix-tokens-windows-build branch from a3063fa to 93cff43 Compare April 18, 2025 18:15

jawinn approved these changes Apr 18, 2025

View reviewed changes

castastrophe merged commit f817f73 into main Apr 18, 2025
20 of 22 checks passed

castastrophe deleted the fix-tokens-windows-build branch April 18, 2025 18:46

castastrophe mentioned this pull request Apr 18, 2025

chore: update s2 branch with latest #3679

Merged

9 tasks

castastrophe added a commit that referenced this pull request Apr 21, 2025

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

25a6c35

castastrophe added a commit that referenced this pull request Jun 11, 2025

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

0c5833f

castastrophe added a commit that referenced this pull request Jun 11, 2025

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

57128b4

castastrophe added a commit that referenced this pull request Jun 11, 2025

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

807c9b6

castastrophe added a commit that referenced this pull request Jun 11, 2025

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

bf1dc2a

castastrophe added a commit that referenced this pull request Jun 19, 2025

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

15df104

castastrophe added a commit that referenced this pull request Jun 20, 2025

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

81f087f

castastrophe added a commit that referenced this pull request Jul 11, 2025

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

1eb4319

castastrophe added a commit that referenced this pull request Jul 11, 2025

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

343aad2

castastrophe added a commit that referenced this pull request Jul 21, 2025

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

e3cd921

castastrophe added a commit that referenced this pull request Jul 24, 2025

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

0708ff7

castastrophe added a commit that referenced this pull request Jul 25, 2025

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

159cf35

feat(tokens): support latest style-dictionary build #2500

feat(tokens): support latest style-dictionary build #2500

Uh oh!

Conversation

castastrophe commented Feb 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Hardening steps

How and where has this been tested?

Validation steps

To-do list

Uh oh!

github-actions bot commented Feb 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

accordion

assetcard

calendar

card

colorhandle

colorslider

dropzone

menu

swatch

table

thumbnail

underlay

well

tokens

Uh oh!

github-actions bot commented Feb 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Apr 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

castastrophe commented Dec 3, 2024

Uh oh!

castastrophe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

castastrophe commented Apr 14, 2025

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

castastrophe commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

changeset-bot bot commented Apr 18, 2024 •

edited

Loading