diff --git a/src/matchers.tsx b/src/matchers.tsx index ce9827d..302a248 100644 --- a/src/matchers.tsx +++ b/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) : ""; +}; diff --git a/src/styled-tidy.test.tsx b/src/styled-tidy.test.tsx index 84ce338..4fbb439 100644 --- a/src/styled-tidy.test.tsx +++ b/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` + ${between("amount", 0, 1)`color: green`}; + `; + + it("should render the given CSS when the prop is between the given range", () => { + const { getByText } = setup(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); + 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` diff --git a/src/styled-tidy.tsx b/src/styled-tidy.tsx index d9b6e9a..21aa76c 100644 --- a/src/styled-tidy.tsx +++ b/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";