fix: fix extraction when styled and css tags are used together. fixes #301

Author: satya164

src/__tests__/__snapshots__/babel.test.js.snap

@@ -279,6 +279,33 @@ Dependencies: NA
 
 `;
 
+exports[`supports both css and styled tags 1`] = `
+"import { css } from 'linaria';
+import { styled } from 'linaria/react';
+const Title =
+/*#__PURE__*/
+styled(\\"h1\\")({
+  name: \\"Title\\",
+  class: \\"th6xni0\\"
+});
+const title = \\"t1u0rrat\\";"
+`;
+
+exports[`supports both css and styled tags 2`] = `
+
+CSS:
+
+.th6xni0 {
+  font-size: 14px;
+}
+.t1u0rrat {
+  color: blue;
+}
+
+Dependencies: NA
+
+`;
+
 exports[`throws when contains dynamic expression without evaluate: true in css tag 1`] = `
 "<<DIRNAME>>/app/index.js: The CSS cannot contain JavaScript expressions when using the 'css' tag. To evaluate the expressions at build time, pass 'evaluate: true' to the babel plugin.
   2 | 

src/__tests__/babel.test.js

@@ -342,3 +342,23 @@ it('throws when contains dynamic expression without evaluate: true in css tag',
     expect(e.message.replace(__dirname, '<<DIRNAME>>')).toMatchSnapshot();
   }
 });
+
+it('supports both css and styled tags', async () => {
+  const { code, metadata } = await transpile(
+    dedent`
+      import { css } from 'linaria';
+      import { styled } from 'linaria/react';
+
+      const Title = styled.h1\`
+        font-size: 14px;
+      \`;
+
+      const title = css\`
+        color: blue;
+      \`;
+      `
+  );
+
+  expect(code).toMatchSnapshot();
+  expect(metadata).toMatchSnapshot();
+});

src/babel/extract.js

@@ -212,6 +212,10 @@ module.exports = function extract(babel: any, options: Options) {
         let css;
 
         if (
+          t.isCallExpression(tag) &&
+          t.isIdentifier(tag.callee) &&
+          tag.arguments.length === 1 &&
+          tag.callee.name === 'styled' &&
           imports(
             t,
             path.scope,
@@ -220,23 +224,23 @@ module.exports = function extract(babel: any, options: Options) {
             'linaria/react'
           )
         ) {
-          if (
-            t.isCallExpression(tag) &&
-            t.isIdentifier(tag.callee) &&
-            tag.arguments.length === 1 &&
-            tag.callee.name === 'styled'
-          ) {
-            styled = { component: path.get('tag').get('arguments')[0] };
-          } else if (
-            t.isMemberExpression(tag) &&
-            t.isIdentifier(tag.object) &&
-            t.isIdentifier(tag.property) &&
-            tag.object.name === 'styled'
-          ) {
-            styled = {
-              component: { node: t.stringLiteral(tag.property.name) },
-            };
-          }
+          styled = { component: path.get('tag').get('arguments')[0] };
+        } else if (
+          t.isMemberExpression(tag) &&
+          t.isIdentifier(tag.object) &&
+          t.isIdentifier(tag.property) &&
+          tag.object.name === 'styled' &&
+          imports(
+            t,
+            path.scope,
+            state.file.opts.filename,
+            'styled',
+            'linaria/react'
+          )
+        ) {
+          styled = {
+            component: { node: t.stringLiteral(tag.property.name) },
+          };
         } else if (
           imports(t, path.scope, state.file.opts.filename, 'css', 'linaria')
         ) {