Fix Styled Components highlighting for v2

[kitten]

In v2 (which will be officially released shortly, and is currently in RC) we have a few new methods which will need to be added to the syntax highlighting. The three methods are:

.extend

const Comp = styled.div`color: red;`

const NewComp = Comp.extend`
  color: green;
`

.extendWith()

const Comp = styled.div`color: red;`

const NewComp = Comp.extendWith('span')`
  color: green;
`

SC.attrs({})

const Link = styled.a.attrs({
  target: '_blank'
})`
  color: red;
`

I hope this isn't too much trouble :)

[fleischie]

First of all: Thank you for acknowledging me and my humble project. 😄 Second: Even if it were too much trouble, I'd make sure that I give everything to make sure SC looks and handles the best way it can.

Third and only important statement: I don't handle separate keywords. I check for statements such as import ... styled-components and require ... styled-components and then inject CSS rules into template string blocks (and inside CSS blocks to enable nested blocks). Thus no matter how the API of SC looks, as long as you use CSS definitions inside tagged template literals the highlighting should be safe. (Also I just tested the above examples and they seem to have no negative effect of the syntax highlighting. 😄 )

Aaaaaaallllso... now that I think about it, I can support other libraries, that use this way of marking up CSS in JS. (Like jxnblk/diet-cola.) Thanks for the tip. 😄 👍

[kitten]

Awesome work!