Styled components: withComponent().extend doesn't match grammar

[alexrussell]

When .extend with a template literal is chained after withComponent(), the grammar fails to match the template literal as Styled Components CSS.

Given the following Styled Components JS:

import styled from 'styled-components'

// Standard styled component.
export const Flex = styled.div`
  display: flex;
`

// Standard extension.
export const FlexColumn = Flex.extend`
  flex-direction: column;
`

// Extension with `withComponent` fails to match.
export const FlexHeader = Flex.withComponent('header').extend`
  font-weight: bold;
`

// Can be got around, but is not ideal.
const _FlexHeader = Flex.withComponent('header')

export const FlexHeaderAlt = _FlexHeader.extend`
  font-weight: bold;
`

The following is produced for the One Dark theme:

More annoying than the lack of syntax highlighting is autocomplete for CSS properties and values inside the template literal.

[gandm]

I won't be able to fix this. I already make too many assumptions such as a classname such as Flex followed by .extend is some css. However, extend is a very common keyword that could be used as, for example, a SQL extend. The best I can suggest is using either

Flex.extend`${css`some css`}`

or the suggestion I made here

[alexrussell]

I'd have thought just looking for

.extend`

would be a sensible enough assumption. But fair enough if you don't like this idea.

(Also I have no idea how difficult it is to mess with these grammars other than whenever I look at them my brain starts melting, so I do fully appreciate if the "simple suggestion" above isn't so simple!)

[gandm]

Yes but .extend could be a method (tagged template) for another library. Styled-components doesn't have exclusive access to this. so maybe

SQLtable.extend`SQL blah`

This isn't SC but I have no way of knowing that by just using regex parsing grammars. Even in a single file AST this may not be possible if styled was imported from another file.

At the moment, I give SC the benefit of the doubt and parse the above as CSS but If another library were to use extend and templates I would probably have to remove this from he grammar.

[alexrussell]

Oh I totally get that, but I guess it's just a case of going with what's the most likely/popular. Which, I guess, as you say, you are already doing (for now).

Any chance of hooking into:

...withComponent(...).extend`

? That'd match the use-case presented here, and is actually more SC-specific than simply looking for .extend and hoping it's SC. (Though I acknowledge that it's still guesswork and assumption-based.)

[gandm]

Let me think about it. I'm a bit reluctant as it's non-standard JS. I originally supported SC V1 as I like CSS-in-JS but V2 added complexity to the API that isn't really suited to Regex grammar API's

[gandm]

Just pushed a commit. If you want to try apm install from this repo then it should work.

[alexrussell]

Yup that works. Thanks. I do understand your reluctance to support the more esoteric syntax but this looks good to me.