Components: Re-land WPDS border token migration with Emotion-safe comments#79244
Conversation
|
Size Change: +171 B (0%) Total Size: 8.58 MB 📦 View Changed
|
…ents
The esbuild design-token fallback plugin claims any JS/TS file whose source
text contains the `wpds` token prefix (a plain substring check, comments
included). Claiming the file replaces the Emotion transform, so styled
component selectors throw at runtime ("Component selectors can only be used
in conjunction with @emotion/babel-plugin"). #79003 introduced TODO comments
referencing the full token custom-property names in Emotion `.ts` files,
which broke the Storybook build on trunk.
Rephrase those comments (and pre-existing ones in dropdown-motion,
config-values, and use-modal-exit-animation) to name the WPDS tokens without
the CSS custom-property prefix, so the fallback plugin no longer claims these
files. The `no-ds-tokens` ESLint rule does not catch this because it only
inspects string literals and template elements, not comments.
ciampo
force-pushed
the
fix/wpds-token-comments-emotion
branch
from
62ece47 to
ec51e94
Compare
|
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. |
aduth
left a comment
aduth
left a comment
There was a problem hiding this comment.
LGTM 👍 Confirmed the changes match the previous pull request and that Storybook pages which crashed previously now load successfully.
| // Note: WPDS design tokens can't be referenced here directly. The build-time | ||
| // fallback injection is incompatible with Emotion, and even mentioning a token's | ||
| // full CSS custom property name in this file makes the esbuild fallback plugin | ||
| // claim it and break the Emotion transform. This file is consumed by Menu's | ||
| // Emotion styles. |
There was a problem hiding this comment.
Maybe we should make it a point to mention in #79245 to remove or update these comments once the described behavior is corrected.
2 participants
What?
Re-lands #79003 (WPDS border token migration) plus a fix for the issue that broke
storybook-checkon trunk and caused the revert in #79243.Part of #79001.
Why?
#79003's
TODOcomments referenced full WPDS token custom-property names inside Emotion.tsfiles. The esbuild token-fallback plugin claims any file whose text contains that prefix (comments included), which displaces the Emotion transform and makes styled-component selectors throw at runtime — failing 21 Storybook suites.no-ds-tokensmissed it because it only checks string literals, not comments.How?
dropdown-motion.ts,config-values.js, anduse-modal-exit-animation.ts).Testing Instructions
storybook-checkshould pass.Button/FormToggle/RadioControl, andPanel/Modal/Toolbar/DropdownMenudividers.Follow-ups