diff --git a/JavaScript (Babel).YAML-tmLanguage b/JavaScript (Babel).YAML-tmLanguage
index 9e9772d..2221e57 100644
--- a/JavaScript (Babel).YAML-tmLanguage
+++ b/JavaScript (Babel).YAML-tmLanguage
@@ -1096,57 +1096,61 @@ 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})
+ # https://github.com/styled-components/styled-components
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
+ - name: meta.styled-components.js
+ begin: (?(?>[^()]+)|\g<-1>)*\))\s*`)
+ captures:
+ '1': {name: meta.function-call.with-arguments.js variable.function.js}
+ end: (?<=`)
+ patterns:
+ # Like #round-brackets, but with "meta.function-call.with-arguments.js" so
+ # it can stop before the template starts.
+ - name: meta.function-call.with-arguments.js meta.group.js
+ begin: \(
+ beginCaptures:
+ '0': {name: punctuation.definition.group.begin.js}
+ end: \)
+ endCaptures:
+ '0': {name: punctuation.definition.group.end.js}
+ patterns:
+ - include: '#expression'
+ - begin: '`'
+ beginCaptures:
+ '0': {name: punctuation.definition.string.template.begin.js}
+ end: '`'
+ contentName: source.css.embedded.js
+ endCaptures:
+ '0': {name: punctuation.definition.string.template.end.js}
+ patterns:
+ - include: source.js.css
literal-variable:
patterns:
diff --git a/JavaScript (Babel).tmLanguage b/JavaScript (Babel).tmLanguage
index 2ba5be6..6d252a5 100644
--- a/JavaScript (Babel).tmLanguage
+++ b/JavaScript (Babel).tmLanguage
@@ -3625,137 +3625,171 @@
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
-
+ begin
+ (?<!\.)\b(injectGlobal|keyframes)\s*(`)
+ beginCaptures
+
+ 1
+
+ name
+ variable.function.tagged-template.js
+
+ 2
+
+ name
+ punctuation.definition.string.template.begin.js
+
+
+ contentName
+ source.css.embedded.js
+ end
+ `
+ endCaptures
+
+ 0
+
+ name
+ punctuation.definition.string.template.end.js
+
+
name
- meta.function entity.name.function
+ meta.styled-components.js
+ patterns
+
+
+ include
+ source.js.css
+
+
- 5
+ begin
+ (?<!\.)\b(styled)(\.)([_$a-zA-Z][$\w]*)\s*(`)
+ beginCaptures
+
+ 1
+
+ name
+ variable.other.object.js
+
+ 2
+
+ name
+ punctuation.accessor.js
+
+ 3
+
+ name
+ variable.function.tagged-template.js
+
+ 4
+
+ name
+ punctuation.definition.string.template.begin.js
+
+
+ contentName
+ source.css.embedded.js
+ end
+ `
+ endCaptures
+
+ 0
+
+ name
+ punctuation.definition.string.template.end.js
+
+
name
- string.interpolated.css keyword.other.template.begin.css
+ meta.styled-components.js
+ patterns
+
+
+ include
+ source.js.css
+
+
-
- end
- (`)
- endCaptures
-
- 0
+ begin
+ (?<!\.)\b(styled)\s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*`)
+ captures
+
+ 1
+
+ name
+ meta.function-call.with-arguments.js variable.function.js
+
+
+ end
+ (?<=`)
name
- string.interpolated.css keyword.other.template.end.css
-
-
- name
- source.css.embedded.js
- patterns
-
-
- include
- source.js.css
+ meta.styled-components.js
+ patterns
+
+
+ begin
+ \(
+ beginCaptures
+
+ 0
+
+ name
+ punctuation.definition.group.begin.js
+
+
+ end
+ \)
+ endCaptures
+
+ 0
+
+ name
+ punctuation.definition.group.end.js
+
+
+ name
+ meta.function-call.with-arguments.js meta.group.js
+ patterns
+
+
+ include
+ #expression
+
+
+
+
+ begin
+ `
+ beginCaptures
+
+ 0
+
+ name
+ punctuation.definition.string.template.begin.js
+
+
+ contentName
+ source.css.embedded.js
+ end
+ `
+ endCaptures
+
+ 0
+
+ name
+ punctuation.definition.string.template.end.js
+
+
+ patterns
+
+
+ include
+ source.js.css
+
+
+
+
diff --git a/test/syntax_test_styles.js b/test/syntax_test_styles.js
index 60aca41..53728aa 100644
--- a/test/syntax_test_styles.js
+++ b/test/syntax_test_styles.js
@@ -1,41 +1,96 @@
// SYNTAX TEST "JavaScript (Babel).tmLanguage"
-styled.h1`color:palevioletred;`
-//^^^^ source.js source.css.embedded.js variable.other.object.js
-// ^ source.js source.css.embedded.js keyword.operator.accessor
-// ^^ source.js source.css.embedded.js meta.function entity.name.function
-// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.begin.css
-// ^^^^^ source.js source.css.embedded.js meta.property-list.css meta.property-name.css support.type.property-name.css
-// ^ source.js source.css.embedded.js meta.property-list.css meta.property-value.css punctuation.separator.key-value.css
-// ^^^^^^^^^^^^^ source.js source.css.embedded.js meta.property-list.css meta.property-value.css invalid.deprecated.color.w3c-non-standard-color-name.css
-// ^ source.js source.css.embedded.js meta.property-list.css meta.property-value.css punctuation.terminator.rule.css
-// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.end.css
-
-injectGlobal`body{color:#ffcc00;}`
-//^^^^^^^^^^ source.js source.css.embedded.js entity.name.function.js
-// ^ source.js string.interpolated.css keyword.other.template.begin.css
-// ^^^^ source.js source.css.embedded.js entity.name.tag.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.begin.scss
-// ^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-name.scss support.type.property-name.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.separator.key-value.scss
-// ^^^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss constant.other.color.rgb-value.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.terminator.rule.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.end.scss
-// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.end.css
-
-keyframes`0%{color:palevioletred;}50%{color:dodgerblue;}`
-//^^^^^^^ source.js source.css.embedded.js entity.name.function.js
-// ^ source.js string.interpolated.css keyword.other.template.begin.css
-// ^^ source.js source.css.embedded.js
-// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.begin.scss
-// ^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-name.scss support.type.property-name.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.separator.key-value.scss
-// ^^^^^^^^^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss invalid.deprecated.color.w3c-non-standard-color-name.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.terminator.rule.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.end.scss
-// ^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-name.scss support.type.property-name.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.separator.key-value.scss
-// ^^^^^^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss invalid.deprecated.color.w3c-non-standard-color-name.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.terminator.rule.scss
-// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.end.scss
-// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.end.css
+styled.h1`color: #ffcc00;`
+//^^^^^^^^^^^^^^^^^^^^^^^^ meta.styled-components
+//^^^^ variable.other.object
+// ^ punctuation.accessor
+// ^^ variable.function.tagged-template
+// ^ punctuation.definition.string.template.begin
+// ^^^^^^^^^^^^^^^ source.css.embedded
+// ^^^^^^^^^^^^^^^ meta.property-list.css
+// ^ punctuation.definition.string.template.end
+
+ styled.h1``
+// ^^^^^^^^^^^ meta.styled-components
+//^^ -meta.styled-components
+// ^^ -meta.styled-components
+
+styled(Foo)`color: #ffcc00;`
+//^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.styled-components
+//^^^^^^^^^ meta.function-call.with-arguments
+// ^^^^^^^^^^^^^^^^^ -meta.function-call.with-arguments
+//^^^^ variable.function
+// ^^^^^ meta.group
+// ^ punctuation.definition.group.begin
+// ^^^ variable.other.readwrite
+// ^ punctuation.definition.group.end
+// ^ punctuation.definition.string.template.begin
+// ^^^^^^^^^^^^^^^ source.css.embedded
+// ^^^^^^^^^^^^^^^ meta.property-list.css
+// ^ punctuation.definition.string.template.end
+
+ styled(Foo)``
+// ^^^^^^^^^^^^^ meta.styled-components
+//^^ -meta.styled-components
+// ^^ -meta.styled-components
+
+styled(Foo.bar())`color: #ffcc00;`
+//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.styled-components
+//^^^^^^^^^^^^^^^ meta.function-call.with-arguments
+// ^^^^^^^^^^^^^^^^^ -meta.function-call.with-arguments
+//^^^^ variable.function
+// ^^^^^^^^^^^ meta.group
+// ^ punctuation.definition.group.begin
+// ^^^ variable.other.class
+// ^ keyword.operator.accessor
+// ^^^ variable.function
+// ^ punctuation.definition.group.end
+// ^ punctuation.definition.string.template.begin
+// ^^^^^^^^^^^^^^^ source.css.embedded
+// ^^^^^^^^^^^^^^^ meta.property-list.css
+// ^ punctuation.definition.string.template.end
+
+ styled(Foo.bar())``
+// ^^^^^^^^^^^^^^^^^^^ meta.styled-components
+//^^ -meta.styled-components
+// ^^ -meta.styled-components
+
+styled('div')`color: #ffcc00;`
+//^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.styled-components
+//^^^^^^^^^^^ meta.function-call.with-arguments
+// ^^^^^^^^^^^^^^^^^ -meta.function-call.with-arguments
+//^^^^ variable.function
+// ^^^^^^^ meta.group
+// ^ punctuation.definition.group.begin
+// ^^^^^ string.quoted
+// ^ punctuation.definition.group.end
+// ^ punctuation.definition.string.template.begin
+// ^^^^^^^^^^^^^^^ source.css.embedded
+// ^^^^^^^^^^^^^^^ meta.property-list.css
+// ^ punctuation.definition.string.template.end
+
+injectGlobal`color: #ffcc00;`
+//^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.styled-components
+//^^^^^^^^^ variable.function.tagged-template
+// ^ punctuation.definition.string.template.begin
+// ^^^^^^^^^^^^^^^ source.css.embedded
+// ^^^^^^^^^^^^^^^ meta.property-list.css
+// ^ punctuation.definition.string.template.end
+
+ injectGlobal``
+// ^^^^^^^^^^^^^^ meta.styled-components
+//^^ -meta.styled-components
+// ^^ -meta.styled-components
+
+keyframes`0%{color: red;} 50%{color: blue;}`
+//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.styled-components
+//^^^^^^^ variable.function.tagged-template
+// ^ punctuation.definition.string.template.begin
+// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.css.embedded
+// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css
+// ^ punctuation.definition.string.template.end
+
+ keyframes``
+// ^^^^^^^^^^^ meta.styled-components
+//^^ -meta.styled-components
+// ^^ -meta.styled-components