Does anyone miss descriptive class names? (applies not just to emotion)

[spherop]

So, I am loving react-emotion! We're going down the path of switching to it on my team after reviewing the options.

But.. the only downside compared to vanilla css for me is that the resultant css class attrs no longer map easily to what they are in code.

Eq:

...
ends up as...

I understand the need for the unique ID. Wondering if anyone else would derive value from retaining original component name in the ID, eg:

or just

This would save me a lot of mental effort looking through and understanding code in chrome console. Perhaps this is just me... curious anyone else's thoughts.

[Of course this adds some extra data in the file - could be optional.]

[evan-scott-zocdoc]

@spherop Try adding { autoLabel: true } to your babel-plugin-emotion config :)

[spherop]

Thanks for reply. This is great that this capability is there -- But I must be doing something wrong.
See anything wrong with my .babelrc? I'm still not seeing the labels added in css.

<div class="css-1nuurqv">...</div>

.babelrc

{ 
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    ["emotion", {
      "autoLabel": true
    }],
    "transform-decorators-legacy"
  ],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

[evan-scott-zocdoc]

I don't believe so. I think it was a very recent addition though, so might need to upgrade your version of the babel plugin. #442 https://github.com/emotion-js/emotion/blob/master/CHANGELOG.md#rocket-enhancement

[spherop]

@evan-scott-zocdoc thanks so much - you were right - had to update. Now is working ...ahh such a relief to look in console at readable html hierarchy. Icing on the cake for me with react-emotion.

Thanks!

[tkh44]

Glad you got it worked out @spherop.