Typescript issues with Sprinkles?

[m0ngr31]

I'll try and layout the issue as best as I can. We recently upgraded to Typescript (from 4.1) and seem to be having build errors now based on how we have this setup (which is apparently wrong, but seemed to work fine on 4.1).

globalTheme.css.ts:

...
export const vars = createGlobalTheme(':root', {
  scale: {
    none: '0',
    unset: 'unset',
    xxxsmall,
    xxsmall,
    xsmall,
    small,
    medium,
    large,
    xlarge,
    xxlarge,
    xxxlarge,
  },
};
...

box.css.ts:

...
const responsiveAtomicStyles = defineProperties({
  conditions: {
    wide: {},
    desktop: {
      '@media': `screen and (max-width: ${breakpoints.desktop}px)`,
    },
    tablet: {
      '@media': `screen and (max-width: ${breakpoints.tablet}px)`,
    },
    mobile: {
      '@media': `screen and (max-width: ${breakpoints.mobile}px)`,
    },
  },
  defaultCondition: 'wide',
  responsiveArray: ['mobile', 'tablet', 'desktop', 'wide'],
  properties: {
    paddingTop: vars.scale,
    paddingRight: vars.scale,
    paddingBottom: vars.scale,
    paddingLeft: vars.scale,
  },
  shorthands: {
    paddingX: ['paddingLeft', 'paddingRight'],
    paddingY: ['paddingTop', 'paddingBottom'],
    padding: ['paddingBottom', 'paddingTop', 'paddingLeft', 'paddingRight'],
  },
});
export const sprinkles = createSprinkles(responsiveAtomicStyles);

box.tsx

export interface IAtomicPaddingTop {
  paddingTop?: keyof typeof vars.scale;
}

export interface IAtomicPaddingRight {
  paddingRight?: keyof typeof vars.scale;
}

export interface IAtomicPaddingBottom {
  paddingBottom?: keyof typeof vars.scale;
}

export interface IAtomicPaddingLeft {
  paddingLeft?: keyof typeof vars.scale;
}

export interface IAtomicPaddingY
  extends IAtomicPaddingTop,
    IAtomicPaddingBottom {
  paddingY?: keyof typeof vars.scale;
}

export interface IAtomicPaddingX
  extends IAtomicPaddingLeft,
    IAtomicPaddingRight {
  paddingX?: keyof typeof vars.scale;
}

export interface IAtomicPadding extends IAtomicPaddingY, IAtomicPaddingX {
  padding?: keyof typeof vars.scale;
}

export interface IBoxProps extends IAtomicPadding {
  ...
}

export const Box = ({prop1, prop2, ...atomicProps}: IBoxProps) => {
  const atomicStyles = styles.sprinkles((atomicProps));
  ...
}

anyOtherComponent.tsx

export const Example = () => <>
  <Box paddingY="xlarge">Child</Box> // This works
  <Box paddingY={{
    desktop: 'xlarge',
    mobile: 'medium',
    tablet: 'large',
    wide: 'xlarge',
  }}>Child</Box> // This breaks
</>;

The bottom example gives me an error of:

Type '{ desktop: string; mobile: string; tablet: string; wide: string; }' is not assignable to type '"unset" | "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | undefined'.

Can someone help me understand what broke after TS 4.1? I tried 4.2, 4.3, and 4.4 with the same results. I'm not sure what I need to change.

[m0ngr31]

I was able to get this working with some workarounds:

I added an interface:

export interface IGenericResponsive {
  desktop?: TScale;
  wide?: TScale;
  mobile?: TScale;
  tablet?: TScale;
}

Then made all the different interface properies keyof typeof vars.scale | IGenericResponsive, and finally just used createSprinkles<any>(...).

I don't love the solution but it works for now 🤷‍♂️