feat: use rem for media and container queries (#2218)

feat: use rem
chakra-ui · Feb 17, 2024 · b32d817 · b32d817
1 parent ba67381
commit b32d817
Show file tree

Hide file tree

Showing 21 changed files with 212 additions and 205 deletions.
diff --git a/.changeset/wild-balloons-kneel.md b/.changeset/wild-balloons-kneel.md
@@ -0,0 +1,7 @@
+---
+'@pandacss/generator': minor
+'@pandacss/parser': minor
+'@pandacss/core': minor
+---
+
+Switch from `em` to `rem` for breakpoints and container queries to prevent side effects.
diff --git a/packages/core/__tests__/atomic-rule.test.ts b/packages/core/__tests__/atomic-rule.test.ts
@@ -71,7 +71,7 @@ describe('atomic / with basic style object', () => {
           width: 50px;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:w_60px {
             width: 60px;
       }
@@ -87,7 +87,7 @@ describe('atomic / with basic style object', () => {
           width: 50px;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:w_60px {
             width: 60px;
       }
@@ -107,7 +107,7 @@ describe('atomic / with basic style object', () => {
           margin-left: calc(var(--spacing-4) * -1);
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           [dir=ltr] .ltr\\:sm\\:ml_4 {
             margin-left: var(--spacing-4);
       }
@@ -146,19 +146,19 @@ describe('atomic / with basic style object', () => {
       }),
     ).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           [dir=rtl] .sm\\:rtl\\:top_20px {
             top: 20px;
       }
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .sm\\:hover\\:top_50px:is(:hover, [data-hover]) {
             top: 50px;
       }
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .lg\\:top_120px {
             top: 120px;
       }
@@ -178,7 +178,7 @@ describe('atomic / with basic style object', () => {
           left: 20px;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:left_40px {
             left: 40px;
       }
@@ -216,13 +216,13 @@ describe('atomic / with nesting scope', () => {
           font: sans;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           [dir=ltr] [data-theme=dark] .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover]),[dir=ltr] .dark .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover]),[dir=ltr] .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover]).dark,[dir=ltr] .\\[\\&_\\>_p\\]\\:ltr\\:dark\\:sm\\:hover\\:font_serif > p:is(:hover, [data-hover])[data-theme=dark] {
             font: serif;
       }
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .\\[\\&_\\>_p\\]\\:md\\:left_40px > p {
             left: 40px;
       }
@@ -245,13 +245,13 @@ describe('atomic / with nesting scope', () => {
           background: red400;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           input:hover .\\[input\\:hover_\\&\\]\\:sm\\:fs_14px {
             font-size: 14px;
       }
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           input:hover .\\[input\\:hover_\\&\\]\\:lg\\:fs_18px {
             font-size: 18px;
       }
@@ -279,7 +279,7 @@ describe('atomic / with nesting scope', () => {
           left: 40px;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .\\[\\&\\:\\:placeholder\\]\\:sm\\:text_left::placeholder {
             text-align: left;
       }
@@ -305,7 +305,7 @@ describe('atomic / with nesting scope', () => {
       }
 
         @media base {
-          @media screen and (min-width: 40em) {
+          @media screen and (min-width: 40rem) {
             .\\[\\@media_base\\]\\:sm\\:text_left {
               text-align: left;
       }
@@ -342,7 +342,7 @@ describe('atomic / with grouped conditions styles', () => {
           color: var(--colors-pink-400);
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           [data-theme=dark] .hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover]),.dark .hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover]),.hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover]).dark,.hover\\:sm\\:dark\\:bg_red\\.300:is(:hover, [data-hover])[data-theme=dark] {
             background: var(--colors-red-300);
       }
@@ -358,7 +358,7 @@ describe('atomic / with grouped conditions styles', () => {
       }),
     ).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .hover\\:disabled\\:sm\\:bg_red\\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
             background: var(--colors-red-300);
       }
@@ -386,7 +386,7 @@ describe('atomic / with grouped conditions styles', () => {
       }
 
         @media base {
-          @media screen and (min-width: 40em) {
+          @media screen and (min-width: 40rem) {
             .\\[\\@media_base\\]\\:\\[\\&\\:hover\\]\\:sm\\:text_left:hover {
               text-align: left;
       }

diff --git a/packages/core/__tests__/breakpoints.test.ts b/packages/core/__tests__/breakpoints.test.ts
@@ -19,40 +19,40 @@ describe('Breakpoints', () => {
         [
           "sm",
           {
-            "max": "47.9975em",
-            "min": "40em",
+            "max": "47.9975rem",
+            "min": "40rem",
             "name": "sm",
           },
         ],
         [
           "md",
           {
-            "max": "63.9975em",
-            "min": "48em",
+            "max": "63.9975rem",
+            "min": "48rem",
             "name": "md",
           },
         ],
         [
           "lg",
           {
-            "max": "79.9975em",
-            "min": "64em",
+            "max": "79.9975rem",
+            "min": "64rem",
             "name": "lg",
           },
         ],
         [
           "xl",
           {
-            "max": "95.9975em",
-            "min": "80em",
+            "max": "95.9975rem",
+            "min": "80rem",
             "name": "xl",
           },
         ],
         [
           "2xl",
           {
             "max": undefined,
-            "min": "96em",
+            "min": "96rem",
             "name": "2xl",
           },
         ],
@@ -63,59 +63,59 @@ describe('Breakpoints', () => {
       {
         "2xl": {
           "max": undefined,
-          "min": "96em",
+          "min": "96rem",
           "name": "2xl",
         },
         "lg": {
-          "max": "79.9975em",
-          "min": "64em",
+          "max": "79.9975rem",
+          "min": "64rem",
           "name": "lg",
         },
         "md": {
-          "max": "63.9975em",
-          "min": "48em",
+          "max": "63.9975rem",
+          "min": "48rem",
           "name": "md",
         },
         "sm": {
-          "max": "47.9975em",
-          "min": "40em",
+          "max": "47.9975rem",
+          "min": "40rem",
           "name": "sm",
         },
         "xl": {
-          "max": "95.9975em",
-          "min": "80em",
+          "max": "95.9975rem",
+          "min": "80rem",
           "name": "xl",
         },
       }
     `)
 
     expect(bp.ranges).toMatchInlineSnapshot(`
       {
-        "2xl": "screen and (min-width: 96em)",
-        "2xlDown": "screen and (max-width: 95.9975em)",
-        "2xlOnly": "screen and (min-width: 96em)",
-        "lg": "screen and (min-width: 64em)",
-        "lgDown": "screen and (max-width: 63.9975em)",
-        "lgOnly": "screen and (min-width: 64em) and (max-width: 79.9975em)",
-        "lgTo2xl": "screen and (min-width: 64em) and (max-width: 95.9975em)",
-        "lgToXl": "screen and (min-width: 64em) and (max-width: 79.9975em)",
-        "md": "screen and (min-width: 48em)",
-        "mdDown": "screen and (max-width: 47.9975em)",
-        "mdOnly": "screen and (min-width: 48em) and (max-width: 63.9975em)",
-        "mdTo2xl": "screen and (min-width: 48em) and (max-width: 95.9975em)",
-        "mdToLg": "screen and (min-width: 48em) and (max-width: 63.9975em)",
-        "mdToXl": "screen and (min-width: 48em) and (max-width: 79.9975em)",
-        "sm": "screen and (min-width: 40em)",
-        "smDown": "screen and (max-width: 39.9975em)",
-        "smOnly": "screen and (min-width: 40em) and (max-width: 47.9975em)",
-        "smTo2xl": "screen and (min-width: 40em) and (max-width: 95.9975em)",
-        "smToLg": "screen and (min-width: 40em) and (max-width: 63.9975em)",
-        "smToMd": "screen and (min-width: 40em) and (max-width: 47.9975em)",
-        "smToXl": "screen and (min-width: 40em) and (max-width: 79.9975em)",
-        "xl": "screen and (min-width: 80em)",
-        "xlDown": "screen and (max-width: 79.9975em)",
-        "xlOnly": "screen and (min-width: 80em) and (max-width: 95.9975em)",
-        "xlTo2xl": "screen and (min-width: 80em) and (max-width: 95.9975em)",
+        "2xl": "screen and (min-width: 96rem)",
+        "2xlDown": "screen and (max-width: 95.9975rem)",
+        "2xlOnly": "screen and (min-width: 96rem)",
+        "lg": "screen and (min-width: 64rem)",
+        "lgDown": "screen and (max-width: 63.9975rem)",
+        "lgOnly": "screen and (min-width: 64rem) and (max-width: 79.9975rem)",
+        "lgTo2xl": "screen and (min-width: 64rem) and (max-width: 95.9975rem)",
+        "lgToXl": "screen and (min-width: 64rem) and (max-width: 79.9975rem)",
+        "md": "screen and (min-width: 48rem)",
+        "mdDown": "screen and (max-width: 47.9975rem)",
+        "mdOnly": "screen and (min-width: 48rem) and (max-width: 63.9975rem)",
+        "mdTo2xl": "screen and (min-width: 48rem) and (max-width: 95.9975rem)",
+        "mdToLg": "screen and (min-width: 48rem) and (max-width: 63.9975rem)",
+        "mdToXl": "screen and (min-width: 48rem) and (max-width: 79.9975rem)",
+        "sm": "screen and (min-width: 40rem)",
+        "smDown": "screen and (max-width: 39.9975rem)",
+        "smOnly": "screen and (min-width: 40rem) and (max-width: 47.9975rem)",
+        "smTo2xl": "screen and (min-width: 40rem) and (max-width: 95.9975rem)",
+        "smToLg": "screen and (min-width: 40rem) and (max-width: 63.9975rem)",
+        "smToMd": "screen and (min-width: 40rem) and (max-width: 47.9975rem)",
+        "smToXl": "screen and (min-width: 40rem) and (max-width: 79.9975rem)",
+        "xl": "screen and (min-width: 80rem)",
+        "xlDown": "screen and (max-width: 79.9975rem)",
+        "xlOnly": "screen and (min-width: 80rem) and (max-width: 95.9975rem)",
+        "xlTo2xl": "screen and (min-width: 80rem) and (max-width: 95.9975rem)",
       }
     `)
   })
@@ -131,7 +131,7 @@ describe('Breakpoints', () => {
 
     expect(css).toMatchInlineSnapshot(`
       "
-          @media screen and (min-width: 48em){
+          @media screen and (min-width: 48rem){
               .foo{
                   color: red;
               }
@@ -151,7 +151,7 @@ describe('Breakpoints', () => {
 
     expect(css).toMatchInlineSnapshot(`
       "
-          @media screen and (max-width: 47.9975em){
+          @media screen and (max-width: 47.9975rem){
               .foo{
                   color: red;
               }

diff --git a/packages/core/__tests__/complex-rule.test.ts b/packages/core/__tests__/complex-rule.test.ts
@@ -19,8 +19,8 @@ describe('complex-rule', () => {
           color: green500;
       }
 
-        @media screen and (min-width: 40em) {
-          @media screen and (min-width: 48em) {
+        @media screen and (min-width: 40rem) {
+          @media screen and (min-width: 48rem) {
             [data-theme=dark] .dark\\:sm\\:md\\:text_red200,.dark .dark\\:sm\\:md\\:text_red200,.dark\\:sm\\:md\\:text_red200.dark,.dark\\:sm\\:md\\:text_red200[data-theme=dark] {
               color: red200;
       }

diff --git a/packages/core/__tests__/composition.test.ts b/packages/core/__tests__/composition.test.ts
@@ -16,7 +16,7 @@ describe('compositions', () => {
         "className": "textStyle_headline.h2",
         "layer": "compositions",
         "styles": {
-          "@media screen and (min-width: 64em)": {
+          "@media screen and (min-width: 64rem)": {
             "fontSize": "2rem",
           },
           "fontSize": "1.5rem",
@@ -54,7 +54,7 @@ describe('compositions', () => {
             font-weight: var(--font-weights-bold);
       }
 
-          @media screen and (min-width: 64em) {
+          @media screen and (min-width: 64rem) {
             .textStyle_headline\\.h2 {
               font-size: 2rem;
       }

diff --git a/packages/core/__tests__/conditions.test.ts b/packages/core/__tests__/conditions.test.ts
@@ -18,9 +18,9 @@ describe('Conditions', () => {
     expect(css.getRaw('sm')).toMatchInlineSnapshot(`
       {
         "name": "breakpoint",
-        "params": "screen and (min-width: 40em)",
+        "params": "screen and (min-width: 40rem)",
         "raw": "sm",
-        "rawValue": "@media screen and (min-width: 40em)",
+        "rawValue": "@media screen and (min-width: 40rem)",
         "type": "at-rule",
         "value": "sm",
       }

diff --git a/packages/core/__tests__/global-css.test.ts b/packages/core/__tests__/global-css.test.ts
@@ -97,13 +97,13 @@ describe('Global css', () => {
           color: pink;
       }
 
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .btn {
             font-size: 12px;
       }
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .btn {
             width: 90px;
       }

diff --git a/packages/core/__tests__/prefix.test.ts b/packages/core/__tests__/prefix.test.ts
@@ -23,7 +23,7 @@ describe('atomic-rule / prefix', () => {
 
     expect(backend({ color: { sm: 'red' } })).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media screen and (min-width: 40em) {
+        @media screen and (min-width: 40rem) {
           .tw-geqOyW {
             color: red;
       }

diff --git a/packages/core/__tests__/recipe-nesting.test.ts b/packages/core/__tests__/recipe-nesting.test.ts
@@ -77,7 +77,7 @@ test('[recipe] direct nesting / recipe ruleset', () => {
         color: var(--colors-red-200);
     }
 
-      @media screen and (min-width: 48em) {
+      @media screen and (min-width: 48rem) {
         .text--variant_sm:first-child:hover {
           color: var(--colors-gray-300);
     }

diff --git a/packages/core/__tests__/recipe.test.ts b/packages/core/__tests__/recipe.test.ts
@@ -59,7 +59,7 @@ describe('recipe ruleset', () => {
           font-weight: 800;
       }
 
-        @media screen and (min-width: 48em) {
+        @media screen and (min-width: 48rem) {
           .md\\:textStyle--size_h2 {
             letter-spacing: -0.03em;
             font-size: 3rem;
@@ -258,7 +258,7 @@ describe('recipe ruleset', () => {
           background-color: darkblue;
       }
 
-        @media screen and (min-width: 64em) {
+        @media screen and (min-width: 64rem) {
           .lg\\:buttonStyle--variant_outline {
             border: 1px solid blue;
             color: blue;