Skip to content

Add CSS Modules support and migrate wonder-blocks-core#2957

Draft
jandrade wants to merge 1 commit intomainfrom
exp-cssm-core
Draft

Add CSS Modules support and migrate wonder-blocks-core#2957
jandrade wants to merge 1 commit intomainfrom
exp-cssm-core

Conversation

@jandrade
Copy link
Member

@jandrade jandrade commented Feb 9, 2026

Summary:

This is the first phase of migrating from Aphrodite to CSS Modules.

Build tooling changes:

  • Add postcss, rollup-plugin-postcss, typed-css-modules, identity-obj-proxy
  • Configure Rollup with PostCSS plugin for CSS Modules
  • Configure Vite CSS Modules for Storybook
  • Add identity-obj-proxy to Jest for CSS Module mocking
  • Add TypeScript declaration for .module.css imports

Core package migration:

  • Create cx() utility for joining class names
  • Update processStyleList to handle CSS Module strings alongside Aphrodite
  • Migrate View and Text components to use CSS Modules
  • Create element-resets.module.css for browser normalization

Both systems coexist, allowing gradual migration of other packages.

Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com

Issue: WB-XXXX

Test plan:

TBD

This is the first phase of migrating from Aphrodite to CSS Modules.

Build tooling changes:
- Add postcss, rollup-plugin-postcss, typed-css-modules, identity-obj-proxy
- Configure Rollup with PostCSS plugin for CSS Modules
- Configure Vite CSS Modules for Storybook
- Add identity-obj-proxy to Jest for CSS Module mocking
- Add TypeScript declaration for .module.css imports

Core package migration:
- Create cx() utility for joining class names
- Update processStyleList to handle CSS Module strings alongside Aphrodite
- Migrate View and Text components to use CSS Modules
- Create element-resets.module.css for browser normalization

Both systems coexist, allowing gradual migration of other packages.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@jandrade jandrade self-assigned this Feb 9, 2026
@changeset-bot
Copy link

changeset-bot bot commented Feb 9, 2026

⚠️ No Changeset found

Latest commit: 51d1646

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

@github-actions
Copy link
Contributor

github-actions bot commented Feb 9, 2026

Size Change: -11 B (-0.01%)

Total Size: 118 kB

Filename Size Change
packages/wonder-blocks-core/dist/es/index.js 2.58 kB -11 B (-0.42%)
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3 kB
packages/wonder-blocks-announcer/dist/es/index.js 1.74 kB
packages/wonder-blocks-badge/dist/es/index.js 2.02 kB
packages/wonder-blocks-banner/dist/es/index.js 2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.91 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 755 B
packages/wonder-blocks-button/dist/es/index.js 4.25 kB
packages/wonder-blocks-card/dist/es/index.js 1.08 kB
packages/wonder-blocks-cell/dist/es/index.js 2.18 kB
packages/wonder-blocks-clickable/dist/es/index.js 2.6 kB
packages/wonder-blocks-data/dist/es/index.js 5.48 kB
packages/wonder-blocks-date-picker/dist/es/index.js 6.38 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19.7 kB
packages/wonder-blocks-form/dist/es/index.js 6.3 kB
packages/wonder-blocks-grid/dist/es/index.js 1.24 kB
packages/wonder-blocks-icon-button/dist/es/index.js 4 kB
packages/wonder-blocks-icon/dist/es/index.js 1.91 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 3.47 kB
packages/wonder-blocks-layout/dist/es/index.js 1.63 kB
packages/wonder-blocks-link/dist/es/index.js 1.53 kB
packages/wonder-blocks-modal/dist/es/index.js 7.21 kB
packages/wonder-blocks-pill/dist/es/index.js 1.31 kB
packages/wonder-blocks-popover/dist/es/index.js 4.32 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.57 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.37 kB
packages/wonder-blocks-tokens/dist/es/index.js 4.95 kB
packages/wonder-blocks-toolbar/dist/es/index.js 906 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.02 kB
packages/wonder-blocks-typography/dist/es/index.js 1.57 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Feb 9, 2026

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

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

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