fix(core): expand breakpoint at rule consistently

Author: segunadebayo

.changeset/sharp-goats-draw.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/core': patch
+---
+
+Fix issue where `@breakpoint` from `hideBelow` or `hideFrom` might not be compiled to media query correctly

package.json

@@ -70,7 +70,7 @@
       "git add --all packages/studio/"
     ]
   },
-  "packageManager": "pnpm@10.9.0",
+  "packageManager": "pnpm@10.10.0",
   "pnpm": {
     "overrides": {
       "@swc/helpers@~0.4": "0.4.36"

packages/core/__tests__/atomic-rule.test.ts

@@ -670,4 +670,30 @@ describe('atomic / with direct nesting', () => {
       }"
     `)
   })
+
+  test('responsive helpers', () => {
+    expect(
+      css({
+        hideFrom: 'sm',
+      }),
+    ).toMatchInlineSnapshot(`
+      "@layer utilities {
+        @media screen and (min-width: 40rem) {
+          .hide_sm {
+            display: none;
+      }
+      }
+      }"
+    `)
+
+    expect(css({ hideBelow: 'lg' })).toMatchInlineSnapshot(`
+      "@layer utilities {
+        @media screen and (max-width: 63.9975rem) {
+          .show_lg {
+            display: none;
+      }
+      }
+      }"
+    `)
+  })
 })

packages/core/src/stylesheet.ts

@@ -95,10 +95,13 @@ export class Stylesheet {
   }
 
   getLayerCss = (...layers: CascadeLayer[]) => {
+    const breakpoints = this.context.conditions.breakpoints
     return optimizeCss(
       layers
         .map((layer: CascadeLayer) => {
-          return this.context.layers.getLayerRoot(layer).toString()
+          const root = this.context.layers.getLayerRoot(layer)
+          breakpoints.expandScreenAtRule(root as postcss.Root)
+          return root.toString()
         })
         .join('\n'),
       {