Add a note about using short-circuit evaluation to conditionally add CSS rules

[TyMick]

I just discovered that in the process of flattening CSS, styled-components ignores interpolations that evaluate to undefined, null, false, or an empty string. I think this fact may not be widely known, though, because in a certain component library I'm working on, I'm seeing a lot of ${props.condition ? 'rule-name: value;' : ''} in styled components instead of ${props.condition && 'rule-name: value;'}, seemingly out of a fear that false or undefined will stringify and break their CSS.

So I've written a short addition to the Tagged Template Literals section that lets people know that using short-circuit evaluation to add CSS rules is okay. Here's the new content:

Speaking of which, during flattening, styled-components ignores interpolations that evaluate to undefined, null, false, or an empty string (""), which means you're free to use short-circuit evaluation to conditionally add CSS rules.

const Title = styled.h1`
  /* Text centering won't break if props.upsidedown is falsy */
  ${props.upsidedown && 'transform: rotate(180deg);'}
  text-align: center;
`;

How's that look? Is there a better place to put something like this?

And please pardon the adding of semicolons to the preexisting examples
on the page—that was the precommit linting that did that.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/styledcomponents/styled-components/o1405d4ix
✅ Preview: https://styled-components-git-short-circuit-evaluation-note.styledcomponents.vercel.app

[kitten]

That's a really nice touch!

[TyMick]

Thanks! 😊

[SDP190]

The example given above can't run: "Props Is Not Defined"

const Title = styled.h1`
  /* Text centering won't break if props.upsidedown is falsy */
  ${props.upsidedown && 'transform: rotate(180deg);'}
  text-align: center;
`;

${props.upsidedown && 'transform: rotate(180deg);'} tries to evaluate immediately, while there is not a props variable available yet, should instead be an arrow function which is being passed the props argument later at flattening:

const Title = styled.h1`
  /* Text centering won't break if props.upsidedown is falsy */
  ${props => props.upsidedown && 'transform: rotate(180deg);'}
  text-align: center;
`;

[TyMick]

Oops, thanks for catching that, @SDP190! I'll make a quick follow-up PR.