V6: What is the proper type for Interpolations / RuleSets?

[charltoons]

What is the proper way to add types for the return value of css? Does V6 export a canonical type that should be used? We had previously been using FlattenSimpleInterpolation, but after upgrading to V6-beta, we are getting the following Typescript error:

error TS2614: Module '"styled-components"' has no exported member 'FlattenSimpleInterpolation'.

We're wondering if there is a preferred way to handle this type. Consider the following code using Typescript and styled-components V5:

// util.ts
import type { FlattenSimpleInterpolation } from `styled-components;

export const withReducedMotion = (styles: FlattenSimpleInterpolation) => `
  @media (prefers-reduced-motion) {
    ${ styles }
  }
`

// Component.ts
const dialogAnimation = css`
  //...
  ${withReducedMotion(css`
    animation-duration: 0;
  `)}
`

For now we have been using ReturnType<typeof css> to replace FlattenSimpleInterpolation. Is this the best way?

// util.ts
import type { css } from `styled-components;

export const withReducedMotion = (styles: ReturnType<typeof css>) => `
  @media (prefers-reduced-motion) {
    ${ styles }
  }
`

[ahutchings]

styled-components v6 RC (6.0.0-rc.0) exports a RuleSet type that can be used instead of ReturnType<typeof css>.

[quantizor]

In v6, use the RuleSet type exported from styled-components:

import type { RuleSet } from 'styled-components';
import { css } from 'styled-components';

const myStyles: RuleSet = css`
  color: red;
`;

FlattenSimpleInterpolation was removed in v6. RuleSet is the canonical replacement.