Improve the styling DX to quickly find a specific component using browser dev tools

[masaok]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

This StackOverflow question (that I wrote) explains the problem clearly:

https://stackoverflow.com/questions/71152038/in-mui-v5-how-do-you-debug-find-a-specific-element-style-class-in-the-dev-tools

Quick recap:

In MUI v4, it was very easy to locate a specific component and it's style block (HelloWorld-main) using the browser dev tools:

In MUI v5, the dev tools Mui-root css-1lekm29 does not indicate the componnt/style block in the React code:

After an email response from Olivier Tassinari, he suggested I open this issue.

This is an excerpt from Olivier's email, specifically with his solution:

Emotion has a babel plugin to link where the styles have been created https://emotion.sh/docs/@emotion/babel-plugin. The DX should feel like this https://user-images.githubusercontent.com/3468483/157389915-6f08dc9b-f3b2-47b3-b9cf-6768681f81fe.mp4.

I did a bit more exploration on the problem, I have found that because of our custom _document.tsx Next.js integration using extractCriticalToChunks, we don't provide the source map, breaking the source map. Without, it works :), proof:

Olivier ended the email with:

Now, in our case, we are using the , the babel plugin only looks at the styled() calls, so it would likely need a custom Babel plugin to make it work.
...
It could be a great opportunity to improve the styling DX. For example, when using Tailwind CSS, I believe that this problem is unsolved.

Examples 🌈

CleanShot.2022-03-09.at.15.04.34.mp4

Motivation 🔦

Given a very large React app, it's very easy to get lost in all of the components, so being able to quickly locate a specific component after inspecting the DOM in dev tools would be critical to the DX (as Olivier mentioned in his email).

[oliviertassinari]

@masaok Great, thanks for this issue. As the next steps, I can think of 4 different steps:

1. We fix extractCriticalToChunks in dev mode. It should append the source map. Our examples are broken

material-ui/examples/nextjs/pages/_document.js

Line 61 in 58b5d72

const { extractCriticalToChunks } = createEmotionServer(cache);

2. We update our docs and our examples to add the Babel plugin like in https://mui.com/system/styled/#how-to-use-components-selector-api.
3. We create a new page in the docs to talk about the source map, and why you need a Babel plugin or SWC in the case of Next.js
4. For the sx prop and the source map, especially when using a <Box>, this might require a custom Babel plugin for us to solve. I can't find anyone talking about this problem in:

• https://github.com/styled-system/styled-system/issues?q=is%3Aissue+is%3Aopen+source+map
• https://github.com/chakra-ui/chakra-ui/issues?q=is%3Aissue+source+map+is%3Aclosed

I don't know how to fix this.