Merge branch 'develop'

README.md

@@ -2,6 +2,10 @@
 
 Vim bundle for [styled-components](http://styled-components.com) based javascript files.
 
+This plugin checks, whether the current buffer contains an `import` or a `require` from `styled-components` and injects CSS rules into JS template strings.
+
+Note however, that this plugin does not provide its own CSS rules. You should have an up to date vim runtime (for CSS2 rules) and - as long as CSS3 rules are not included - an additional plugin for CSS3 rules. (I recommend [hail2u/vim-css3-syntax](https://github.com/hail2u/vim-css3-syntax) but feel free to use whatever you like.)
+
 ## Table of Contents
 
 - [Installation](#installation)

after/syntax/javascript.vim

@@ -9,7 +9,8 @@ if exists("b:current_syntax")
 endif
 
 " extend javascript syntax
-syntax include @CSS syntax/css.vim
+runtime! syntax/css.vim
+runtime! syntax/css/*.vim
 syntax cluster CSS
       \ contains=cssAnimation,cssAnimationAttr,cssAnimationProp,cssAttr,
       \          cssAttrComma,cssAttributeSelector,cssAuralAttr,
@@ -58,16 +59,10 @@ let require_line = search("require.*styled-components", 'n')
 
 " if there is such a line in the document
 if import_line > 0 || require_line > 0
-  " fix incorrect padding and border issues
-  syn match cssBoxProp contained "\<padding\(-\(top\|right\|bottom\|left\)\)\=\>"
-  syn match cssBorderProp contained "\<border\(-\(top\|right\|bottom\|left\)\)\=\(-\(width\|color\|style\)\)\=\>"
-  syn match cssBorderProp contained "\<border\(-\(top\|bottom\)-\(left\|right\)\)\=-radius\>"
-  syn match cssBorderProp contained "\<border-image\(-\(outset\|repeat\|slice\|source\|width\)\)\=\>"
-  syn match cssBorderProp contained "\<box-decoration-break\>"
-  syn match cssBorderProp contained "\<box-shadow\>"
-
   " allow additional CSS in cssDefinitions
-  syn region cssDefinition matchgroup=cssBraces start=+{+ end=+}+
+  "   `[^$]` skips "${", so that js template expressions are not considered
+  "   cssDefinitions and thus do not contain CSS definitions
+  syn region cssDefinition matchgroup=cssBraces start=+[^$]{+ end=+}+
         \ contained transparent fold contains=@CSS
 
   " extend jsTemplateString syntax