It'd be awesome if new-component could include base styling.

There are two issues here: Coming up with the individual templates for each style solution, as well as the underlying architecture changes to make this possible.

Templates by style solution

styled-components

For styled-components, I spoke with Max on twitter and we think the best solution would be to update the template to be something like this:

// Whatever.js
import React, { Component } from 'react';
import styled from 'styled-components';

class Whatever extends Component {
  render() {
    return <Wrapper />;
  }
}

const Wrapper = styled.div`

`;

export default Whatever;

A near-identical template could be used for emotion (literally just swapping out styled-components for emotion/react, in the import line.

CSS modules

For CSS modules, the JS template would need to be updated to something like this:

// Whatever.js
import React, { Component } from 'react';

import styles from './Whatever.css';

class Whatever extends Component {
  render() {
    return <div className={styles.wrapper} />;
  }
}

export default Whatever;

We'd also need the CSS file, but it can be super minimal:

// Whatever.css
.wrapper {

}

Aphrodite

Finally, given that I work at KA, I'd like to add Aphrodite support! it would look like something of a mix of these earlier two solutions (all defined in the JS file, but using className and a styles object)

---

Architecture Changes

It actually seems like a pretty hard problem, figuring out how to add these new templates in a sustainable way. Because we support 3 different kinds of components (class, pure, functional), ideally I don't want to have to create 3 * 4 templates, for each possible permutation.

Thinking off the top of my head... One idea is to split the template into "quadrants", little mix-and-match pieces. You'd assemble the final template by picking the pieces you need, based on the type of component and style solution.

I imagine the different "areas" are:

• React imports
• Style imports
• component definition
• component render contents
• below-component footer (for stuff like const Wrapper = styled.div)
• exports (export default Whatever)

Here's a very rough first pass (this could be all wrong, just going with an idea :) )

// templates/react-imports.js
export default {
  functional: "import React from 'react';"
  class: "import React, { Component } from 'react';"
};

// templates/style-imports.js
export default {
  'styled-components': "import styled from 'styled-components';",
};

// templates/render-contents.js
export default {
  'styled-components': "<Wrapper />",
};

// templates/component-definition.js
// NOTE: This one is a bit tricky, since the `render-contents` are within it.
// Maybe something like this?

export default {
  // NOTE: ignore the spaces between ` ` `. Just not sure how to escape in markdown.
  functional = (ComponentName, renderContents) => ` ` `
    const ${ComponentName} = (
      return ${renderContents}
    );
  ` ` `
}

And then you'd just combine them to create the actual template:

import reactImportTemplates from './templates/react-imports';
import styleImportTemplates from './templates/style-imports';
import renderContentTemplates from './templates/render-contents';
import componentDefinitionTemplates from './templates/component-definition';

// Pretend these vars are defined from program input args
const componentName = 'Whatever';
const componentType = 'class';
const style = 'styled-components';

const renderContents = renderContentTemplates[style];

return ` ` `
${reactImportTemplates[componentType]}
${styleImportTemplates[style]}

${componentDefinitionTemplate[componentType](componentName, renderContents)}
` ` `;

This is of course a very rough draft, haven't thought through all the implications. Happy to discuss!

Going forward, I don't anticipate having that much time to spend on this (currently deeply involved in another side project, + my day job), so if anyone wanted to take this on, that'd be awesome. I want this to be a community project! Otherwise, I'll do my best to get to this in the next month or two :)