what does this syntax in styled-components actually mean?

Question

I've just started using styled-components and saw that they call what i presume is a function like so:

import styled from "styled-components"

const Button = sytled.button` <--- this 
    // css goes here
`

I've never seem that syntax before and wanted to know if someone could point me to some docs about what it actually is.

Answer 1

It's called tagged template literals. The "tag" is the function before the template literal, which is called with its parameters being the template and template's variables. The parameters are as follow:

1. An array with all the string parts between the ${variables}.
2. First ${variable} of the template.
3. Second ${variable} of the template.
4. etc...

For example, I have written a function named tag that does the same as the function template literals use to process when you don't specify any tag function (a.k.a its default function):

function tag(stringParts, ...values){
  return stringParts.reduce((accum, part, index) => accum + values[index-1] + part);
}

Calling it this way

tag`Hello, ${name}! I found ${count} results.`

yields the same result as

`Hello, ${name}! I found ${count} results.`

and the params fed to the tag function are ['Hello, ', '! I found ', ' results.'], name and count.

Answer 2

Styled-components is a library used for styling react components.

import styled from "styled-components"

const Button = sytled.button` <--- this 
  // css goes here
 `;

 `` <-- these are template literals which was introduced in ES6.

styled is an object here and when you say styled.button it means that we are styling html tags. So you can style a div, container, h1 etc. You want to use standard css to style these html tags and styled-components create a random classname for the same.

let's say you want to style a div. You name it a Wrapper. The naming covention is first letter always capital.

const Wrapper = styled.div`
   background: #c0c0aa;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to right, #1cefff, #c0c0aa);  /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to right, #1cefff, #c0c0aa); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   height: 100%;
   width: 100%;
 `;

now you can wrap your content in render () of react.

 <Wrapper>
  //Your code in render of react class goes here
  //thus instead of <div className = 'Wrapper'>
  //you use the above code
  //styled-components automatically generates random classnames solving major problems

 </ Wrapper>

for more information see Max Stoiber's keynote at React Amsterdam. https://www.styled-components.com/docs/basics#motivation