Skip to content

Commit

Permalink
fix: breakpoint and hideBelow (#1324)
Browse files Browse the repository at this point in the history
  • Loading branch information
@segunadebayo
segunadebayo authored Sep 5, 2023
1 parent cd9472a commit dd47b6e
Show file tree
Hide file tree
Showing 18 changed files with 578 additions and 125 deletions.
5 changes: 5 additions & 0 deletions .changeset/spotty-cooks-compare.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@pandacss/core': patch
---

Fix issue where hideFrom doesn't work due to incorrect breakpoint computation
32 changes: 16 additions & 16 deletions packages/core/__tests__/atomic-rule.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('atomic / with basic style object', () => {
width: 50px
}
.sm\\\\:w_60px {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
width: 60px
}
}
Expand All @@ -79,7 +79,7 @@ describe('atomic / with basic style object', () => {
width: 50px
}
.md\\\\:w_60px {
@media screen and (min-width: 768px) {
@media screen and (min-width: 48em) {
width: 60px
}
}
Expand All @@ -98,7 +98,7 @@ describe('atomic / with basic style object', () => {
"@layer utilities {
.ltr\\\\:sm\\\\:ml_4 {
[dir=ltr] & {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
margin-left: var(--spacing-4)
}
}
Expand Down Expand Up @@ -152,20 +152,20 @@ describe('atomic / with basic style object', () => {
"@layer utilities {
.sm\\\\:rtl\\\\:top_20px {
[dir=rtl] & {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
top: 20px
}
}
}
.sm\\\\:hover\\\\:top_50px {
&:is(:hover, [data-hover]) {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
top: 50px
}
}
}
.lg\\\\:top_120px {
@media screen and (min-width: 1024px) {
@media screen and (min-width: 64em) {
top: 120px
}
}
Expand All @@ -186,7 +186,7 @@ describe('atomic / with basic style object', () => {
left: 20px
}
.md\\\\:left_40px {
@media screen and (min-width: 768px) {
@media screen and (min-width: 48em) {
left: 40px
}
}
Expand Down Expand Up @@ -216,7 +216,7 @@ describe('atomic / with nesting scope', () => {
}
.\\\\[\\\\&_\\\\>_p\\\\]\\\\:md\\\\:left_40px {
& > p {
@media screen and (min-width: 768px) {
@media screen and (min-width: 48em) {
left: 40px
}
}
Expand Down Expand Up @@ -247,7 +247,7 @@ describe('atomic / with nesting scope', () => {
&:is(:hover, [data-hover]) {
[dir=ltr] & {
&.dark, .dark & {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
font: serif
}
}
Expand Down Expand Up @@ -278,14 +278,14 @@ describe('atomic / with nesting scope', () => {
}
.\\\\[input\\\\:hover_\\\\&\\\\]\\\\:sm\\\\:fs_14px {
input:hover & {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
font-size: 14px
}
}
}
.\\\\[input\\\\:hover_\\\\&\\\\]\\\\:lg\\\\:fs_18px {
input:hover & {
@media screen and (min-width: 1024px) {
@media screen and (min-width: 64em) {
font-size: 18px
}
}
Expand Down Expand Up @@ -319,7 +319,7 @@ describe('atomic / with nesting scope', () => {
}
.\\\\[\\\\&\\\\:\\\\:placeholder\\\\]\\\\:sm\\\\:text_left {
&::placeholder {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
text-align: left
}
}
Expand Down Expand Up @@ -347,7 +347,7 @@ describe('atomic / with nesting scope', () => {
}
.\\\\[\\\\@media_base\\\\]\\\\:sm\\\\:text_left {
@media base {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
text-align: left
}
}
Expand Down Expand Up @@ -388,7 +388,7 @@ describe('atomic / with grouped conditions styles', () => {
.hover\\\\:sm\\\\:dark\\\\:bg_red\\\\.300 {
&:is(:hover, [data-hover]) {
&.dark, .dark & {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
background: var(--colors-red-300)
}
}
Expand All @@ -415,7 +415,7 @@ describe('atomic / with grouped conditions styles', () => {
.hover\\\\:disabled\\\\:sm\\\\:bg_red\\\\.300 {
&:is(:hover, [data-hover]) {
&:is(:disabled, [disabled], [data-disabled]) {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
background: var(--colors-red-300)
}
}
Expand Down Expand Up @@ -449,7 +449,7 @@ describe('atomic / with grouped conditions styles', () => {
.\\\\[\\\\@media_base\\\\]\\\\:\\\\[\\\\&\\\\:hover\\\\]\\\\:sm\\\\:text_left {
&:hover {
@media base {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
text-align: left
}
}
Expand Down
71 changes: 36 additions & 35 deletions packages/core/__tests__/breakpoints.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,39 @@ describe('Breakpoints', () => {
"sm",
{
"max": "47.996875em",
"min": "640px",
"min": "40em",
"name": "sm",
},
],
[
"md",
{
"max": "63.996875em",
"min": "768px",
"min": "48em",
"name": "md",
},
],
[
"lg",
{
"max": "79.996875em",
"min": "1024px",
"min": "64em",
"name": "lg",
},
],
[
"xl",
{
"max": "95.996875em",
"min": "1280px",
"min": "80em",
"name": "xl",
},
],
[
"2xl",
{
"max": undefined,
"min": "1536px",
"min": "96em",
"name": "2xl",
},
],
Expand All @@ -55,58 +55,59 @@ describe('Breakpoints', () => {
{
"2xl": {
"max": undefined,
"min": "1536px",
"min": "96em",
"name": "2xl",
},
"lg": {
"max": "79.996875em",
"min": "1024px",
"min": "64em",
"name": "lg",
},
"md": {
"max": "63.996875em",
"min": "768px",
"min": "48em",
"name": "md",
},
"sm": {
"max": "47.996875em",
"min": "640px",
"min": "40em",
"name": "sm",
},
"xl": {
"max": "95.996875em",
"min": "1280px",
"min": "80em",
"name": "xl",
},
}
`)

expect(bp.ranges).toMatchInlineSnapshot(`
{
"2xl": "screen and (min-width: 1536px)",
"2xlOnly": "screen and (min-width: 1536px)",
"lg": "screen and (min-width: 1024px)",
"lgDown": "screen and (max-width: 79.996875em)",
"lgOnly": "screen and (min-width: 1024px) and (max-width: 79.996875em)",
"lgTo2xl": "screen and (min-width: 1024px)",
"lgToXl": "screen and (min-width: 1024px) and (max-width: 95.996875em)",
"md": "screen and (min-width: 768px)",
"mdDown": "screen and (max-width: 63.996875em)",
"mdOnly": "screen and (min-width: 768px) and (max-width: 63.996875em)",
"mdTo2xl": "screen and (min-width: 768px)",
"mdToLg": "screen and (min-width: 768px) and (max-width: 79.996875em)",
"mdToXl": "screen and (min-width: 768px) and (max-width: 95.996875em)",
"sm": "screen and (min-width: 640px)",
"smDown": "screen and (max-width: 47.996875em)",
"smOnly": "screen and (min-width: 640px) and (max-width: 47.996875em)",
"smTo2xl": "screen and (min-width: 640px)",
"smToLg": "screen and (min-width: 640px) and (max-width: 79.996875em)",
"smToMd": "screen and (min-width: 640px) and (max-width: 63.996875em)",
"smToXl": "screen and (min-width: 640px) and (max-width: 95.996875em)",
"xl": "screen and (min-width: 1280px)",
"xlDown": "screen and (max-width: 95.996875em)",
"xlOnly": "screen and (min-width: 1280px) and (max-width: 95.996875em)",
"xlTo2xl": "screen and (min-width: 1280px)",
"2xl": "screen and (min-width: 96em)",
"2xlDown": "screen and (max-width: 96em)",
"2xlOnly": "screen and (min-width: 96em)",
"lg": "screen and (min-width: 64em)",
"lgDown": "screen and (max-width: 64em)",
"lgOnly": "screen and (min-width: 64em) and (max-width: 79.996875em)",
"lgTo2xl": "screen and (min-width: 64em) and (max-width: 95.996875em)",
"lgToXl": "screen and (min-width: 64em) and (max-width: 79.996875em)",
"md": "screen and (min-width: 48em)",
"mdDown": "screen and (max-width: 48em)",
"mdOnly": "screen and (min-width: 48em) and (max-width: 63.996875em)",
"mdTo2xl": "screen and (min-width: 48em) and (max-width: 95.996875em)",
"mdToLg": "screen and (min-width: 48em) and (max-width: 63.996875em)",
"mdToXl": "screen and (min-width: 48em) and (max-width: 79.996875em)",
"sm": "screen and (min-width: 40em)",
"smDown": "screen and (max-width: 40em)",
"smOnly": "screen and (min-width: 40em) and (max-width: 47.996875em)",
"smTo2xl": "screen and (min-width: 40em) and (max-width: 95.996875em)",
"smToLg": "screen and (min-width: 40em) and (max-width: 63.996875em)",
"smToMd": "screen and (min-width: 40em) and (max-width: 47.996875em)",
"smToXl": "screen and (min-width: 40em) and (max-width: 79.996875em)",
"xl": "screen and (min-width: 80em)",
"xlDown": "screen and (max-width: 80em)",
"xlOnly": "screen and (min-width: 80em) and (max-width: 95.996875em)",
"xlTo2xl": "screen and (min-width: 80em) and (max-width: 95.996875em)",
}
`)
})
Expand All @@ -125,7 +126,7 @@ describe('Breakpoints', () => {

expect(root.toString()).toMatchInlineSnapshot(`
"
@media screen and (min-width: 768px){
@media screen and (min-width: 48em){
.foo{
color: red;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/core/__tests__/complex-rule.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ describe('complex-rule', () => {
}
.dark\\\\:sm\\\\:md\\\\:text_red200 {
&[data-theme='dark'], &&[data-theme='dark'] {
@media screen and (min-width: 640px) {
@media screen and (min-width: 768px) {
@media screen and (min-width: 40em) {
@media screen and (min-width: 48em) {
color: red200
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/core/__tests__/composition.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe('compositions', () => {
"layer": "compositions",
"styles": {
"&": {
"@media screen and (min-width: 1024px)": {
"@media screen and (min-width: 64em)": {
"fontSize": "2rem",
},
},
Expand Down Expand Up @@ -58,7 +58,7 @@ describe('compositions', () => {
@layer compositions {
.textStyle_headline\\\\.h2 {
font-size: 1.5rem;
@media screen and (min-width: 1024px) {
@media screen and (min-width: 64em) {
& {
font-size: 2rem
}
Expand Down
4 changes: 2 additions & 2 deletions packages/core/__tests__/conditions.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ describe('Conditions', () => {
expect(css.getRaw('sm')).toMatchInlineSnapshot(`
{
"name": "breakpoint",
"params": "screen and (min-width: 640px)",
"params": "screen and (min-width: 40em)",
"raw": "sm",
"rawValue": "@media screen and (min-width: 640px)",
"rawValue": "@media screen and (min-width: 40em)",
"type": "at-rule",
"value": "sm",
}
Expand Down
4 changes: 2 additions & 2 deletions packages/core/__tests__/global-css.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@ describe('Global css', () => {
color: pink;
}
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
.btn {
font-size: 12px;
}
}
@media screen and (min-width: 1024px) {
@media screen and (min-width: 64em) {
.btn {
width: 90px;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/__tests__/prefix.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe('atomic-rule / prefix', () => {
expect(backend({ color: { sm: 'red' } })).toMatchInlineSnapshot(`
"@layer utilities {
.tw-geqOyW {
@media screen and (min-width: 640px) {
@media screen and (min-width: 40em) {
color: red
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/__tests__/recipe-nesting.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ test('[recipe] direct nesting / recipe ruleset', () => {
&:first-child:hover {
color: var(--colors-red-200);
}
@media screen and (min-width: 768px) {
@media screen and (min-width: 48em) {
&:first-child:hover {
color: var(--colors-gray-300);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/__tests__/recipe.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ describe('recipe ruleset', () => {
}
}
.lg\\\\:buttonStyle--variant_outline {
@media screen and (min-width: 1024px) {
@media screen and (min-width: 64em) {
background-color: var(--colors-transparent);
border: 1px solid blue;
color: blue;
Expand Down
Loading

3 comments on commit dd47b6e

@vercel
Copy link

@vercel vercel bot commented on dd47b6e Sep 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

panda-docs – ./website

panda-docs-git-main-chakra-ui.vercel.app
panda-css.com
panda-docs-chakra-ui.vercel.app
panda-docs.vercel.app

@vercel
Copy link

@vercel vercel bot commented on dd47b6e Sep 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

panda-studio – ./

panda-studio-chakra-ui.vercel.app
panda-app.vercel.app
panda-studio-git-main-chakra-ui.vercel.app

@vercel
Copy link

@vercel vercel bot commented on dd47b6e Sep 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

panda-playground – ./playground

panda-playground.vercel.app
panda-playground-git-main-chakra-ui.vercel.app
panda-playground-chakra-ui.vercel.app
play.panda-css.com

Please sign in to comment.