[Discussion] Consider specifically targeting styled sections

[Jmeyering]

I believe that targeting all template literals within a module is a little bit excessive and leads to some incorrect syntax highlighting in some cases.

If you have a component that imports styled-components and has a template literal somewhere in the file, this syntax highlighter will try to highlight it as css.

One option would be to specifically target known SC or DC functions. Something like

syntax region jsTemplateString start=+\(styled|css\)\.`+ skip=+\\\(`\|$\)+ end=+`+

etc.

The biggest downside is that you are coupled to a specific api of SC or DC.

I believe something like

syntax region jsTemplateString start=+[a-zA-Z)]`+ skip=+\\\(`\|$\)+ end=+`+

Would actually target the appropriate regions currently and be able to be flexible enough to handle api changes within SC or DC...

The biggest downside is that, this function will highlight all functions that use tagged template literals (Not that I'm aware of any other libraries of tools that do, but I feel like it's fragile).

Thoughts appreciated

[fleischie]

Hello. Thanks for your concern. 😄

The initial use case was for really specific files, that only contain styled components without any behavior and/or templating outside of styling.

So I originally neither intended for tagged template literals other than styled ones nor suggest it's usage.

I understand that there is a possibility for complex files and/or templating, so I am open for suggestions on how to "fix” the current approach.

I don't fully like both approaches you mentioned, as they are either unecessarily complicated (curated list of tagged template literals) or incompletely approaching the problem at hand (using "only" all tagged template literals).

If I find the time in the near future, I can tinker with this a little. Also if you'd like I appreciate PRs for this.

Otherwise I am open for discussions about this. Anybody else interested in this issue? 😋

[fleischie]

In light of the emerging issues regarding the syntax highlighting I will try to (someday) completely re-implement a manual highlighting (no relying on external CSS definitions (although that would have been awesome).

For this I'd like to: a) Not rely on a certain import-line to be present for this plugin to trigger. b) Have a more simple definition schema of the rules (to specifically bypass hyphenated and/or unit highlighting in plain text, etc.) c) Only target specific (tagged) template strings, as well as being more robust on the javascript side.

[fleischie]

For everyone interested (cc @Jmeyering) : Please (git) checkout #30 and let me know, what you think.

[fleischie]

Bump: Check #30 for final thoughts, otherwise this will be fixed! 😱