Skip to content

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

Draft
jandrade wants to merge 1 commit into
mainfrom
exp-cssm-core
Draft

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

Conversation

@jandrade

@jandrade jandrade commented Feb 9, 2026

Copy link
Copy Markdown
Member

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

changeset-bot Bot commented Feb 9, 2026

Copy link
Copy Markdown

⚠️ 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

github-actions Bot commented Feb 9, 2026

Copy link
Copy Markdown
Contributor

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

github-actions Bot commented Feb 9, 2026

Copy link
Copy Markdown
Contributor

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