Shared stylesheets when components are almost the same

[danturu]

Let's say I have the signup and signin components. They are almost the same, i.e. the only difference between them is that signup has an extra input name. The simplified markup for these components could be:

<main className={styles.main}>
  <h1  className={styles.h1}>Signup</h2>
  <form className={styles.form}>
    ...
    <input name="name" className={styles.input} />
  </form>
</main>

<main className={styles.main}>>
  <h1 className={styles.h1}>Signin</h2>
  <form className={styles.form}>
    ...
  </form>
</main>

As I understand for each component I have to create a stylesheet file. But in this case should I create a separate stylesheet file for each component (signin.css, signup.css) and use composes? Will it follow the css-modules convention if I just leave it with auth.css and import it in the both components?

[madyankin]

This is actually not a CSS Modules issue.

The examples use the same component for both cases and it should be treated as a single component both for HTML and CSS. Split your components completely, not CSS only.

The AuthForm component:

<div className={ root }>
  <h2  className={ styles.title }>{{ title }}</h2>
  <form className={ styles.form }>
    {{ children }} 
  </form>
</div>

The Input component:

<input name={{ name }} className={ styles.input } />

Somewhere on a page:

<AuthForm title="Sign in">
   <Input name="email" />
   <Input name="password" />
</AuthForm>
...
<AuthForm title="Sign up">
   <Input name="email" />
</AuthForm>

[danturu]

Yes, right. I'm closing it for now.