Consider Different CSS-in-JS Solution

[0xcaff]

Currently CSS Modules are used. There are some issues with it:

1. The primary reason we ejected was for CSS modules support. If our dependency on css modules can be removed, we can un-eject, simplifying the codebase. (See Un-Eject #14)

2. React has shown that tightly coupling view and logic (HTML and JS) isn't necessary a bad thing when done right. Currently with CSS Modules, styles aren't tightly coupled with components. We take the costs of decoupling while reaping none of the benefits. An example of the costs are link styling which isn't connected and consistent across the application.

3. Global styles are hard.

4. className injection is gross.

There are a number of new ways to write CSS in React apps:

• emotion
• styled
• styled-jsx
• glamor (no one uses this any more)
• Aphrodite (wordy)
• radium (not a fan of syntax)
• reactcss (no one uses this anymore)

I think the most widely understood, marketed and used tool is styled but emotion is a strong runner-up which is probably better but has a weaker ecosystem.

[0xcaff]

So, I'm trying styled now and it doesn't have the best typescript story.

In order to type the theme object with typescript, you need to re-export the module with the theme generic parameter added. This means that imports turn into import styled from '../../styled-components' from import styled from 'styled-components'.

Typing input props is a bit strange. The following doesn't work.

The types are enforced at call-sites but not available in the template function parameter unless explicitly typed. This is a major annoyance. styled-components/styled-components#565 (comment) Fixing was previously blocked on microsoft/TypeScript#11947 but that is now fixed. The typings look correct, but I can't get this to work in typescript 2.9. It seems to be cause by styled-components/styled-components#1697

Actually it does work, the auto-complete is just really bad.

[0xcaff]

I've converted over a few higher-level components to use styled components. I'm going to look at converting some of the interactive lower-level components to styled components.

[0xcaff]

Emotion seems pretty good if not better. The webstorm and vscode plugins work for both emotion and styled. Emotion has a few api differences:

• lacking attrs but suggesting withProps
• no .extend
• css primitive api
• the typescript typings seem nicer
• css fragments don't seem to have access to the theme (only primitive interpolations)
• requires babel for child component refreences ( transpile typescript to babel-plugin-emotion doesn't work emotion-js/emotion#535 ) (bleh) (https://emotion.sh/docs/styled#targeting-another-emotion-component)

[0xcaff]

Everything except for the partially implemented dropdown menu has been converted to styled components. Just need to figure out the theme situtation, investigate removing extra stuff (css modules, style-lint) and merge.