😎 Long name, right...

It takes your first class name (if it starts with up-case) and use it as property for component.

<Component className="Inner" />

Will be transformed into this:

<Component.Inner />

You don't need this plugin unless you use Pug with react. Pug consider everything after dot as class names, so it converts code like:

pug`Component.Inner Hello`

Into this:

<Component className="Inner">Hello</Component>

This plugin was created to change the result to this one:

<Component.Inner>Hello</Component.Inner>

yarn add --dev babel-plugin-transform-jsx-classname-components

In .babelrc:

{
  "plugins": [
    "transform-jsx-classname-components"
  ]
}

Note: It should be placed after transforming Pug into Jsx.

If you set it to ['Icons'] it will handle only <Icons ... />:

<Component className="Inner" />
<Icons className="Inner" />

Will be transformed into:

<Component className="Inner" />
<Icons.Inner  />

If you set it to styleName it will process styleName attribute instead of default one:

<Component styleName="Inner" />
<Icons className="JustClass" styleName="Inner" />

Will be transformed into:

<Component.Inner />
<Icons.Inner className="JustClass"  />