Grammar: Tagged template literals: `fn(a)"""` should be allowable syntax

[monstersintokyo]

Thanks to the addition of tagged template literals it is possible to natively use styled components in CoffeeScript 1.12.

Hence something like

const Button = styled.button`
  background: white;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

translates to

Button = styled.button"""
  background: white
  color: palevioletred
  font-size: 1em
  margin: 1em
  padding: 0.25em 1em
  border: 2px solid palevioletred
  border-radius: 3px
"""

in CoffeeScript.

Styled components enable us to to override attributes in given components like so:

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

When trying to translate this to CoffeeScript

TomatoButton = styled(Button)"""
  color: tomato
  border-color: tomato
"""

the compiler is throwing:

error: unexpected string
TomatoButton = styled(Button)"""
                             ^^^

[GeoffreyBooth]

Can you please link to documentation about this syntax?

[lydell]

As far as I can tell, the "tag" in a tagged template can be a MemberExpression or a CallExpression: http://www.ecma-international.org/ecma-262/7.0/index.html#sec-tagged-templates-runtime-semantics-evaluation

[monstersintokyo]

Just started with styled components - first place I've ever seen this syntax. Aside from the above link it is really hard to find any documentation of it.

[GeoffreyBooth]

@lydell does a tag being a CallExpression mean that styled(Button)""" is allowable?

[lydell]

Yes.

[GeoffreyBooth]

Okay, so this really has nothing to do with styled components, which is just a specific library; it’s more that we’re not allowing a syntax form that should be allowed.

[GeoffreyBooth]

Fixed by #4601