Does not accept custom breakpoints as ems

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

[DanWebb]

@mg901 Could the lib just not be concerned about the units of measurement being used by removing the unit conversion like: https://github.com/DanWebb/styled-breakpoints/commit/2cc404ae01ce0060ac0e5d36266905439c0073a2 this will be needed because once you add px someone will come along asking for rem then pt…

Is the reason you currently need the conversion due to how getting the next breakpoint value works?

[mg901]

@lauriskuznecovs, first of all, I want to thank you for using styled-breakpoints. I will fix this problem within 24 hours. If you can fix this faster, send me a PR decision.