What does it means () => css``; in React

Question

Hello I'm reading spectrum repo, for learning how they organize their React code, and specifically about styled-components.

In this file globals/index.js there is this bit of code, I understand what it does, but no why.

export const Truncate = () => css`
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
`;

It does the truncate trick, but how it gets used in a component the Truncate component, how is reused in an actual component.

What it means css``, is styled-components syntax?;

Answer 1

This syntax is a way of calling functions in JS, check this out

console.log("hello world".split` `)

On their home page you have this example:

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

This is just a way of calling the css function and passing arguments to it