feat(component): adds "between" matcher

src/matchers.tsx

@@ -47,3 +47,11 @@ export const under = (prop: string, amount: number) => (
   str: any,
   ...args: any[]
 ) => (props: object) => (props[prop] < amount ? css(str, ...args) : "");
+
+export const between = (prop: string, from: number, to: number) => (
+  str: any,
+  ...args: any[]
+) => (props: object) => {
+  const value = props[prop];
+  return value > from && value < to ? css(str, ...args) : "";
+};

src/styled-tidy.test.tsx

@@ -14,6 +14,7 @@ import {
   choose,
   over,
   under,
+  between,
   minWidth,
   maxWidth,
   minHeight,
@@ -236,6 +237,22 @@ describe("styed-tidy", () => {
     });
   });
 
+  describe("'between' matcher", () => {
+    const Test = styled.div<TestProps>`
+      ${between("amount", 0, 1)`color: green`};
+    `;
+
+    it("should render the given CSS when the prop is between the given range", () => {
+      const { getByText } = setup(<Test amount={0.5}>test</Test>);
+      expect(getByText("test")).toHaveStyleRule("color", "green");
+    });
+
+    it("should not render the given CSS when the prop is outside the given range", () => {
+      const { getByText } = setup(<Test amount={0}>test</Test>);
+      expect(getByText("test")).not.toHaveStyleRule("color");
+    });
+  });
+
   describe("'minWidth' media query", () => {
     it("renders a min-width media query with the given CSS", () => {
       const Test = styled.div<TestProps>`

src/styled-tidy.tsx

@@ -7,7 +7,8 @@ export {
   swap,
   choose,
   over,
-  under
+  under,
+  between
 } from "./matchers";
 export { minWidth, maxWidth, minHeight, maxHeight } from "./media";
 export { rem, opacify, transparentize, flex, grid, position } from "./mixins";