`xs: 0px` cannot be assigned as minimum breakpoint

[fbnvdblck]

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 :-).

[mg901]

Hi, @fvandenbulck !) Just replace your code with this

export const Container = styled.div<WrapperProps>`
  ${space}

  margin-left: auto;
  margin-right: auto;
  width: 90%;

  ${up('md')} {
    width: 70%;
  }
`;

[mg901]

@fvandenbulck If you have any questions, ask. I will gladly help you.

[mg901]

@fvandenbulck if you have any questions, ask. I will gladly help you.

[fbnvdblck]

Thanks @mg901, it works like that.

What was the issue exactly here ? xscan not be used in between function ?

[mg901]

@fvandenbulck when you create a layout from 0px, no breakpoints are needed. There is a need for them after (from sm onwards).

[fbnvdblck]

@mg901 You're right. So, it's why sm is explicitly forbidden in this case. Thanks for your answer ;-).