Improve component CSS reliability with scoped prefix#23215
Improve component CSS reliability with scoped prefix#23215
Conversation
ItsJonQ
added
[Type] Code Quality
ItsJonQ
added
the
CSS Styling
|
Size Change: +4.4 kB (0%) Total Size: 1.14 MB
ℹ️ View Unchanged
|
|
Potentially dumb question, but would there be any impact for third parties using Emotion for styling as well? We use Emotion in all our blocks, and I'm curious if this might risk some kind of unanticipated breaking change. |
@chrisvanpatten Not a dumb question at all!! <3 That's a very valid use-case and concern! From my experience + tests (external to this project), Emotion's (internal) cache registry should respect any emotion rendered component. In the past, I've used this Provider in a nested fashion, with styled Emotion components coming in from a 3rd-party library, as well as 1st direct components. It all worked as expected 👍 ! The only issue that I can see is if a 3rd party library creates their own custom Provider, which manipulates the generated css output in an unexpected way. I'd imagine that this would be rare (but not impossible). Hopefully this helps! P.S. It never hurts to test it out! If you happen to test out this branch along with your custom blocks, I'd love to know how it turns out 🙏 |
|
@ciampo and I discussed how to proceed with this PR, and we decided to close this out since we now have a somewhat more comprehensive/reliable way to deal with the forms.css problem (#42747). It also turns out that we don't need the double-ampersand hacks too often, since they're only required for low-level elements like We'll close this for now and refer back to it when we have a need for it. Thanks! |
3 participants
This update adds a new (experimental) component in
@wordpress/componentsthat improves the integration withwp-adminfor generated CSS-in-JS styles.StyledScopeProvider
StyledScopeProvider is a component that adds CSS selector prefixing for styles rendered with Emotion (currently experimental within
@wordpress/components).Prefixing increases style specificity, allowing for a smoother integration into environments with pre-existing CSS rules.
(Example: Generated scoped styles for
<NumberControl />within Gutenberg.With the new
StyledScopeProvider, we can remove the (previous)&&&work-arounds. These were added to manually bump up specificity for overridingwp-admin/Editor styles.Note: At this moment, there are only a handful of Emotion styled
@wordpress/componentsComponents.Extra History
This was a technique I developed for a previous project in 2018. It was used to reliably integrate and render a React components into an old PHP/jQuery powered application (much like WordPress!).
The code I'm submitted was abstracted from a library I created:
https://github.com/ItsJonQ/styled-providers
Usage
In the above example, the
<InputControl />component styles (which are generated with Emotion), will be prefixed withhtml body.wp-admin.Instead of the generated CSS selector of
.css-123jda, it would instead behtml body.wp-admin .css-123jda. Increasing specificity in a controlled manner is helpful in situations where there may be conflicting styles.In the case of
<InputControl />, existing style rules such as.block-editor input[type="text]may pose problematic. However, the automatically generated selectorshtml body.wp-admin .css-123jdawill help ensure the elements are styled as expected.How has this been tested?
This has been tested in both Storybook and local Gutenberg.
npm installnpm run devTypes of changes
@emotiondependencies to@wordpress/components<StyledScopeProvider />component__experimentalChecklist:
Resolves: #18483