Plugin doesn't display name

[AlexandreBourdeaudhui]

Hello 👋 I know this is not the best place for this, but i don't know why, this plugin doesn't work with my code 😶.

• babel-plugin-glamorous-displayname version: "^2.1.0",
• node version: v8.7.0
• npm (or yarn) version: 1.2.1

Relevant code or config

// .babelrc
{
  "presets": ["env", "react"],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "glamorous-displayname",
    ["module-resolver", {
      "root": ["./app"]
    }]
  ],
  "env": {
    "production": {
      "plugins": ["transform-react-remove-prop-types"]
    }
  }
}

What you did: For example, this code :

// style.js
import { div } from 'glamorous';

export const StyledApp = div({
  color: '#fffdd8',
  display: 'flex',
  height: '100%',
  position: 'relative',
});

What happened: In my React DevTools, i don't have StyledApp, just glamorous(div)

Someone can help me ? 😶 Thanks..

[kentcdodds]

Hi @AlexandreBourdeaudhui,

So your style of code is actually not supported and just works by chance. The proper and supported way to write glamorous components is like this:

import glamorous from 'glamorous';

export const StyledApp = glamorous.div({
  color: '#fffdd8',
  display: 'flex',
  height: '100%',
  position: 'relative',
});

If you want to save typing you could also just do this:

import g from 'glamorous';

export const StyledApp = g.div({
  color: '#fffdd8',
  display: 'flex',
  height: '100%',
  position: 'relative',
});

Good luck!