xstyled icon indicating copy to clipboard operation
xstyled copied to clipboard

Incorrect breakpoint with useBreakpoint hook

Open YassienW opened this issue 2 years ago • 3 comments

šŸ› Bug Report

According to the documentation, md breakpoint should be returned at @media (min-width: 768px) { ... }. Instead it triggers at @media (min-width: 769px) { ... }

To Reproduce

  • Go to codesandbox link
  • Using dev tools, change device width to 768
  • Breakpoint shown on screen will be 'sm'

Expected behavior

  • Breakpoint shown on screen should be 'md'

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/confident-tdd-mhwndm?file=/src/App.js

## Binaries:
 - Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
 - Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
 - npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
## npmPackages:
 - @xstyled/styled-components: ^3.6.0 => 3.7.0 
 - styled-components: ^5.3.5 => 5.3.6 

YassienW avatar Dec 19 '22 15:12 YassienW

Here's the problem

https://github.com/gregberge/xstyled/blob/a12e22a4e04f237ae12b8567c544df3a194ee000/packages/core/src/breakpoints.ts#L60

Seems like that line should be >=

agriffis avatar Dec 19 '22 22:12 agriffis

If one of you has time to submit a patch I’m happy to look at it!

quantizor avatar Apr 14 '23 10:04 quantizor

It's simple enough, i'll make some time for it

YassienW avatar Apr 15 '23 21:04 YassienW