Update

3 files changed, 248 insertions, 275 deletions

diff --git a/after/syntax/javascript.vim b/after/syntax/javascript.vim
index 000ac954..27818b58 100644
--- a/after/syntax/javascript.vim
+++ b/after/syntax/javascript.vim
@@ -54,9 +54,7 @@ else    " build-in javascript syntax
   syntax region javaScriptEmbed matchgroup=javaScriptEmbedBraces start=+\${+ end=+}+ contained contains=@javaScriptEmbededExpr,javaScript.*
 endif
 
-" because this is autoloaded, when developing you're going to need to source
-" the autoload/jsx_pretty/*.vim file manually, or restart vim
-call jsx_pretty#syntax#highlight()
+runtime syntax/jsx_pretty.vim
 
 let b:current_syntax = 'javascript.jsx'
 
@@ -169,55 +167,16 @@ syn match styledPrefix "\<styled\>\.\k\+"
       \ transparent fold
       \ nextgroup=styledDefinition
       \ contains=cssTagName,javascriptTagRef
-      \ containedin=jsFuncBlock
+      \ containedin=jsFuncBlock,jsParen,jsObject,jsObjectValue
 syn match styledPrefix "\.\<attrs\>\s*(\%(\n\|\s\|.\)\{-})"
       \ transparent fold extend
       \ nextgroup=styledDefinition
       \ contains=jsObject,jsParen
-      \ containedin=jsFuncBlock
+      \ containedin=jsFuncBlock,jsParen,jsObject,jsObjectValue
 syn match styledPrefix "\.\<extend\>"
       \ transparent fold
       \ nextgroup=styledDefinition
-      \ containedin=jsFuncBlock
-
-" define custom API section, that contains typescript annotations
-" this is structurally similar to `jsFuncCall`, but allows type
-" annotations (delimited by brackets (e.g. "<>")) between `styled` and
-" the function call parenthesis
-syn match styledTypescriptPrefix
-      \ "\<styled\><\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>(\%('\k\+'\|\"\k\+\"\|\k\+\))"
-      \ transparent fold
-      \ nextgroup=styledDefinition
-      \ contains=cssTagName,
-      \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
-      \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
-      \          styledTagNameString
-syn match styledTypescriptPrefix
-      \ "\<styled\>\%((\%('\k\+'\|\"\k\+\"\|\k\+\))\|\.\k\+\)<\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
-      \ transparent fold
-      \ nextgroup=styledDefinition
-      \ contains=cssTagName,
-      \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
-      \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
-      \          styledTagNameString
-syn match styledTypescriptPrefix "\.\<attrs\>\s*(\%(\n\|\s\|.\)\{-})<\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
-      \ transparent fold extend
-      \ nextgroup=styledDefinition
-      \ contains=cssTagName,
-      \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
-      \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
-      \          styledTagNameString
-syn match styledTypescriptPrefix "\.\<extend\><\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
-      \ transparent fold extend
-      \ nextgroup=styledDefinition
-      \ contains=cssTagName,
-      \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
-      \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
-      \          styledTagNameString
+      \ containedin=jsFuncBlock,jsParen,jsObject,jsObjectValue
 
 " define emotion css prop
 " to bypass problems from top-level defined xml/js definitions, this
@@ -244,19 +203,13 @@ syn match cssError contained "{@<>"
 
 " extend javascript matches to trigger styledDefinition highlighting
 syn match jsTaggedTemplate extend
-      \ "\<css\>\|\<keyframes\>\|\<injectGlobal\>\|\<fontFace\>\|\<createGlobalStyle\>"
+      \ "\<css\>\|\.\<resolve\>\|\.\<global\>\|\<keyframes\>\|\<injectGlobal\>\|\<fontFace\>\|\<createGlobalStyle\>"
       \ nextgroup=styledDefinition
 syn match jsFuncCall "\<styled\>\s*(.\+)" transparent
       \ nextgroup=styledDefinition
 syn match jsFuncCall "\<styled\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))"
       \ contains=styledTagNameString
       \ nextgroup=styledDefinition
-syn match jsFuncCall "\<styled\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))<\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
-      \ contains=typescriptBraces,typescriptOpSymbols,typescriptEndColons,
-      \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
-      \          styledTagNameString
-      \ nextgroup=styledDefinition
 syn match jsFuncCall "\.\<withComponent\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))"
       \ contains=styledTagNameString
 syn match jsFuncCall "\<dc\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))\%((\)\@="
