feat: Style macro devtool #8305

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

Closes

Follow instructions in README to run the plugin. There is also a description of the extension architecture in there as it is non-trivial due to the various sandbox that chrome imposes in addition to the different ways that a macro could be updated ie. static, dynamic, conditional static.

Note, there is a parcel bug which will cause all tabs that have had the content script injected to reload on every change. I cannot resolve this right now. If you build instead so that the extension doesn't change, then it won't do this. It's only during HMR. This will also cause every tab to refresh if a tab that had loaded the extension is closed.
For this reason, it can be easier to build the extension instead of running it as if you're developing.

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.

✅ 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:

I added a style macro in the commit e5ab27b which is static and is swapped with another static one on a span inside buttons. It reacts to the button being focused. You can see the extensions dev panel is updated when this swap occurs despite it being a static macro.

I removed that afterwards. So to test the updates on static macros, use that storybook build.

Otherwise, you can inspect elements and view the results in the dev tools panel.

🧢 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-10-29T04:21:34Z

Build successful! 🎉

rspbot · 2025-10-29T04:24:42Z

Build successful! 🎉

rspbot · 2025-10-29T04:39:56Z

Build successful! 🎉

rspbot · 2025-10-29T04:49:23Z

Build successful! 🎉

# Conflicts: # package.json # packages/@react-spectrum/s2/style/__tests__/style-macro.test.js # packages/@react-spectrum/s2/style/style-macro.ts # packages/dev/parcel-config-storybook/package.json # packages/dev/s2-icon-builder/package.json # yarn.lock

rspbot · 2025-12-18T22:50:27Z

Build successful! 🎉

rspbot · 2025-12-18T23:12:19Z

Build successful! 🎉

differentiate between hash conflicts when same style is used in multiple files

rspbot · 2026-01-06T22:33:22Z

Build successful! 🎉

rspbot · 2026-01-06T22:38:40Z

Build successful! 🎉

rspbot · 2026-01-06T22:52:27Z

Build successful! 🎉

reidbarber

Nice! Tested in our storybook.

yihuiliao

tested on the s2 storybook, i like the logo haha

devongovett · 2026-01-08T17:04:15Z

packages/@react-spectrum/s2/style/style-macro.ts

    // the defaults from the style definition are omitted.
    let allowedOverridesSet = new Set<string>();
-    let js = 'let rules = " ";\n';
+    let js = 'let rules = " ", currentRules = {};\n';


only needed in dev builds right?

devongovett · 2026-01-08T17:05:24Z

packages/@react-spectrum/s2/style/style-macro.ts

    this.pseudos = '';
    this.property = property;
    this.value = value;
+    if (isCompilingDependencies !== null) {


Remind me what this is for? Why is it only when compiling dependencies?

devongovett · 2026-01-08T17:05:40Z

packages/@react-spectrum/s2/style/style-macro.ts

  copy(): Rule
 }

+let conditionStack: string[] = [];


Perhaps at some point we can refactor this to not rely on global state

devongovett · 2026-01-08T17:06:24Z

packages/@react-spectrum/s2/style/style-macro.ts

