Replace Aphrodite with Styled Components

[petemill]

Just wanted to start a conversation before we get too far and make sure we make the right choice with the technology we use to create the CSS for each compontent.

Some of the main issues I've had with aphrodite:

• it cannot reference it's own classes more than once. This bites when wanting to do just slightly more complicated selectors involving :not(.myItem_modifier) or :last-of-type(.something), etc. Yes, it's an advantage to not be able to do nesting, but sometimes it's actually neccessary to have the leanest, most readable code
• no editor supports intellisense / highglighting for css in javascript objects like that (AFAIK)
• it has a higher bar to entry with knowing the syntax to do some things

Some of the ideas we could promote through the choice of technology:

• Access to javascript constants / generated values (for themeing or settings-based values)
• Cannot interfere with styles outside of the component they are defined in
• Avoids nesting so that css structure is not tied to dom structure

One tech choice I think is a good contender is css-modules. Like aphrodite, it provides a javascript object containing all the class names, and it compiles class names to unique strings that will only apply to components that use the name generated from that instance. However other advantages are:

• You can write it in normal .css files, and put that file next to each component in a component directory
• You can include css from parent / global definitions, perhaps like global typography styles, using the composing syntax (might be a disadvantage, but that's up to us)
• It supports everything css does
• Has a few options for passing down 'themeing' options
• You can mention a class name multiple times in a module, even using nesting (if you must) and it will translate that to the same unique class name string
• Supported directly in webpack css-loader
• Can simply use the common 'class-names' package to do selective class inclusion

Another popular choice these days is styled-components. I'm less familiar with it, and not overjoyed by what it's doing, but it's worth investigating. I think it has these advantages:

• Easy css-in-javascript style
• Creates modular react components just with css styles and props
• Has a few options for passing down 'themeing' options
• Supports syntax highlighting in code editors
  However it has the following disadvantages IMO:
• Does not support all pseudo class selectors
• Does not rely on browser's CSS engine for parsing pseudo selectors it does support (I think)

[luixxiul]

As conversion tasks with Aphrodite will stay on the lowest priority, I think anything great / better at performance can be selected in favor of Aphrodite, unless @cezaraugusto are going to address the concerns with his forked Aphrodite.

[luixxiul]

Avoids nesting so that css structure is not tied to dom structure

I am wondering if this would cause visual regressions if we won't keep BEM or other namings.

[cezaraugusto]

Aphrodite was dropped in 3146191 but we're using vanilla CSS for now. We're going with CSS modules. Changed this issue's title to include this in the next milestone.

[cezaraugusto]

Changed issue's title to match our last decision which was going with styled-components which was Implemented in v0.7.0 so closing