fix: check if import is from linaria (#231)

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

@@ -8,7 +8,8 @@ const title = String.raw\`This is something\`;"
 exports[`does not output CSS if none present 2`] = `Object {}`;
 
 exports[`evaluates and inlines expressions in scope 1`] = `
-"const color = 'blue';
+"import { styled } from 'linaria/react';
+const color = 'blue';
 const Title =
 /*#__PURE__*/
 styled(\\"h1\\")({
@@ -30,7 +31,10 @@ Dependencies: NA
 
 `;
 
-exports[`handles css template literal in JSX element 1`] = `"<Title class={\\"th6xni0\\"} />;"`;
+exports[`handles css template literal in JSX element 1`] = `
+"import { css } from 'linaria';
+<Title class={\\"th6xni0\\"} />;"
+`;
 
 exports[`handles css template literal in JSX element 2`] = `
 
@@ -43,7 +47,8 @@ Dependencies: NA
 `;
 
 exports[`handles css template literal in object property 1`] = `
-"const components = {
+"import { css } from 'linaria';
+const components = {
   title: \\"th6xni0\\"
 };"
 `;
@@ -61,7 +66,8 @@ Dependencies: NA
 `;
 
 exports[`handles interpolation followed by unit 1`] = `
-"const Title =
+"import { styled } from 'linaria/react';
+const Title =
 /*#__PURE__*/
 styled(\\"h1\\")({
   name: \\"Title\\",
@@ -105,7 +111,8 @@ Dependencies: NA
 `;
 
 exports[`handles nested blocks 1`] = `
-"const Button =
+"import { styled } from 'linaria/react';
+const Button =
 /*#__PURE__*/
 styled(\\"button\\")({
   name: \\"Button\\",
@@ -137,7 +144,8 @@ Dependencies: NA
 `;
 
 exports[`inlines object styles as CSS string 1`] = `
-"const cover = {
+"import { styled } from 'linaria/react';
+const cover = {
   position: 'absolute',
   top: 0,
   right: 0,
@@ -181,7 +189,8 @@ Dependencies: NA
 `;
 
 exports[`outputs valid CSS classname 1`] = `
-"const ᾩPage$Title =
+"import { styled } from 'linaria/react';
+const ᾩPage$Title =
 /*#__PURE__*/
 styled(\\"h1\\")({
   name: \\"\\\\u1FA9Page$Title\\",
@@ -202,7 +211,8 @@ Dependencies: NA
 `;
 
 exports[`prevents class name collision 1`] = `
-"const Title =
+"import { styled } from 'linaria/react';
+const Title =
 /*#__PURE__*/
 styled(\\"h1\\")({
   name: \\"Title\\",
@@ -243,7 +253,8 @@ Dependencies: NA
 `;
 
 exports[`replaces unknown expressions with CSS custom properties 1`] = `
-"const Title =
+"import { styled } from 'linaria/react';
+const Title =
 /*#__PURE__*/
 styled(\\"h1\\")({
   name: \\"Title\\",
@@ -270,10 +281,11 @@ 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.
-  1 | const title = css\`
-> 2 |   font-size: \${size}px;
+  2 | 
+  3 | const title = css\`
+> 4 |   font-size: \${size}px;
     |                ^
-[0m [90m 3 | [39m[32m\`[39m[33m;[39m[0m"
+[0m [90m 5 | [39m[32m\`[39m[33m;[39m[0m"
 `;
 
 exports[`throws when not attached to a variable 1`] = `
@@ -282,14 +294,19 @@ exports[`throws when not attached to a variable 1`] = `
 - Is an object property
 - Is a prop in a JSX element
 
-> 1 | styled.h1\`
+  1 | import { styled } from 'linaria/react';
+  2 | 
+> 3 | styled.h1\`
     | ^
-[0m [90m 2 | [39m[32m  font-size: \${size}px;[39m[0m
-[0m [90m 3 | [39m[32m  color: \${props => props.color}[39m[0m
-[0m [90m 4 | [39m[32m\`[39m[33m;[39m[0m"
+[0m [90m 4 | [39m[32m  font-size: \${size}px;[39m[0m
+[0m [90m 5 | [39m[32m  color: \${props => props.color}[39m[0m
+[0m [90m 6 | [39m[32m\`[39m[33m;[39m[0m"
 `;
 
-exports[`transpiles css template literal 1`] = `"const title = \\"th6xni0\\";"`;
+exports[`transpiles css template literal 1`] = `
+"import { css } from 'linaria';
+const title = \\"th6xni0\\";"
+`;
 
 exports[`transpiles css template literal 2`] = `
 
@@ -304,7 +321,8 @@ Dependencies: NA
 `;
 
 exports[`transpiles styled template literal with function and component 1`] = `
-"const Title =
+"import { styled } from 'linaria/react';
+const Title =
 /*#__PURE__*/
 styled(Heading)({
   name: \\"Title\\",
@@ -325,7 +343,8 @@ Dependencies: NA
 `;
 
 exports[`transpiles styled template literal with function and tag 1`] = `
-"const Title =
+"import { styled } from 'linaria/react';
+const Title =
 /*#__PURE__*/
 styled('h1')({
   name: \\"Title\\",
@@ -346,7 +365,8 @@ Dependencies: NA
 `;
 
 exports[`transpiles styled template literal with object 1`] = `
-"const Title =
+"import { styled } from 'linaria/react';
+const Title =
 /*#__PURE__*/
 styled(\\"h1\\")({
   name: \\"Title\\",
@@ -367,7 +387,8 @@ Dependencies: NA
 `;
 
 exports[`uses the same custom property for the same expression 1`] = `
-"const Box =
+"import { styled } from 'linaria/react';
+const Box =
 /*#__PURE__*/
 styled(\\"div\\")({
   name: \\"Box\\",
@@ -392,7 +413,8 @@ Dependencies: NA
 `;
 
 exports[`uses the same custom property for the same identifier 1`] = `
-"const Box =
+"import { styled } from 'linaria/react';
+const Box =
 /*#__PURE__*/
 styled(\\"div\\")({
   name: \\"Box\\",

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

@@ -37,7 +37,8 @@ Dependencies: ../react
 `;
 
 exports[`evaluates expressions with dependencies 1`] = `
-"import slugify from '../slugify';
+"import { styled } from 'linaria/react';
+import slugify from '../slugify';
 const Title =
 /*#__PURE__*/
 styled(\\"h1\\")({
@@ -61,7 +62,9 @@ Dependencies: ../slugify
 `;
 
 exports[`evaluates expressions with expressions depending on shared dependency 1`] = `
-"const slugify = require('../slugify');
+"import { styled } from 'linaria/react';
+
+const slugify = require('../slugify');
 
 const boo = t => slugify(t) + 'boo';
 
@@ -90,7 +93,8 @@ Dependencies: ../slugify
 `;
 
 exports[`evaluates identifier in scope 1`] = `
-"const answer = 42;
+"import { styled } from 'linaria/react';
+const answer = 42;
 
 const foo = () => answer;
 
@@ -118,7 +122,8 @@ Dependencies: NA
 `;
 
 exports[`evaluates local expressions 1`] = `
-"const answer = 42;
+"import { styled } from 'linaria/react';
+const answer = 42;
 
 const foo = () => answer;
 
@@ -145,7 +150,9 @@ Dependencies: NA
 `;
 
 exports[`evaluates multiple expressions with shared dependency 1`] = `
-"const slugify = require('../slugify');
+"import { styled } from 'linaria/react';
+
+const slugify = require('../slugify');
 
 const boo = t => slugify(t) + 'boo';
 
@@ -201,7 +208,9 @@ Dependencies: NA
 `;
 
 exports[`ignores external expressions 1`] = `
-"const generate = props => props.content;
+"import { styled } from 'linaria/react';
+
+const generate = props => props.content;
 
 const Title =
 /*#__PURE__*/
@@ -229,7 +238,8 @@ Dependencies: NA
 `;
 
 exports[`ignores inline arrow function expressions 1`] = `
-"const Title =
+"import { styled } from 'linaria/react';
+const Title =
 /*#__PURE__*/
 styled(\\"h1\\")({
   name: \\"Title\\",
@@ -255,7 +265,8 @@ Dependencies: NA
 `;
 
 exports[`ignores inline vanilla function expressions 1`] = `
-"const Title =
+"import { styled } from 'linaria/react';
+const Title =
 /*#__PURE__*/
 styled(\\"h1\\")({
   name: \\"Title\\",
@@ -283,7 +294,9 @@ Dependencies: NA
 `;
 
 exports[`inlines object styles as CSS string 1`] = `
-"const fill = (top = 0, left = 0, right = 0, bottom = 0) => ({
+"import { styled } from 'linaria/react';
+
+const fill = (top = 0, left = 0, right = 0, bottom = 0) => ({
   position: 'absolute',
   top,
   right,
@@ -313,9 +326,9 @@ Dependencies: NA
 
 exports[`throws codeframe error when evaluation fails 1`] = `
 "<<DIRNAME>>/source.js: An error occurred when evaluating the expression: This will fail. Make sure you are not using a browser or Node specific API.
-[0m [90m 2 | [39m[0m
-[0m [90m 3 | [39m[36mconst[39m [33mTitle[39m [33m=[39m styled[33m.[39mh1[32m\`[39m[0m
-[0m[31m[1m>[22m[39m[90m 4 | [39m[32m  font-size: \${foo()}px;[39m[0m
+[0m [90m 4 | [39m[0m
+[0m [90m 5 | [39m[36mconst[39m [33mTitle[39m [33m=[39m styled[33m.[39mh1[32m\`[39m[0m
+[0m[31m[1m>[22m[39m[90m 6 | [39m[32m  font-size: \${foo()}px;[39m[0m
     |                ^
-[0m [90m 5 | [39m[32m\`[39m[33m;[39m[0m"
+[0m [90m 7 | [39m[32m\`[39m[33m;[39m[0m"
 `;