Oni: Suggestion: switching over to styled-components

[ghost]

Filing this issue as the project is still relatively young and it is still somewhat feasible to make the switch ... I was wondering if you know about styled-components. It takes away the burden of ensuring class names are unique across the entire application, makes it possible to embed "skeleton" CSS in React source files, and even has support for theming using a specialised React component.

One reason that I'm suggesting this right now is that it will get more and more difficult to come up with unique class names for CSS styles the more plugins are added. styled-components generates IDs automatically that won't collide, so I personally think it is better for scaling.

[ghost]

Above that, I just noticed that it also enables to test only select parts of the UI without webpacking the source.

[akinsho]

@samvv just very briefly mentioned this to @bryphe in #1114 whilst dealing with some styling issues, I'm a huge fan of styled-components and depending on general consensus re a possible change could definitely help with this.

[ghost]

@Akin909 Nice 😄 I'd be willing to do the dirty work, given that I'd need to do it anyways if I want to continue setting up the testing platform in #1133.

[bryphe]

Thanks for the proposal @sammv ! It was funny that @Akin909 just brought this up too in #1114 😄

I actually don't have much experience with styled components (I used radium briefly) - but this looks really nice.

I took a pass through the docs (the motivation section) - it does seem like it would be a significant improvement over what we have today! Excited to see how it works.

One reason that I'm suggesting this right now is that it will get more and more difficult to come up with unique class names for CSS styles the more plugins are added. styled-components generates IDs automatically that won't collide, so I personally think it is better for scaling.

Makes sense to me - I've hit issues with this already. The css class names are ad-hoc anyway, with no real standardization, so they are at best confusing and at worst cause problems as above. Styled components seem like a good solution to this.

Thanks for the suggestion, I'm definitely on board!

[ghost]

Nice 😄 If you want, I can convert it. Gets me acquainted with the UI and I already know _styled-components_ quite thoroughly.

[bryphe]

That would be awesome, @samvv ! Really appreciate it!

[badosu]

It seems styled-components is the default way to implement new features or refactor old ones now, unless it's decided to have a push to enforce on the whole codebase (instead of incrementally as it's going on) let's close this one and reopen if necessary.