+      }
+      if (conditionStack.length) {
+        // name += ` (${conditionStack.join(', ')})`;
+        res += ` currentRules[${JSON.stringify(name)}] = typeof currentRules[${JSON.stringify(name)}] === 'object' ? currentRules[${JSON.stringify(name)}] : {"default": currentRules[${JSON.stringify(name)}]}; currentRules[${JSON.stringify(name)}][${JSON.stringify(conditionStack.join(' && '))}] =  ${JSON.stringify(this.themeValue)};`;


This is kinda hard to read. A comment would help. Also maybe store JSON.stringify(name) in a variable and use that?

devongovett · 2026-01-08T17:07:44Z

packages/dev/style-macro-chrome-plugin/README.md

@@ -0,0 +1,384 @@
+# style-macro-chrome-plugin
+
+This is a chrome plugin to assist in debugging the styles applied by our Style Macro.


Suggested change

This is a chrome plugin to assist in debugging the styles applied by our Style Macro.

This is a chrome plugin to assist in debugging the styles applied by the React Spectrum Style Macro.

devongovett · 2026-01-08T17:13:41Z

packages/dev/style-macro-chrome-plugin/README.md

+- DevTools reads directly from CSS via `getComputedStyle()`
+
+**Dynamic Macros** (`-macro-dynamic-{hash}`):
+- Used when style conditions can change (e.g., `style({ color: isActive ? 'red' : 'blue' })`)


Suggested change

- Used when style conditions can change (e.g., `style({ color: isActive ? 'red' : 'blue' })`)

- Used when style conditions can change (e.g., `style({color: {default: 'blue', isActive: 'red'}})`)

devongovett · 2026-01-08T17:16:38Z

packages/dev/style-macro-chrome-plugin/README.md

+| `macro-response` | Content → Background → DevTools | Return requested macro data |
+| `get-macro` | Background → Content | Internal forwarding of query-macros |
+| `init` | DevTools → Background | Establish connection with tabId |
+| `class-changed` | Page → Content → Background → DevTools | Notify that selected element's className changed |


we might want to namespace these in case other scripts/extensions have the same names

devongovett · 2026-01-08T17:21:04Z

packages/dev/style-macro-chrome-plugin/src/content-script.js

+chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
+  debugLog('Received message:', message);
+
+  if (message.action === 'get-macro') {


Does it make sense to store the macro data directly in the dev tools instead of in the content script? i.e. have the content script send the macro data in the update-macros message instead of storing in window.__macros and then requesting it asynchronously via get-macro?

devongovett · 2026-01-08T17:24:37Z

packages/dev/style-macro-chrome-plugin/src/devtool.js

+
+        // Generate a unique ID if element doesn't have one
+        if (!element.hasAttribute('data-devtools-id')) {
+          element.setAttribute('data-devtools-id', 'dt-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9));


Maybe use a property instead of an attribute so it is more hidden and less likely to get overwritten by something?

devongovett · 2026-01-08T17:26:37Z

packages/dev/style-macro-chrome-plugin/src/icons/128.png

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

use document idle instead of start to help with tab reload

a95b4f6

snowystinger added 2 commits October 29, 2025 15:26

revert button change

ab75a0e

remove static macros extension information in production

105aa4a

add info to the architecture

4bc53f8

snowystinger added the ready for review label Dec 18, 2025

snowystinger added 4 commits December 18, 2025 16:22

fix merge

ad1713a

fix lint in test file

ecf912a

fix more merge issues

b10ecb4

fix tableview styles

5ec550d

add location to style macro hash

b7a5536

differentiate between hash conflicts when same style is used in multiple files

LFDanLu previously approved these changes Dec 18, 2025

View reviewed changes

fix tests

87c472a

snowystinger dismissed LFDanLu’s stale review via 87c472a January 6, 2026 22:24

Add more to readme

66a9dce

snowystinger assigned snowystinger and devongovett and unassigned snowystinger Jan 6, 2026

Merge branch 'main' into style-macro-devtool

d20f3e3

reidbarber approved these changes Jan 7, 2026

View reviewed changes

yihuiliao approved these changes Jan 8, 2026

View reviewed changes

devongovett approved these changes Jan 8, 2026

View reviewed changes

		@@ -0,0 +1,384 @@
		# style-macro-chrome-plugin

		This is a chrome plugin to assist in debugging the styles applied by our Style Macro.

	- Used when style conditions can change (e.g., `style({ color: isActive ? 'red' : 'blue' })`)
	- Used when style conditions can change (e.g., `style({color: {default: 'blue', isActive: 'red'}})`)

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 Oct 29, 2025

Uh oh!

rspbot commented Oct 29, 2025

Uh oh!

rspbot commented Oct 29, 2025

Uh oh!

rspbot commented Oct 29, 2025

Uh oh!

rspbot commented Dec 18, 2025

Uh oh!

rspbot commented Dec 18, 2025

Uh oh!

rspbot commented Jan 6, 2026

Uh oh!

rspbot commented Jan 6, 2026

Uh oh!

rspbot commented Jan 6, 2026

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

yihuiliao left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

snowystinger commented May 27, 2025 •

edited

Loading