Decide on how to handle css-modules / styled components

[StrikeForceZero]

After fighting with HMR and css-modules, I see why upstream went ahead and created styled components. Originally I was against it, due to lack of IDE support. It appears I'm just rehashing an already researched and thought out topic, as I'm starting to get interest in the simplicity styled components offers. The only question is what would fit best with a typescript code base.

I like the ideas of having modules, but can't live without syntax highlighting / linting / auto-completion.

---

follow upstream and use styled-components?

(until a plugin for intellij is made) this is possible:

• pros:
  • follows upstream
  • simple
  • navigating to deceleration will take you to the style attached to the component
• cons:
  • requires tricks for ide support without a plugin
  • not possible to run a test/linter that detects the styled components css rules?

---

change it up and try react-css-modules?

• pros:

  • decorators
  • override-able?

• cons:

  • strings
  • new property to keep track of

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

@CSSModules(styles)
export default class extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

---

stick with css-modules/postcss-modules?

• pros:
  • can type def class-names
• cons:
  • no linting
  • camelCase only class names