Add withConfig API

[hadihallak]

Ability to set componentId:

styled.withConfig({componentId: 'cool-id'}).styled('button', {color: 'red'})
// output className is 'c-cool-id'

Ability to set displayName:

styled
  .withConfig({ displayName: 'readable-class-name' })
  .styled('button', { color: 'red' })
// output className is 'c-readable-class-name-gmqXFB'

displayName with componentId :

styled
  .withConfig({ componentId: 'cool-id', displayName: 'readable-class-name' })
  .styled('button', { color: 'red' })

// output className is 'c-readable-class-name-cool-id'

Ability to control whether stitches should forward its props to the extended component or not using shouldForwardStitchesProp:

const { styled } = createStitches()

const ReactComponent = ({ as: asProp }) => {
  return React.createElement('div', {}, asProp || 'no-as-prop-found')
}

const componentOneConfig = {
  shouldForwardStitchesProp: (prop) => {
    if (prop === 'as') {
      return true
    }
  },
}

const StitchesComponent = styled.withConfig(componentOneConfig)(ReactComponent, {})

<StitchesComponent /> // <div>no-as-prop-found</div>
<StitchesComponent as="a" /> // <div>a</div>

[bartcheers]

Thanks @hadihallak! This is a huge DX improvement.

Fwiw the correct syntax seems to be styled.withConfig({ componentId: 'cool-id' })('div', {color: 'red'}) Note I removed the second .styled in your instructions to get this to work.