How use with Vite.js, especially displayName for debugging.

[valerii15298]

When using with CRA, its possible to see name of component inside css classes, but I cannot figure out how to make a nice developing/debugging experience when using with Vite.js. Is there any advices how to show in classes names of components when using with Vite.js?

[rockwotj]

I suggest using https://www.npmjs.com/package/vite-plugin-babel-macros and importing from styled-components/macro. We have this working nicely in our vite setup (although that's with a custom plugin that should do the same as the package I pointed you too).

[ronaldruzicka]

Hi @rockwotj, please could you share your code how you set it up?
Or could you please tell me what am I doing wrong?

I have this config

// vite.config.ts
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import macrosPlugin from "vite-plugin-babel-macros"

export default defineConfig({
  plugins: [
    reactRefresh(),
    macrosPlugin(),
  ],
});

And then I just import from styled-components/macros

// App.tsx

import styled from 'styled-components/macros';

But I get a Typescript error and error from Vite.
I have the latest version of Styled Components: "styled-components": "^5.3.1"

// Typescript
Cannot find module 'styled-components/macros' or its corresponding type declarations.

// Vite
error when starting dev server:
Error: The following dependencies are imported but could not be resolved:
  styled-components/macros (imported by /Users/ronaldruzicka/Projects/vite-project/src/App.tsx)

Thanks!

[rockwotj]

Hi @rockwotj, please could you share your code how you set it up?
Or could you please tell me what am I doing wrong?

Looks like it's not installed. Did you run npm install?

[ronaldruzicka]

Oh my bad, I was using plural /macros instead of singular /macro 🤦‍♂️
Now it's working properly, thanks a lot!

[IvanBernatovic]

@ronaldruzicka I added the macros plugin and started importing styled like this:
import styled from 'styled-components/macro

But I still don't get proper class names, they are still randomized/minified. Is there anything else I should do?

[rockwotj]

@IvanBernatovic you need to have a config file to get display names, see the docs for more: https://styled-components.com/docs/tooling#experimental-config

[ronaldruzicka]

@IvanBernatovic I didn't use any other config. I just included that macrosPlugin in the vite.config.ts and then used import styled from 'styled-components/macro'; in the component and it worked.

I have these versions:

"styled-components": "^5.3.0"
"vite-plugin-babel-macros": "^1.0.5",

But maybe try that experimental config as well.

[IvanBernatovic]

@rockwotj @ronaldruzicka Thank you for your responses! I tried to add config as per styled-components docs but it still didn't work. I tried many things but in the end, solution was even simpler than this approach. This is what worked for me in vite.config.js:

// vite.config.js

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              fileName: false
            }
          ]
        ]
      }
    })
  ]
})

No need to install any other plugin for babel macros (nor vite nor babel macros plugin) and no need to change exports to import styled from 'styled-components/macro'.

[velsa]

@IvanBernatovic
I'm new to Vite. What additional config should I have to run the same plugin in a Typescript project?
If I just add it as in your example, I get lots of errors from vite. It seems that it tries to parse all TS typecasts as react components :)
E.g. it thinks that <ISomeInterface> is a component and complains.

[IvanBernatovic]

@IvanBernatovic I'm new to Vite. What additional config should I have to run the same plugin in a Typescript project? If I just add it as in your example, I get lots of errors from vite. It seems that it tries to parse all TS typecasts as react components :) E.g. it thinks that <ISomeInterface> is a component and complains.

Unfortunately, I can't help you with that as I don't have this setup (vite+typescript+styled-components) so I can't tinker around with config. Maybe if you had a reproducible example (a repo or codesandbox project) I could take a look.

Did you try other approaches from previous comments?

[agriffis]

E.g. it thinks that <ISomeInterface> is a component and complains.

@velsa That's a known peculiarity of tsx. For generics you can use <T extends unknown> (you don't need this if there are two or more params, only one). For casting you can use as. See microsoft/TypeScript#6897 and lots more if you google tsx generic cast

[agriffis]

@IvanBernatovic

But I still don't get proper class names, they are still randomized/minified. Is there anything else I should do?

Just connecting some dots, this was almost certainly because of styled-components/styled-components#3635

[velsa]

Btw, for anyone interested, I eventually did the following:

  plugins: [
    // For all styled components:
    // create classnames from fileName and displayName in development
    react({
      babel: {
        presets: ['@babel/preset-typescript'],
        plugins: [
          '@babel/plugin-transform-typescript',
          [
            'babel-plugin-styled-components',
            {
              ssr: false,
              pure: true,
              displayName: true,
              fileName: false,
            },
          ],
        ],
      },
    }),
  ];

I added vite react plugin which accepts babel configuration and I am also doing TS transform ('@babel/plugin-transform-typescript) before using babel-plugin-styled-components.

This approach seems to play nicely with vite )