Lots of styled-components fixes

* Better scope names that match builtin JavaScript grammar. * Handle `styled` with arguments. * Fix whitespace scope leakage.
babel · Feb 6, 2017 · 1955e69 · 1955e69
1 parent 4d2b8be
commit 1955e69
Show file tree

Hide file tree

Showing 3 changed files with 305 additions and 212 deletions.
diff --git 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: (?<!\.)\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}
+      patterns:
+      - include: source.js.css
+
+    - name: meta.styled-components.js
+      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}
+      patterns:
+      - include: source.js.css
+
+    - name: meta.styled-components.js
+      begin: (?<!\.)\b(styled)\s*(?=(\((?>(?>[^()]+)|\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: