StyleX DevTools

About

DevTools extension that gives you a custom "Styles" panel while exploring various elements which is optimized for atomic styles. 

Features for any kind of atomic Styles:

- Instead of organizing styles by selector, styles are organized by property
- Editing styles works reliability to only override styles on the current element. Avoid accidentally editing styles for elements globally.
- Editing styles suggests styles that already exist letting you easily swap classNames
  - When using a new styles not in your CSS file, inline styles are used.
- Easily resent style overrides

Features specifically for StyleX:

- Detect the `data-style-src` attributes on elements in StyleX dev mode to see the source of styles
- Single click to jump to the relevant JS/TS file within dev tools
- See the style objects actually applied in the exact order they are applied