Components: add Emotion migration guardrails#79442
Conversation
|
Size Change: 0 B Total Size: 7.51 MB |
| ! [ '@ariakit/react', 'framer-motion' ].includes( | ||
| name | ||
| ) | ||
| ) && ! name.startsWith( '@emotion/' ) |
There was a problem hiding this comment.
This check is to prevent emotion imports from being flagged twice
There was a problem hiding this comment.
I also considered just restricting all @emotion imports everywhere, but… yeah I guess this is fine as a short term thing.
There was a problem hiding this comment.
I thought we could start with the components package, and then apply the refactor to the whole repo after
|
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. |
| ! [ '@ariakit/react', 'framer-motion' ].includes( | ||
| name | ||
| ) | ||
| ) && ! name.startsWith( '@emotion/' ) |
There was a problem hiding this comment.
I also considered just restricting all @emotion imports everywhere, but… yeah I guess this is fine as a short term thing.
ciampo
force-pushed
the
codex/components-emotion-guardrails
branch
from
5b01375 to
4bb58ff
Compare
| ! __nextHasNoOuterMargins && | ||
| styles.deprecatedOuterMargins, | ||
| className | ||
| ) } |
There was a problem hiding this comment.
nit: this is a suboptimal usage of clsx, it should be:
clsx( 'components-my-component', styles.root, className, {
[ styles.deprecatedOuterMargins ]: ! __nextHasNoOuterMargins,
} );There was a problem hiding this comment.
I've noticed that this object key style can emit a literal undefined class in Jest tests. (Perhaps not super important, but a notable difference between the two styles.)
There was a problem hiding this comment.
That can happen when styles.deprecatedOuterMargins is undefined. The value used as a key. And yes, the non-object form avoids that, because the result of the && expression is undefined and therefore ignored.
There was a problem hiding this comment.
Good point, adding a small tweak in #79490
What?
Part of #66806.
Adds the first set of docs and lint guardrails for migrating
@wordpress/componentsaway from Emotion.Why?
New component styles should use the existing SCSS Modules pattern while the current Emotion usage is migrated incrementally. This prevents the migration backlog from growing.
How?
packages/components/CONTRIBUTING.mdto recommend SCSS Modules andclsxfor new component-local styles.packages/components/srcimport guard that blocks new@emotion/*imports while temporarily allowlisting current Emotion files.Testing Instructions
npm run lint:md:docs -- packages/components/CONTRIBUTING.md.npm run lint:js -- tools/eslint/config.mjs.npm run lint:js -- packages/components/src --pass-on-unpruned-suppressions.@emotion/reactimport to a non-allowlisted file underpackages/components/srcand confirm linting reports it.Testing Instructions for Keyboard
Not applicable; this PR only changes documentation and lint rules.
Screenshots or screencast
Not applicable.
Use of AI Tools
Drafted with assistance from ChatGPT/Codex. The changes were reviewed before opening this PR.