Skip to content

🚨 [WB-2325] Phase 1 β€” Extend processStyleList to accept CSS Module class names#3073

Draft
jandrade wants to merge 1 commit into
WB-2324.1from
WB-2325
Draft

🚨 [WB-2325] Phase 1 β€” Extend processStyleList to accept CSS Module class names#3073
jandrade wants to merge 1 commit into
WB-2324.1from
WB-2325

Conversation

@jandrade
Copy link
Copy Markdown
Member

Summary:

Widen StyleType to also accept string (and nested arrays of strings) so
consumers can pass CSS Module identifiers alongside Aphrodite stylesheets,
inline objects, and falsy values.

Refactor processStyleList to sort each leaf into one of three buckets:
Aphrodite stylesheets (via the existing _definition symbol check) β†’
emitted through css(...); plain strings β†’ appended to className;
plain objects β†’ forwarded as inline style. Non-string, non-object
truthy leaves are silently ignored.

Add a fast-path: when no Aphrodite stylesheet is present in the merge,
skip the StyleSheet.create rewrap (whose only purpose was to outweigh
Aphrodite's !important) and forward inline styles directly via the
style prop. This is the intentional behavioral change called out in
the changeset β€” DOM output for the no-Aphrodite case shifts from a
generated inlineStyles_xxx class to a real style="..." attribute.

Fix latent spread-of-StyleType bugs in Cell, DatePicker, and Modal that
the widened union now flags at type-check time. Behavior is preserved
or improved β€” no more accidental {0: 'f', 1: 'o', ...} results when a
non-object slipped into a spread.

πŸ€– Built using Claude Code #ai-generated

Issue: WB-2325

Test plan:

@jandrade jandrade self-assigned this May 25, 2026
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 25, 2026

πŸ¦‹ Changeset detected

Latest commit: 17510b3

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

This PR includes changesets to release 33 packages
Name Type
@khanacademy/wonder-blocks-core Minor
@khanacademy/wonder-blocks-cell Patch
@khanacademy/wonder-blocks-date-picker Patch
@khanacademy/wonder-blocks-modal Patch
@khanacademy/wonder-blocks-accordion Patch
@khanacademy/wonder-blocks-announcer Patch
@khanacademy/wonder-blocks-badge 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-card Patch
@khanacademy/wonder-blocks-clickable Patch
@khanacademy/wonder-blocks-data Patch
@khanacademy/wonder-blocks-dropdown Patch
@khanacademy/wonder-blocks-form Patch
@khanacademy/wonder-blocks-grid Patch
@khanacademy/wonder-blocks-icon-button Patch
@khanacademy/wonder-blocks-icon Patch
@khanacademy/wonder-blocks-labeled-field Patch
@khanacademy/wonder-blocks-layout Patch
@khanacademy/wonder-blocks-link Patch
@khanacademy/wonder-blocks-pill Patch
@khanacademy/wonder-blocks-popover Patch
@khanacademy/wonder-blocks-progress-spinner Patch
@khanacademy/wonder-blocks-search-field Patch
@khanacademy/wonder-blocks-switch Patch
@khanacademy/wonder-blocks-tabs Patch
@khanacademy/wonder-blocks-testing Patch
@khanacademy/wonder-blocks-toolbar Patch
@khanacademy/wonder-blocks-tooltip Patch
@khanacademy/wonder-blocks-typography Patch
eslint-plugin-wonder-blocks-demo 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
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 25, 2026

Size Change: +122 B (+0.09%)

Total Size: 129 kB

πŸ“¦ View Changed
Filename Size Change
packages/wonder-blocks-cell/dist/es/index.js 2.19 kB -2 B (-0.09%)
packages/wonder-blocks-core/dist/es/index.js 2.7 kB +104 B (+4%)
packages/wonder-blocks-date-picker/dist/es/index.js 8.1 kB +39 B (+0.48%)
packages/wonder-blocks-modal/dist/es/index.js 7.34 kB -19 B (-0.26%)
ℹ️ View Unchanged
Filename Size
packages/eslint-plugin-wonder-blocks/dist/es/index.js 7.18 kB
packages/wonder-blocks-accordion/dist/es/index.js 3.02 kB
packages/wonder-blocks-announcer/dist/es/index.js 2.43 kB
packages/wonder-blocks-badge/dist/es/index.js 2.03 kB
packages/wonder-blocks-banner/dist/es/index.js 2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.93 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 761 B
packages/wonder-blocks-button/dist/es/index.js 4.28 kB
packages/wonder-blocks-card/dist/es/index.js 1.09 kB
packages/wonder-blocks-clickable/dist/es/index.js 2.61 kB
packages/wonder-blocks-data/dist/es/index.js 5.48 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19.7 kB
packages/wonder-blocks-form/dist/es/index.js 6.32 kB
packages/wonder-blocks-grid/dist/es/index.js 1.25 kB
packages/wonder-blocks-icon-button/dist/es/index.js 4.01 kB
packages/wonder-blocks-icon/dist/es/index.js 1.95 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 3.48 kB
packages/wonder-blocks-layout/dist/es/index.js 1.69 kB
packages/wonder-blocks-link/dist/es/index.js 1.54 kB
packages/wonder-blocks-pill/dist/es/index.js 1.31 kB
packages/wonder-blocks-popover/dist/es/index.js 4.41 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.48 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.1 kB
packages/wonder-blocks-styles/dist/es/index.js 464 B
packages/wonder-blocks-switch/dist/es/index.js 1.55 kB
packages/wonder-blocks-tabs/dist/es/index.js 5.46 kB
packages/wonder-blocks-testing-core/dist/es/index.js 3.25 kB
packages/wonder-blocks-testing/dist/es/index.js 978 B
packages/wonder-blocks-theming/dist/es/index.js 384 B
packages/wonder-blocks-timing/dist/es/index.js 1.53 kB
packages/wonder-blocks-tokens/dist/es/index.js 5.36 kB
packages/wonder-blocks-toolbar/dist/es/index.js 921 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.06 kB
packages/wonder-blocks-typography/dist/es/index.js 1.58 kB

compressed-size-action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 25, 2026

npm Snapshot: Published

πŸŽ‰ Good news!! We've packaged up the latest commit from this PR (b7b42e4) and published all packages with changesets to npm.

You can install the packages in frontend by running:

./dev/tools/deploy_wonder_blocks.js --tag="PR3073"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR3073

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 25, 2026

A new build was pushed to Chromatic! πŸš€

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

Chromatic results:

Metric Total
Captured snapshots 479
Tests with visual changes 0
Total stories 847
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 479

…ass names

Widen StyleType to also accept `string` (and nested arrays of strings) so
consumers can pass CSS Module identifiers alongside Aphrodite stylesheets,
inline objects, and falsy values.

Refactor processStyleList to sort each leaf into one of three buckets:
Aphrodite stylesheets (via the existing `_definition` symbol check) β†’
emitted through `css(...)`; plain strings β†’ appended to `className`;
plain objects β†’ forwarded as inline `style`. Non-string, non-object
truthy leaves are silently ignored.

Add a fast-path: when no Aphrodite stylesheet is present in the merge,
skip the `StyleSheet.create` rewrap (whose only purpose was to outweigh
Aphrodite's `!important`) and forward inline styles directly via the
`style` prop. This is the intentional behavioral change called out in
the changeset β€” DOM output for the no-Aphrodite case shifts from a
generated `inlineStyles_xxx` class to a real `style="..."` attribute.

Fix latent spread-of-StyleType bugs in Cell, DatePicker, and Modal that
the widened union now flags at type-check time. Behavior is preserved
or improved β€” no more accidental `{0: 'f', 1: 'o', ...}` results when a
non-object slipped into a spread.

πŸ€– Built using Claude Code #ai-generated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant