styled-components / vim-styled-components

Vim bundle for http://styled-components.com based javascript files.
300 stars 24 forks source link

Enable CSS omnicompletion in Typescript files #57

Closed JoosepAlviste closed 5 years ago

JoosepAlviste commented 5 years ago

Symlink the javascript ftplugin file to typescript similarly to how indent/ and syntax/ are handled.

JoosepAlviste commented 5 years ago

Hmm, I just noticed a weird error when doing <C-x><C-o> in non-styled-components block in a Typescript file:

Error detected while processing function styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#
CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcompl
ete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledc
omplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..sty
ledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7].
.styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC
[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#Comple
teSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#Co
mpleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplet
e#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcom
plete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..style
dcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..s
tyledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7
]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#Complete
SC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#Comp
leteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#
CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[7]..styledcomplete#CompleteSC[1]..IsStyledDef
inition[2]..<SNR>140_SynSOL:
line    1:
E132: Function call depth is higher than 'maxfuncdepth'
Press ENTER or type command to continue

Doing this in Javascript files works as expected though (does not raise an error and does not trigger CSS omnicompletion).

I'm not sure how Typescript and JS are different in this case and why the error happens...

fleischie commented 5 years ago

Hello @JoosepAlviste :wave: and thanks for you effort so far. :bowing_man:

The message indicates a recursion of your previously defined and now overwritten omnifunc. The ftplugin evaluates b:prevofu when not in a styledDefinition region (or calls CSSComplete if it is).

So to debug this you would probably need to see what :echo &ofu and :echo b:prevofu returns, when the above recursion happens. (This returns the current and previously defined omnifunc functions.)

I hope this gets you on the right track, but let me know if you have any more questions. :smile:

Edit: Maybe on that note, testing you changes doesn't produce the recursion and thus I cannot help further until you give me a minimal (non-)working setup. :v:

JoosepAlviste commented 5 years ago

It looks like b:prevofu gets set to styledcomplete#CompleteSC if it wasn't set in the first place (but only in Typescript files for some reason). In Javascript files, b:prevofu is unset and causes errors. I wouldn't expect it to work anyways since I don't have an omnifunc set myself. I also tried to replicate it with a minimal config, but couldn't so the recursion must somehow come from my config.

I ended up adding a check so that if an omnifunc is not set, then b:prevofu won't get set and b:prevofu won't get called if it wasn't set. I'm not sure if this is the best way to handle it or if it's even reasonable to fix it if you didn't get the same errors.

Anyways, it seems to not raise any errors now.

fleischie commented 5 years ago

I guess it is a good idea to only assign the previously set omnifunc if there actually is a previously defined omnifunc.

I am still worrying why the prevofu was set to styledcomplete#CompleteSC, though. This might indicate there is already a recursion somewhere. Now I don't know, whether this is because of your setup, or whether there is a missing check in the ftplugin file...

For now I will merge this PR into develop, maybe we get a better exposure and thus some more in-depth testing.