styled-gen v2 migration guide
This guide provides a comprehensive overview of the migration process from v1.x to v2.
breaking changes
- Including a
breakpointsobject in your theme is now required. - The
mq.[breakpoint]method has been removed. - The
transitionshelper function is no longer accessible.- The
easeobject is no longer accessible. - The
durationsobject is no longer accessible.
- The
- The
importFontshelper function is no longer available.
1. Breakpoints
Now it is required to include a breakpoints object in your theme. For guidance on how to add this object, please refer to the breakpoints object documentation.
2. mq[breakpoint] method
In v2 the mq.[breakpoint] method has been replaced with mq.bp. If you currently use the deprecated mq.[breakpoint] method in your project, it is highly recommended to create a middleware object to handle your breakpoints and update your imports accordingly.
import { mq as baseMq } from 'styled-gen';
import { breakpoints } from '../breakpoints';
export const mq = Object.keys(breakpoints).reduce(
(result, bp) => ({ ...result, [bp]: (style: any) => baseMq.bp(bp, style) }),
{}
) as { [bp in keyof typeof breakpoints]: Function };
If you are utilizing named breakpoints instead of the shorthand format previously supported by earlier versions, here it is a more comprehensive example for your mq methods object:
import { mq as baseMq } from 'styled-gen';
import { breakpoints } from '../breakpoints';
const namedBreakpoints = {
mobile: 'xs',
tablet: 'sm',
tabletLandscape: 'md',
desktop: 'lg',
}
export const mq = Object.entries(namedBreakpoints).reduce(
(result, [bpName, bp]) => ({ ...result, [bpName]: (style: any) => baseMq.bp(bp, style) }),
{}
) as { [bp in keyof typeof namedBreakpoints]: Function };
3. transitions and constant objects
The transitions helper function is no longer available. If you are currently using it in your project, it is highly recommended to create a custom function as a replacement. Additionally, you should add the ease and durations objects to your theme. Make sure to update your imports accordingly.
export const durations = {
animation: 500,
hover: 250,
long: 750,
short: 350
};
export const ease = {
inSine: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
outSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
inOutSine: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
inQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
outQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
inOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
inCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
outCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
inOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
inQuart: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
outQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
inOutQuart: ' cubic-bezier(0.77, 0, 0.175, 1)',
inQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
outQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
inOutQuint: 'cubic-bezier(0.86, 0, 0.07, 1)',
inExpo: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
outExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',
inOutExpo: 'cubic-bezier(1, 0, 0, 1)',
inCirc: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
outCirc: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
inOutCirc: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
inBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
outBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
inOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
};
import { durations } from './durations';
import { ease } from './ease';
export const theme = {
// ...your theme
durations,
ease
};
import { css } from 'styled-components';
import { durations } from '../variables/durations';
import { ease as eases } from '../variables/ease';
const defaultDuration = 500;
type Duration = keyof typeof durations;
type Ease = keyof typeof eases;
export const transitions =
(cssProps: string | string[], duration: Duration | number, ease: Ease) => (props: any) => {
const durationVal =
props?.theme?.durations?.[duration] || durations[duration as Duration] || duration || defaultDuration;
const transitionDuration = typeof durationVal === 'number' ? `${durationVal}ms` : durationVal;
const transitionTimingFunction = props?.theme?.ease?.[ease] || eases[ease as Ease] || ease;
const transitionProperty = Array.isArray(cssProps) ? cssProps.join(', ') : cssProps || 'all';
return css`
transition-duration: ${transitionDuration};
transition-property: ${transitionProperty};
transition-timing-function: ${transitionTimingFunction};
`;
};
4. importFonts
The importFonts helper function is no longer available. Given the variety of optimized font handling approaches available today, it is recommended to handle font importing in a way that aligns with your specific requirements and preferences. You have the flexibility to choose the font importing method that best suits your needs.