Add Display Name to CSS classNames for Easy Debugging

Opening a separate issue as requested by @hendrikniemann in https://github.com/chakra-ui/chakra-ui/issues/211.

It would be very helpful if chakra-ui adds component names to CSS classes it generates, like styled-components does. So that we can see components names not only in react developer tools, but in Elements panel as well.

ATM it looks like this: and it’s very hard to understand anything.

If it’s Flex-css-5vq3nc or Box-css-5vq3nc - it’s at least something.

I’m not sure if we can add names of custom components like styled-components does this, so that

import React from 'react`
import styled from 'styled-components'

const StyledSomething = styled.div`
   display: flex;
`

const CustomComponent = () => <StyledSomething />

export default CustomComponent

becomes CustomComponent-css-5vq3nc.

If it’s possible, it would be super helpful.

[elisherer]

Since babel-plugin-emotion is adding that Contextual Class Names. You can set babel-loader to not exclude @chakra-ui in webpack.config.js in the js loader rule:

  {
        test: /\.js$/,
        exclude: path => !path.includes("@chakra-ui") && /node_modules/.test(path),
        use: "babel-loader",
  }

I tested it and it started to show chakra’s components names in the classNames, but mostly Box and Box-PseudoBox so probably not what you wanted.

[ljosberinn]

you could do this:

import { Box as ChakraBox } from '@chakra-ui/core';

export const Box = ({ className, ...rest }) => <ChakraBox className={['chakra-box', className].filter(Boolean).join(' ')} {...rest} />