Syntax as numbers

Author: emilos

test/ui/grid/index.test.js

@@ -98,6 +98,38 @@ test("applies columns as object with string as breakpoints and default key", asy
   assert(html.includes("grid-template-columns:1fr"))
 })
 
+test("applies columns as object with strings and default key", async () => {
+  const { template } = await compile(__dirname)
+  const html = template({
+    columns: {
+      default: 4,
+      "1023px": 2,
+      "767px": 1,
+    },
+  })
+  assert(html.includes("grid-template-columns:repeat(4,1fr)"))
+  assert(html.includes("@media (max-width:1023px)"))
+  assert(html.includes("grid-template-columns:repeat(2,1fr)"))
+  assert(html.includes("@media (max-width:767px)"))
+  assert(html.includes("grid-template-columns:repeat(1,1fr)"))
+})
+
+test("applies columns as object with string as breakpoints and default key", async () => {
+  const { template } = await compile(__dirname)
+  const html = template({
+    columns: {
+      default: 4,
+      lg: 2,
+      md: 1,
+    },
+  })
+  assert(html.includes("grid-template-columns:repeat(4,1fr)"))
+  assert(html.includes("@media (max-width:1023px)"))
+  assert(html.includes("grid-template-columns:repeat(2,1fr)"))
+  assert(html.includes("@media (max-width:767px)"))
+  assert(html.includes("grid-template-columns:repeat(1,1fr)"))
+})
+
 test("applies gap", async () => {
   const { template } = await compile(__dirname)
   const html = template({ gap: "16px" })

ui/grid/index.js

@@ -24,13 +24,18 @@ function Grid({ className, columns = 3, gap, breakpoint, style }, children) {
     }),
     ...(typeof columns === "object" &&
       Object.keys(columns).reduce((object, key) => {
+        const value =
+          typeof columns[key] === "number"
+            ? `repeat(${columns[key]}, 1fr)`
+            : columns[key]
         if (key === "default") {
-          object["grid-template-columns"] = columns[key]
+          object["grid-template-columns"] = value
         } else if (typeof key === "string") {
-          const value =
+          const maxWidth =
             BREAKPOINTS[key] || (key.endsWith("px") ? key : `${key}px`)
-          object[`@media (max-width: ${value})`] = {
-            "grid-template-columns": columns[key],
+
+          object[`@media (max-width: ${maxWidth})`] = {
+            "grid-template-columns": value,
           }
         }
         return object