fix(utils): breakpoint calculation (#6301)

* fix: breakpoint calculation * docs: changeset
chakra-ui · Jul 11, 2022 · c11743b · c11743b · vercel · Jul 11, 2022
1 parent a57b659
commit c11743b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/.changeset/selfish-bees-kneel.md b/.changeset/selfish-bees-kneel.md
@@ -0,0 +1,7 @@
+---
+"@chakra-ui/styled-system": patch
+"@chakra-ui/utils": patch
+---
+
+Fix incorrect breakpoint calculation which excluded some viewport widths from
+media query coverage
diff --git a/packages/styled-system/tests/style-config.test.ts b/packages/styled-system/tests/style-config.test.ts
@@ -4,7 +4,7 @@ test("should handle single variant", () => {
   expect(recipe({ theme, variant: "solid", size: ["sm", "md"] }))
     .toMatchInlineSnapshot(`
     Object {
-      "@media screen and (min-width: 0px) and (max-width: 39.9365em)": Object {
+      "@media screen and (min-width: 0px) and (max-width: 39.9375em)": Object {
         "fontSize": "sm",
         "h": 8,
         "minW": 8,
@@ -27,7 +27,7 @@ test("should handle single variant", () => {
   expect(recipe({ theme, variant: "solid", size: { base: "sm", sm: "md" } }))
     .toMatchInlineSnapshot(`
     Object {
-      "@media screen and (min-width: 0px) and (max-width: 39.9365em)": Object {
+      "@media screen and (min-width: 0px) and (max-width: 39.9375em)": Object {
         "fontSize": "sm",
         "h": 8,
         "minW": 8,
@@ -50,7 +50,7 @@ test("should handle single variant", () => {
   expect(recipe({ theme, variant: "solid", size: { base: "sm", lg: "md" } }))
     .toMatchInlineSnapshot(`
     Object {
-      "@media screen and (min-width: 0px) and (max-width: 63.9365em)": Object {
+      "@media screen and (min-width: 0px) and (max-width: 63.9375em)": Object {
         "fontSize": "sm",
         "h": 8,
         "minW": 8,
@@ -80,7 +80,7 @@ test("should work with distant breakpoint", () => {
     }),
   ).toMatchInlineSnapshot(`
     Object {
-      "@media screen and (min-width: 0px) and (max-width: 63.9365em)": Object {
+      "@media screen and (min-width: 0px) and (max-width: 63.9375em)": Object {
         "fontSize": "sm",
         "h": 8,
         "minW": 8,
@@ -108,7 +108,7 @@ test("should work with distant breakpoint", () => {
     }),
   ).toMatchInlineSnapshot(`
     Object {
-      "@media screen and (min-width: 0px) and (max-width: 63.9365em)": Object {
+      "@media screen and (min-width: 0px) and (max-width: 63.9375em)": Object {
         "fontSize": "sm",
         "h": 8,
         "minW": 8,

diff --git a/packages/utils/src/breakpoint.ts b/packages/utils/src/breakpoint.ts
@@ -37,7 +37,7 @@ function subtract(value: string) {
   const factor = value.endsWith("px")
     ? -1
     : // the equivalent of 1px in em using a 16px base
-      -0.0635
+      -0.0625
   return isNumber(value)
     ? `${value + factor}`
     : value.replace(/(\d+\.?\d*)/u, (m) => `${parseFloat(m) + factor}`)

diff --git a/packages/utils/tests/responsive.test.ts b/packages/utils/tests/responsive.test.ts
@@ -142,7 +142,7 @@ test("should work with createBreakpoint output", () => {
   ).toMatchInlineSnapshot(`
     Array [
       Object {
-        "_minW": "-0.0635em",
+        "_minW": "-0.0625em",
         "breakpoint": "base",
         "maxW": "319px",
         "maxWQuery": "@media screen and (max-width: 319px)",