Some components are not properly syntax highligted

[dkarter]

See title. Thanks!

Schedule.Part = styled.div`
  align-items: center;
  display: flex;

  img {
    margin-right: 0.7rem;
    height: 1rem;
  }

  div {
    color: ${colors.textGrey};
  }
`;

Schedule.CourseTimes = styled(Schedule.Part)`
  align-items: flex-start;

  p {
    color: ${colors.textGrey};
  }

  img {
    margin-top: 0.3rem;
  }
`;

[fleischie]

First of all: Thanks for opening an issue. Second: Please don't write "title says it all," or such. That gives the impression you are too busy to provide context and imply, that I have enough of it to look for it myself, which I unfortunately don't.

So it would be awesome of you to provide me with a minimal working vimrc, that produces the above screenshot. I may take a look at this, then. :v:

[dkarter]

Sorry I was in the middle of working and didn't want to forget about reporting this issue, so I just dropped it here. In retrospect I should have just put it in my notes and come back to it later so I can provide a better bug report. You deserve better! :)

So here is my second attempt. I try to be as thorough as possible which will hopefully it make it easier for you to reproduce and understand what the issue is:

My setup - I'm using NeoVim w/ Vim-Plug on iTerm2 v3.1.7 on macOS High Sierra v10.13.6, no specific colorscheme is required to reproduce this issue.

Following is the output from :version on my NeoVim installation:

NVIM v0.3.0
Build type: Release
LuaJIT 2.0.5
Compilation: /usr/local/Homebrew/Library/Homebrew/shims/mac/s
uper/clang -Wconversion -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=1
 -DNVIM_MSGPACK_HAS_FLOAT32 -DNVIM_UNIBI_HAS_VAR_FROM -DNDEBU
G -DMIN_LOG_LEVEL=3 -Wall -Wextra -pedantic -Wno-unused-param
eter -Wstrict-prototypes -std=gnu99 -Wimplicit-fallthrough -W
vla -fstack-protector-strong -fdiagnostics-color=auto -DINCLU
DE_GENERATED_DECLARATIONS -I/tmp/neovim-20180612-71518-1f95nf
a/neovim-0.3.0/build/config -I/tmp/neovim-20180612-71518-1f95
nfa/neovim-0.3.0/src -I/usr/local/include -I/usr/local/opt/ge
ttext/include -I/usr/include -I/tmp/neovim-20180612-71518-1f9
5nfa/neovim-0.3.0/build/src/nvim/auto -I/tmp/neovim-20180612-
71518-1f95nfa/neovim-0.3.0/build/include
Compiled by brew@HighSierra.local

Features: +acl +iconv +jemalloc +tui
See ":help feature-compile"

   system vimrc file: "$VIM/sysinit.vim"
  fall-back for $VIM: "
/usr/local/Cellar/neovim/0.3.0/share/nvim"

Minimal .vimrc:

syntax on
call plug#begin('~/.vim/bundle')
" JavaScript support (required by vim-jsx)
Plug 'pangloss/vim-javascript'

" JSX support for react components
Plug 'mxw/vim-jsx'

" syntax highlighting for styled components
Plug 'styled-components/vim-styled-components', { 'branch': 'main', 'for': 'javascript.jsx' }
call plug#end()

Save it to a file and then nvim -u .debug-vimrc test.js

I've attached the test.js containing the code below in the screenshot which should produce what you are seeing in the screenshot:

test.js.zip

Screenshot

The issue is pointed at by the arrow in the screenshot.

Expected - I expect the template content of Schedule.CourseTimes styled component to have highlighted CSS syntax Actual - The template content is not syntax highlighted, but works fine for everything else.

It appears to have something to do with the regex not catching the period in the argument to the styled function. Hopefully an easy fix.

Thank You! Dorian

[fleischie]

All good. I'm glad you could take the time to investigate.

You are also right with the regex, I will try to have a look over the weekend.

Thank you very much for your effort. 😊

[fleischie]

@dkarter If you are interested in trying out a fix for your problem, you could give the develop branch a go and see, if that fixes your problem. :smile:

[dkarter]

Thank you @fleischie! I've tested it locally with the develop branch and it seems to be working great! 💯

[fleischie]

@dkarter I made a release and introduced the fix into main. Thank you very much again for taking the time to file an issue and help verify the solution.

:tada: