Question: styled-system v5 compatiblity and break-points with units

[jameslnewell]

Question: styled-system v5 compatiblity and break-points with units

[mblarsen]

If anyone else is using this lib with styled-system v5 here is a "patch" I use to make the lib compatible:

import breakpoint from 'styled-components-breakpoint'

const stripUnit = val =>
  Number.isInteger(val) ? val : Number(`${val}`.replace(/\D/g, ''))

const breakpointUnitless = name => (...templateProps) => {
  const breakpoint_ = breakpoint(name)(...templateProps)
  return props => {
    const props_ = {
      theme: { ...props.theme },
    }
    props_.theme.breakpoints = Object.entries(props_.theme.breakpoints).reduce(
      (bps, [name, val]) => {
        bps[name] = stripUnit(val)
        return bps
      },
      {},
    )
    return breakpoint_(props_)
  }
}

export default breakpointUnitless

Then import this in place of breakpoint, e.g.:

import breakpoint from './breakpoint-patch.js'

const Header = styled(Box)`
  color: green;
  ${breakpoint('md')`
    color: red;
  `}
`

[danhuang1202]

To support breakpoint between syntax (ex: breakpoint('sm, ''md')), can update arguments link bellow:

const breakpointUnitless = (gte, lt) => (...templateProps) => {
  const breakpoint_ = breakpoint(gte, lt)(...templateProps)
  return props => {
      ...
  }
}