Recommended way of setting up with typescript falls into caveats

[mcabrams]

The recommended way of setting up styled-components in a typescript setup according to styled-components, unfortunately, falls into the https://github.com/styled-components/vim-styled-components#caveats category.

This results in a lack of indenting and syntax highlighting for typescript users.

[mcabrams]

It's possible it's not working for another reason, I don't seem to get proper indenting even when I do import styled from 'styled-components';. Let me know what I can share to help better explain the issue/environment, thanks.

[fleischie]

Hello @mcabrams,

thank you for reaching out. As far as I understand the description you linked was primarily for setting up the type system to work. But the import * as styledComponents from 'styled-components'; makes the supported keywords available in the file, which then (should be) are picked up by this plugin.

How did you add the plugin (which plugin manager or manually?), what does vim say is the current filetype of your file, how does your file look like (minimal working example)? What else have you experienced? Did the plugin work with vanilla js (if you are into that)?

Any hint, approach, observation is most helpful. 😊

[mcabrams]

@fleischie Thanks for the help!

• I added the plugin via Vundle.
• Current filetype is typescript.tsx
• File example:

import * as React from 'react';

import styled from '@src/lib/styled-components';

interface CardProps {
  big: boolean;
}

// This has seemingly correct indenting, but no syntax highlighting.
export const Card = styled<CardProps, 'div'>('div')`
  background-color: ${props => props.theme.cardBackgroundColor};
  border-radius: ${props => props.theme.baseBorderRadius};
  padding: ${props => props.big ?
                      props.theme.largeMargin : props.theme.normalMargin};
`;

// This has correct syntax highlighting, but indenting is incorrect (for example, when in insert mode, opening a new line puts cursor at column 0 instead of column 3.)
export const SomeOtherThing = styled.p`
  background-color: red;
`;

// Same as above example (correct highlighting, incorrect indenting)
const linkStyles = css`
  font-weight: bold;
  color: ${props => props.theme.linkColor};
  text-decoration: underline;

  &:hover {
    cursor: pointer;
  }
`;

• I hadn't used the plugin with vanilla js, but I just tried it and it works perfectly, so seems to be some issue specific to typescript.

[fleischie]

Hey @mcabrams

Could you check out the latest changes in the develop branch and see, whether they improve your described cases? I (hope I) fixed the highlighting issues, but couldn't reproduce the indenting-related issues.

So, let me know, how this looks and we can take it from there. :+1:

[mcabrams]

@fleischie The syntax highlighting seems vastly improved, every scenario I presented above now works; however, indentation is now not working for any of them (opening a new line goes to first column rather than 3rd column).

[fleischie]

@mcabrams that sounds like progress so far.

Do you have a minimal working vimrc, that I could test with? Maybe it's because of a combination of specific plugins, that I wasn't aware of.

But I take a non-minimal vimrc as well, if you cannot really pinpoint the minimalism. 😉

[mcabrams]

@fleischie I wouldn't call it minimal haha, but here it is: https://github.com/mcabrams/dotfiles/blob/master/dotfiles/vimrc

[fleischie]

@mcabrams it's alright, it's something to start with... 👍

[fleischie]

@mcabrams I just checked your vim config and I have one observation:

Inserting lines into a styled definition region (i.e. css-in-js regions) only triggers, if the line does not terminates the region. So this plugin only indents, if you don't close the template string before the end of the line.

The reason is to not indent single style lines, for example:

const inlineStyle = css`max-width: 50%`;

This means, that you might just get indenting, if you either enter a new newline before the end of your string

styled<CardProps, 'div'>('div')`
  <<< this line should be indented >>> # cursor is here #
`;

or manually indent after you are finished.

styled<CardProps, 'div'>('div')`
<<< unindented line a >>>
<<< unindented line b >>>
<<< unindented line c >>> # cursor is here #
`;

Type <C-[>=2k<CR> and boom, indented.

means "ESC" (resp. exit insert mode), =2k means indent the current and two above lines, means "ENTER".

Maybe you could try out the vim plugin jiangmiao/auto-pairs, which automatically adds whitespace to new lines inside of blocks (e.g. single/double/backtick/parens/brackets/etc.).

Please let me know, if this is a) understandable, b) answers your question and/or c) you still have questions/troubles with how this works. But at this current point, I don't really know how to change this plugin to be able to not indent single-line styles and multi-line styles, that terminates the css-in-js region on the current line.

[fleischie]

@mcabrams Can you please check out the latest develop state of this plugin and give me a quick rundown, of what you might still be missing? Just if you have time, no pressure.

[tomaskallup]

