-
Notifications
You must be signed in to change notification settings - Fork 24
/
javascript.vim
195 lines (173 loc) · 8.41 KB
/
javascript.vim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
" 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,jsParen,jsObject,jsObjectValue
syn match styledPrefix "\.\<attrs\>\s*(\%(\n\|\s\|.\)\{-})"
\ transparent fold extend
\ nextgroup=styledDefinition
\ contains=jsObject,jsParen
\ containedin=jsFuncBlock,jsParen,jsObject,jsObjectValue
syn match styledPrefix "\.\<extend\>"
\ transparent fold
\ nextgroup=styledDefinition
\ containedin=jsFuncBlock,jsParen,jsObject,jsObjectValue
" 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\>\|\.\<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 "\.\<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
""" 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
" 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