Feature request: put props as classes

Hi everyone! Today, each styled component that change values based on props generate and inject a new css, but what do you think to put/convert props to classNames automatically (at least, for me, it will cover a lot of uses case and generate only one css)?

Example:

const Button = styled.div`
  background: #f5f5f5;
  color: #000;

  &.kind-success {
    background: green;
    color: white;
  }

  &.kind-error {
    background: red;
    color: white;
  }

  /* or maybe, use some kind of custom select, 
     then you only convert props to class that really are styled */
  :props[kind=warning] {
    background: orange;
    color: white;
  }

  &.circle {
    border-radius: 50%;
  }
`

//Call
<Button kind='success' circle />

//output
<div class="base-hash-class kind-success circle" />

[geelen]

But you don’t even need to do that, just use a data-attribute & normal CSS:

const Button = styled.div`
  background: #f5f5f5;
  color: #000;

  &[data-kind~="success"] {
    background: green;
    color: white;
  }

  &[data-kind~="error"] {
    background: red;
    color: white;
  }

  &[data-kind~="warning"] {
    background: orange;
    color: white;
  }

  &[data-kind~="warning"] {
    border-radius: 50%;
  }
`

<Button data-kind='success circle' />

The ~= selector is pro for stuff like this. I wrote a blog post about using them exclusively for styling. This is one of the main reasons Styled Components looks the way it does — it lets people use the ✨ full power of CSS ✨

[mxstbr]

At that point you’re just reinventing JavaScript with some arbitrary constructs. That introduces an unnecessary learning curve, while also removing a lot of the power you get from JavaScript.

const Button = styled.button`
  ${props => {
    if (props.primary) {
      css`some: styles;`
      if (props.white) {
        css`some: styles;`
      } else {
        css`some: styles;`
      }
    }
  }}
`