Repository navigation
Improve DevTools CSS variables situation #22678
Description
Related to this comment: #22660 (review)
The majority of DevTools theme colors are stored in packages/react-devtools-shared/src/constants:
https://github.com/facebook/react/blob/5cccacd131242bdea2c2fe4b33fac50d2e3132b4/packages/react-devtools-shared/src/constants.js#L75-L383
But some of them are also stored in packages/react-devtools-shared/src/devtools/views/root.css:
https://github.com/facebook/react/blob/5cccacd131242bdea2c2fe4b33fac50d2e3132b4/packages/react-devtools-shared/src/devtools/views/root.css#L2-L18
This is because of how they are referenced in a theme-agnostic way by Reach UI style overrides (for things like tooltips and context menus).
Can we do better here, at least to ensure they stay in sync? For example, can the ThemeProvider set the redundant values at the root level when the SettingsContext theme changes?
The primary goals of the current architecture are:
- Don't bleed styles into the global namespace (for our inline package users like Code Sandbox or Replay IO).
- Don't require awkward forced layout or re-renders for components that read style values programatically.
Activity
jyash97 commentedon Nov 2, 2021
I was looking into it and here is what I have in mind:
Exposing all vars using
styleprop to reach-ui components which will be rendered in Portal (outside the rendered DOM), and we can create wrapper component or re-export the same component by passing all vars:Example: https://codesandbox.io/s/quiet-fast-exg5q?file=/src/App.js
childrenwill have access to those CSS variables and we can style without adding custom variables inroot.cssbvaughn commentedon Nov 3, 2021
@jyash97 Oh! That's a very eloquent solution!
So DevTools can just re-export the components we use, with the style decoration. Love it!
jyash97 commentedon Nov 3, 2021
Glad you liked it 😄
Can I create a draft PR for the above solution ?
bvaughn commentedon Nov 3, 2021
Yes, please do!