-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Question: styled-system v5 compatiblity and break-points with units #21
Comments
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;
`}
` |
To support breakpoint between syntax (ex: const breakpointUnitless = (gte, lt) => (...templateProps) => {
const breakpoint_ = breakpoint(gte, lt)(...templateProps)
return props => {
...
}
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It seems that styled-system is moving to use break-points with units (again?) https://styled-system.com/guides/migrating#changes
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?The text was updated successfully, but these errors were encountered: