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

[mblarsen]

It seems that styled-system is moving to use break-points with units (again?) https://styled-system.com/guides/migrating#changes

The theme.breakpoints object must specify CSS units. Numbers are no longer converted to pixel values.

This I guess will break https://github.com/jameslnewell/styled-components-breakpoint/blob/master/src/core.js#L49

Is it a goal of this project to be compatible with styled-system as well?

In any case. Can I 'globally' change the toCSS mapping function to avoid the situation highlighted in L49 above?

[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 => {
      ...
  }
}