add css-in-js strategy

[santospatrick]

What are you reporting?

• Bug that needs fixing
• Feature
• Code refactor
• Continuous Integration (CI) improvement
• Changes in documentation (docs)
• Other

What is the current behavior?

We need to analyze and discuss which package the project needs to add support to css-in-js

What is the expected behavior?

Have a mature lib to apply css-in-js better than react's defaults way to implement

Which problem(s) will it solve?

Styling inside React Components

Which versions of React and TypeScript are you using?

--

What is your environment?

Version: 1.0.4
OS: Linux Mint 17.3 Cinnamon 64-bit
Browser: Chrome 65 (64 bits)
Node version: 8.9.4
Device: Notebook Lenovo E431

[santospatrick]

i vote for styled-components, what do you guys think?

[jhserodio]

why?

[eliandersoh]

Styled components provide a clean way to work with css-in-js on react components:

• It removes the mapping between components and styles
• Support both react and react native
• Has theming support that can help on issue add theme strategy #20
• Has basic sass support
• Since version 3 it has better performance.
• Has a large support community
• Has more than 14k star on github
• Large companies like atlassian use on its components library

[jhserodio]

and the others libraries, tools?
why has react native support?
why styled components and not pure css and css modules?
this is better solution compare between ?

we need a strategy and analysis thinking in the raw and your use case, not a list of advantages of a library.

[santospatrick]

From what i read so far:

Package	Props Access	TypesScript Support	Media Queries	Theme Support	Component Inner Reference
emotion	yes	kindof	yes	yes	yes
styled-components	yes	yes	yes	yes	yes
aphrodite	kindof	yes	yes	kindof	not needed

We also have glamorous which is very much like styled-components (also inspired in), rocks all the columns in that table and at this point they made css in js autocomplete, which i find really helpful for less docs reading and fast coding when using our repo, what do you guys think? Also, we have a big guy in this project.

[jhserodio]

the syntax and usage is very different between styled-components/styled-jsx and glamour.

[santospatrick]

@jhserodio why different usage?

[jhserodio]

syntax is different, glamor is how to react css in js, others like css. The use is different in principles, with glamor you create styles with various syntax if you use external codes.

analyze these topics:

• performance
• environment
• community adherence
• support and compatibility with already existing dependencies

We can not choose something now that ends up being discontinued, causing a major impact on all development, to be honest, the closer to native technology, the easier it is to deal with future changes.

[santospatrick]

I'm on glamorous now because we can work with existing css easily, then we can extend from libs that aren't react specific, like material.io.