⚠️ [WB-2327] Phase 3 — Port wonder-blocks-styles action styles to a CSS mixin#3100
Draft
jandrade wants to merge 1 commit into
Draft
⚠️ [WB-2327] Phase 3 — Port wonder-blocks-styles action styles to a CSS mixin#3100jandrade wants to merge 1 commit into
jandrade wants to merge 1 commit into
Conversation
…SS mixin Adds a CSS-mixin counterpart to the `actionStyles` JS export so CSS Modules authors can opt into the same interactive-control styling without Aphrodite (Phase 3 of the CSS Modules migration). The change is purely additive — the existing Aphrodite-shaped `actionStyles` / `focusStyles` JS exports are unchanged and remain available for packages that have not migrated, so no consumer is affected. Issue: WB-2327 ## Test plan: Automatically verified: - `pnpm build` succeeds end-to-end (tokens CSS regenerated). - `pnpm typecheck` clean. - `pnpm lint:css` / stylelint clean on the new CSS. - `pnpm jest __docs__/css-modules-spike` passes (incl. the new inverse assertion). - Storybook story tests for `Default` and `WithBadge` pass. These render the same `spike.module.css` that now imports `action-styles.css` and applies `@apply --wb-action-inverse`, so their passing proves the mixin (including the nested `@apply --wb-focus-visible`) resolves and expands end-to-end through Vite/PostCSS. Manual (one item): - Open Storybook and view the new `Inverse` spike story (`tools-css-modules-spike--inverse`) at http://localhost:6061/. Tab to the button and confirm the focus ring shows under `:focus-visible`, and that hover/active states render on the dark backdrop. This story's own runner pass could not be captured because the running Storybook had not re-indexed the new export and a restart hit an environment file-handle limit (EMFILE) unrelated to the change. ## Review plan: Please review these risky changes 1.⚠️ `packages/wonder-blocks-styles/src/styles/action-styles.css`: New `@mixin --wb-action-inverse()` in a published shared library, mirroring `actionStyles.inverse`. It expands into nested `:hover` / `:focus-visible` / `:active` rules and reuses `--wb-focus-visible`. Source-distributed (raw, like `focus-styles.css`) so the mixin survives un-expanded until the consumer build. Additive only; JS exports unchanged. ### Common patterns: **1 File:** Mirror an Aphrodite-shaped JS style export as a source-distributed CSS mixin, following the `focus-styles.css` precedent — the JS object's pseudo-state keys become nested `&` selectors and token references become `--wb-*` CSS variables. ```diff // action-styles.ts (kept, unchanged) export const inverse = { ":hover:not([aria-disabled=true])": { color: semanticColor.core.foreground.knockout.default, }, ...focus, }; + /* action-styles.css (new) */ + @mixin --wb-action-inverse() { + &:hover:not([aria-disabled="true"]) { + color: var(--wb-semanticColor-core-foreground-knockout-default); + } + &:focus-visible { + @apply --wb-focus-visible; + } + } ``` **1 File (consumer integration):** Import a cross-package mixin into a `*.module.css` and apply it with `@apply`, proving end-to-end expansion. ```diff + @import "@khanacademy/wonder-blocks-styles/action-styles.css"; + + .inverse { + @apply --wb-action-inverse; + } ```
🦋 Changeset detectedLatest commit: e45aa52 The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 packages
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 |
jandrade
commented
Jun 3, 2026
| @@ -0,0 +1,85 @@ | |||
| /* | |||
Member
Author
There was a problem hiding this comment.
@mixin --wb-action-inverse() in the published wonder-blocks-styles shared library, mirroring actionStyles.inverse. It expands into nested :hover / :focus-visible / :active rules and reuses --wb-focus-visible. Source-distributed (raw, like focus-styles.css) so the @mixin survives un-expanded until the consumer build runs its own postcss-import → postcss-mixins chain. Additive only — the existing Aphrodite-shaped JS exports are untouched, so no consumer is affected.
Contributor
|
Size Change: 0 B Total Size: 129 kB ℹ️ View Unchanged
|
Contributor
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (f7c4143) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR3100"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR3100 |
Contributor
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-lyphbtfmai.chromatic.com/ Chromatic results:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a CSS-mixin counterpart to the
actionStylesJS export so CSSModules authors can opt into the same interactive-control styling
without Aphrodite (Phase 3 of the CSS Modules migration). The change is
purely additive — the existing Aphrodite-shaped
actionStyles/focusStylesJS exports are unchanged and remain available for packagesthat have not migrated, so no consumer is affected.
Issue: WB-2327
Test plan:
Automatically verified:
pnpm buildsucceeds end-to-end (tokens CSS regenerated).pnpm typecheckclean.pnpm lint:css/ stylelint clean on the new CSS.pnpm jest __docs__/css-modules-spikepasses (incl. the new inverseassertion).
DefaultandWithBadgepass. These renderthe same
spike.module.cssthat now importsaction-styles.cssandapplies
@apply --wb-action-inverse, so their passing proves themixin (including the nested
@apply --wb-focus-visible) resolves andexpands end-to-end through Vite/PostCSS.
Manual (one item):
Inversespike story(
tools-css-modules-spike--inverse) at http://localhost:6061/. Tab tothe button and confirm the focus ring shows under
:focus-visible, andthat hover/active states render on the dark backdrop. This story's own
runner pass could not be captured because the running Storybook had not
re-indexed the new export and a restart hit an environment file-handle
limit (EMFILE) unrelated to the change.
Review plan:
Please review these risky changes
action-styles.cssCommon patterns:
1 File: Mirror an Aphrodite-shaped JS style export as a source-distributed CSS mixin, following the
focus-styles.cssprecedent — the JS object's pseudo-state keys become nested&selectors and token references become--wb-*CSS variables.// action-styles.ts (kept, unchanged) export const inverse = { ":hover:not([aria-disabled=true])": { color: semanticColor.core.foreground.knockout.default, }, ...focus, }; + /* action-styles.css (new) */ + @mixin --wb-action-inverse() { + &:hover:not([aria-disabled="true"]) { + color: var(--wb-semanticColor-core-foreground-knockout-default); + } + &:focus-visible { + @apply --wb-focus-visible; + } + }1 File (consumer integration): Import a cross-package mixin into a
*.module.cssand apply it with@apply, proving end-to-end expansion.🤖 Built using Claude Code #ai-generated