Hi, I'm using yats and I don't seem to get highlight at all. It's probably caused by the syntax definition relying on jsTaggedTemplates and others, which yats does not have. Is there anything I could do to try and improve this?

[fleischie]

I'm currently afk (also this week) but I'll look into it as soon as I find the computer and time. ✌️

[tomaskallup]

I've done some testings to try and assist you. I'll try to look into yats as I've gotten a little similiar with it and I might be able to do some changes on it's side. Here is a example of the broken stuff:

// Works fine
styled.div`
    position: relative;
`;

// Doesn't work, also breaks highlight of stuff inside <>
// only styled.div get recognized
styled.div<{ someProp: string}>`
    position: relative;
`;

// Doesn't work, it's not even recognized as styledPrefix
const MyDiv = styled.div`
    position: relative;
`;

[fleischie]

What helps a lot is creating a minimal .vimrc that enables the erroneous behavior and an example file that showcases the errors (the latter you already did).

Apart from this you'll probably need more domain knowledge how yats and/or this plugin works.

I will help though, as soon as I can. 🤙

[tomaskallup]

Here they are: Minimal vimrc (uses vim-plug, contains convenient function SynStack for syntax regions/matches under cursor):

call plug#begin()
Plug 'HerringtonDarkholme/yats.vim'
Plug 'styled-components/vim-styled-components'
call plug#end()

function! SynStack()
  if !exists("*synstack")
    return
  endif
  echo map(synstack(line('.'), col('.')), 'synIDattr(v:val, "name")')
endfunc

Example file:

import styled from 'styled-components';
// Works as expected (highlight and indent)
styled.div`
    position: relative;
`;
// Doesn't work (only the part `styled.div` gets highlighted), also break the highlight inside the <>
// 
styled.div<{ someProp: boolean }>`
    position: relative;
`;
// Doesn't work at all
const StyledDiv = styled.div`
    position: relative;
`;

I was able to fix the last one by adding styledPrefix to nextgroup of typescriptAssign, but I'm not sure that's the best solution (and I have no idea how one may do that from outside of yats), maybe there can be something done on side of yats to make it more compatible with other plugins.

I hope this information helps you, and thanks for your effort! If there is anything more I could do, let me know, until then I'll be waiting and diging around.

[dakom]

Fwiw it seems react-emotion also doesn't play nicely with yats and vim-styled components. For example:

const Button = styled('button')`
    color: red;
`

[fleischie]

Hey @dakom,

thank you for your comment. Unfortunately it does not contain many informations about what is malfunctioning for you.

If you have the time, please update your code with maybe a screenshot of what your code currently looks like, a short description of what you expect and maybe why you think yats is the culprit in this scenario? Also please check out #51 to see, if that helps.

Thank you again for your collaboration.

[dakom]

@fleischie - good point, I should have provided more info.

Yesterday I went and found one of the commenter's above dotfiles and installed some of the same plugins, so my syntax config is like this:

Plug 'cakebaker/scss-syntax.vim'
Plug 'hail2u/vim-css3-syntax'
Plug 'leafgarland/typescript-vim'
" Plug 'HerringtonDarkholme/yats.vim'
Plug 'peitalin/vim-jsx-typescript'
Plug 'styled-components/vim-styled-components', { 'branch': 'main' }
Plug 'pangloss/vim-javascript'
Plug 'purescript-contrib/purescript-vim' 
Plug 'jparise/vim-graphql'
Plug 'tikhomirov/vim-glsl'

When I have HerringtonDarkholme/yats.vim enabled, and leafgarland/typescript-vim disabled, I get the following:

As you can see - the CSS section is not being highlighted.

When I have the reverse (yats disabled, leafgarland enabled), it seems to be correct:

This is why I think there's some conflict with yats, since by only changing that, it affects whether or not the css is highlighted correctly.

(as a side-point, I'm not sure if it's related, but leafgarland isn't highlighting the tags... which is part of why I'd prefer to use yats since it's just working better for me)

I haven't tried the PR... I'll look into how to install that with vim-plug, or maybe you know off-hand?

Thanks!

[fleischie]

Hi again. Thanks for the follow-up.

Just replace

Plug 'styled-components/vim-styled-components', { 'branch': 'main' }

with

Plug 'tomaskallup/vim-styled-components', { 'branch': 'main' }

This should at least be the way. 😄

[dakom]

That fixes it! :)

[fleischie]

With the latest release I feel we have improved the typescript support significantly (special thanks to @tomaskallup ) thus I would close this issue for now.

If anybody has any more issues with typescript, its setup with this plugin or related. Just open a new issue.

Thank you! :v: