Merge branch 'develop'

README.md

@@ -9,6 +9,7 @@ Note however, that this plugin does not provide (all existing) CSS rules. You sh
 ## Table of Contents
 
 - [Installation](#installation)
+- [Support](#support)
 - [Caveats](#caveats)
 - [Contributing](#contributing)
 - [Acknowledgements](#acknowledgements)
@@ -46,6 +47,17 @@ Run:
 
     git clone https://github.com/styled-components/vim-styled-components/ ~/.vim/bundle/vim-styled-components
 
+## Support
+
+As vim doesn't supply the most exhaustive javascript and/or typescript support itself most vim users opt for using third party plugins to enhance syntax highlighting and omnicomplete, etc. Some of which might share the syntax definition names, but others doesn't. This fact requires one to go into the details of the syntax definition to makes sure the syntax definitions are correctly supported by this plugin. Please open an issue if you find incompatibilities with any plugins.
+
+This is the list of plugins that are (somewhat) supported:
+
+- [pangloss/vim-javascript](https://github.com/pangloss/vim-javascript) and thus
+  - [sheerun/vim-polyglot](https://github.com/sheerun/vim-polyglot) (which uses former as it's javascript plugin),
+- [othree/yajs.vim](https://github.com/othree/yajs.vim), and
+- [HerringtonDarkholme/yats.vim](https://github.com/HerringtonDarkholme/yats.vim)
+
 ## Caveats
 
 As only the official APIs are supported and they are necessary to indicate highlighting sections in your javascript file, renaming of the appropriate functions or externally defining the CSS rules in template strings will lead to missing highlighting. This means the following will not be correctly highlighted:

after/syntax/javascript.vim

@@ -100,7 +100,7 @@ syn region styledTagNameString matchgroup=jsString contained
 syn match styledPrefix "\<styled\>\.\k\+"
       \ transparent fold
       \ nextgroup=styledDefinition
-      \ contains=cssTagName
+      \ contains=cssTagName,javascriptTagRef
       \ containedin=jsFuncBlock
 syn match styledPrefix "\.\<attrs\>\s*(\%(\n\|\s\|.\)\{-})"
       \ transparent fold extend
@@ -181,6 +181,21 @@ syn region styledDefinitionArgument contained transparent start=+(+ end=+)+
 
 syn cluster typescriptValue add=styledPrefix,jsFuncCall,styledTypescriptPrefix
 
+""" yajs specific extensions
+" define template tag keywords, that trigger styledDefinitions again to be
+" contained in and also do contain the `javascriptTagRef` region
+syn match javascriptTagRefStyledPrefix transparent fold
+      \ "\<css\>\|\<keyframes\>\|\<injectGlobal\>\|\<fontFace\>\|\<createGlobalStyle\>"
+      \ containedin=javascriptTagRef
+      \ contains=javascriptTagRef
+      \ nextgroup=styledDefinition
+" extend the yajs clusters to include the previously and extraneously defined
+" styled-related matches
+syn cluster javascriptExpression
+      \ add=styledPrefix,jsFuncCall,javascriptTagRefStyledPrefix
+syn cluster javascriptAfterIdentifier add=styledPrefix,jsFuncCall
+
+
 " color the custom highlight elements
 hi def link cssCustomKeyFrameSelector  Constant
 hi def link cssCustomPositioningPrefix StorageClass

examples/issue-52.js

@@ -0,0 +1,33 @@
+const LayoutHeaderContainer = styled.div`
+  width: 930px;
+  margin: auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 160px;
+
+  h2, p {
+    margin-left: 0;
+  }
+
+  .${Classes.ICON} {
+    opacity: .7;
+  }
+
+  .txt-area:nth-child(2) {
+    margin-left: 32px;
+  }
+
+  .txt-area__top-row {
+    display: flex;
+  }
+`;
+
+const TagContainer = styled.div`
+  display: flex;
+  align-items: baseline;
+
+  .${Classes.TAG} {
+    margin-left: 10px;
+  }
+`;