2 files changed, 190 insertions, 0 deletions
diff --git a/@linaria/packages/interop/__tests__/__snapshots__/index.test.js.snap b/@linaria/packages/interop/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 0000000..52a322f
--- /dev/null
+++ b/@linaria/packages/interop/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styled-components css 1`] = `
+"import { css } from \\"styled-components\\";
+import Title from \\"./Title\\";
+export default css\`
+  & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} {
+    color: red;
+  }
+\`;"
+`;
+
+exports[`styled-components keeps linaria 1`] = `
+"import styled from \\"linaria/react\\";
+import Title from \\"./Title\\";
+export default styled.h1\`
+  & > \${Title} {
+    color: red;
+  }
+\`;"
+`;
+
+exports[`styled-components member expression as selector 1`] = `
+"import styled from \\"styled-components\\";
+import Title from \\"./Title\\";
+export default styled.h1\`
+  & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title.Small)} {
+    color: red;
+  }
+\`;"
+`;
+
+exports[`styled-components styled(Cmp) 1`] = `
+"import styled from \\"styled-components\\";
+import Cmp from \\"./Cmp\\";
+import Title from \\"./Title\\";
+export default styled(Cmp)\`
+  & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} {
+    color: red;
+  }
+\`;"
+`;
+
+exports[`styled-components styled(Cmp).attrs({}) 1`] = `
+"import styled from \\"styled-components\\";
+import Cmp from \\"./Cmp\\";
+import Title from \\"./Title\\";
+export default styled(Cmp).attrs(() => ({}))\`
+  & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} {
+    color: red;
+  }
+\`;"
+`;
+
+exports[`styled-components styled.h1 1`] = `
+"import styled from \\"styled-components\\";
+import Title from \\"./Title\\";
+export default styled.h1\`
+  & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} {
+    color: red;
+  }
+\`;"
+`;
+
+exports[`styled-components styled.h1.attrs({}) 1`] = `
+"import styled from \\"styled-components\\";
+import Title from \\"./Title\\";
+export default styled.h1.attrs(() => ({}))\`
+  & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(Title)} {
+    color: red;
+  }
+\`;"
+`;
diff --git a/@linaria/packages/interop/__tests__/index.test.js b/@linaria/packages/interop/__tests__/index.test.js
new file mode 100644
index 0000000..d6e6d86
--- /dev/null
+++ b/@linaria/packages/interop/__tests__/index.test.js
@@ -0,0 +1,117 @@
+const babel = require('@babel/core');
+const dedent = require('dedent');
+const plugin = require('../');
+
+const getCode = (src) => {
+  const { code } = babel.transform(dedent(src), { plugins: [plugin] });
+  return code;
+};
+
+describe('styled-components', function () {
+  it('keeps linaria', () => {
+    const code = getCode(`
+    import styled from "linaria/react";
+    import Title from "./Title";
+
+    export default styled.h1\`
+      & > ${'${Title}'} {
+        color: red;
+      }
+    \`;
+  `);
+
+    expect(code).toMatchSnapshot();
+  });
+
+  it('css', () => {
+    const code = getCode(`
+    import { css } from "styled-components";
+    import Title from "./Title";
+
+    export default css\`
+      & > ${'${Title}'} {
+        color: red;
+      }
+    \`;
+  `);
+
+    expect(code).toMatchSnapshot();
+  });
+
+  it('styled.h1', () => {
+    const code = getCode(`
+    import styled from "styled-components";
+    import Title from "./Title";
+
+    export default styled.h1\`
+      & > ${'${Title}'} {
+        color: red;
+      }
+    \`;
+  `);
+
+    expect(code).toMatchSnapshot();
+  });
+
+  it('member expression as selector', () => {
+    const code = getCode(`
+    import styled from "styled-components";
+    import Title from "./Title";
+
+    export default styled.h1\`
+      & > ${'${Title.Small}'} {
+        color: red;
+      }
+    \`;
+  `);
+
+    expect(code).toMatchSnapshot();
+  });
+
+  it('styled(Cmp)', () => {
+    const code = getCode(`
+    import styled from "styled-components";
+    import Cmp from "./Cmp";
+    import Title from "./Title";
+
+    export default styled(Cmp)\`
+      & > ${'${Title}'} {
+        color: red;
+      }
+    \`;
+  `);
+
+    expect(code).toMatchSnapshot();
+  });
+
+  it('styled(Cmp).attrs({})', () => {
+    const code = getCode(`
+    import styled from "styled-components";
+    import Cmp from "./Cmp";
+    import Title from "./Title";
+
+    export default styled(Cmp).attrs(() => ({}))\`
+      & > ${'${Title}'} {
+        color: red;
+      }
+    \`;
+  `);
+
+    expect(code).toMatchSnapshot();
+  });
+
+  it('styled.h1.attrs({})', () => {
+    const code = getCode(`
+    import styled from "styled-components";
+    import Title from "./Title";
+
+    export default styled.h1.attrs(() => ({}))\`
+      & > ${'${Title}'} {
+        color: red;
+      }
+    \`;
+  `);
+
+    expect(code).toMatchSnapshot();
+  });
+});