From e65ccaf39783fadd97f6803877163c2ce770ff15 Mon Sep 17 00:00:00 2001
From: Douglas Waltman II <doug@dougwaltman.com>
Date: Fri, 27 Sep 2019 21:44:18 -0700
Subject: [PATCH] fix(component): fixes args usage with css helper

---
 src/matchers.tsx         | 40 ++++++++++++++++++++++++++++++++++------
 src/styled-tidy.test.tsx | 10 ++++++++++
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/matchers.tsx b/src/matchers.tsx
index 8c7e400..1704cb2 100644
--- a/src/matchers.tsx
+++ b/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}
+      `
+    : "";
diff --git a/src/styled-tidy.test.tsx b/src/styled-tidy.test.tsx
index 76b2c90..2bfaa81 100644
--- a/src/styled-tidy.test.tsx
+++ b/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`};