From 99dd2bc90a9ef26442aa443559323e337578396a Mon Sep 17 00:00:00 2001
From: Karl Fleischmann <fleischmann.karl@gmail.com>
Date: Thu, 9 Aug 2018 14:48:37 +0200
Subject: [PATCH 1/2] Allow arbitrary completion function in non-css

- Store available omnicomplete function name in variable.
- Create a funcref to the omnicomplete function name and call it with
  the original arguments.
---
 after/autoload/styledcomplete.vim | 4 +++-
 after/ftplugin/javascript.vim     | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/after/autoload/styledcomplete.vim b/after/autoload/styledcomplete.vim
index 76b0f34..988eacc 100644
--- a/after/autoload/styledcomplete.vim
+++ b/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
diff --git a/after/ftplugin/javascript.vim b/after/ftplugin/javascript.vim
index a6b29d4..bccfcf2 100644
--- a/after/ftplugin/javascript.vim
+++ b/after/ftplugin/javascript.vim
@@ -28,5 +28,6 @@ fu! IsStyledDefinition(lnum)
 endfu
 
 if exists('&ofu')
+  let b:prevofu=&ofu
   setl omnifunc=styledcomplete#CompleteSC
 endif

From 665ee8a56ea43f9ad589dd15282f50434e10933c Mon Sep 17 00:00:00 2001
From: Karl Fleischmann <fleischmann.karl@gmail.com>
Date: Thu, 9 Aug 2018 16:16:50 +0200
Subject: [PATCH 2/2] Fix incorrect indentation for media query blocks

- Re-implement `cssInclude` to have a `nextgroup` attribute of
  `cssCustomMediaBlock` (instead of the default `cssMediaBlock`).
- Remove duplicate `cssInclude` from `@CSSTop` group.
- Add `cssIncludeKeyword` in `@CSSTop` group.
- Add test file to illustrate syntax/indentation behavior for this
  issue.
---
 after/syntax/javascript.vim | 12 +++++++++---
 examples/issue-47.js        | 16 ++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 examples/issue-47.js

diff --git a/after/syntax/javascript.vim b/after/syntax/javascript.vim
index 5e4b25d..8e1f1e4 100644
--- a/after/syntax/javascript.vim
+++ b/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
diff --git a/examples/issue-47.js b/examples/issue-47.js
new file mode 100644
index 0000000..67dd87f
--- /dev/null
+++ b/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;
+  }
+`;