Skip to content

Commit

Permalink
add styled-components support (#289)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AriTheElk @zertosh
AriTheElk authored and zertosh committed Dec 14, 2016
1 parent 7f67835 commit 2bcc72c
Show file tree
Hide file tree
Showing 4 changed files with 780 additions and 0 deletions.
54 changes: 54 additions & 0 deletions JavaScript (Babel).YAML-tmLanguage
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ repository:
- include: '#literal-for'
- include: '#literal-switch'

- include: '#styled-components' # add support for styled-components

- include: '#expression'
- include: '#literal-punctuation'

Expand Down Expand Up @@ -1094,6 +1096,58 @@ repository:
- name: constant.character.escape.js
match: \\([1-7][0-7]{0,2}|[0-7]{2,3}|[bfnrtv0'"\\]|x\h{2}|u\{\h+\}|u\h{4})

styled-components:
patterns:
- include: '#styled-components-styled'
- include: '#styled-components-global'
- include: '#styled-components-keyframes'
styled-components-global:
begin: \s*+(?:(?:injectGlobal))\s*((`))
beginCaptures:
'0':
name: entity.name.function.js
'2':
name: string.interpolated.css keyword.other.template.begin.css
end: (`)
endCaptures:
'1':
name: string.interpolated.css keyword.other.template.end.css
name: source.css.embedded.js
patterns:
- include: source.scss
styled-components-keyframes:
begin: \s*+(?:(?:keyframes))\s*((`))
beginCaptures:
'0':
name: entity.name.function.js
'2':
name: string.interpolated.css keyword.other.template.begin.css
end: (`)
endCaptures:
'1':
name: string.interpolated.css keyword.other.template.end.css
name: source.css.embedded.js
patterns:
- include: source.scss
styled-components-styled:
begin: \s*+(?:(?:(\bstyled)(?:(\.)\s*(\w+))))\s*((`))
beginCaptures:
'1':
name: variable.other.object.js
'2':
name: keyword.operator.accessor
'3':
name: meta.function entity.name.function
'5':
name: string.interpolated.css keyword.other.template.begin.css
end: (`)
endCaptures:
'0':
name: string.interpolated.css keyword.other.template.end.css
name: source.css.embedded.js
patterns:
- include: source.js.css

literal-variable:
patterns:
# e.g. CONSTANT
Expand Down
143 changes: 143 additions & 0 deletions JavaScript (Babel).tmLanguage
View file
Original file line number Diff line number Diff line change
Expand Up @@ -475,6 +475,10 @@
<key>include</key>
<string>#literal-switch</string>
</dict>
<dict>
<key>include</key>
<string>#styled-components</string>
</dict>
<dict>
<key>include</key>
<string>#expression</string>
Expand Down Expand Up @@ -3616,6 +3620,145 @@
</dict>
</array>
</dict>
<key>styled-components</key>
<dict>
<key>patterns</key>
<array>
<dict>
<key>include</key>
<string>#styled-components-styled</string>
</dict>
<dict>
<key>include</key>
<string>#styled-components-global</string>
</dict>
<dict>
<key>include</key>
<string>#styled-components-keyframes</string>
</dict>
</array>
</dict>
<key>styled-components-global</key>
<dict>
<key>begin</key>
<string>\s*+(?:(?:injectGlobal))\s*((`))</string>
<key>beginCaptures</key>
<dict>
<key>0</key>
<dict>
<key>name</key>
<string>entity.name.function.js</string>
</dict>
<key>2</key>
<dict>
<key>name</key>
<string>string.interpolated.css keyword.other.template.begin.css</string>
</dict>
</dict>
<key>end</key>
<string>(`)</string>
<key>endCaptures</key>
<dict>
<key>1</key>
<dict>
<key>name</key>
<string>string.interpolated.css keyword.other.template.end.css</string>
</dict>
</dict>
<key>name</key>
<string>source.css.embedded.js</string>
<key>patterns</key>
<array>
<dict>
<key>include</key>
<string>source.scss</string>
</dict>
</array>
</dict>
<key>styled-components-keyframes</key>
<dict>
<key>begin</key>
<string>\s*+(?:(?:keyframes))\s*((`))</string>
<key>beginCaptures</key>
<dict>
<key>0</key>
<dict>
<key>name</key>
<string>entity.name.function.js</string>
</dict>
<key>2</key>
<dict>
<key>name</key>
<string>string.interpolated.css keyword.other.template.begin.css</string>
</dict>
</dict>
<key>end</key>
<string>(`)</string>
<key>endCaptures</key>
<dict>
<key>1</key>
<dict>
<key>name</key>
<string>string.interpolated.css keyword.other.template.end.css</string>
</dict>
</dict>
<key>name</key>
<string>source.css.embedded.js</string>
<key>patterns</key>
<array>
<dict>
<key>include</key>
<string>source.scss</string>
</dict>
</array>
</dict>
<key>styled-components-styled</key>
<dict>
<key>begin</key>
<string>\s*+(?:(?:(\bstyled)(?:(\.)\s*(\w+))))\s*((`))</string>
<key>beginCaptures</key>
<dict>
<key>1</key>
<dict>
<key>name</key>
<string>variable.other.object.js</string>
</dict>
<key>2</key>
<dict>
<key>name</key>
<string>keyword.operator.accessor</string>
</dict>
<key>3</key>
<dict>
<key>name</key>
<string>meta.function entity.name.function</string>
</dict>
<key>5</key>
<dict>
<key>name</key>
<string>string.interpolated.css keyword.other.template.begin.css</string>
</dict>
</dict>
<key>end</key>
<string>(`)</string>
<key>endCaptures</key>
<dict>
<key>0</key>
<dict>
<key>name</key>
<string>string.interpolated.css keyword.other.template.end.css</string>
</dict>
</dict>
<key>name</key>
<string>source.css.embedded.js</string>
<key>patterns</key>
<array>
<dict>
<key>include</key>
<string>source.js.css</string>
</dict>
</array>
</dict>
<key>support-class</key>
<dict>
<key>patterns</key>
Expand Down
Loading

0 comments on commit 2bcc72c

Please sign in to comment.