suggestion on type errors

[veeramarni]

Type: Infrastructure

After upgrading to 10+ we noticing few type errors.

Packages	Version
fela	10.2.4

---

Description

Following type errors we see.

// styles

    otherSelectors: {
        // .a .sub-class
        '& .sub-class': {
            color: 'blue',
            // they can contain nested objects e.g.
            // .a .sub-class:hover
            ':hover': {
                color: 'black',
            },
        },
    },

// type errors

Type '({ fontScale, theme }: OwnProps & FelaWithThemeProps<Theme>) => { container: { display: string; flexDirection: "column"; alignItems: string; }; firstSection: ({ theme }: OwnProps & FelaWithThemeProps<Theme>) => { ...; }; secondSection: { ...; }; thirdSection: { ...; }; otherSelectors: { ...; }; }' is not assignable to type 
'TMultiRule<OwnProps & FelaWithThemeProps<Theme>, Styles>'.
  Type '({ fontScale, theme }: OwnProps & FelaWithThemeProps<Theme>) => { container: { display: string; flexDirection: "column"; alignItems: string; }; firstSection: ({ theme }: OwnProps & FelaWithThemeProps<Theme>) => { ...; }; secondSection: { ...; }; thirdSection: { ...; }; otherSelectors: { ...; }; }' is not assignable to type 'TMultiRuleFunction<OwnProps & FelaWithThemeProps<Theme>, Styles>'.
    Type '{ container: { display: string; flexDirection: "column"; alignItems: string; }; firstSection: ({ theme }: OwnProps & FelaWithThemeProps<Theme>) => { backgroundColor: string; fontSize: string; }; secondSection: { ...; }; thirdSection: { ...; }; otherSelectors: { ...; }; }' is not assignable to type 
'TMultiRuleObject<OwnProps & FelaWithThemeProps<Theme>, Styles>'.
      Types of property 'otherSelectors' are incompatible.
        Type '{ '& .sub-class': { color: string; ':hover': { color: string; }; }; }' is not assignable to type 'IStyle | TRule<OwnProps & FelaWithThemeProps<Theme>>'.
          Type '{ '& .sub-class': { color: string; ':hover': { color: string; }; }; }' is not assignable to type 'TRule<OwnProps & FelaWithThemeProps<Theme>>'.
            Type '{ '& .sub-class': { color: string; ':hover': { color: string; }; }; }' provides no match for the signature '(props: OwnProps & FelaWithThemeProps<Theme>, renderer: IRenderer): IStyle'.

[veeramarni]

Currently, this is one of the solutions suggested in csstypes. Wondering if there is any better way to generate .d.ts from styles file.

    otherSelectors: {
        // .a .sub-class
        ['& .sub-class' as any]: {
            color: 'blue',
            // they can contain nested objects e.g.
            // .a .sub-class:hover
            ':hover': {
                color: 'black',
            },
        },
    },

[veeramarni]

I have tried something like this, still no luck.

@sample-stack/counter-module-browser:       TS2322: Type '() => { container: { display: string; flexDirection: string; alignItems: string; }; firstSection: ({ theme }: { theme: any; }) => { backgroundColor: any; fontSize: string; }; secondSection: ({ theme, fontScale }: { theme: any; fontScale: any; }) => { ...; }; thirdSection: ({ theme, fontScale }: { ...; }) => { ...; }...' is not assignable to type 'TMultiRule<OwnProps & FelaWithThemeProps<Theme>, { container: { display: string; flexDirection: string; alignItems: string; }; firstSection: ({ theme }: { theme: any; }) => { backgroundColor: any; fontSize: string; }; secondSection: ({ theme, fontScale }: { ...; }) => { ...; }; thirdSection: ({ theme, fontScale }: {...'.
@sample-stack/counter-module-browser:   Type '() => { container: { display: string; flexDirection: string; alignItems: string; }; firstSection: ({ theme }: { theme: any; }) => { backgroundColor: any; fontSize: string; }; secondSection: ({ theme, fontScale }: { theme: any; fontScale: any; }) => { ...; }; thirdSection: ({ theme, fontScale }: { ...; }) => { ...; }...' is not assignable to type 'TMultiRuleFunction<OwnProps & FelaWithThemeProps<Theme>, { container: { display: string; flexDirection: string; alignItems: string; }; firstSection: ({ theme }: { theme: any; }) => { backgroundColor: any; fontSize: string; }; secondSection: ({ theme, fontScale }: { ...; }) => { ...; }; thirdSection: ({ theme, fontSc...'.
@sample-stack/counter-module-browser:     Type '{ container: { display: string; flexDirection: string; alignItems: string; }; firstSection: ({ theme }: { theme: any; }) => { backgroundColor: any; fontSize: string; }; secondSection: ({ theme, fontScale }: { theme: any; fontScale: any; }) => { ...; }; thirdSection: ({ theme, fontScale }: { ...; }) => { ...; }; othe...' is not assignable to type 'TMultiRuleObject<OwnProps & FelaWithThemeProps<Theme>, { container: { display: string; flexDirection: string; alignItems: string; }; firstSection: ({ theme }: { theme: any; }) => { backgroundColor: any; fontSize: string; }; secondSection: ({ theme, fontScale }: { ...; }) => { ...; }; thirdSection: ({ theme, fontScal...'.
@sample-stack/counter-module-browser:       Types of property 'container' are incompatible.
@sample-stack/counter-module-browser:         Type '{ display: string; flexDirection: string; alignItems: string; }' is not assignable to type 'IStyle | TRule<OwnProps & FelaWithThemeProps<Theme>>'.
@sample-stack/counter-module-browser:           Type '{ display: string; flexDirection: string; alignItems: string; }' is not assignable to type 'IStyle'.
@sample-stack/counter-module-browser:             Types of property 'flexDirection' are incompatible.
@sample-stack/counter-module-browser:               Type 'string' is not assignable to type 'FlexDirectionProperty'.

[robinweser]

@veeramarni Feel free to send a PR improving the TypeScript types. I'm not a TypeScript user nor expert so I can't really help out here at all.

[sgrishchenko]

I think this problem is alreay soved, see fela-plugin-typescript, there is explanation there how to use this plugin to achive typechecking in nested css rules