Easier to read `className`

[ojame]

We've started using css-modules, so our classnames can be lengthy if the file structure is nested:

What's worse with a single string, is when it's long (when you have many long classes), it gets truncated. To see the full length, you click and then it becomes editable, but as a single line. Therefor you need to copy and past to an editor:

The first thought I had was to break classNames onto new lines - this is a bit tricky though, as it requires the DataView to interpret a new line character.

I did a quick implementation of converting the string to an array, to see how readable it was:

To me, that is far more readable than having one string. I realise this is not a solution though, because it's not a true representation of the className type. I'm not sure if this is an isolated issue, or if it warrants a decent look?

[jaredly]

Hmmm that's a neat idea. Similar to #149, I think this would make a great plugin. In this case, I think the "better classnames" should be exposed as a separate pane in the sidebar, so that the "true" value is still available and copy-pasteable.

[sophiebits]

@ojame Curious: is the Chrome Elements panel more manageable to you?

[ojame]

@spicyj, not particularly. The tree isn't too inviting:

The right hand (Styles) panel is organised in a good way, with each style a separate entity. My situation is often trying to find which classes are applied to a component (because we're composing) - to ensure a class is getting composed correctly. I could visually parse the className (which is why i raised this issue) or I could look at the Chrome Elements Style panel and scroll through. Both of these options, to me, are a bit long winded compared to a simple list of class names.

Does that answer your question?

[gaearon]

Closing per inactivity. If you’re interested in this, please consider submitting a pull request, and we could discuss your proposal. Thanks!