import Code from 'components/Code'
import Table, { Row, Column } from 'components/Table'

### `css`

A helper function to generate CSS from a template literal with interpolations. You need to use this if you return a
template literal with functions inside an interpolation due to how tagged template literals work in JavaScript.

If you're interpolating a string you do not need to use this, only if you're interpolating a function.

<Table head={['Arguments', 'Description']}>
  <Row>
    <Column>
      1. <Code>TaggedTemplateLiteral</Code>
    </Column>
    <Column>A tagged template literal with your CSS and interpolations.</Column>
  </Row>
</Table>

Returns an array of interpolations, which is a flattened data structure that you can pass as an interpolation
itself.

```tsx
import styled, { css } from 'styled-components'

interface ComponentProps {
  $complex?: boolean;
  $whiteColor?: boolean;
}

const complexMixin = css<ComponentProps>`
  color: ${props => (props.$whiteColor ? 'white' : 'black')};
`

const StyledComp = styled.div<ComponentProps>`
  /* This is an example of a nested interpolation */
  ${props => (props.$complex ? complexMixin : 'color: blue;')};
`
```

If you leave off the css your function will be `toString()`ed and you'll not get the results
you expected.