[Question] Can I highlight with typescript props?

[FourwingsY]

Hi, I am using styled components with typescript.
with typescript, I need to set props into styled-components

like this

import { HTMLProps } from 'react'
import { StyledFunction } from 'styled-components'

export function withProps<T, U extends HTMLElement = HTMLElement>(
	styledFunction: StyledFunction<HTMLProps<U>>,
): StyledFunction<T & HTMLProps<U>> {
	return styledFunction
}

and use like

export const Switch = withProps<SwitchProps, HTMLDivElement>(styled.div)`
  position: relative;
  color: ${props => props.on ? 'white' : 'red'};
`

in this case, style in withProps function does not highlighted as normal styled.div function.

Can this plugin support this? or there is other way to solve this?

[undeadcat]

This is currently not supported.
I think we may be able to improve this plugin to use type information to determine when to inject styles into strings (if the tag of the template literal has type StyledFunction - then there should be an injection).

As as workaround you could use the standard ways of configuring language injections of IDEA/WebStorm/your IDE and mark the string with a comment:

//language=LESS prefix=div{ suffix=}
export const Switch1 = (withProps<SwitchProps, HTMLDivElement>(styled.div))`
  position: relative;
  color: ${props => props.on ? 'white' : 'red'};
`

If you're using 2017.3 this would currently be equivalent.

[thomastvedt]

I tried the workaround, and the comment enabled intellisense (for LESS I guess?), but I got some errors:

border-top: 1px solid ${Colors.GREYBORDER};

Error between solid and $; Mismatched property value ( || ...

is language supposed to be LESS? I tried CSS, style.

[ryall]

How could this be added into the Language Injection settings? Would it be possible to provide an example config?

[undeadcat]

Here's an updated workaround:
In Preferences -> Language Injections import this xml file using the Import button. This should create an injection like this, where 'withProps' can be replaced with a different function name:

[undeadcat]

As for a more general solution, it seems like the way to go should be to inject whenever the tag expression of a template literal is inferred to be ThemedStyledFunction
This would automatically inject styled-components code almost wherever it is accepted at runtime. This could also probably fix #40

To do that one would need to:

1. Take the StyledComponentsInjector class
2. In addition to the existing patterns, check if the expression returned ES6TaggedTemplateExpression#getTag has type ThemedStyledFunction using JSResolveUtil#getExpressionJSType
3. The hard part - check that this doesn't lead to degraded performance. :-)

I will try to get around to it, but can't promise, unfortunately. If someone else is willing to try, I can answer questions.

[ryall]

@undeadcat Thanks a bunch. I'll give this a go today. :)

I'd love to help with the permanent solution but unfortunately I don't know much about the inner workings of WebStorm - but the solution sounds perfectly reasonable and I hope to see it someday.

[taxpon]

@undeadcat Your solution worked fine for me 👍

[undeadcat]

With 1.0.8 it's possible to add withProps to the list of tags to treat as styled components.

With regards to configuring injections based on type: #54 requests specifically that, keeping that issue open.