Major change in v3 of styled-map #7
Description
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;
`};
`;