Skip to content

[FEI-5654] EXPERIMENT - DO NOT REVIEW: CSS Modules tooling#2813

Draft
jandrade wants to merge 17 commits into
mainfrom
css-modules-v1
Draft

[FEI-5654] EXPERIMENT - DO NOT REVIEW: CSS Modules tooling#2813
jandrade wants to merge 17 commits into
mainfrom
css-modules-v1

Conversation

@jandrade

@jandrade jandrade commented Oct 3, 2025

Copy link
Copy Markdown
Member

Summary:

  • Adds CSS modules support
  • Converts View to CSS modules, adapts addStyle to support it
  • Adds lint:style check to CI
  • Add IDE support for CSS variables
  • Add stylelint support

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

Test plan:

Verify that all tests pass, including the new stylelint check.

@jandrade jandrade self-assigned this Oct 3, 2025
@changeset-bot

changeset-bot Bot commented Oct 3, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c27f970

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

This PR includes changesets to release 32 packages
Name Type
@khanacademy/wonder-blocks-link Major
@khanacademy/wonder-blocks-core Major
@khanacademy/wb-dev-build-settings Major
@khanacademy/wonder-blocks-banner Patch
@khanacademy/wonder-blocks-pill Patch
@khanacademy/wonder-blocks-accordion Patch
@khanacademy/wonder-blocks-announcer Patch
@khanacademy/wonder-blocks-badge 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-cell 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-modal 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

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

github-actions Bot commented Oct 3, 2025

Copy link
Copy Markdown
Contributor

Size Change: -400 B (-0.37%)

Total Size: 108 kB

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.44 kB -43 B (-1.73%)
packages/wonder-blocks-link/dist/es/index.js 1.19 kB -336 B (-22.08%) 🎉
packages/wonder-blocks-modal/dist/es/index.js 7.08 kB -19 B (-0.27%)
ℹ️ 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 1.91 kB
packages/wonder-blocks-banner/dist/es/index.js 2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.92 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 919 B
packages/wonder-blocks-clickable/dist/es/index.js 2.66 kB
packages/wonder-blocks-data/dist/es/index.js 5.48 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19.4 kB
packages/wonder-blocks-form/dist/es/index.js 6.2 kB
packages/wonder-blocks-grid/dist/es/index.js 1.24 kB
packages/wonder-blocks-icon-button/dist/es/index.js 3.16 kB
packages/wonder-blocks-icon/dist/es/index.js 2.02 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 3.58 kB
packages/wonder-blocks-layout/dist/es/index.js 1.63 kB
packages/wonder-blocks-pill/dist/es/index.js 1.31 kB
packages/wonder-blocks-popover/dist/es/index.js 4.3 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 3.71 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.99 kB
packages/wonder-blocks-toolbar/dist/es/index.js 906 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.4 kB
packages/wonder-blocks-typography/dist/es/index.js 1.57 kB

compressed-size-action

@github-actions

github-actions Bot commented Oct 3, 2025

Copy link
Copy Markdown
Contributor

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

Metric Total
Captured snapshots 864
Tests with visual changes 14
Total stories 724
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 432

@jandrade jandrade changed the title [FEI-5654] EXPERIMENT: CSS Modules tooling [FEI-5654] EXPERIMENT - DO NOT REVIEW: CSS Modules tooling Oct 6, 2025
@jandrade jandrade marked this pull request as ready for review October 6, 2025 14:12
@khan-actions-bot khan-actions-bot requested a review from a team October 6, 2025 14:12
@khan-actions-bot

khan-actions-bot commented Oct 6, 2025

Copy link
Copy Markdown
Contributor

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .stylelintignore, package.json, pnpm-lock.yaml, stylelint.config.mjs, tsconfig.json, vite.config.ts, .changeset/gentle-wombats-joke.md, .changeset/silver-years-push.md, .changeset/soft-queens-brake.md, .changeset/yellow-bats-deny.md, build-settings/rollup.config.mjs, .github/workflows/node-ci-lint.yml, __docs__/wonder-blocks-core/view.stories.module.css, __docs__/wonder-blocks-core/view.stories.tsx, __docs__/wonder-blocks-typography/styles.css, config/jest/test.config.js, packages/wonder-blocks-core/src/components/view.module.css, packages/wonder-blocks-core/src/components/view.tsx, packages/wonder-blocks-core/src/util/add-style.tsx, packages/wonder-blocks-core/src/util/types.ts, packages/wonder-blocks-core/src/util/util.ts, packages/wonder-blocks-link/src/components/link-core.module.css, packages/wonder-blocks-link/src/components/link-core.tsx, packages/wonder-blocks-modal/src/components/flexible-panel.tsx, packages/wonder-blocks-cell/src/components/internal/cell-core.tsx

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

@github-actions

github-actions Bot commented Oct 6, 2025

Copy link
Copy Markdown
Contributor

npm Snapshot: Published

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

You can install the packages in frontend by running:

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

Packages can also be installed manually by running:

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

@jandrade jandrade removed the request for review from a team October 6, 2025 14:45
@khan-actions-bot khan-actions-bot requested a review from a team October 7, 2025 12:59
@jandrade jandrade removed the request for review from a team October 7, 2025 13:02
@jandrade jandrade requested a review from a team October 7, 2025 13:06
@jandrade jandrade removed the request for review from a team October 24, 2025 15:36
@jandrade jandrade marked this pull request as draft October 24, 2025 15:36
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.

2 participants