test: css-in-js (#7005)

tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap

@@ -165,6 +165,96 @@ const StyledComponent2 = styled.div\`
   }
 \`;
 
+const Direction = styled.span\`
+  \${({ up }) => up && \`color: \${color.positive};\`}
+  \${({ down }) => down && \`color: \${color.negative};\`}
+\`;
+
+const Direction2 = styled.span\`
+  \${({ up }) => up && \`color: \${color.positive}\`};
+  \${({ down }) => down && \`color: \${color.negative}\`};
+\`;
+
+const mixin = css\`
+  color: \${props => props.color};
+  \${props => props.otherProperty}: \${props => props.otherValue};
+\`;
+
+const foo = styled.div\`
+  display: flex;
+  \${props => props.useMixin && mixin}
+\`;
+
+const Single1 = styled.div\`
+  color: red
+\`;
+
+const Single2 = styled.div\`
+  color: red;
+\`;
+
+const Dropdown = styled.div\`
+  /* A comment to avoid the prettier issue: https://github.com/prettier/prettier/issues/2291 */
+  position: relative;
+\`;
+
+const bar = styled.div\`
+  border-radius: 50%;
+  border: 5px solid rgba(var(--green-rgb), 0);
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+
+  \${props =>
+    (props.complete || props.inProgress) &&
+    css\`
+      border-color: rgba(var(--green-rgb), 0.15);
+    \`}
+  
+  div {
+    background-color: var(--purpleTT);
+    border-radius: 50%;
+    border: 4px solid rgba(var(--purple-rgb), 0.2);
+    color: var(--purpleTT);
+    display: inline-flex;
+
+    \${props =>
+    props.complete &&
+    css\`
+        background-color: var(--green);
+        border-width: 7px;
+      \`}
+      
+    \${props =>
+    (props.complete || props.inProgress) &&
+    css\`
+        border-color: var(--green);
+      \`}
+  }
+\`;
+
+const A = styled.a\`
+  display: inline-block;
+  color: #fff;  
+  \${props => props.a &&css\`
+    display: none;
+  \`}
+   height: 30px;
+\`;
+
+const Foo = styled.p\`
+  max-width: 980px;
+  \${mediaBreakpointOnlyXs\`
+    && {
+      font-size: 0.8rem;
+    }
+  \`}
+
+  &.bottom {
+    margin-top: 3rem;
+  }
+\`;
+
 =====================================output=====================================
 const ListItem1 = styled.li\`\`;
 
@@ -326,5 +416,97 @@ const StyledComponent2 = styled.div\`
   }
 \`;
 
+const Direction = styled.span\`
+  \${({ up }) => up && \`color: \${color.positive};\`}
+  \${({ down }) => down && \`color: \${color.negative};\`}
+\`;
+
+const Direction2 = styled.span\`
+  \${({ up }) => up && \`color: \${color.positive}\`};
+  \${({ down }) => down && \`color: \${color.negative}\`};
+\`;
+
+const mixin = css\`
+  color: \${props => props.color};
+  \${props => props.otherProperty}: \${props => props.otherValue};
+\`;
+
+const foo = styled.div\`
+  display: flex;
+  \${props => props.useMixin && mixin}
+\`;
+
+const Single1 = styled.div\`
+  color: red;
+\`;
+
+const Single2 = styled.div\`
+  color: red;
+\`;
+
+const Dropdown = styled.div\`
+  /* A comment to avoid the prettier issue: https://github.com/prettier/prettier/issues/2291 */
+  position: relative;
+\`;
+
+const bar = styled.div\`
+  border-radius: 50%;
+  border: 5px solid rgba(var(--green-rgb), 0);
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+
+  \${props =>
+    (props.complete || props.inProgress) &&
+    css\`
+      border-color: rgba(var(--green-rgb), 0.15);
+    \`}
+
+  div {
+    background-color: var(--purpleTT);
+    border-radius: 50%;
+    border: 4px solid rgba(var(--purple-rgb), 0.2);
+    color: var(--purpleTT);
+    display: inline-flex;
+
+    \${props =>
+      props.complete &&
+      css\`
+        background-color: var(--green);
+        border-width: 7px;
+      \`}
+
+    \${props =>
+      (props.complete || props.inProgress) &&
+      css\`
+        border-color: var(--green);
+      \`}
+  }
+\`;
+
+const A = styled.a\`
+  display: inline-block;
+  color: #fff;
+  \${props =>
+    props.a &&
+    css\`
+      display: none;
+    \`}
+  height: 30px;
+\`;
+
+const Foo = styled.p\`
+  max-width: 980px;
+  \${mediaBreakpointOnlyXs\`
+    && {
+      font-size: 0.8rem;
+    }
+  \`}
+
+  &.bottom {
+    margin-top: 3rem;
+  }
+\`;
+
 ================================================================================
 `;

tests/multiparser_js_css/styled-components.js

@@ -156,3 +156,93 @@ const StyledComponent2 = styled.div`
     color: red
   }
 `;
+
+const Direction = styled.span`
+  ${({ up }) => up && `color: ${color.positive};`}
+  ${({ down }) => down && `color: ${color.negative};`}
+`;
+
+const Direction2 = styled.span`
+  ${({ up }) => up && `color: ${color.positive}`};
+  ${({ down }) => down && `color: ${color.negative}`};
+`;
+
+const mixin = css`
+  color: ${props => props.color};
+  ${props => props.otherProperty}: ${props => props.otherValue};
+`;
+
+const foo = styled.div`
+  display: flex;
+  ${props => props.useMixin && mixin}
+`;
+
+const Single1 = styled.div`
+  color: red
+`;
+
+const Single2 = styled.div`
+  color: red;
+`;
+
+const Dropdown = styled.div`
+  /* A comment to avoid the prettier issue: https://github.com/prettier/prettier/issues/2291 */
+  position: relative;
+`;
+
+const bar = styled.div`
+  border-radius: 50%;
+  border: 5px solid rgba(var(--green-rgb), 0);
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+
+  ${props =>
+    (props.complete || props.inProgress) &&
+    css`
+      border-color: rgba(var(--green-rgb), 0.15);
+    `}
+  
+  div {
+    background-color: var(--purpleTT);
+    border-radius: 50%;
+    border: 4px solid rgba(var(--purple-rgb), 0.2);
+    color: var(--purpleTT);
+    display: inline-flex;
+
+    ${props =>
+    props.complete &&
+    css`
+        background-color: var(--green);
+        border-width: 7px;
+      `}
+      
+    ${props =>
+    (props.complete || props.inProgress) &&
+    css`
+        border-color: var(--green);
+      `}
+  }
+`;
+
+const A = styled.a`
+  display: inline-block;
+  color: #fff;  
+  ${props => props.a &&css`
+    display: none;
+  `}
+   height: 30px;
+`;
+
+const Foo = styled.p`
+  max-width: 980px;
+  ${mediaBreakpointOnlyXs`
+    && {
+      font-size: 0.8rem;
+    }
+  `}
+
+  &.bottom {
+    margin-top: 3rem;
+  }
+`;