This commit is contained in:
Adam Stankiewicz
2019-09-04 15:44:43 +02:00
parent 3ddca5da46
commit 664aa988f6
49 changed files with 1663 additions and 1512 deletions

View File

@@ -83,6 +83,10 @@ fu! IsStyledDefinition(lnum)
endfu
if exists('&ofu')
let b:prevofu=&ofu
if &ofu
" Do not keep track of previous omnifunc if it was not set in the first
" place
let b:prevofu=&ofu
endif
setl omnifunc=styledcomplete#CompleteSC
endif

View File

@@ -25,3 +25,7 @@ augroup jsx_comment
augroup end
setlocal suffixesadd+=.tsx
if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'styled-components') != -1
finish
endif

View File

@@ -2,172 +2,4 @@ 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
" initialize variable to check, if the indentation expression is run
" multiple times in a row, which indicates an infinite recursion
let s:is_recursion = 0
" store current indentexpr for later
let b:js_ts_indent=&indentexpr
" set indentexpr for this filetype (styled-components)
setlocal indentexpr=GetStyledIndent()
" add the following keys to trigger reindenting, when in insert mode
" - *; - Indent and insert on press of ';' key.
" - *<:> - Indent and insert on press of ':' key.
set indentkeys+=*;,*<:>,*<Return>
fu! s:GetSyntaxNames(lnum, cnum)
return map(synstack(a:lnum, a:cnum), 'synIDattr(v:val, "name")')
endfu
" re-implement SynSOL of vim-jsx
" TODO: add dependency to the readme and remove duplicate implementation
fu! s:SynSOL(lnum)
return s:GetSyntaxNames(a:lnum, 1)
endfu
" re-implement SynEOL of vim-jsx
" TODO: add dependency to the readme and remove duplicate implementation
fu! s:SynEOL(lnum, offset)
let l:lnum = prevnonblank(a:lnum)
let l:col = strlen(getline(l:lnum))
return s:GetSyntaxNames(l:lnum, l:col + a:offset)
endfu
"" Return whether the current line is a jsTemplateString
fu! s:IsStyledDefinition(lnum)
" iterate through all syntax items in the given line
for item in s:SynSOL(a:lnum)
" if syntax-item is a jsTemplateString return 1 - true
" `==#` is a match case comparison of the item
if item ==# 'styledDefinition'
return 1
endif
endfor
" fallback to 0 - false
return 0
endfu
"" Count occurences of `str` at the beginning of the given `lnum` line
fu! s:CountOccurencesInSOL(lnum, str)
let l:occurence = 0
" iterate through all items in the given line
for item in s:SynSOL(a:lnum)
" if the syntax-item equals the given str increment the counter
" `==?` is a case isensitive equal operation
if item ==? a:str
let l:occurence += 1
endif
endfor
" return the accumulated count of occurences
return l:occurence
endfu
"" Count occurences of `str` at the end of the given `lnum` line
fu! s:CountOccurencesInEOL(lnum, str, offset)
let l:occurence = 0
" iterate through all items in the given line
for item in s:SynEOL(a:lnum, a:offset)
" if the syntax-item equals the given str increment the counter
" `==?` is a case insensitive equal operation
if item == a:str
let l:occurence += 1
endif
endfor
" return the accumulated count of occurences
return l:occurence
endfu
"" Get the indentation of the current line
fu! GetStyledIndent()
if s:IsStyledDefinition(v:lnum)
let l:baseIndent = 0
" find last non-styled line
let l:cnum = v:lnum
while s:IsStyledDefinition(l:cnum)
let l:cnum -= 1
endwhile
" get indentation of the last non-styled line as base indentation
let l:baseIndent = indent(l:cnum)
" incrementally build indentation based on current indentation
" - one shiftwidth for the styled definition region
" - one shiftwidth per open nested definition region
let l:styledIndent = &sw
let l:styledIndent += min([
\ s:CountOccurencesInSOL(v:lnum, 'styledNestedRegion'),
\ s:CountOccurencesInEOL(v:lnum, 'styledNestedRegion', 0)
\ ]) * &sw
" decrease indentation by one shiftwidth, if the styled definition
" region ends on the current line
" - either directly via styled definition region, or
" - if the very last
if s:CountOccurencesInEOL(v:lnum, 'styledDefinition', 1) == 0
let l:styledIndent -= &sw
endif
" return the base indentation
" (for nested styles inside classes/objects/etc.) plus the actual
" indentation inside the styled definition region
return l:baseIndent + l:styledIndent
elseif len(b:js_ts_indent)
let l:result = 0
let l:offset = 0
" increase indentation by one shiftwidth, if the last line ended on a
" styledXmlRegion and this line does not continue with it
" this is a fix for an incorrectly indented xml prop after a
" glamor-styled styledXmlRegion
if s:CountOccurencesInEOL(v:lnum-1, 'styledXmlRegion', 0) == 1 &&
\ s:CountOccurencesInSOL(v:lnum, 'styledXmlRegion') == 0
let l:offset = &sw
endif
" make sure `GetStyledIndent` and `GetJsxIndent` don't infinitely
" recurse by incrementing a counter variable, before evaluating the
" stored indent expression
if s:is_recursion == 0
let s:is_recursion = 1
let l:result = eval(b:js_ts_indent)
endif
" `is_recursion` being 0 at this point indicates, that
" `eval(b:js_ts_indent)` did itself evaluate it's stored indentexpr
" and thus it can be assumed, that the current line should be
" indented as JS
if s:is_recursion == 0
" use one of `GetJavascriptIndent` or `GetJsIndent` if existing
" fallback to cindent, if not
if exists('*GetJavascriptIndent')
let l:result = GetJavascriptIndent()
elseif exists('*GetJsIndent')
let l:result = GetJsIndent()
else
let l:result = cindent(v:lnum)
endif
endif
" reset `is_recursion` counter and return the indentation value
let s:is_recursion = 0
return l:result + l:offset
endif
" if all else fails indent according to C-syntax
return cindent(v:lnum)
endfu
runtime! indent/javascript.vim

