Object syntax creates unnecessary quotes when using properties like `content: ''`, resulting in style not being applied

[pancaspe87]

Describe the bug

To Reproduce Update any of the existing stories to use CSS counters. For example:

If using Tagged Template Expression, this works.

const Component = styled.div`
  width: calc(100% - ${spacing * 2}px);
  position: relative;
  counter-increment: step;
  :before {
    content: counter(step) ". ";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - ${spacing * 2}px);
    height: 100%;
    background-color: red;
}`;

If using Object syntax, with both styled or CSS APIs, this won't work. For example:

const Component = styled.div({
  color: 'white',
  position: 'relative',
  counterIncrement: 'step',
  width: '100%',
  '&::before' : {
    content: 'counter(step) ". "',
    backgroundColor: 'red',
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    }
});

Expected behaviour Make sure that additional quotes are not added.

Possibly handled in here

Workaround Use Tagged Template Expression instead - styled.div``