Emotion: Add features to extend existing styles or add props

[hawkins]

cc @mitchellhamilton

During today's stream, we talked about adding features similar to Styled Component's .extend and .attrs.

.attrs equivalent

Also during the stream, @tkh44 mentioned the function call form of styled could potentially take added arguments down the road. What would you all think about using the second argument to add the .attrs capabilities of additional props?

I.e.,

const PasswordInput = styled('input', { type: 'password' })`
  color: red;
  height: 64px;
`;

would render an input element with the property type="password" and the styles applied for color and height.

I personally like this idea as it cements that the arguments are attributes of the components by being provided at the same time as the component type itself, but I'm not sure how it would work with the styled.input syntax, so maybe its not the right way to go.

.extend equivalent

For this one though, I do like the way styled components does it since it reads really nicely and deals directly with style:

const TallPasswordInput = PasswordInput.extend`
  height: 128px;
`;

would render a new input element with the same styles and attributes that the original PasswordInput had defined, but with its new style of height: 128px would overrule the inherited height: 64px style.

Could this instead be made to work with composes? I.e., composes: ${PasswordInput};?

---

What would you all think about implementing these or similar features?

Additionally, while I'm new to helping out with emotion and may need a bit of advice along the way, I'd be happy to take a stab at implementing these features in whatever you all feel is the right way. 😄

[hawkins]

Although, since you can pass in components to styled, I'm not sure what the .extend feature really adds in value that this function doesn't already give us. 🤔

[tkh44]

For attrs. I'm leaning towards just pointing to withProps from recompose.

1. its optimized beyond what we could maintain
2. its a tiny import if you import it directly
3. we don't have to maintain another api

//...
import withProps from 'recompose/withProps'

const Box = withProps({ type: password })(styled('input')`
  color: blue;
`)

[hawkins]

That seems perfectly fine to me. Simple and doesn't bloat emotions lib for an uncommon use case. 👍

[nelsieborja]

@hawkins, this alternative solution may work for you well, no extra dependency required.