Merge branch 'develop'

after/autoload/styledcomplete.vim

@@ -8,5 +8,7 @@ fun! styledcomplete#CompleteSC(findstart, base)
     return csscomplete#CompleteCSS(a:findstart, a:base)
   endif
 
-  return javascriptcomplete#CompleteJS(a:findstart, a:base)
+  " create a funcref to call with the previous omnicomplete function
+  let s:funcref = function(b:prevofu)
+  return s:funcref(a:findstart, a:base)
 endfun

after/ftplugin/javascript.vim

@@ -28,5 +28,6 @@ fu! IsStyledDefinition(lnum)
 endfu
 
 if exists('&ofu')
+  let b:prevofu=&ofu
   setl omnifunc=styledcomplete#CompleteSC
 endif

after/syntax/javascript.vim

@@ -68,12 +68,18 @@ syn match cssCustomPageMargin contained skipwhite skipnl
 syn match cssCustomKeyFrameSelector "\%(\d*%\|\<from\>\|\<to\>\)" contained
       \ skipwhite skipnl
 
+" define css include customly to overwrite nextgroup
+syn region cssInclude start="@media\>" end="\ze{" skipwhite skipnl
+      \ contains=cssMediaProp,cssValueLength,cssMediaKeyword,cssValueInteger,
+      \          cssMediaMediaAttr,cssVencor,cssMediaType,cssIncludeKeyword,
+      \          cssMediaComma,cssComment
+      \ nextgroup=cssCustomMediaBlock
+
 " define all non-contained css definitions
 syn cluster CSSTop
       \ contains=cssTagName,cssSelectorOp,cssAttributeSelector,cssClassName,
-      \          cssBraces,cssIdentifier,cssInclude,cssPage,cssKeyFrame,
-      \          cssInclude,cssFontDescriptor,cssAttrComma,cssPseudoClass,
-      \          cssUnicodeEscape
+      \          cssBraces,cssIdentifier,cssIncludeKeyword,cssPage,cssKeyFrame,
+      \          cssFontDescriptor,cssAttrComma,cssPseudoClass,cssUnicodeEscape
 
 " custom highlights for styled components
 "   - "&" inside top level

examples/issue-47.js

@@ -0,0 +1,16 @@
+const Container = styled.div`
+  display: grid;
+  border: 1px solid black;
+
+  &:hover {
+    color: blue;
+  }
+
+  @media (max-width: 700px) {
+    grid-template-column: 1fr 0px;
+  }
+
+  media (max-width: 700px) {
+    grid-template-column: 1fr 0px;
+  }
+`;