ci: Run style transform in Storybook

[NicholasBoll]

Summary

Fixes: #2630

Runs the Style transform as part of Webpack so we can test the style transform both visually in Chromatic and in development. We'll also get any errors caused by incorrect styling.

• The style transform in Webpack shares the same TypeScript program as the doc parser. The Webpack processing time is about the same as just running the Doc Parser (doc parser is slow with all those type checker calls)
• Style transform is on by default in Storybook in development. We can see errors the style transform will give during a CI build in Webpack
• Chromatic will run visual regression against our style transform! So we can see any style transform issues BEFORE our users see them.
• SKIP_DOCGEN=true controls both the processing by the docgen as well as the style transform. Disabling these preprocessors is a much faster experience for both getting Storybook started as well as hot reloading. But docgen/style transform should be run for accuracy at least before pushing changes to a PR

Release Category

Infrastructure

---

Checklist

• [ ] MDX documentation adheres to Canvas Kit's Documentation Guidelines
• [x] Label ready for review has been added to PR

For the Reviewer

• [x] PR title is short and descriptive
• [x] PR summary describes the change (Fixes/Resolves linked correctly)

Where Should the Reviewer Start?

Test files

Areas for Feedback? (optional)

• [ ] Code
• [ ] Testing

Testing Manually

Run storybook locally using yarn start. You cannot skip docs.

[cypress[bot]]

Passing run #7110 ↗︎

0

970

3

0

0

Details:

Merge 1452629d8f328ebb198a775bac496aa2423067de into ad56179f99f9731ac768bcc4e9b7...
Project: canvas-kit	Commit: b96edcfd55 ℹ️
Status: Passed	Duration: 05:00 💡
Started: Apr 3, 2024 8:46 PM	Ended: Apr 3, 2024 8:51 PM

Review all test suite changes for PR #2643 ↗︎