Best practice for styles with dynamic properties

When styled components use dynamic properties it creates a complete copy of all the rules for each possible value at run time which has potential to bloat SSR payload and in general add more content to memory.

const A = styled.div`
  ... many rules ...

  background-color: ${props => props.bg};
`

In this example many rules is duplicated whenever props.bg is changed.

In general I have been using the styled hoc to wrap a base styled component of static rules with my dynamic rules like:

const A = styled.div`
   ... many rules ...
`

const B = styled(A)`
  background-color: ${props => props.bg};
`

The many rules are created once and the dynamic rules classes only contain what change.

Could styled achieve this abstraction automatically by detecting dynamic parts? Could we “mark” with custom syntax which rules need to be added to dynamic classes within one component?

Im interested in hearing how other people handle this problem or if it is currently not a concern.

[k15a]

For highly dynamic styles you can also use the .attrs method:

const ColorAnimation = styled.div.attrs({
  style: props => ({
    color: props.color
  })
})`
  // static styles
`

[k15a]

This will probably come with version 3 of styled-components. We try to extract every static style property and only inject dynamic ones at run times.