React-devtools: Consider injecting styles to style tags?

[infinnie]

Inline styles seem to have become a complete mess in React DevTools. We have to add event handlers for even hover or focused states. To make things worse, inline styles do not support pseudo-classes and pseudo-elements like :before, :after, and placeholders. Using libraries such as Styled Components to dynamically inject styles, the problem could be alleviated to a certain extent.

[bvaughn]

As a maintainer, I share your opinion that the current state of inconsistent styling is a mess for DevTools, but I don't think this issue is really actionable– because it's basically saying to refactor all of the UI code for something that won't bring any benefit to React DevTools users.

If we had a much larger team, I'd love to tackle something like this. (In fact, I filed a related issue about this already– #1090.) But I don't think it's a high enough priority to get done any time soon given everything else that's going on.

If you're interested in contributing, maybe cleaning up the styles would be a good area to tackle?

For what it's worth, I don't agree with the idea of eliminating _all_ inline styles in favor of external style tags– but if we moved to CSS variables for themes, it would enable us to use external CSS (with support for e.g. :hover states) in cases where it made more sense to.

I'm going to close this issue as a duplicate of #1090 since they're so closely related. Please feel free to add more thoughts to that issue if you'd like to contribute. 😄

[infinnie]

Improved UI together with

• Pseudo classes
• Pseudo elements
• Key frame animations

Could be a tangible benefit for end users.

[bvaughn]

I don't see how pseudo classes or elements improves UI for end-users. They wouldn't even notice.

As for animations, DevTools doesn't currently animate anything _except_ the profiler flame chart, and that's already built with CSS transitions. 😄

[infinnie]

Say I want a different color for placeholders which behaves consistently in all browsers. What’s more, with CSS extracted to style tags more types of animation could be empowered.

[bvaughn]

Say I want a different color for placeholders which behaves consistently in all browsers.

I don't understand. This could be implemented with inline styles just as easily as with external styles.

What’s more, with CSS extracted to style tags more types of animation could be empowered.

True, but we don't have any use cases for new animations currently– so I don't think we should invest a lot of effort into that refactor.

[infinnie]

Injected styles but not inline ones: inline styles do not support pseudo elements.

[bvaughn]

I did not realize you meant the :placeholder selector when you said "placeholders".

Regardless, you're still describing use cases that don't currently exist– so I don't think it's justified to spend any significant amount of effort to support them. 😄

[infinnie]

The styles of pseudo elements behave inconsistently across browsers.