mirror of
https://github.com/sheerun/vim-polyglot.git
synced 2025-11-13 22:13:50 -05:00
Update
This commit is contained in:
Adam Stankiewicz
@@ -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
|
||||
|
||||
216
after/syntax/jsx_pretty.vim
Normal file
216
after/syntax/jsx_pretty.vim
Normal file
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user