mg901 / styled-breakpoints Goto Github PK
View Code? Open in Web Editor NEWSimple and powerful breakpoints for styled components and emotion.
Home Page: https://www.npmjs.com/package/styled-breakpoints
License: MIT License
Simple and powerful breakpoints for styled components and emotion.
Home Page: https://www.npmjs.com/package/styled-breakpoints
License: MIT License
This should be possible, right?
I propose a hooks API:
import { up, useBreakpoint } from 'styled-breakpoints`
const isMobile = useBreakpoint(up('tablet'));
Working Implementation:
import { useState, useEffect } from 'react';
import { useTheme } from 'styled-components';
export const useBreakpoint = (breakpoint: (z: { theme: any }) => string) => {
const theme = useTheme();
const query = breakpoint({ theme }).replace(/^@media/, '');
const mq = window.matchMedia(query);
const [isBreak, setIsBreak] = useState(mq.matches);
useEffect(() => {
function handleResize() {
setIsBreak(window.matchMedia(query).matches);
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return isBreak;
};
export default useBreakpoint;
I just started using this lib and I'm a little bit confused by the API. The docs give two examples with the md
breakpoint and the up
and down
functions respectively. The first example seems clear to me: ${up('md')}
translates to @media (min-width: 768px)
. But in the second example, ${down('md')}
translates to @media (max-width: 991.98px)
whereas I would have expected @media (max-width: 767.98px)
(also see the screenshot below).
On a given viewport width of 800px, both useBreakpoint(up('md'))
and useBreakpoint(down('md'))
return true at the same time. Maybe I'm understanding the API wrong, but shouldn't they be mutually exclusive? I'd expect the latter to be false.
Merry Christmas and thank you in advance for your help π
Hey hello,
Thanks for the library, it is really useful π I would like to propose to document usage of styled-breakpoints
when using object notation in order to explain that breakpoint functions (up
, down
etc.) are curried and that props
have to be passed explicitly:
const MyComponent = styled('div')(props => ({
color: props.theme.colors.primary,
fontSize: '1.5rem',
[up('sm')(props)]: {
fontSize: '1rem'
}
}))
By props
I mean an object with a compatible "interface" i.e. containing a theme
property.
I can create a PR for that if that's ok.
Cheers!
2.4.1
to 2.5.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
husky is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 15 commits.
879776c
2.5.0
4dd6465
prettier
299e40e
change debug message
890cbb0
update CHANGELOG.md
092fb31
update messages
dfc991b
prettier
3434d38
update dependencies
5b23d15
remove duplicate message
b29d9bb
comments
de75acb
Use git rev-parse (#508)
4079060
Show CWD in debug messages (#509)
e081063
Update FUNDING.yml
ac47ed6
Update FUNDING.yml
6d2cd21
Delete tslint.json
de10c96
Update README.md
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
First of all, thanks for maintaining this library! One of the few that hasn't been left for death.
However, I've been running into some issues when using this package in a TypeScript project.
First of all, the up
/down
/between
/only
function parameter is not strictly typed. It would be nice if the keys from the createTheme
object would be used here. Now this parameter is just of type string
. However, I can still use the package fine without this strict typing.
Another thing which is causing a bigger issue: the return value of the up
/down
/between
/only
functions. At the moment that is any
, which causes an error when using these functions in combination with useBreakpoint
:
const isDesktop = useBreakpoint(up("lg"));
// The following ESLint error is being thrown:
// Unsafe argument of type `any` assigned to a parameter of type `Function`.
Let me know if you need any more information!
in Astroturf all the variables have to be statically analyzable and be in the same file. examples from readme fail with the message saying that
Could not resolve interpolation to a value, css returned class name, or styled component. All interpolated styled components must be in the same file and values must be statically determinable at compile time.
13 | }
14 |
> 15 | ${up('tablet')} {
Seems like this should be easy to get around
https://codesandbox.io/s/styled-components-hooks-api-forked-spo18?file=/src/app.tsx
4.0.2
to 4.0.3
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
commitizen is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 2 commits.
270cb5c
fix: bump tests to release (#656)
2a1a111
fix(deps): update dependency cz-conventional-changelog to v3 (#654)
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
After upgrading styled-breakpoints to newest version, the build seems to refer to types.d
which cannot be found in dist.
1:103 Cannot find module './types.d'.
> 1 | import { GetFn, MakeErrorMessage, Options, StyledBreakpoints, MediaQueries, Orientation, Props } from './types.d';
| ^
2 | export { Options, StyledBreakpoints, MediaQueries, Orientation, Props };
3 | export declare const _type: (x: unknown) => string;
4 | export declare const _get: GetFn;```
We all now, that relay just on pixels is not enough, so I tried to have breakpoints based on em values, but some how converts these em values to new ems:
I am using:
"next": "^8.0.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"styled-breakpoints": "^6.6.2",
"styled-components": "^4.1.3",
"styled-normalize": "^8.0.6",
"styled-theme": "^0.3.3"
const theme = {
breakpoints:{
xs: '30em',
sm: '50em',
md: '60em',
lg: '80em',
xl: '120em',
}
}
const Container = styled.div`
${down('md')} {
color: rebeccapurple;
}
`
This is what I got SSR rendered:
/* sc-component-id: PageTitle__Container-c1sqxi-0 */
@media (min-width:48em) and (max-width:61.99875em){
.bsEiBw{color:rebeccapurple;}
}
@media (min-width:1.875em) and (max-width:3.12375em){
.jQjQlc{color:rebeccapurple;}
}
@media (min-width:3.125em) and (max-width:3.74875em){
.bBciUM{color:rebeccapurple;}
}
@media (max-width:2.62375em){
.haykbX{color:rebeccapurple;}
}
@media (max-width:47.99875em){
.imXVfl{color:rebeccapurple;}
}
@media (max-width:4.99875em){
.bANXey{color:rebeccapurple;}
}
@media (max-width:4.99875em){
.gZDZUq{color:rebeccapurple;}
}
@media (max-width:4.99875em){
.pTrKY{color:rebeccapurple;}
}
If I use px as breakpoint values, then all is working as expected.
Current element has class gZDZUq
22.9.0
to 22.10.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 7 commits.
28bd1dc
feat(rules): adds no-if
rule (#293)
7ebdc0e
chore: enforce import destructure order
31c7cef
chore: convert to import/export (#302)
9f858cb
chore: delete tests instead of ignoring them with babel
c595ba0
chore: do not include tests in published tarball
4b4eb78
chore: fix lint error in md file
d3ea720
chore(docs): fix typo (#304)
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
I tried to find typings for the library and unfortunately have not found anything... Do you have plans to develop them?
Hello I would like to know if you have orientation landscape?
the type of styled-breakpoints is object
breakpoints={
sm: 0,
md: 992,
lg: 1024
}
the type of rebass or styled-system is array
breakpoints=['40em', '60em', '80em']
https://github.com/styled-system/styled-system/blob/master/docs/responsive-styles.md#using-objects
Many thanks for this package, I just started to use it in a project and it's very similar to what I have used for SCSS in the past.
One thing I didn't find is that is there a way to override the default breakpoints, globally? In the readme as I see overriding can be done with createTheme
and ThemeProvider
.
Fortunately the project uses the same breakpoints as the defaults so it's not a big issue right now, but later a global customization may be needed.
2.18.1
to 2.18.2
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 4 commits.
1a90a20
Bump to v2.18.2
b3e5311
bump utils to v2.4.1
984fa3b
Remove duplicate no-duplicates changelog entry
582236b
[bugfix] Skip warning on type interfaces
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Hi Maxim!
First of all: many thanks for such a great library :)
I am writing as I have stumbled upon a potential bug that relates to Typescript.
the following line of code will result in a Type Error
import { css } from "@emotion/react";
import { down } from "styled-breakpoints";
const myReusableCss = css`
${down("xs")}{
background: red;
}
`
you can check the reproduction in a Code Sandbox:
https://codesandbox.io/s/stupefied-hertz-0z2b6?file=/src/MyComponent.ts
I might take a deeper look into code later on in the week to see whether I could come up with a solution.
π¨ You need to enable Continuous Integration on Greenkeeper branches of this repository. π¨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didnβt receive a CI status on the greenkeeper/initial
branch, itβs possible that you donβt have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how itβs configured. Make sure it is set to run on all new branches. If you donβt want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, youβll need to re-trigger Greenkeeperβs initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.
22.11.1
to 22.12.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 1 commits.
7ae98f5
feat: assert that async expect
s are awaited or returned (#255)
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
devDependency
@commitlint/cli was updated from 8.0.0
to 8.1.0
.devDependency
@commitlint/config-conventional was updated from 8.0.0
to 8.1.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the commitlint group definition.
commitlint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 39 commits.
c17420d
v8.1.0
ca19d70
chore: update dependency lodash to v4.17.14 (#724)
5757ef2
build(deps): bump lodash.template from 4.4.0 to 4.5.0 (#721)
5b5f855
build(deps): bump lodash.merge from 4.6.0 to 4.6.2 (#722)
4cb979d
build(deps): bump lodash from 4.17.11 to 4.17.13 (#723)
a89c1ba
chore: add devcontainer setup
9aa5709
chore: pin dependencies (#714)
c9ef5e2
chore: centralize typescript and jest setups (#710)
c9dcf1a
chore: pin dependencies (#708)
6a6a8b0
refactor: rewrite top level to typescript (#679)
0fedbc0
chore: update dependency @types/jest to v24.0.15 (#694)
0b9c7ed
chore: update dependency typescript to v3.5.2 (#695)
4efb34b
chore: update dependency globby to v10 (#705)
804af8b
chore: update dependency lint-staged to v8.2.1 (#696)
9075844
fix: add explicit dependency on chalk (#687)
There are 39 commits in total.
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Hi @mg901,
first of all, I really like the changes introduced in v11 today. Working with the down-function feels a lot more natural now. However, I noticed that after the update to v11.0.2, the useBreakpoint
hook now triggers a rules-of-hooks warning.
Example: useBreakpoint(up('md'))
Output: Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function. For more information, see https://reactjs.org/link/rules-of-hooks
π¨ You need to enable Continuous Integration on Greenkeeper branches of this repository. π¨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didnβt receive a CI status on the greenkeeper/initial
branch, itβs possible that you donβt have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how itβs configured. Make sure it is set to run on all new branches. If you donβt want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, youβll need to re-trigger Greenkeeperβs initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.
Would be nice since with iPad pro the resolutions of portrait mode is already 1024px wide.
This would give us a bit more control, especially when combining with min and max-width.
Thanks for all your work.
Replace old api with new api
- import { createTheme } from 'styled-breakpoints';
+ import { createStyledbreakpointsTheme } from 'styled-breakpoints'
Hi @mg901 thanks for this awesome library.
I'm using this library in one of my project and wanted to use breakpoint with useBreakpoint so that i can render my components conditionality based on the screen size. But even when i defined theme with createTheme it seems to take value from default breakpoints.
CodeSandbox Link:- https://codesandbox.io/s/hooks-api-emotion-forked-3glb0s
After going through the code i understood that in this case theme is not getting attached to function automatically as it would in case of rendering it as styled/react component.
Solution i am thinking of :-
createUseBreakpoint
through which we can define the theme object to be used in case, and instead of default theme it will use the theme we are passing here.Let me know your thoughts ?
I came across a bug in my project yesterday and I think have now traced it to styled-breakpoints.
I've made a minimal reproduction which you can find at https://github.com/tremby/next-mq-bug
The main branch has the broken case, which is also deployed at http://next-mq-bug-1.surge.sh/
In this reproduction, I initialize a variable mobile
, then in a try/catch block I run the useBreakpoint
hook. I have to run it in a try/catch because window
does not exist during server-side rendering, and it's impossible to know how wide the user's browser window is. Without the try/catch block, an error would be thrown here: https://github.com/mg901/styled-breakpoints/blob/master/react-styled/index.js#L9
Whichever version of the display initialized mobile
to the value matching the width of the viewport at load time, displays correctly. The other version displays incorrectly. The wrong styled-components classes have been added to the wrong elements. On resizing so that the media query flips, the version which displayed correctly still displays correctly. The version which started out wrong is still wrong.
Here are some screenshots.
After hitting refresh at a narrow width:
Without refresh, after then resizing to be wider:
After hitting refresh at that wider width:
And then after resizing to be narrower again without hitting refresh:
I then made my own implementation of useBreakpoint
(albeit limited to a hard-coded media query) and I do not get the same bug. In my version I don't actually need the try/catch block either, since everything which tries to use window
happens in useEffect
, and effects don't run at SSR time. That version is on my "without-styled-breakpoints" branch, and is deployed here: http://next-mq-bug-2.surge.sh/
If you are open to a rewrite of your useBreakpoint
function I could give it a shot. Or do you think the bug is actually elsewhere, like in styled-components or in Next.js?
Hey team,
First of all thanks for this awesome tool. Secondly, I'm facing an issue with my react-native-web project which uses styled-components where none of my responsive styles get applied to the dom elements:
Here's my component definition:
import styled from 'styled-components/native';
import { up, down, between } from 'styled-breakpoints';
export const H3Headline = styled.Text`
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
color: white;
${down('sm')} {
background-color: red;
font-size: 32px;
line-height: 40px;
font-weight: 700;
}
${between('sm', 'lg')} {
background-color: blue;
font-size: 32px;
line-height: 40px;
font-weight: 700;
}
${up('lg')} {
background-color: yellow;
font-size: 48px;
line-height: 60px;
font-weight: 700;
}
`;
As you can see, I'm importing styled from styled-components/native
and my component is a react native's Text component. And this is what I'm seeing on the DOM:
If I replace my styled-components' import and the component to something like:
import styled from 'styled-components';
import { up, down, between } from 'styled-breakpoints';
export const H3Headline = styled.span`
... this is the same code I had before
The DOM output is the expected one and the responsiveness works perfectly:
I'm not sure if I have to do something extra for making this awesome tool with react-native-web or if there is no way of making it work.
Thanks,
Eric.
Leave your opinion on this topic in the issue :)
Many projects don't have dedicated UI/UX Designer to create views for all popular devices (mobile, desktop, tablet, etc.) and we are forced to tweak our designs with our own eye. Especially in the era of fold and tablet split screen when they can be even 280px wide.
Library provides almost full functionality we need to make our apps fully-responsive, but I find there is lack of the possibility to pass fully custom breakpoint by it's number.
In my projects I had to create very custom sliders with many @media-query
adjustments.
Even to the point where one class had about 10 media queries.
I wish there was such possibility, because every project has it's own edge cases.
Creating very custom theme
configuration object is one option, but it can lead to some other issues - for example naming.
I've seen projects with breakpoints called like small
, smaller
, smallest
, small laptop
because the solution they were using didn't provide a possibility to use custom breakpoint.
To my way of thinking - those weird names are way worse than using number number directly.
So I created PR which adds the possibility to provide number directly to the core methods of the library. I've tested it both with hooks and CSS-in-JS and it works π
Note: it doesn't work with only
method, because it wouldn't make any sense. It shows proper error instead :)
Here is a little demo of my implementation:
https://github.com/WiktorG/styled-custom-breakpoints-demo
import styled from "styled-components"
import { up, down, only, between } from 'styled-breakpoints'
import { useBreakpoint } from "styled-breakpoints/react-styled"
const Wrapper = styled.div`
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
`
const Heading = styled.h1`
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 12px;
${up(1011)} {
font-size: 35px;
}
`
export const useBreakpoints = () => {
const isXs = useBreakpoint(down("xs"));
const isSm = useBreakpoint(only("sm"));
const isMd = useBreakpoint(only("md"));
const isLg = useBreakpoint(only("lg"));
const isXl = useBreakpoint(up("xl"));
const isCustom = useBreakpoint(up(1200));
const isCustomBetween = useBreakpoint(between(1000, 1200));
return {
isXs,
isSm,
isMd,
isLg,
isXl,
isCustom,
isCustomBetween
};
};
function Test() {
const { isXs, isSm, isMd, isLg, isXl, isCustom, isCustomBetween } = useBreakpoints();
return (
<ul>
<li>isXs: {`${isXs}`}</li>
<li>isSm: {`${isSm}`}</li>
<li>isMd: {`${isMd}`}</li>
<li>isLg: {`${isLg}`}</li>
<li>isXl: {`${isXl}`}</li>
<li>isCustom up 1200: {`${isCustom}`}</li>
<li>isBetween 1000 & 1200: {`${isCustomBetween}`}</li>
</ul>
)
}
function App() {
return (
<Wrapper>
<Heading>Hello from custom styled breakpoints</Heading>
<Test />
</Wrapper>
);
}
export default App;
Here is my pull request #1074 - the Readme is yet to be updated.
Using version 6.6.3, I'm trying to use styled-breakpoints as specified in the docs:
export const StyledDrawer = styled(Drawer)`
&& {
${down('tablet')} {
color: lightcoral;
}
}
`;
And I'm getting this error :
Uncaught Error: [styled-breakpoints]: 'mobile' is invalid breakpoint name. Use 'keys, values, up, down, between, only'
I tried with different breakpoints (mobile, desktop), and I am still getting this error.
I've encountered an issue where styled-breakpoints is incompatible with latest Material UI and styled-components because MUI merges its theme into the styled theme provider, including helper functions into the breakpoints
key. A description of how MUI suggests working with themes for both is here: mui/material-ui#28979 (comment)
When setting up providers this way and using styled-breakpoints in a component, such as:
import { up } from 'styled-components'
const Foo = styled.div`
${up('sm')} {
width: 100%;
}
`
The following error occurs:
Uncaught Error: [styled-breakpoints]: Check your theme. `keys: xs,sm,md,lg,xl, values: [object Object], up: function up(key) {
var value = typeof values[key] === 'number' ? values[key] : key;
return "@media (min-width:".concat(value).concat(unit, ")");
}, down: function down(key) {
var value = typeof values[key] === 'number' ? values[key] : key;
return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
}, between: function between(start, end) {
var endIndex = keys.indexOf(end);
return "@media (min-width:".concat(typeof values[start] === 'number' ? values[start] : start).concat(unit, ") and ") + "(max-width:".concat((endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100).concat(unit, ")");
}, only: function only(key) {
if (keys.indexOf(key) + 1 < keys.length) {
return between(key, keys[keys.indexOf(key) + 1]);
}
return up(key);
}, not: function not(key) {
// handle first and last key separately, for better readability
var keyIndex = keys.indexOf(key);
if (keyIndex === 0) {
return up(keys[1]);
}
if (keyIndex === keys.length - 1) {
return down(keys[keyIndex]);
}
return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
}, unit: px,` are invalid breakpoints. Use only pixels.
Note the last line about invalid breakpoints. The large output here is MUI's up
helper, which styled-breakpoints accurately determines is not a valid breakpoint declaration.
This could be mitigated if the checkAllValuesHasPixels
were changed to a getValidBreakpoints
that filters out invalid ones determined by the check for px
and proceeds with the ones that are valid instead of creating an invariant and failing. Related code: https://github.com/mg901/styled-breakpoints/blob/master/styled-breakpoints/styled-breakpoints.js#L49
Another option is to expose createStyledBreakpoints
from the export on the public package so that pathToMediaQueries
could be overridden, but the friendly path is to be resilient when faced with a mix of valid and invalid options.
Hello,
Would it be possible to bump the react peer dep?
Thank you!
Hi,
When will React 17.x be added as peerDeependency?
When you have React 17.x and npm version 7 installed you need to install this pacakge with --force or --legacy-peer-deps flags, otherwise you get:
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR! peer react@">=16.8.0" from @emotion/[email protected]
npm ERR! node_modules/@emotion/react
npm ERR! peerOptional @emotion/react@"^11.0.0" from [email protected]
npm ERR! node_modules/styled-breakpoints
npm ERR! styled-breakpoints@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@"^16.8.0" from [email protected]
npm ERR! node_modules/styled-breakpoints
npm ERR! styled-breakpoints@"*" from the root project
Thanks!
I'm trying to reproduce
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px)
it should work with ${down('sm')} due to expecting convert into down('sm') => '@media (max-width: 576px) { ... }'
And taking a look into your docs, I couldn't find a solution without breaking the rules....
Break-points
// {
// xs: '0px',
// sm: '576px',
// md: '768px',
// lg: '992px',
// xl: '1200px',
// }
Docs
/**
4.0.1
to 4.0.2
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
commitizen is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 3 commits.
129a779
fix(deps): update dependency lodash to v4.17.15 (#652)
5f71dfe
Adding tasks to publish test results to AzurePipelines (#590)
f5751b2
chore: update mocha, other dev deps (#653)
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Hey, I see there's a toEm method that's assuming any value passed in is going to be pixels. There should be a check to see if the values are already ems.
Conceptually, I like to think of a breakpoint as a threshold value. If the breakpoint value is 500px
I would expect an above
query to be >500px and a below
query to be <500px.
In the example:
{
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
}
up('md') => '@media (min-width: 768px) { ... }'
only('md') => '@media (min-width: 768px) and (max-width: 991.98px) { ... }'
down('md') => '@media (max-width: 991.98px) { ... }'
between('md', 'lg') => '@media (min-width: 768px) and (max-width: 1199.98px) { ... }'
up('md')
makes complete sense as being greater than or equal to md.
only('md')
also makes total sense as selecting [md, lg)
.
down('md')
I don't agree with, as it seems like it should be <md. Instead, it is <lg.
between('md', 'lg')
follows this same logic as down
, querying from [md, xl)
, when I would prefer[md, lg)
As this is currently written, there is no way to select down()
from the lowest breakpoint, which is often the most useful breakpoint, as things are most likely to break the layout at this extreme value. down('xs')
is currently interpreted as <Sm (not <Xs).
The names for this new query could be downFrom
or upTo
.
downFrom('md') => '@media (max-width: 767.8px) { ... }'
upTo('md') => '@media (max-width: 767.8px) { ... }'
Alternatively, down('md', orientation, true)
could use a third argument to specify the max-width of md
rather than the next higher breakpoint (lg). Renaming calcMinWidth
-> getWidthAtBreakpoint
and calcMaxWidth
-> getWidthAtNextBreakpoint
also helps to clarify the functionality.
Here's a feature proposal of how the latter could look with 3 additional unit tests: https://github.com/iRyanBell/styled-breakpoints/tree/feat/is-below-break-proposal
3.9.0
to 3.9.1
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-flowtype is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 1 commits.
712d840
fix: requireReadOnlyReactProps (#406)
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Hi, you have wrong type declaration for createTheme method. If you provide breakpoints
into the method, but return them without spreading, the object will be:
{'styled-components': { breakpoints: {...some obj with breakpoints}}}
but type definition suggests:
{'styled-components': {...some obj with breakpoints}}
I's like to fix this, but tell me what is wrong? Type or the function? Changing the method would be a breaking change, so I'll start with changing type definition.
22.13.2
to 22.13.3
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 1 commits.
7f1867b
fix: import TS utils from correct package
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Then why is it in default Breakpoints if I can't write a regular piece of code
[up('xs')(props)]: { flexBasis: "calc(100% / 1)", },
[up('sm')(props)]: { flexBasis: "calc(100% / 2)", },
[up('md')(props)]: { flexBasis: "calc(100% / 3)", },
I don't want to write down('sm')
The below function now uses the next breakpoint instead of the current.
Is this intended? Because when writing below('tablet') I would thing to receive a media query that specifies < 768px. Now it uses the next breakpoint and gives you < 992px (desktop)
See pull request: #6
Hi guys !
In a NextJs project, I use your library for handling easily breakpoints (thanks by the way).
Unfortunately, this code below seems does not work since this following error has triggered :
Error: [styled-breakpoints]: 'xs: 0px' cannot be assigned as minimum breakpoint.
FYI, I use default breakpoint values.
export const Container = styled.div<WrapperProps>`
${space}
margin-left: auto;
margin-right: auto;
${between('xs', 'md')} {
width: 90%;
}
${up('md')} {
width: 70%;
}
`;
I remember a few months ago, this kind of code worked.
I use next 12.0.7 (which uses SWC instead of Babel now), styled-components 5.3.3 and styled-breakpoints 10.2.1.
Thanks for your help :-).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.