Migrate to CSS-in-JS

[raveclassic]

This is going to track an upcoming migration to a css-in-js solution. Which one is to be decided but I suggest styled-components because one of our teams has experience of using it in a production-running project.

Any thoughts?

/cc @sutarmin @igoralekseev @mankdev @dramoturg

UPD:

• migrate to styled-components
• migrate to lower-dash-case in file names Migrate to lower-dash-case in file names across all packages #84

[scink]

i'd suggest emotion. but i can't say any pros or cons of it against sc yet

[sutarmin]

I'm voting for deeper research before choosing a particular solution because all the solutions have a different impact on the runtime. Especially if we want the approach that will work with CRA without additional configuration. The most important question now is how in hurry are we with this decision?

one of our teams has experience of using it in a production-running project

I'd like to notice here that almost every css-in-js tool that I met has very similar syntax/api and similar rules of working (overriding, scoping, etc.). I think the experience our team gained could be applied to any other solution, not only sc

[raveclassic]

Do we have time for such deeper research? Right now I have some spare time to migrate everything - I'd like to use such opportunity. Besides you're pointing the API accross the libs is similary so we could possibly replace SC with something more performant later, right?

[igoralekseev]

I am voting for SC because of bigger community, better tools and integration etc.
Emotion as far as I know was created when SC had rendering speed problems and no ability to refer components (styled-components v3). Both this issues were resolved in v4 and now v5 is coming.

Anyway API is very similar

[mankdev]

I think if we decide to get deeper research, we lost an excellent opportunity for migration.

So I am voting for start migration to SC. If we reach some restrictions, it should be easy to migrate to another library.

@raveclassic if you decided to do this task, please keep in mind 3 level of styles that we spoke a lot.

1. basic styles
2. project overrides
3. in-place overrides

[raveclassic]

We had a chat with @mankdev about SC and decided to wait for an upcoming release of Design System from our design team. Therefore I'm putting this issue on hold. Anyway I'm going to send another PR with update of react and storybook

[raveclassic]

#157