AlignmentMatrixControl: migrate Emotion to style.module #73714
Merged
Conversation
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
jsnajdr
commented
Dec 3, 2025
| className={ clsx( styles.cell, props.className ) } | ||
| role="gridcell" | ||
| /> | ||
| } |
Member
Author
There was a problem hiding this comment.
The migration has three steps:
- remove the
style.tsfile that defines several components as styled elements (divorspan) - redefine the styles as regular CSS in the
style.module.cssfile - replace usages of the styled elements with plain
divs andspans with a class name imported from the CSS module
| id={ baseId } | ||
| role="grid" | ||
| size={ width } | ||
| style={ { width: `${ width }px` } } |
Member
Author
There was a problem hiding this comment.
Sometimes style interpolation forces us to declare a style attribute.
| aspect-ratio: 1; | ||
|
|
||
| border: 1px solid transparent; | ||
| border-radius: 4px; /* CONFIG.radiusMedium */ |
Member
Author
There was a problem hiding this comment.
This should be replaced with a design token variable or something similar.
|
|
||
| /* Hover styles for non-active items */ | ||
| .cell:not([data-active-item]):hover .point { | ||
| color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); |
Member
Author
There was a problem hiding this comment.
This CSS variable is the literal value of the COLORS.theme.accent constant. Stylelint issues a warning about it:
To support component theming and ensure proper fallbacks, use Sass variables from packages/components/src/utils/theme-variables.scss instead.
Using the SASS variables is a bad advice here, but how does the good advice look like? To start using the design system token variables in the component?
Member
There was a problem hiding this comment.
Hmm. I think we can only start using DS tokens if the @wordpress/components stylesheet ships with fallbacks for every token used.
Member
There was a problem hiding this comment.
A simpler way would be to convert these Sass vars to CSS variables and stick them in the @wordpress/components stylesheet so they can be used without Sass. This would be preferable if we know we're not going to attempt full theming support for legacy components… (undecided?)
Member
There was a problem hiding this comment.
Yet another way that would be a quick unblock for the transition period is to support Sass in CSS modules, for @wordpress/components at least.
Member
Author
There was a problem hiding this comment.
quick unblock for the transition period is to support Sass in CSS modules
Turns out that *.module.scss works almost out of the box, with just one-line change in the Storybook config. So this PR now uses a style.module.scss with variables like $components-color-accent.
I believe the PR is ready to ship now 🙂
| "types": [ | ||
| "gutenberg-env", | ||
| "gutenberg-test-env", | ||
| "css-modules", |
Member
Author
There was a problem hiding this comment.
In order to have types for the style.module.css everywhere, I moved the declare module *.module.css TypeScript definition to the global typings folder. This makes it available for the entire Gutenberg repo.
|
|
||
| export const GridContainer = styled.div< { | ||
| size?: AlignmentMatrixControlProps[ 'width' ]; | ||
| disablePointerEvents?: AlignmentMatrixControlIconProps[ 'disablePointerEvents' ]; |
Member
Author
There was a problem hiding this comment.
It turns out that the disablePointerEvents prop is never used on the GridContainer component. Then only way how it could be received is as a prop of the parent component (AlignmentMatrixControlProps) but the parent component doesn't have this prop at all. Only the icon component (AlignmentMatrixControlIcon) has it.
It's a welcome simplification of the styles.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +650 B (+0.03%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
jsnajdr
force-pushed
the
remove/emotion-al-matrix-ctrl
branch
from
332a1ba to
496d472
Compare
jsnajdr
commented
Dec 3, 2025
| } } | ||
| renderContent={ () => ( | ||
| <AlignmentMatrixControl | ||
| hasFocusBorder={ false } |
Member
Author
There was a problem hiding this comment.
This hasFocusBorder prop doesn't exist on the component and it's also not a valid prop of the native HTML element. It started triggering a React warning.
Emotion's styled wrapped checks props and forwards them only if they're valid (@emotion/is-prop-valid). That's why this error was detected only now, after removing styled.
jsnajdr
force-pushed
the
remove/emotion-al-matrix-ctrl
branch
from
6c4ddc9 to
d18a1f9
Compare
jsnajdr
commented
Dec 4, 2025
| test: /\.scss$/, | ||
| exclude: /\.lazy\.scss$/, | ||
| use: scssLoaders( { isLazy: false } ), | ||
| include: path.resolve( __dirname ), |
Member
Author
There was a problem hiding this comment.
Removing this line enables the *.scss loader also for files in packages/components. Then the Storybook build can compile the style.module.scss files there.
The path.resolve( __dirname ) value is the /storybook folder, so *.scss files outside it were not processed.
youknowriad
approved these changes
Dec 4, 2025
Contributor
youknowriad
left a comment
youknowriad
left a comment
There was a problem hiding this comment.
This is looking great to me. Also the code of the component feels a lot simpler (less indirection).
jsnajdr
force-pushed
the
remove/emotion-al-matrix-ctrl
branch
from
52720c0 to
96f2b95
Compare
|
Flaky tests detected in 96f2b95. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19929141389
|
aduth
reviewed
Dec 4, 2025
| @use "../utils/theme-variables" as *; | ||
|
|
||
| /* Grid structure */ | ||
| .gridContainer { |
Member
There was a problem hiding this comment.
With existing CSS naming conventions, I'd expect this to be called .grid-container, even if that makes the JavaScript reference a little more verbose by having to use bracket notation for referencing the property.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Migrates the
AlignmentMatrixControlstyles from Emotion to astyle.module.cssfile. If we managed to do this for all 35 Emotion components, we could remove Emotion completely, including our build process which now must run Babel just for the@emotion/babel-pluginand nothing else.There are still some open questions on this PR, see the review comments. If we sort them out, we can write a more precise prompt that could do the entire migration very quickly.