@@ -279,8 +232,6 @@ syn region styledDefinition contained transparent fold extend
 syn region styledDefinitionArgument contained transparent start=+(+ end=+)+
       \ contains=styledDefinition
 
-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
@@ -295,13 +246,6 @@ syn cluster javascriptExpression
       \ add=styledPrefix,jsFuncCall,javascriptTagRefStyledPrefix
 syn cluster javascriptAfterIdentifier add=styledPrefix,jsFuncCall
 
-""" yats specific extensions
-" extend typescriptIdentifierName to allow styledDefinitions in their
-" tagged templates
-syn match typescriptIdentifierName extend
-      \ "\<css\>\|\<keyframes\>\|\<injectGlobal\>\|\<fontFace\>\|\<createGlobalStyle\>"
-      \ nextgroup=styledDefinition
-
 " color the custom highlight elements
 hi def link cssCustomKeyFrameSelector  Constant
 hi def link cssCustomPositioningPrefix StorageClass
diff --git a/after/syntax/jsx_pretty.vim b/after/syntax/jsx_pretty.vim
new file mode 100644
index 00000000..bc98202a
--- /dev/null
+++ b/after/syntax/jsx_pretty.vim
@@ -0,0 +1,216 @@
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+let s:highlight_close_tag = get(g:, 'vim_jsx_pretty_highlight_close_tag', 0)
+
+" <tag id="sample">
+" ~~~~~~~~~~~~~~~~~
+" and self close tag
+" <tag id="sample"   />
+" ~~~~~~~~~~~~~~~~~~~
+syntax region jsxTag
+      \ start=+<+
+      \ matchgroup=jsxOpenPunct
+      \ end=+>+
+      \ matchgroup=NONE
+      \ end=+\(/\_s*>\)\@=+
+      \ contained
+      \ contains=jsxOpenTag,jsxEscapeJs,jsxAttrib,jsComment,@javascriptComments,javaScriptLineComment,javaScriptComment,typescriptLineComment,typescriptComment,jsxSpreadOperator
+      \ keepend
+      \ extend
+
+" <tag></tag>
+" ~~~~~~~~~~~
+" and fragment
+" <></>
+" ~~~~~
+" and self close tag
+" <tag />
+" ~~~~~~~
+syntax region jsxElement
+      \ start=+<\_s*\(>\|\${\|\z(\<[-:_\.\$0-9A-Za-z]\+\>\)\)+
+      \ end=+/\_s*>+
+      \ end=+<\_s*/\_s*\z1\_s*>+
+      \ contains=jsxElement,jsxEscapeJs,jsxTag,jsxComment,jsxCloseString,jsxCloseTag,@Spell
+      \ keepend
+      \ extend
+      \ contained
+      \ fold
+
+" detect jsx region
+syntax region jsxRegion
+      \ start=+\(\(\_[([,?:=+\-*/<>{}]\|&&\|||\|=>\|\<return\|\<default\|\<await\|\<yield\)\_s*\)\@<=<\_s*\(>\|\z(\(script\)\@!\<[_\$A-Za-z][-:_\.\$0-9A-Za-z]*\>\)\(\_s*\([-+*)\]}&|?]\|/\([/*]\|\_s*>\)\@!\)\)\@!\)+
+      \ end=++
+      \ contains=jsxElement
+
+" <tag key={this.props.key}>
+"          ~~~~~~~~~~~~~~~~
+syntax region jsxEscapeJs
+      \ start=+{+
+      \ end=++
+      \ extend
+      \ contained
+      \ contains=jsBlock,javascriptBlock,javaScriptBlockBuildIn,typescriptBlock
+
+" <tag key={this.props.key}>
+" ~~~~
+" and fragment start tag
+" <>
+" ~~
+exe 'syntax region jsxOpenTag
+      \ matchgroup=jsxOpenPunct
+      \ start=+<+
+      \ end=+>+
+      \ matchgroup=NONE
+      \ end=+\>+
+      \ contained
+      \ contains=jsxTagName
+      \ nextgroup=jsxAttrib
+      \ skipwhite
+      \ skipempty ' .(s:highlight_close_tag ? 'transparent' : '')
+
+" <foo.bar>
+"     ~
+syntax match jsxDot +\.+ contained display
+
+" <foo:bar>
+"     ~
+syntax match jsxNamespace +:+ contained display
+
+" <tag id="sample">
+"        ~
+syntax match jsxEqual +=+ contained display nextgroup=jsxString,jsxEscapeJs,jsxRegion skipwhite
+
+" <tag />
+"      ~~
+syntax match jsxCloseString +/\_s*>+ contained
+
+" </tag>
+" ~~~~~~
+" and fragment close tag
+" </>
+" ~~~
+syntax region jsxCloseTag
+      \ matchgroup=jsxClosePunct
+      \ start=+<\_s*/+
+      \ end=+>+
+      \ contained
+      \ contains=jsxTagName
+
+" <tag key={this.props.key}>
+"      ~~~
+syntax match jsxAttrib
+      \ +\<[-A-Za-z_][-:_\$0-9A-Za-z]*\>+
+      \ contained
+      \ nextgroup=jsxEqual
+      \ skipwhite
+      \ skipempty
+      \ contains=jsxAttribKeyword
+      \ display
+
+" <MyComponent ...>
+"  ~~~~~~~~~~~
+" NOT
+" <someCamel ...>
+"      ~~~~~
+exe 'syntax match jsxComponentName
+      \ +\<[A-Z][\$0-9A-Za-z]\+\>+
+      \ contained
+      \ display ' .(s:highlight_close_tag ? 'transparent' : '')
+
+" <tag key={this.props.key}>
+"  ~~~
+exe 'syntax match jsxTagName
+      \ +\<[-:_\.\$0-9A-Za-z]\+\>+
+      \ contained
+      \ contains=jsxComponentName,jsxDot,jsxNamespace
+      \ nextgroup=jsxAttrib
+      \ skipempty
+      \ skipwhite
+      \ display ' .(s:highlight_close_tag ? 'transparent' : '')
+
+" <tag id="sample">
+"         ~~~~~~~~
+" and
+" <tag id='sample'>
+"         ~~~~~~~~
+syntax region jsxString start=+\z(["']\)+  skip=+\\\%(\z1\|$\)+  end=+\z1+ contained contains=@Spell display
+
+let s:tags = get(g:, 'vim_jsx_pretty_template_tags', ['html', 'raw'])
+let s:enable_tagged_jsx = !empty(s:tags)
+
+" add support to JSX inside the tagged template string
+" https://github.com/developit/htm
+if s:enable_tagged_jsx
+  exe 'syntax region jsxTaggedRegion
+        \ start=+\%('. join(s:tags, '\|') .'\)\@<=`+ms=s+1
+        \ end=+`+me=e-1
+        \ extend
+        \ contained
+        \ containedin=jsTemplateString,javascriptTemplate,javaScriptStringT,typescriptStringB
+        \ contains=jsxElement'
+
+  syntax region jsxEscapeJs
+        \ start=+\${+
+        \ end=++
+        \ extend
+        \ contained
+        \ contains=jsTemplateExpression,javascriptTemplateSubstitution,javaScriptEmbed,typescriptInterpolation
+
+  syntax region jsxOpenTag
+        \ matchgroup=jsxOpenPunct
+        \ start=+<\%(\${\)\@=+
+        \ matchgroup=NONE
+        \ end=++
+        \ contained
+        \ contains=jsxEscapeJs
+        \ nextgroup=jsxAttrib,jsxSpreadOperator
+        \ skipwhite
+        \ skipempty
+
+  syntax keyword jsxAttribKeyword class contained display
+
+  syntax match jsxSpreadOperator +\.\.\.+ contained display nextgroup=jsxEscapeJs skipwhite
+
+  syntax match jsxCloseTag +<//>+ display
+
+  syntax match jsxComment +<!--\_.\{-}-->+ display
+endif
+
+" Highlight the tag name
+highlight def link jsxTag Function
+highlight def link jsxTagName Identifier
+highlight def link jsxComponentName Function
+
+highlight def link jsxAttrib Type
+highlight def link jsxAttribKeyword jsxAttrib
+highlight def link jsxEqual Operator
+highlight def link jsxString String
+highlight def link jsxDot Operator
+highlight def link jsxNamespace Operator
+
+if s:highlight_close_tag
+  highlight def link jsxCloseString Identifier
+  highlight def link jsxOpenPunct jsxTag
+else
+  " Highlight the jsxCloseString (i.e. />), jsxPunct (i.e. <,>) and jsxCloseTag (i.e. <//>)
+  highlight def link jsxCloseString Comment
+  highlight def link jsxOpenPunct jsxPunct
+endif
+
+highlight def link jsxPunct jsxCloseString
+highlight def link jsxClosePunct jsxPunct
+highlight def link jsxCloseTag jsxCloseString
+
+highlight def link jsxComment Comment
+highlight def link jsxSpreadOperator Operator
+
+let s:vim_jsx_pretty_colorful_config = get(g:, 'vim_jsx_pretty_colorful_config', 0)
+
+if s:vim_jsx_pretty_colorful_config == 1
+  highlight def link jsObjectKey Label
+  highlight def link jsArrowFuncArgs Type
+  highlight def link jsFuncArgs Type
+endif
+
diff --git a/after/syntax/typescript.vim b/after/syntax/typescript.vim
index d1b87c92..f39d755f 100644
--- a/after/syntax/typescript.vim
+++ b/after/syntax/typescript.vim
@@ -28,21 +28,21 @@ endif
 " refine the typescript line comment
 syntax region typescriptLineComment start=+//+ end=/$/ contains=@Spell,typescriptCommentTodo,typescriptRef extend keepend
 
-" add a typescriptBlock group for typescript
-syntax region typescriptBlock
-      \ contained
-      \ matchgroup=typescriptBraces
-      \ start="{"
-      \ end="}"
-      \ extend
-      \ contains=@typescriptAll,@typescriptExpression,typescriptBlock
-      \ fold
+if !hlexists('typescriptTypeCast')
+  " add a typescriptBlock group for typescript
+  syntax region typescriptBlock
+        \ matchgroup=typescriptBraces
+        \ start="{"
+        \ end="}"
+        \ contained
+        \ extend
+        \ contains=@typescriptExpression,typescriptBlock
+        \ fold
+endif
 
-" because this is autoloaded, when developing you're going to need to source
-" the autoload/jsx_pretty/*.vim file manually, or restart vim
-call jsx_pretty#syntax#highlight()
+syntax cluster typescriptExpression add=jsxRegion,typescriptParens
 
-syntax cluster typescriptExpression add=jsxRegion
+runtime syntax/jsx_pretty.vim
 
 let b:current_syntax = 'typescript.tsx'
 
@@ -52,119 +52,7 @@ if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'styled-component
   finish
 endif
 
-" Vim syntax file
-" Language:   styled-components (js/ts)
-" Maintainer: Karl Fleischmann <fleischmann.karl@gmail.com>
-" URL:        https://github.com/styled-components/vim-styled-components
-
-if exists("b:current_syntax")
-  let s:current_syntax=b:current_syntax
-  unlet b:current_syntax
-endif
-
-
-" fix for "-" before cssPositioningProp
-"   - needs to be above CSS include to not match cssVendor definitions
-syn region cssCustomPositioningPrefix contained
-      \ start='-' end='\%(\s\{-}:\)\@='
-      \ contains=cssPositioningProp
-
-" introduce CSS cluster from built-in (or single third party syntax file)
-syn include @CSS syntax/css.vim
-
-" try to include CSS3 definitions from multiple files
-" this is only possible on vim version above 7
-if v:version >= 700
-  try
-    syn include @CSS3 syntax/css/*.vim
-  catch
-  endtry
-endif
-
-" TODO: include react-native keywords
-
-" define custom cssAttrRegion
-"   - add ",", "`" and "{" to the end characters
-"   - add "cssPseudoClassId" to it's containing elements
-"     this will incorrectly highlight pseudo elements incorrectly used as
-"     attributes but correctly highlight actual attributes
-syn region cssCustomAttrRegion contained
-      \ start=":" end="\ze\%(;\|)\|{\|}\|`\)"
-      \ contains=css.*Attr,cssColor,cssImportant,cssValue.*,cssFunction,
-      \          cssString.*,cssURL,cssComment,cssUnicodeEscape,cssVendor,
-      \          cssError,cssAttrComma,cssNoise,cssPseudoClassId,
-      \          jsTemplateExpression,
-      \          typescriptInterpolation,typescriptTemplateSubstitution
-syn region cssCustomAttrRegion contained
-      \ start="transition\s*:" end="\ze\%(;\|)\|{\|}\|`\)"
-      \ contains=css.*Prop,css.*Attr,cssColor,cssImportant,cssValue.*,
-      \          cssFunction,cssString.*,cssURL,cssComment,cssUnicodeEscape,
-      \          cssVendor,cssError,cssAttrComma,cssNoise,cssPseudoClassId,
-      \          jsTemplateExpression,
-      \          typescriptInterpolation,typescriptTemplateSubstitution
-
-" define custom css elements to not utilize cssDefinition
-syn region cssCustomMediaBlock contained fold transparent matchgroup=cssBraces
-      \ start="{" end="}"
-      \ contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,
-      \          cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,
-      \          cssUnicodeEscape,cssVendor,cssTagName,cssClassName,
-      \          cssIdentifier,cssPseudoClass,cssSelectorOp,cssSelectorOp2,
-      \          cssAttributeSelector
-syn region cssCustomPageWrap contained transparent matchgroup=cssBraces
-      \ start="{" end="}"
-      \ contains=cssPageMargin,cssPageProp,cssCustomAttrRegion,css.*Prop,
-      \          cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,
-      \          cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape,cssVendor,
-      \          cssHacks
-syn match cssCustomPageMargin contained skipwhite skipnl
-      \ "@\%(\%(top\|left\|right\|bottom\)-\%(left\|center\|right\|middle\|bottom\)\)\%(-corner\)\="
-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,cssIncludeKeyword,cssPage,cssKeyFrame,
-      \          cssFontDescriptor,cssAttrComma,cssPseudoClass,cssUnicodeEscape
-
-" custom highlights for styled components
-"   - "&" inside top level
-"   - cssTagName inside of jsStrings inside of styledPrefix regions
-"     TODO: override highlighting of cssTagName with more subtle one
-syn match  styledAmpersand contained "&"
-syn region styledTagNameString matchgroup=jsString contained
-      \ start=+'+ end=+'+ skip=+\\\%(\'\|$\)+
-      \ contains=cssTagName
-syn region styledTagNameString matchgroup=jsString contained
-      \ start=+"+ end=+"+ skip=+\\\%(\"\|$\)+
-      \ contains=cssTagName
-syn region styledTagNameString matchgroup=jsString contained
-      \ start=+`+ end=+`+ skip=+\\\%(\`\|$\)+
-      \ contains=cssTagName
-
-" define custom API sections that trigger the styledDefinition highlighting
-syn match styledPrefix "\<styled\>\.\k\+"
-      \ transparent fold
-      \ nextgroup=styledDefinition
-      \ contains=cssTagName,javascriptTagRef
-      \ containedin=jsFuncBlock
-syn match styledPrefix "\.\<attrs\>\s*(\%(\n\|\s\|.\)\{-})"
-      \ transparent fold extend
-      \ nextgroup=styledDefinition
-      \ contains=jsObject,jsParen
-      \ containedin=jsFuncBlock
-syn match styledPrefix "\.\<extend\>"
-      \ transparent fold
-      \ nextgroup=styledDefinition
-      \ containedin=jsFuncBlock
+runtime! syntax/javascript.vim
 
 " define custom API section, that contains typescript annotations
 " this is structurally similar to `jsFuncCall`, but allows type
@@ -172,132 +60,57 @@ syn match styledPrefix "\.\<extend\>"
 " the function call parenthesis
 syn match styledTypescriptPrefix
       \ "\<styled\><\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>(\%('\k\+'\|\"\k\+\"\|\k\+\))"
-      \ transparent fold
+      \ transparent fold extend
       \ nextgroup=styledDefinition
       \ contains=cssTagName,
       \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
       \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
+      \          typescriptType,foldBraces,
       \          styledTagNameString
+      \ containedin=foldBraces
 syn match styledTypescriptPrefix
       \ "\<styled\>\%((\%('\k\+'\|\"\k\+\"\|\k\+\))\|\.\k\+\)<\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
-      \ transparent fold
+      \ transparent fold extend
       \ nextgroup=styledDefinition
       \ contains=cssTagName,
       \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
       \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
+      \          typescriptType,foldBraces,
       \          styledTagNameString
+      \ containedin=foldBraces
 syn match styledTypescriptPrefix "\.\<attrs\>\s*(\%(\n\|\s\|.\)\{-})<\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
       \ transparent fold extend
       \ nextgroup=styledDefinition
       \ contains=cssTagName,
       \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
       \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
+      \          typescriptType,foldBraces,
       \          styledTagNameString
+      \ containedin=foldBraces
 syn match styledTypescriptPrefix "\.\<extend\><\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
       \ transparent fold extend
       \ nextgroup=styledDefinition
       \ contains=cssTagName,
       \          typescriptBraces,typescriptOpSymbols,typescriptEndColons,
       \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
+      \          typescriptType,foldBraces,
       \          styledTagNameString
+      \ containedin=foldBraces
 
-" define emotion css prop
-" to bypass problems from top-level defined xml/js definitions, this
-" plugin re-defines keywords/noise for highlighting inside of the custom
-" xmlAttrib definition
-syn keyword styledXmlRegionKeyword css contained
-syn match   styledXmlRegionNoise "\%(=\|{\|}\)" contained
-" only include styledDefinitions inside of xmlAttribs, that are wrapped
-" in `css={}` regions, `keepend` is necessary to correctly break on the
-" higher-level xmlAttrib region end
-syn region styledXmlRegion
-      \ start="\<css\>={" end="}"
-      \ keepend fold
-      \ containedin=xmlAttrib
-      \ contains=styledXmlRegionKeyword,styledXmlRegionNoise,styledDefinition
-
-" define nested region for indenting
-syn region styledNestedRegion contained transparent
-      \ matchgroup=cssBraces
-      \ start="{" end="}"
-
-" re-define cssError to be highlighted correctly in styledNestedRegion
-syn match cssError contained "{@<>"
-
-" extend javascript matches to trigger styledDefinition highlighting
-syn match jsTaggedTemplate extend
-      \ "\<css\>\|\<keyframes\>\|\<injectGlobal\>\|\<fontFace\>\|\<createGlobalStyle\>"
-      \ nextgroup=styledDefinition
-syn match jsFuncCall "\<styled\>\s*(.\+)" transparent
-      \ nextgroup=styledDefinition
-syn match jsFuncCall "\<styled\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))"
-      \ contains=styledTagNameString
-      \ nextgroup=styledDefinition
 syn match jsFuncCall "\<styled\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))<\%(\[\|\]\|{\|}\||\|&\|:\|;\|,\|?\|'\|\"\|\k\|\s\|\n\)\+>"
+      \ transparent fold
       \ contains=typescriptBraces,typescriptOpSymbols,typescriptEndColons,
       \          typescriptParens,typescriptStringS,@typescriptType,
-      \          typescriptType,
+      \          typescriptType,foldBraces,
       \          styledTagNameString
       \ nextgroup=styledDefinition
-syn match jsFuncCall "\.\<withComponent\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))"
-      \ contains=styledTagNameString
-syn match jsFuncCall "\<dc\>\s*(\%('\k\+'\|\"\k\+\"\|`\k\+`\))\%((\)\@="
-      \ contains=styledTagNameString
-      \ nextgroup=styledDefinitionArgument
-
-" inject css highlighting into custom jsTemplateString region
-"   - use `extend` to not end all nested jsTemplateExpression on the first
-"     closing one
-syn region styledDefinition contained transparent fold extend
-      \ start="`" end="`" skip="\\\%(`\|$\)"
-      \ contains=@CSSTop,
-      \          css.*Prop,cssValue.*,cssColor,cssUrl,cssImportant,cssError,
-      \          cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape,cssVendor,
-      \          cssHacks,
-      \          cssCustom.*,
-      \          jsComment,jsTemplateExpression,
-      \          typescriptInterpolation,typescriptTemplateSubstitution,
-      \          styledAmpersand,styledNestedRegion
-syn region styledDefinitionArgument contained transparent start=+(+ end=+)+
-      \ contains=styledDefinition
+      \ containedin=foldBraces
 
 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
-
 """ yats specific extensions
 " extend typescriptIdentifierName to allow styledDefinitions in their
 " tagged templates
 syn match typescriptIdentifierName extend
       \ "\<css\>\|\<keyframes\>\|\<injectGlobal\>\|\<fontFace\>\|\<createGlobalStyle\>"
       \ nextgroup=styledDefinition
-
-" color the custom highlight elements
-hi def link cssCustomKeyFrameSelector  Constant
-hi def link cssCustomPositioningPrefix StorageClass
-hi def link styledAmpersand            Special
-
-hi def link styledXmlRegionKeyword Type
-hi def link styledXmlRegionNoise   Noise
-hi def link styledXmlRegion        String
-
-
-if exists("s:current_syntax")
-  let b:current_syntax=s:current_syntax
-endif