From 9db1d9fae6d35bbd6bdfd68c93b9902b0f5a9b82 Mon Sep 17 00:00:00 2001
From: Georgii Dolzhykov <thorn.mailbox@gmail.com>
Date: Thu, 23 Apr 2020 19:05:01 +0300
Subject: [PATCH] add tests from #6259 and #7883

---
 .../__snapshots__/jsfmt.spec.js.snap          | 70 +++++++++++++++++++
 tests/multiparser_js_css/issue-6259.js        | 23 ++++++
 tests/multiparser_js_css/var.js               |  6 ++
 3 files changed, 99 insertions(+)
 create mode 100644 tests/multiparser_js_css/issue-6259.js

diff --git a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap
index 6d5525440..8eb72caa9 100644
--- a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap
@@ -103,6 +103,64 @@ const Icon3 = styled.div\`
 ================================================================================
 `;
 
+exports[`issue-6259.js format 1`] = `
+====================================options=====================================
+parsers: ["babel"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+export const Group = styled.div\`
+  margin: 0;
+
+  .input {
+    margin: 0;
+  }
+
+  \${StyledInput}:not(:first-child) {
+    margin: 0;
+  }
+
+  & > :not(.\${inputWrap}):not(\${Button}) {
+    display: flex;
+  }
+\`
+
+const yesFrame = (
+    ...args: Interpolation<ThemedStyledProps<{}, Theme>>[]
+) => css\`
+    \${ChatRoot}[data-frame="yes"] & {
+        \${css({}, ...args)}
+    }
+\`
+
+=====================================output=====================================
+export const Group = styled.div\`
+  margin: 0;
+
+  .input {
+    margin: 0;
+  }
+
+  \${StyledInput}:not(:first-child) {
+    margin: 0;
+  }
+
+  & > :not(.\${inputWrap}):not(\${Button}) {
+    display: flex;
+  }
+\`;
+
+const yesFrame = (
+  ...args: Interpolation<ThemedStyledProps<{}, Theme>>[]
+) => css\`
+  \${ChatRoot}[data-frame="yes"] & {
+    \${css({}, ...args)}
+  }
+\`;
+
+================================================================================
+`;
+
 exports[`styled-components.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel"]
@@ -625,11 +683,23 @@ const Something = styled.div\`
   border: 1px solid var(--\${two}); /* ... */
 \`;
 
+const StyledPurchaseCard = styled(Card)\`
+  min-width: 200px;
+  background-color: var(--\${props => props.color});
+  color: #fff;
+\`;
+
 =====================================output=====================================
 const Something = styled.div\`
   background: var(--\${one}); /* ... */
   border: 1px solid var(--\${two}); /* ... */
 \`;
 
+const StyledPurchaseCard = styled(Card)\`
+  min-width: 200px;
+  background-color: var(--\${(props) => props.color});
+  color: #fff;
+\`;
+
 ================================================================================
 `;
diff --git a/tests/multiparser_js_css/issue-6259.js b/tests/multiparser_js_css/issue-6259.js
new file mode 100644
index 000000000..ffe328b93
--- /dev/null
+++ b/tests/multiparser_js_css/issue-6259.js
@@ -0,0 +1,23 @@
+export const Group = styled.div`
+  margin: 0;
+
+  .input {
+    margin: 0;
+  }
+
+  ${StyledInput}:not(:first-child) {
+    margin: 0;
+  }
+
+  & > :not(.${inputWrap}):not(${Button}) {
+    display: flex;
+  }
+`
+
+const yesFrame = (
+    ...args: Interpolation<ThemedStyledProps<{}, Theme>>[]
+) => css`
+    ${ChatRoot}[data-frame="yes"] & {
+        ${css({}, ...args)}
+    }
+`
diff --git a/tests/multiparser_js_css/var.js b/tests/multiparser_js_css/var.js
index 430fca803..28621aaa0 100644
--- a/tests/multiparser_js_css/var.js
+++ b/tests/multiparser_js_css/var.js
@@ -2,3 +2,9 @@ const Something = styled.div`
   background: var(--${one}); /* ... */
   border: 1px solid var(--${two}); /* ... */
 `;
+
+const StyledPurchaseCard = styled(Card)`
+  min-width: 200px;
+  background-color: var(--${props => props.color});
+  color: #fff;
+`;