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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
|
if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
finish
endif
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Vim syntax file
"
" Language: javascript.jsx
" Maintainer: MaxMellon <maxmellon1994@gmail.com>
"
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
let s:jsx_cpo = &cpo
set cpo&vim
syntax case match
if exists('b:current_syntax')
let s:current_syntax = b:current_syntax
unlet b:current_syntax
endif
if exists('s:current_syntax')
let b:current_syntax = s:current_syntax
endif
if hlexists("jsNoise") " pangloss/vim-javascript
syntax cluster jsExpression add=jsxRegion
elseif hlexists("javascriptOpSymbols") " othree/yajs.vim
" refine the javascript line comment
syntax region javascriptLineComment start=+//+ end=/$/ contains=@Spell,javascriptCommentTodo extend keepend
syntax cluster javascriptValue add=jsxRegion
syntax cluster javascriptNoReserved add=jsxElement,jsxTag
" add support to arrow function which returns a tagged template string, e.g.
" () => html`<div></div>`
syntax cluster afterArrowFunc add=javascriptTagRef
else " build-in javascript syntax
" refine the javascript line comment
syntax region javaScriptLineComment start=+//+ end=/$/ contains=@Spell,javascriptCommentTodo extend keepend
" add a javaScriptBlock group for build-in syntax
syntax region javaScriptBlockBuildIn
\ contained
\ matchgroup=javaScriptBraces
\ start="{"
\ end="}"
\ extend
\ contains=javaScriptBlockBuildIn,@javaScriptEmbededExpr,javaScript.*
\ fold
syntax cluster javaScriptEmbededExpr add=jsxRegion
" refine the template string syntax
syntax region javaScriptStringT start=+`+ skip=+\\\\\|\\`+ end=+`+ contains=javaScriptSpecial,javaScriptEmbed,@htmlPreproc extend
syntax region javaScriptEmbed matchgroup=javaScriptEmbedBraces start=+\${+ end=+}+ contained contains=@javaScriptEmbededExpr,javaScript.*
endif
runtime syntax/jsx_pretty.vim
let b:current_syntax = 'javascript.jsx'
let &cpo = s:jsx_cpo
unlet s:jsx_cpo
if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'styled-components') != -1
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,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
|
