From version 3, Styled Map uses a pseudo-CSS syntax to map props to CSS values.

Why?

After a year of use, I found a few problems with the object syntax—especially when directly embedding styledMap calls into a component's CSS.

Repeatedly switching between two different syntaxes (CSS and Javascript objects) was cumbersome, and I sometimes found myself writing objects with semicolons by mistake.

It's also hard not to notice that embedding styledMap directly into the tagged template literals creates a messy set of brackets (e.g., closing with })}) which might potentially be off-putting or even confusing for new users.

Most importantly, I believe a pseudo-CSS syntax simply fits better with the Styled Components philosophy. I prefer it aesthetically and conceptually, just as I prefer Styled Components to Glamourous (or Emotion with objects).

It might look a little odd, but so did Styled Components, so did JSX, etc.

Give it a shot and you'll find that it quickly makes sense!

v2:

const buttonColor = styledMap({
  primary: 'orange',
  warning: 'red',
  info: '#0121ef',
  default: 'rgb(255, 255, 255)',
});

const button = styled.button`
  color: ${buttonColor};
  font-size: ${styledMap({
    large: '2.5rem',
    small: '1rem',
  })};
`;

v3:

const buttonColor = styledMap`
  primary: orange;
  warning: ${props => props.theme.warningColor};
  info: #0121ef;
  default: rgb(255, 255, 255);
`;

const button = styled.button`
  color: ${buttonColor};
  font-size: ${styledMap`
    large: 2.5rem;
    small: 1rem;
  `};
`;