Handle .attrs() cases

Now that there are 4 cases handled, I thought it probably needs some comments to
show which case each injection is for.

There are other unsupported cases, such as `.withConfig` but I'm not sure if
they all belong here or into their own plugin or something.

The API reference is available here:
https://styled-components.com/docs/api

Also, not sure if there is a more generic way of handling all these cases at
once, a rule that would read: "any template string descendant from 'styled'".

Will attempt to open a PR and get some advice.

1 files changed, 23 insertions, 0 deletions

diff --git a/queries/ecma/injections.scm b/queries/ecma/injections.scm
index 52746ff9a..f97f9cd2c 100644
--- a/queries/ecma/injections.scm
+++ b/queries/ecma/injections.scm
@@ -18,6 +18,7 @@
  arguments: ((template_string) @glimmer
    (#offset! @glimmer 0 1 0 -1)))
 
+; styled.div`<css>`
 (call_expression
  function: (member_expression
    object: (identifier) @_name
@@ -25,6 +26,7 @@
  arguments: ((template_string) @css
    (#offset! @css 0 1 0 -1)))
 
+; styled(Component)`<css>`
 (call_expression
  function: (call_expression
    function: (identifier) @_name
@@ -32,4 +34,25 @@
  arguments: ((template_string) @css
    (#offset! @css 0 1 0 -1)))
 
+; styled.div.attrs({ prop: "foo" })`<css>`
+(call_expression
+ function: (call_expression
+   function: (member_expression
+    object: (member_expression
+      object: (identifier) @_name
+        (#eq? @_name "styled"))))
+ arguments: ((template_string) @css
+   (#offset! @css 0 1 0 -1)))
+
+
+; styled(Component).attrs({ prop: "foo" })`<css>`
+(call_expression
+ function: (call_expression
+   function: (member_expression
+    object: (call_expression
+      function: (identifier) @_name
+        (#eq? @_name "styled"))))
+ arguments: ((template_string) @css
+   (#offset! @css 0 1 0 -1)))
+
 (regex_pattern) @regex