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

Created on 9 Nov 2017 · 5Comments · Source: emotion-js/emotion

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.]

Source

spherop

👍1

Most helpful comment

@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!

spherop on 10 Nov 2017

👍2 🎉1

All 5 comments

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

evan-scott-zocdoc on 9 Nov 2017

👍2

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"]
    }
  }
}

spherop on 10 Nov 2017

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. https://github.com/emotion-js/emotion/pull/442 https://github.com/emotion-js/emotion/blob/master/CHANGELOG.md#rocket-enhancement

evan-scott-zocdoc on 10 Nov 2017

👍1

@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!

spherop on 10 Nov 2017

👍2 🎉1

Glad you got it worked out @spherop.