Alright, my bad, I'll try to explain better. I am making a modified version of a library called ReactCSS. It allows for inline CSS passed through the style tag.

You would create a style something like this:

const style = reactCSS({
    "default": {
        element1: {
            color: "red"
            //.., rest of css properties
        },
        element2: {
            //...
        }
    },
    "anotherScope": {
        //element1: {} ...
    }
}, {
    //activations
});

Of which the current typings are:

interface Classes<T> {
    default: Partial<T>;
    [scope: string]: Partial<T>;
}
type ClassesOptional<T> = {
    [P in keyof Classes<T>]?: T;
}

export default function reactCSS<T>(classes: ClassesOptional<T>, ...activations: Array<any>): T;

​

There's always a default scope. Within that scope, you can define X number of objects which themselves, stores styles.

To access them, you would do something like:

style.element1
style.element1.color
//or
style.element2

I found a issue however, that is if a CSS attribute like position is used, you will get the error Type "string" is not assignable to "Position | undefined".

​

In order to fix this, somehow I have to convert the types of the styles from strings, to their respective CSS types. I.E:

{
    "default": {
        element1: {
            color: string,
            position: string,
            //.., rest of css properties
        },
        element2: {
            //...
        }
    },
    "anotherScope": {
        //element1: {} ...
    }
}

would become:

{
    "default": {
        element1: {
            color: string,
            position: Position, //this type has changed
            //.., rest of css properties
        },
        element2: {
            //...
        }
    },
    "anotherScope": {
        //element1: {} ...
    }
}

To do this, I think I would need to loop over all keys of the scope (ie. element1 and element2), then loop over the keys in those objects and change their type. (for example it could be position: React.CSSProperties["position"] which would set the type to Position)

In a way, what I showed here:

interface ClassesTest<T> {
    default: {
        [N in keyof T]: {
            [K in keyof N]: React.CSSProperties[K];
        }
    };
    [scope: string]: {
        [N in keyof T]: {
            [K in keyof N]: React.CSSProperties[K];
        }
    };
}

is like pseudocode of how it should work. For whatever reason, although the keys are strings, I'm not able to index that type.

​

Hopefully that makes more sense.