How do I trace React Emotion Styled Components back to their location in the source code

Question

I have a React application using create-react-app with @emotion/styled components.

When I look at my code in the browser, I want to be able to see where the code generating the element is coming from. For example, if I can see a className for a styled component which includes the filename, this would be a useful clue. Something like:

<label class="css-plgvp9-Field.component.js">The code is probably in Field.component.js.</label>

For comparison, what I currently get is:

<label class="css-plgvp9">Where am I?</label>

• Is there a way I can modify the application configuration to do that?
• Is there a better way I haven't thought of to do that?
• Is there any way to do that at all?

The contents of Field.component.js:

import styled from '@emotion/styled';

// ...

const Label = styled.label`
  /* ... */
`;

It should probably be noted that I'm using @mui/material as well.

Answer 1

If you want to modify the way classNames are generated from emotion, you will need to use the babel plugin provided from emotion, reference docs: https://emotion.sh/docs/@emotion/babel-plugin.

If what you are seeking is a way to override CRA's babel configuration without ejecting, it can be achieved by using these two npm packages, in conjunction:

customize-cra and react-app-rewired.

See this article for an example usage: https://devinschulz.com/modify-create-react-apps-babel-configuration-without-ejecting/

I believe your resulting config-overrides.js file will look something like this:

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin(
    [
      '@emotion',
      {
        sourceMap: true,
        autoLabel: 'dev-only',
        labelFormat: '[local]',
        cssPropOptimization: true,
      },
    ],
  ),
);