Argument of type '{ position: string; }' is not assignable to parameter of type 'CSSInterpolation'

[jsakas]

I am not sure if this is specific to tss-react or another emotion issue, but I am finding this happens with the typings

import makeStyles from '@ui/utils/makeStyles';

export default makeStyles()((theme, _params, css) => {
  const s2 = {
    position: 'absolute',
  };

  return {
    s1: {
      [`&:hover .${css(s2)}`]: {
        color: 'red'
      }
    },
  };
});

TS error:

No overload matches this call.
  Overload 1 of 2, '(template: TemplateStringsArray, ...args: CSSInterpolation[]): string', gave the following error.
    Argument of type '{ position: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
      Type '{ position: string; }' is missing the following properties from type 'TemplateStringsArray': raw, length, concat, join, and 17 more.
  Overload 2 of 2, '(...args: CSSInterpolation[]): string', gave the following error.
    Argument of type '{ position: string; }' is not assignable to parameter of type 'CSSInterpolation'.
      Type '{ position: string; }' is not assignable to type 'CSSObject'.
        Types of property 'position' are incompatible.
          Type 'string' is not assignable to type 'Position | Position[]'.ts(2769)

I can work around by casting to CSSObject but its not great.

[garronej]

Ah yes, here you have to add 'as const' to s2 declaration for it to work.
I should document it.

import makeStyles from '@ui/utils/makeStyles';

export default makeStyles()((theme, _params, css) => {
  const s2 = {
    position: 'absolute',
  } as const;

  return {
    s1: {
      [`&:hover .${css(s2)}`]: {
        color: 'red'
      }
    },
    s2
  };
});