[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW #2226

jandrade · 2024-05-15T21:05:09Z

Summary:

Added css-modules integration.
Created temporary tokens.css file to hold the CSS variables.
Migrated the following components to css-modules:
- Button
- View
- TextField
- Strut
- Icon
- ProgressSpinner
- tokens (as css variables)
- All Typography components

Issue: https://khanacademy.atlassian.net/browse/FEI-5589

Test plan:

TBD

changeset-bot · 2024-05-15T21:05:12Z

🦋 Changeset detected

Latest commit: 97bf68c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 29 packages

Name	Type
@khanacademy/wonder-blocks-tokens	Major
@khanacademy/wonder-blocks-core	Major
@khanacademy/wonder-blocks-form	Major
@khanacademy/wonder-blocks-icon	Major
@khanacademy/wonder-blocks-layout	Major
@khanacademy/wonder-blocks-progress-spinner	Major
@khanacademy/wonder-blocks-typography	Major
@khanacademy/wb-dev-build-settings	Major
@khanacademy/wonder-blocks-accordion	Patch
@khanacademy/wonder-blocks-banner	Patch
@khanacademy/wonder-blocks-birthday-picker	Patch
@khanacademy/wonder-blocks-breadcrumbs	Patch
@khanacademy/wonder-blocks-button	Patch
@khanacademy/wonder-blocks-cell	Patch
@khanacademy/wonder-blocks-clickable	Patch
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-grid	Patch
@khanacademy/wonder-blocks-icon-button	Patch
@khanacademy/wonder-blocks-labeled-field	Patch
@khanacademy/wonder-blocks-link	Patch
@khanacademy/wonder-blocks-modal	Patch
@khanacademy/wonder-blocks-pill	Patch
@khanacademy/wonder-blocks-popover	Patch
@khanacademy/wonder-blocks-search-field	Patch
@khanacademy/wonder-blocks-switch	Patch
@khanacademy/wonder-blocks-toolbar	Patch
@khanacademy/wonder-blocks-tooltip	Patch
@khanacademy/wonder-blocks-data	Patch
@khanacademy/wonder-blocks-testing	Patch

Not sure what this means? Click here to learn what changesets are.

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

github-actions · 2024-05-15T21:07:57Z

Size Change: -556 B (-0.58%)

Total Size: 95.9 kB

Filename	Size	Change
`packages/wonder-blocks-button/dist/es/index.js`	3.79 kB	-488 B (-11.42%)	👏
`packages/wonder-blocks-core/dist/es/index.js`	3.77 kB	+108 B (+2.95%)
`packages/wonder-blocks-dropdown/dist/es/index.js`	13.9 kB	+24 B (+0.17%)
`packages/wonder-blocks-form/dist/es/index.js`	5.25 kB	-90 B (-1.69%)
`packages/wonder-blocks-icon/dist/es/index.js`	820 B	-240 B (-22.64%)	🎉
`packages/wonder-blocks-layout/dist/es/index.js`	1.91 kB	+23 B (+1.22%)
`packages/wonder-blocks-progress-spinner/dist/es/index.js`	1.43 kB	-79 B (-5.24%)	✅
`packages/wonder-blocks-typography/dist/es/index.js`	1.67 kB	+186 B (+12.53%)	⚠️

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.78 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.53 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.72 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	1.13 kB
`packages/wonder-blocks-cell/dist/es/index.js`	2.24 kB
`packages/wonder-blocks-clickable/dist/es/index.js`	3.29 kB
`packages/wonder-blocks-data/dist/es/index.js`	6.33 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 kB
`packages/wonder-blocks-i18n/dist/es/index.js`	4.56 kB
`packages/wonder-blocks-icon-button/dist/es/index.js`	3.21 kB
`packages/wonder-blocks-labeled-field/dist/es/index.js`	72 B
`packages/wonder-blocks-link/dist/es/index.js`	2.53 kB
`packages/wonder-blocks-modal/dist/es/index.js`	5.52 kB
`packages/wonder-blocks-pill/dist/es/index.js`	1.65 kB
`packages/wonder-blocks-popover/dist/es/index.js`	4.86 kB
`packages/wonder-blocks-search-field/dist/es/index.js`	1.55 kB
`packages/wonder-blocks-switch/dist/es/index.js`	2.1 kB
`packages/wonder-blocks-testing/dist/es/index.js`	3.94 kB
`packages/wonder-blocks-theming/dist/es/index.js`	697 B
`packages/wonder-blocks-timing/dist/es/index.js`	1.8 kB
`packages/wonder-blocks-tokens/dist/es/index.js`	1.74 kB
`packages/wonder-blocks-toolbar/dist/es/index.js`	857 B
`packages/wonder-blocks-tooltip/dist/es/index.js`	6.91 kB

_{compressed-size-action}

github-actions · 2024-05-15T21:08:22Z

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-qywaamejti.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	117
Tests with visual changes	15
Total stories	413
Inherited (not captured) snapshots [TurboSnap]	210
Tests on the build	327

codecov · 2024-05-16T14:20:23Z

Codecov Report

Attention: Patch coverage is 94.16667% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 82.77%. Comparing base (afeac13) to head (6e0558c).

❗ Current head 6e0558c differs from pull request most recent head 97bf68c

Please upload reports for the commit 97bf68c to get more accurate results.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #2226       +/-   ##
===========================================
- Coverage   94.48%   82.77%   -11.72%     
===========================================
  Files         248      248               
  Lines       29268    29257       -11     
  Branches     1638     1368      -270     
===========================================
- Hits        27654    24217     -3437     
- Misses       1610     5030     +3420     
- Partials        4       10        +6

Files	Coverage Δ
...s/wonder-blocks-form/src/components/text-field.tsx	`94.01% <98.82%> (-2.70%)`	⬇️
...ackages/wonder-blocks-core/src/components/view.tsx	`92.43% <82.85%> (-0.71%)`	⬇️

... and 88 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update afeac13...97bf68c. Read the comment docs.

khan-actions-bot · 2024-05-21T19:07:57Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to package.json, yarn.lock, .changeset/brown-bottles-arrive.md, .storybook/main.ts, .storybook/preview.tsx, build-settings/rollup.config.js, types/assets.d.ts, __docs__/wonder-blocks-button/button.stories.module.css, __docs__/wonder-blocks-button/button.stories.tsx, __docs__/wonder-blocks-button/navigation-callbacks.mdx, __docs__/wonder-blocks-button/navigation-callbacks.stories.tsx, __docs__/wonder-blocks-core/view.stories.module.css, __docs__/wonder-blocks-core/view.stories.tsx, __docs__/wonder-blocks-layout/strut.stories.module.css, __docs__/wonder-blocks-layout/strut.stories.tsx, __docs__/wonder-blocks-typography/typography.stories.module.css, __docs__/wonder-blocks-typography/typography.stories.tsx, config/jest/test.config.js, packages/wonder-blocks-button/package.json, packages/wonder-blocks-core/package.json, packages/wonder-blocks-icon/package.json, packages/wonder-blocks-layout/package.json, packages/wonder-blocks-progress-spinner/package.json, packages/wonder-blocks-tokens/package.json, packages/wonder-blocks-typography/package.json, static/sb-styles/preview.css, packages/wonder-blocks-tokens/css/tokens.css, packages/wonder-blocks-button/src/components/button-core.tsx, packages/wonder-blocks-button/src/components/button.module.css, packages/wonder-blocks-button/src/themes/default.module.css, packages/wonder-blocks-button/src/themes/khanmigo.module.css, packages/wonder-blocks-button/src/themes/themed-button.tsx, packages/wonder-blocks-core/src/components/text.module.css, packages/wonder-blocks-core/src/components/text.tsx, packages/wonder-blocks-core/src/components/view.module.css, packages/wonder-blocks-core/src/components/view.tsx, packages/wonder-blocks-core/src/util/types.ts, packages/wonder-blocks-form/src/components/text-field.module.css, packages/wonder-blocks-form/src/components/text-field.tsx, packages/wonder-blocks-icon/src/components/phosphor-icon.module.css, packages/wonder-blocks-icon/src/components/phosphor-icon.tsx, packages/wonder-blocks-layout/src/components/strut.module.css, packages/wonder-blocks-layout/src/components/strut.tsx, packages/wonder-blocks-progress-spinner/src/components/circular-spinner.module.css, packages/wonder-blocks-progress-spinner/src/components/circular-spinner.tsx, packages/wonder-blocks-typography/src/components/body.tsx, packages/wonder-blocks-typography/src/components/caption.tsx, packages/wonder-blocks-typography/src/components/footnote.tsx, packages/wonder-blocks-typography/src/components/heading-large.tsx, packages/wonder-blocks-typography/src/components/heading-medium.tsx, packages/wonder-blocks-typography/src/components/heading-small.tsx, packages/wonder-blocks-typography/src/components/heading-xsmall.tsx, packages/wonder-blocks-typography/src/components/label-large.tsx, packages/wonder-blocks-typography/src/components/label-medium.tsx, packages/wonder-blocks-typography/src/components/label-small.tsx, packages/wonder-blocks-typography/src/components/label-xsmall.tsx, packages/wonder-blocks-typography/src/components/styles.module.css, packages/wonder-blocks-typography/src/components/tagline.tsx, packages/wonder-blocks-typography/src/components/title.tsx, packages/wonder-blocks-button/src/components/__tests__/button-with-icon.test.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2024-05-21T19:09:45Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (3269121) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2226"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2226

jandrade added 2 commits May 15, 2024 15:49

add css-modules integration, View as css-module

7a6e0a9

Add TextField.module.css

77f1900

jandrade self-assigned this May 15, 2024

jandrade added 4 commits May 15, 2024 20:37

Refactor TextField.modules

28bd0de

Fix jest

e5881c8

add changeset info

d1df756

Include tokens.css as part of the wb-tokens exports

6e0558c

Migrate Button to css-modules (hacky version)

44e311a

jandrade force-pushed the exp-css-modules branch from fa63f8f to 44e311a Compare May 18, 2024 02:18

Add some typography components

e846b5a

jandrade marked this pull request as ready for review May 21, 2024 19:07

khan-actions-bot requested a review from a team May 21, 2024 19:07

jandrade removed the request for review from a team May 21, 2024 19:08

jandrade added 2 commits May 22, 2024 14:19

Fix View when className prop is passed down

30bb39b

extract css-modules code as separate css (build)

e5ed7c7

khan-actions-bot requested a review from a team May 22, 2024 18:19

jandrade removed the request for review from a team May 22, 2024 18:20

minify css

5995eb3

khan-actions-bot requested a review from a team May 22, 2024 19:14

jandrade added 5 commits May 22, 2024 15:21

Move cva to peerDeps

6ef6ad0

Extract styles v2

88c6c8c

Don't extract css (for now), don't compress css vars

2d3c603

Add more typography components to css-modules

c25448a

Convert strut to css-modules

9bffcfe

jandrade changed the title ~~FEI-5589: Experiment with CSS modules~~ [WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW May 24, 2024

jandrade added 7 commits May 24, 2024 15:32

Fix TextField merge conflicts

a035f09

Fix chromatic

36a4d36

Fix conflicts, add cva to layout

a5d1ed5

Convert progress-spinner to css-modules

46950b5

Convert PhosphorIcon to css-modules:

a60425a

Fix View styles

b46c765

Extract css styles into separate files

97bf68c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW #2226

[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW #2226

jandrade commented May 15, 2024 •

edited

changeset-bot bot commented May 15, 2024 •

edited

github-actions bot commented May 15, 2024 •

edited

github-actions bot commented May 15, 2024 •

edited

codecov bot commented May 16, 2024 •

edited

khan-actions-bot commented May 21, 2024 •

edited

github-actions bot commented May 21, 2024 •

edited

[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW #2226

Are you sure you want to change the base?

[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW #2226

Conversation

jandrade commented May 15, 2024 • edited

Summary:

Test plan:

changeset-bot bot commented May 15, 2024 • edited

🦋 Changeset detected

github-actions bot commented May 15, 2024 • edited

github-actions bot commented May 15, 2024 • edited

A new build was pushed to Chromatic! 🚀

Chromatic results:

codecov bot commented May 16, 2024 • edited

Codecov Report

khan-actions-bot commented May 21, 2024 • edited

Gerald

github-actions bot commented May 21, 2024 • edited

npm Snapshot: Published

jandrade commented May 15, 2024 •

edited

changeset-bot bot commented May 15, 2024 •

edited

github-actions bot commented May 15, 2024 •

edited

github-actions bot commented May 15, 2024 •

edited

codecov bot commented May 16, 2024 •

edited

khan-actions-bot commented May 21, 2024 •

edited

github-actions bot commented May 21, 2024 •

edited