xstyled
xstyled copied to clipboard
Incorrect breakpoint with useBreakpoint hook
š 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
Here's the problem
https://github.com/gregberge/xstyled/blob/a12e22a4e04f237ae12b8567c544df3a194ee000/packages/core/src/breakpoints.ts#L60
Seems like that line should be >=
If one of you has time to submit a patch Iām happy to look at it!
It's simple enough, i'll make some time for it