react-spectrum
react-spectrum copied to clipboard
adobe
feat: Style macro devtool
Closes
I recommend cloning React Spectrum in a new place and running the extension from there. This will make it so you can continue working without needing to pull it into your branch.
You will need to have my parcel changes in your PR for the time being while checking this. If you're only working off the PR, it's already there. Otherwise you can just copy the patch to @parcel/transformer-js and the package.json resolution entry.
You will also need the changes in the style macro, you can just copy runtime and style-macro files over.
Some notes, this is currently meant to be used in addition to the regular panels and AtomicCSS to determine where styles are coming from. It is not designed to replace those extensions and inspectors. There is a known memory leak that I've not figured out how to solve yet. If you memory leak too much, just refresh the page.
I also haven't solved how to maintain the object in the panel when doing things like hover, so it can be a little hard to inspect fleeting styles like that None of that should prevent us from starting to use it and merging and iterating.
✅ Pull Request Checklist:
- [ ] Included link to corresponding React Spectrum GitHub Issue.
- [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [ ] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [ ] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
🧢 Your Project:
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