View File

@@ -36,172 +36,4 @@ 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
" initialize variable to check, if the indentation expression is run
" multiple times in a row, which indicates an infinite recursion
let s:is_recursion = 0
" store current indentexpr for later
let b:js_ts_indent=&indentexpr
" set indentexpr for this filetype (styled-components)
setlocal indentexpr=GetStyledIndent()
" add the following keys to trigger reindenting, when in insert mode
" - *; - Indent and insert on press of ';' key.
" - *<:> - Indent and insert on press of ':' key.
set indentkeys+=*;,*<:>,*<Return>
fu! s:GetSyntaxNames(lnum, cnum)
return map(synstack(a:lnum, a:cnum), 'synIDattr(v:val, "name")')
endfu
" re-implement SynSOL of vim-jsx
" TODO: add dependency to the readme and remove duplicate implementation
fu! s:SynSOL(lnum)
return s:GetSyntaxNames(a:lnum, 1)
endfu
" re-implement SynEOL of vim-jsx
" TODO: add dependency to the readme and remove duplicate implementation
fu! s:SynEOL(lnum, offset)
let l:lnum = prevnonblank(a:lnum)
let l:col = strlen(getline(l:lnum))
return s:GetSyntaxNames(l:lnum, l:col + a:offset)
endfu
"" Return whether the current line is a jsTemplateString
fu! s:IsStyledDefinition(lnum)
" iterate through all syntax items in the given line
for item in s:SynSOL(a:lnum)
" if syntax-item is a jsTemplateString return 1 - true
" `==#` is a match case comparison of the item
if item ==# 'styledDefinition'
return 1
endif
endfor
" fallback to 0 - false
return 0
endfu
"" Count occurences of `str` at the beginning of the given `lnum` line
fu! s:CountOccurencesInSOL(lnum, str)
let l:occurence = 0
" iterate through all items in the given line
for item in s:SynSOL(a:lnum)
" if the syntax-item equals the given str increment the counter
" `==?` is a case isensitive equal operation
if item ==? a:str
let l:occurence += 1
endif
endfor
" return the accumulated count of occurences
return l:occurence
endfu
"" Count occurences of `str` at the end of the given `lnum` line
fu! s:CountOccurencesInEOL(lnum, str, offset)
let l:occurence = 0
" iterate through all items in the given line
for item in s:SynEOL(a:lnum, a:offset)
" if the syntax-item equals the given str increment the counter
" `==?` is a case insensitive equal operation
if item == a:str
let l:occurence += 1
endif
endfor
" return the accumulated count of occurences
return l:occurence
endfu
"" Get the indentation of the current line
fu! GetStyledIndent()
if s:IsStyledDefinition(v:lnum)
let l:baseIndent = 0
" find last non-styled line
let l:cnum = v:lnum
while s:IsStyledDefinition(l:cnum)
let l:cnum -= 1
endwhile
" get indentation of the last non-styled line as base indentation
let l:baseIndent = indent(l:cnum)
" incrementally build indentation based on current indentation
" - one shiftwidth for the styled definition region
" - one shiftwidth per open nested definition region
let l:styledIndent = &sw
let l:styledIndent += min([
\ s:CountOccurencesInSOL(v:lnum, 'styledNestedRegion'),
\ s:CountOccurencesInEOL(v:lnum, 'styledNestedRegion', 0)
\ ]) * &sw
" decrease indentation by one shiftwidth, if the styled definition
" region ends on the current line
" - either directly via styled definition region, or
" - if the very last
if s:CountOccurencesInEOL(v:lnum, 'styledDefinition', 1) == 0
let l:styledIndent -= &sw
endif
" return the base indentation
" (for nested styles inside classes/objects/etc.) plus the actual
" indentation inside the styled definition region
return l:baseIndent + l:styledIndent
elseif len(b:js_ts_indent)
let l:result = 0
let l:offset = 0
" increase indentation by one shiftwidth, if the last line ended on a
" styledXmlRegion and this line does not continue with it
" this is a fix for an incorrectly indented xml prop after a
" glamor-styled styledXmlRegion
if s:CountOccurencesInEOL(v:lnum-1, 'styledXmlRegion', 0) == 1 &&
\ s:CountOccurencesInSOL(v:lnum, 'styledXmlRegion') == 0
let l:offset = &sw
endif
" make sure `GetStyledIndent` and `GetJsxIndent` don't infinitely
" recurse by incrementing a counter variable, before evaluating the
" stored indent expression
if s:is_recursion == 0
let s:is_recursion = 1
let l:result = eval(b:js_ts_indent)
endif
" `is_recursion` being 0 at this point indicates, that
" `eval(b:js_ts_indent)` did itself evaluate it's stored indentexpr
" and thus it can be assumed, that the current line should be
" indented as JS
if s:is_recursion == 0
" use one of `GetJavascriptIndent` or `GetJsIndent` if existing
" fallback to cindent, if not
if exists('*GetJavascriptIndent')
let l:result = GetJavascriptIndent()
elseif exists('*GetJsIndent')
let l:result = GetJsIndent()
else
let l:result = cindent(v:lnum)
endif
endif
" reset `is_recursion` counter and return the indentation value
let s:is_recursion = 0
return l:result + l:offset
endif
" if all else fails indent according to C-syntax
return cindent(v:lnum)
endfu
runtime! indent/javascript.vim

View File

@@ -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
View 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

View File

@@ -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