feat: Style macro devtool #8305

snowystinger · 2025-05-27T06:47:22Z

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:

# Conflicts: # yarn.lock

rspbot · 2025-06-03T06:13:01Z

Build successful! 🎉

rspbot · 2025-06-03T06:15:22Z

Build successful! 🎉

rspbot · 2025-06-03T06:37:11Z

Build successful! 🎉

rspbot · 2025-06-04T04:04:24Z

Build successful! 🎉

rspbot · 2025-06-05T03:10:28Z

Build successful! 🎉

…ro hashes

rspbot · 2025-06-05T03:25:15Z

Build successful! 🎉

rspbot · 2025-06-05T03:25:19Z

Build successful! 🎉

rspbot · 2025-06-05T07:43:58Z

Build successful! 🎉

rspbot · 2025-06-06T02:37:31Z

Build successful! 🎉

rspbot · 2025-06-06T02:49:34Z

Build successful! 🎉

rspbot · 2025-06-06T05:11:41Z

Build successful! 🎉

rspbot · 2025-06-06T05:11:42Z

## API Changes

react-aria-components

/react-aria-components:Tree

 Tree <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
+  keyboardDelegate?: KeyboardDelegate
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:DropIndicator

 DropIndicator {
+  activateButtonRef?: RefObject<FocusableElement | null>
   children?: ReactNode | ((DropIndicatorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropIndicatorRenderProps & {
 })) => string
   style?: CSSProperties | ((DropIndicatorRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target: DropTarget
 }

/react-aria-components:TreeProps

 TreeProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
+  keyboardDelegate?: KeyboardDelegate
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:TreeRenderProps

 TreeRenderProps {
-  allowsDragging: boolean
   isEmpty: boolean
   isFocusVisible: boolean
   isFocused: boolean
-  selectionMode: SelectionMode
   state: TreeState<unknown>
 }

/react-aria-components:DropIndicatorProps

 DropIndicatorProps {
+  activateButtonRef?: RefObject<FocusableElement | null>
   children?: ReactNode | ((DropIndicatorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropIndicatorRenderProps & {
 })) => string
   style?: CSSProperties | ((DropIndicatorRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target: DropTarget
 }

/react-aria-components:DraggableCollectionState

+DraggableCollectionState {
+  collection: Collection<Node<unknown>>
+  draggedKey: Key | null
+  draggingKeys: Set<Key>
+  endDrag: (DraggableCollectionEndEvent) => void
+  getAllowedDropOperations?: () => Array<DropOperation>
+  getItems: (Key) => Array<DragItem>
+  getKeysForDrag: (Key) => Set<Key>
+  isDisabled?: boolean
+  isDragging: (Key) => boolean
+  moveDrag: (DragMoveEvent) => void
+  preview?: RefObject<DragPreviewRenderer | null>
+  selectionManager: MultipleSelectionManager
+  startDrag: (Key, DragStartEvent) => void
+}

/react-aria-components:DroppableCollectionState

+DroppableCollectionState {
+  collection: Collection<Node<unknown>>
+  getDropOperation: (DropOperationEvent) => DropOperation
+  isDisabled?: boolean
+  isDropTarget: (DropTarget | null) => boolean
+  selectionManager: MultipleSelectionManager
+  setTarget: (DropTarget | null) => void
+  target: DropTarget | null
+}

/react-aria-components:MultipleSelectionState

+MultipleSelectionState {
+  childFocusStrategy: FocusStrategy | null
+  disabledBehavior: DisabledBehavior
+  disabledKeys: Set<Key>
+  disallowEmptySelection: boolean
+  focusedKey: Key | null
+  isFocused: boolean
+  selectedKeys: Selection
+  selectionBehavior: SelectionBehavior
+  selectionMode: SelectionMode
+  setFocused: (boolean) => void
+  setFocusedKey: (Key | null, FocusStrategy) => void
+  setSelectedKeys: (Selection) => void
+  setSelectionBehavior: (SelectionBehavior) => void
+}

/react-aria-components:VirtualizerState

+VirtualizerState <T extends {}, V> {
+  contentSize: Size
+  endScrolling: () => void
+  isScrolling: boolean
+  setVisibleRect: (Rect) => void
+  startScrolling: () => void
+  virtualizer: Virtualizer<{}, V>
+  visibleViews: Array<ReusableView<{}, V>>
+}

@react-aria/utils

/@react-aria/utils:LoadMoreSentinelProps

 LoadMoreSentinelProps {
-  collection: Collection<any>
+  collection: Collection<Node<unknown>>
   onLoadMore?: () => any
   scrollOffset?: number = 1
 }

@react-spectrum/dnd

/@react-spectrum/dnd:DragAndDropOptions

 DragAndDropOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   getAllowedDropOperations?: () => Array<DropOperation>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   getItems?: (Set<Key>) => Array<DragItem> = () => []
   onDragEnd?: (DraggableCollectionEndEvent) => void
   onDragMove?: (DraggableCollectionMoveEvent) => void
   onDragStart?: (DraggableCollectionStartEvent) => void
   onDrop?: (DroppableCollectionDropEvent) => void
   onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
+  onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   renderPreview?: (Set<Key>, Key) => JSX.Element
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean

@react-spectrum/s2

/@react-spectrum/s2:ComboBox

 ComboBox <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   allowsCustomValue?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
-  dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   shouldFocusWrap?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:Picker

 Picker <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
-  dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key | null) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:TreeView

 TreeView {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
+  keyboardDelegate?: KeyboardDelegate
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:ComboBoxProps

 ComboBoxProps <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   allowsCustomValue?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
-  dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   shouldFocusWrap?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:PickerProps

 PickerProps <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
-  dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key | null) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:TreeViewProps

 TreeViewProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
+  keyboardDelegate?: KeyboardDelegate
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

snowystinger added 4 commits May 27, 2025 11:38

feat: Style Macro DevTool

145b9d9

# Conflicts: # yarn.lock

add parcel patch

7d8b453

small fixes

3266c18

fix mergeStyles

8e4f8ee

snowystinger mentioned this pull request May 27, 2025

expose code location to MacroContext parcel-bundler/parcel#10171

Merged

3 tasks

snowystinger and others added 4 commits June 2, 2025 19:48

Merge branch 'main' into style-macro-devtool

b956f9c

Add README so people know how to develop this extension

af59e2e

add todos, fix tests, fix lint

85e70d2

fix dev logic

3adab93

snowystinger marked this pull request as ready for review June 3, 2025 06:14

add todo

690037a

use static method to inject script

5a89555

fix the patch

a68dbfd

I don't think there is a bug here, different states get different mac…

2bf9d6a

…ro hashes

snowystinger changed the title ~~[WIP] feat: Style macro devtool~~ feat: Style macro devtool Jun 5, 2025

remove console logs

237392f

add extension icon

2706cd1

snowystinger force-pushed the style-macro-devtool branch from 994911b to 2706cd1 Compare June 6, 2025 05:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Style macro devtool #8305

feat: Style macro devtool #8305

Uh oh!

snowystinger commented May 27, 2025 •

edited

Loading

Uh oh!

rspbot commented Jun 3, 2025

Uh oh!

rspbot commented Jun 3, 2025

Uh oh!

rspbot commented Jun 3, 2025

Uh oh!

rspbot commented Jun 4, 2025

Uh oh!

rspbot commented Jun 5, 2025

Uh oh!

rspbot commented Jun 5, 2025

Uh oh!

rspbot commented Jun 5, 2025

Uh oh!

rspbot commented Jun 5, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

Uh oh!

feat: Style macro devtool #8305

Are you sure you want to change the base?

feat: Style macro devtool #8305

Uh oh!

Conversation

snowystinger commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Jun 3, 2025

Uh oh!

rspbot commented Jun 3, 2025

Uh oh!

rspbot commented Jun 3, 2025

Uh oh!

rspbot commented Jun 4, 2025

Uh oh!

rspbot commented Jun 5, 2025

Uh oh!

rspbot commented Jun 5, 2025

Uh oh!

rspbot commented Jun 5, 2025

Uh oh!

rspbot commented Jun 5, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

rspbot commented Jun 6, 2025

Uh oh!

rspbot commented Jun 6, 2025

react-aria-components

/react-aria-components:Tree

/react-aria-components:DropIndicator

/react-aria-components:TreeProps

/react-aria-components:TreeRenderProps

/react-aria-components:DropIndicatorProps

/react-aria-components:DraggableCollectionState

/react-aria-components:DroppableCollectionState

/react-aria-components:MultipleSelectionState

/react-aria-components:VirtualizerState

@react-aria/utils

/@react-aria/utils:LoadMoreSentinelProps

@react-spectrum/dnd

/@react-spectrum/dnd:DragAndDropOptions

@react-spectrum/s2

/@react-spectrum/s2:ComboBox

/@react-spectrum/s2:Picker

/@react-spectrum/s2:TreeView

/@react-spectrum/s2:ComboBoxProps

/@react-spectrum/s2:PickerProps

/@react-spectrum/s2:TreeViewProps

Uh oh!

Uh oh!

snowystinger commented May 27, 2025 •

edited

Loading