fix(component): fixes args usage with css helper

Author: dw2

src/matchers.tsx

@@ -3,18 +3,36 @@
 import { css } from "styled-components";
 
 export const is = (prop: string) => (...args: any) => (props: object) =>
-  props[prop] ? css(args) : "";
+  props[prop]
+    ? css`
+        ${args}
+      `
+    : "";
 
 export const isnt = (prop: string) => (...args: any) => (props: object) =>
-  !props[prop] ? css(args) : "";
+  !props[prop]
+    ? css`
+        ${args}
+      `
+    : "";
 
 export const isAny = (prop: string, matches: any[]) => (...args: any) => (
   props: object
-) => (matches.includes(props[prop]) ? css(args) : "");
+) =>
+  matches.includes(props[prop])
+    ? css`
+        ${args}
+      `
+    : "";
 
 export const isntAny = (prop: string, matches: any[]) => (...args: any) => (
   props: object
-) => (!matches.includes(props[prop]) ? css(args) : "");
+) =>
+  !matches.includes(props[prop])
+    ? css`
+        ${args}
+      `
+    : "";
 
 export const value = (prop: string) => (props: object) => props[prop];
 
@@ -26,8 +44,18 @@ export const choose = (prop: string, map: object) => (props: object) =>
 
 export const over = (prop: string, amount: number) => (...args: any) => (
   props: object
-) => (props[prop] > amount ? css(args) : "");
+) =>
+  props[prop] > amount
+    ? css`
+        ${args}
+      `
+    : "";
 
 export const under = (prop: string, amount: number) => (...args: any) => (
   props: object
-) => (props[prop] < amount ? css(args) : "");
+) =>
+  props[prop] < amount
+    ? css`
+        ${args}
+      `
+    : "";

src/styled-tidy.test.tsx

@@ -52,6 +52,16 @@ describe("styed-tidy", () => {
     });
   });
 
+  describe("'is' matcher with a mixin", () => {
+    it("should render the given CSS when matched", () => {
+      const Test = styled.div<TestProps>`
+        ${is("enabled")`height: ${rem(16)}`};
+      `;
+      const { getByText } = setup(<Test enabled>test</Test>);
+      expect(getByText("test")).toHaveStyleRule("height", "1rem");
+    });
+  });
+
   describe("'isnt' matcher", () => {
     const Test = styled.div<TestProps>`
       ${isnt("enabled")`color: red`};