feat(component): allows stirngs or numbers for grid and position mixins

src/mixins.tsx

@@ -4,7 +4,7 @@ import { css } from "styled-components";
 import { getColorChannels } from "./helpers";
 
 export const rem = (pixels: number, base: number = 16): string =>
-  `${pixels / base}rem`;
+  pixels === 0 ? "0" : `${pixels / base}rem`;
 
 export const opacify = (color: string, adjust: number): string => {
   const [r, g, b, a] = getColorChannels(color);
@@ -25,24 +25,41 @@ export const flex = (direction: string, align: string, justify: string) => css`
   justify-content: ${justify};
 `;
 
-export const grid = (cols: number, colGap: number, rowGap?: number) =>
-  css`
+export const grid = (
+  cols: number,
+  colGap: string | number,
+  rowGap?: string | number
+) => {
+  const colGapUnits = typeof colGap === "number" ? rem(colGap) : colGap;
+  const rowGapUnits =
+    typeof rowGap === "number" ? rem(rowGap) : rowGap || colGapUnits;
+
+  return css`
     display: grid;
     grid-template-columns: repeat(${cols}, 1fr);
-    grid-column-gap: ${rem(colGap)};
-    grid-row-gap: ${rem(typeof rowGap === "number" ? rowGap : colGap)};
+    grid-column-gap: ${colGapUnits};
+    grid-row-gap: ${rowGapUnits};
   `;
+};
 
 export const position = (
   value: string,
-  top: string,
-  right?: string,
-  bottom?: string,
-  left?: string
-) => css`
-  position: ${value};
-  top: ${top};
-  right: ${right || top};
-  bottom: ${bottom || top};
-  left: ${left || right || top};
-`;
+  top: string | number,
+  right?: string | number,
+  bottom?: string | number,
+  left?: string | number
+) => {
+  const topUnits = typeof top === "number" ? rem(top) : top;
+  const rightUnits = typeof right === "number" ? rem(right) : right || topUnits;
+  const bottomUnits =
+    typeof bottom === "number" ? rem(bottom) : bottom || topUnits;
+  const leftUnits = typeof left === "number" ? rem(left) : left || rightUnits;
+
+  return css`
+    position: ${value};
+    top: ${topUnits};
+    right: ${rightUnits};
+    bottom: ${bottomUnits};
+    left: ${leftUnits};
+  `;
+};

src/styled-tidy.test.tsx

@@ -311,6 +311,7 @@ describe("styed-tidy", () => {
       expect(rem(4)).toBe("0.25rem");
       expect(rem(16, 8)).toBe("2rem");
       expect(rem(16, 32)).toBe("0.5rem");
+      expect(rem(0)).toBe("0");
     });
   });
 
@@ -364,7 +365,7 @@ describe("styed-tidy", () => {
   });
 
   describe("'grid' mixin", () => {
-    it("sets the given grid CSS attributes", () => {
+    it("sets the given grid CSS attributes from numbers", () => {
       const Test = styled.div<TestProps>`
         ${grid(4, 16, 24)};
       `;
@@ -377,6 +378,17 @@ describe("styed-tidy", () => {
       expect(test).toHaveStyleRule("grid-row-gap", "1.5rem");
     });
 
+    it("sets the given grid CSS attributes from strings", () => {
+      const Test = styled.div<TestProps>`
+        ${grid(4, "2rem", "3rem")};
+      `;
+      const { getByText } = setup(<Test>test</Test>);
+      const test = getByText("test");
+
+      expect(test).toHaveStyleRule("grid-column-gap", "2rem");
+      expect(test).toHaveStyleRule("grid-row-gap", "3rem");
+    });
+
     it("sets the row gap equal to the column gap when row gap is not given", () => {
       const Test = styled.div<TestProps>`
         ${grid(2, 16)};
@@ -389,6 +401,20 @@ describe("styed-tidy", () => {
 
   describe("'position' mixin", () => {
     it("sets the given position CSS attributes", () => {
+      const Test = styled.div<TestProps>`
+        ${position("fixed", 0, 16, 32, 48)};
+      `;
+      const { getByText } = setup(<Test>test</Test>);
+      const test = getByText("test");
+
+      expect(test).toHaveStyleRule("position", "fixed");
+      expect(test).toHaveStyleRule("top", "0");
+      expect(test).toHaveStyleRule("right", "1rem");
+      expect(test).toHaveStyleRule("bottom", "2rem");
+      expect(test).toHaveStyleRule("left", "3rem");
+    });
+
+    it("sets the given position CSS attributes from strings", () => {
       const Test = styled.div<TestProps>`
         ${position("fixed", "1rem", "2rem", "3rem", "4rem")};
       `;