diff options
Diffstat (limited to 'after/syntax')
| -rw-r--r-- | after/syntax/javascript.vim | 66 | ||||
| -rw-r--r-- | after/syntax/jsx_pretty.vim | 216 | ||||
| -rw-r--r-- | after/syntax/typescript.vim | 241 |
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 |