Less coupeling with Styled Components

[theycallmehero]

When I look at any Styled component, then it has 2 parts:

1. Static object (Key-value map/struct/hash).
2. Dynamically changing content (let's say object is conditionally merged depending of prop value; or prop itself is a function).

What would happen if instead of:

const ComponentName = styled.div({
  borderColor: ({ hasError, theme }) => hasError ? theme.color.error.100 : theme.color.gohan.100,
  padding: ({ theme }) => theme.padding
});

we would write (1)

const componentStyle = {
  borderColor: ({ hasError, theme }) => hasError ? theme.color.error.100 : theme.color.gohan.100,
  padding: ({ theme }) => theme.padding
};

const ComponentName = styled.div(componentStyle) ;

we would write (2)

const componentStyle = {
  borderColor: "gohan.100",
  "&[data-has-error='true']": {
    borderColor: "error.100"
  },
  padding: "padding"
};

const ComponentName = styled.div(fixColorsOrOurCustomAgreements(componentStyle)) ;

If we still want to use prop-like not HTML5 data-like, then we could think of custom syntax.

Benfits?

1. If we get to 2, then it is possible to carry it as separate file, but part of theme. If it is part of theme, it can be used in Elixir and React.
2. I believe it would avoid https://github.com/coingaming/sportsbet-design/issues/945 like issues